From 833fe5c35fc79a8f2333d555dff3ee6a7964432d Mon Sep 17 00:00:00 2001
From: analuizaff <nanaluff@hotmail.com>
Date: Thu, 15 Apr 2021 19:15:18 -0300
Subject: [PATCH] adding flood areas polygon to the map feed screen

---
 src/app/components/MapPolygons.js         | 21 ++++++++++++
 src/app/context/CurrentLocationContext.js |  4 ---
 src/app/context/MapDataContext.js         |  2 +-
 src/app/screens/MapFeedScreen.js          | 39 +++++++++++++++++++----
 4 files changed, 55 insertions(+), 11 deletions(-)
 create mode 100644 src/app/components/MapPolygons.js

diff --git a/src/app/components/MapPolygons.js b/src/app/components/MapPolygons.js
new file mode 100644
index 0000000..7608168
--- /dev/null
+++ b/src/app/components/MapPolygons.js
@@ -0,0 +1,21 @@
+import React, { useState } from "react";
+import { View, StyleSheet, Image } from "react-native";
+import MapView, { Polygon } from "react-native-maps";
+import colors from "../config/colors";
+import { dimensions } from "../config/dimensions";
+import MapModal from "./MapModal";
+const markerSize = 30;
+
+export default function MapPolygons({ coordinates }) {
+    return (
+        <Polygon
+            coordinates={coordinates}
+            // hole={hole}
+            strokeColor="rgba(25, 118, 210,0.2)"
+            fillColor="rgba(25, 118, 210,0.5)"
+            strokeWidth={5}
+        />
+    );
+}
+
+
diff --git a/src/app/context/CurrentLocationContext.js b/src/app/context/CurrentLocationContext.js
index cc93f11..46079d9 100644
--- a/src/app/context/CurrentLocationContext.js
+++ b/src/app/context/CurrentLocationContext.js
@@ -22,8 +22,6 @@ const CurrentLocationProvider = ({ children }) => {
             });
 
             setCurrentCoordinates({ latitude, longitude });
-            //console.log({ latitude, longitude });
-            // console.log(currentCoordinates);
 
             getAddress({ latitude, longitude });
             
@@ -34,7 +32,6 @@ const CurrentLocationProvider = ({ children }) => {
 
     //get user current location address
     const getAddress = async (coordenadas) => {
-      //  console.log("PEGANDO ENDEREÇO");
         Location.setGoogleApiKey("AIzaSyD_wuuokS3SVczc8qSASrsBq0E5qIpdyMc");
         
 
@@ -48,7 +45,6 @@ const CurrentLocationProvider = ({ children }) => {
         else{//Quando o usuário não da permissão de acesso da localização o geoCode retorna um array vazio
             setCurrentLocation("Erro ao carregar localização", coordenadas.x);
         }        
-        //console.log(currentLocation);
     };
 
 
diff --git a/src/app/context/MapDataContext.js b/src/app/context/MapDataContext.js
index e8b0d87..e70696a 100644
--- a/src/app/context/MapDataContext.js
+++ b/src/app/context/MapDataContext.js
@@ -70,7 +70,7 @@ const MapDataProvider = ({ children }) => {
       setPluviometer(layers.values[2].isSelected);
       //setOfficialPluviometer(layers.values[3].isSelected);
       setRiver(layers.values[4].isSelected);      
-     //setFloodAreas(layers.values[5].isSelected);
+      setFloodAreas(layers.values[5].isSelected);
 
     }
 
diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js
index 4b5838f..a237975 100644
--- a/src/app/screens/MapFeedScreen.js
+++ b/src/app/screens/MapFeedScreen.js
@@ -9,6 +9,7 @@ import { CurrentLocationContext } from "../context/CurrentLocationContext";
 import { MapMarkerList } from "../components/MapMarkerList";
 import FloatButton from "../components/FloatButton";
 import { MapDataContext } from "../context/MapDataContext";
+import MapPolygons from "../components/MapPolygons";
 
 function MapFeedScreen(props) {
   const context = useContext(CurrentLocationContext);
@@ -29,6 +30,27 @@ function MapFeedScreen(props) {
     longitudeDelta: map_scale * (screen_width / screen_height),
   };
 
+  //Coordenadas dos poligonos das áreas de inundação (substituir por valores da API em MapPolygons)
+  const polyCoordinates = [
+    {
+      latitude: location["latitude"] - 0.001,
+      longitude: location["longitude"] + 0.00002
+    },
+    {
+      latitude: (location.latitude) - 0.0002,
+      longitude: (location.longitude) + 0.0001
+    },
+    {
+      latitude: (location.latitude) + 0.001,
+      longitude: (location.longitude) - 0.00002
+    },
+    {
+      latitude: (location.latitude) + 0.0002,
+      longitude: (location.longitude) - 0.001
+    }
+
+  ]
+
   return (
     <View style={styles.container}>
       <MapView
@@ -41,12 +63,17 @@ function MapFeedScreen(props) {
           ...lat_long_delta,
         }}
       >
-        <MapMarkerList 
-        reload={focusChanged} 
-        renderRain={datas.rain}
-        renderFlood={datas.flood}
-        renderPluviometer={datas.pluviometer}
-        renderRiver={datas.river} />
+        <MapMarkerList
+          reload={focusChanged}
+          renderRain={datas.rain}
+          renderFlood={datas.flood}
+          renderPluviometer={datas.pluviometer}
+          renderRiver={datas.river} />
+
+        {datas.floodAreas && (
+          <MapPolygons
+            coordinates={polyCoordinates} />
+        )}
       </MapView>
       <FloatButton />
     </View>