adding flood areas polygon to the map feed screen

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}
+        />
+    );
+}
+
+

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);
     };
 
 

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);
 
     }
 

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>