adding another flood polygon for testing

src/app/components/MapPolygons.js

@@ -1,15 +1,67 @@
-import React from "react";
+import React, { useContext } from "react";
+import { View } from "react-native";
 import { Polygon } from "react-native-maps";
+import { CurrentLocationContext } from "../context/CurrentLocationContext";
 
-export default function MapPolygons({ coordinates }) {
+export default function MapPolygons() {
+    const context = useContext(CurrentLocationContext);
+    const location = context.currentCoordinates;
+
+
+    //Coordenadas dos poligonos das áreas de inundação (substituir por valores da API)
+    const coordinates1 = [
+        {
+            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
+        }
+    ];
+    const coordinates2 = [
+        {
+            latitude: location["latitude"] + 0.0010,
+            longitude: location["longitude"] - 0.0007
+        },
+        {
+            latitude: (location.latitude) + 0.0006,
+            longitude: (location.longitude) - 0.0006
+        },
+        {
+            latitude: (location.latitude) + 0.17,
+            longitude: (location.longitude) - 0.00225
+        },
+        {
+            latitude: (location.latitude) + 0.001,
+            longitude: (location.longitude) - 0.00212
+        }
+    ]
     return (
+        <View>
+            <Polygon
+                coordinates={coordinates1}
+                // hole={hole}
+                strokeColor="rgba(25, 118, 210,0.2)"
+                fillColor="rgba(25, 118, 210,0.5)"
+                strokeWidth={5}
+            />
             <Polygon
-            coordinates={coordinates}
+                coordinates={coordinates2}
                 // hole={hole}
                 strokeColor="rgba(25, 118, 210,0.2)"
                 fillColor="rgba(25, 118, 210,0.5)"
                 strokeWidth={5}
             />
+        </View>
     );
 }
 

src/app/screens/MapFeedScreen.js

@@ -16,6 +16,8 @@ function MapFeedScreen(props) {
   const datas = useContext(MapDataContext);
   const location = context.currentCoordinates;
   const focusChanged = attachFocusToQuery();
+  console.log("-----------latitude: "+ location.latitude);
+  console.log("-----------longitude: "+ location.longitude);
 
   const default_location = {
     latitude: -12.901799,
@@ -30,27 +32,6 @@ 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
@@ -71,8 +52,7 @@ function MapFeedScreen(props) {
           renderRiver={datas.river} />
 
         {datas.floodAreas &&(
-          <MapPolygons
-            coordinates={polyCoordinates} />
+          <MapPolygons/>
         )}
       </MapView>
       <FloatButton />