applying the 'menu' logic to polygons

src/app/components/map/LeafLetMap.js

@@ -29,9 +29,9 @@ function setViewCode(lat, long, zoom = 16.5) {
 }
 
 const code_to_function = {
-  "1": clickCallback,
-  "2": markerCallback,
-  "3": moveEndCallback,
+  1: clickCallback,
+  2: markerCallback,
+  3: moveEndCallback,
 };
 
 function clickCallback(payload) {
@@ -65,6 +65,11 @@ function deleteAllMarkers(mapRef) {
     map.removeLayer(value);
   }
   markers = {};
+  
+  for (const [key, value] of Object.entries(polygons)) {
+    map.removeLayer(value);
+  }
+  polygons = {};
   `);
 }
 
@@ -84,20 +89,18 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
   }`);
 }
 async function insertPolygon(mapRef, ID, coordinate) {
-  // console.log("COORDENADAS: "+JSON.stringify(coordinate.coordinate));
-  var coordinates = JSON.stringify(coordinate.coordinate);
- // console.log(coordinates);
+  // console.log("COORDENADAS: "+JSON.stringify(coordinate));
+  //  var coordinates = JSON.stringify(coordinate.coordinate);
+  // console.log(coordinates);
   mapRef.injectJavaScript(`
   if (!(${ID} in polygons)) {
-    polygons[${ID}] = L.polygon(${coordinates}, { ID: ${ID}});     
+    polygons[${ID}] = L.polygon(${JSON.stringify(
+    coordinate
+  )}, { ID: ${ID}});     
     
     polygons[${ID}].addTo(map);
   }
   `);
-  /* mapRef.injectJavaScript(`
-   
-   var polygon = L.polygon(${coordinates}).addTo(map);
-   `);*/
 }
 
 export {

src/app/components/map/OpenStreetMap.js

@@ -46,7 +46,6 @@ export default function OpenStreetMap({
   setDataOptionsToShow,
   isForm = false,
 }) {
-
   const [mapRef, setMapRef] = useState(null);
   const webviewContent = html_content;
   const [markerListener, setMarkerListener] = useState(null);
@@ -65,24 +64,20 @@ export default function OpenStreetMap({
   //     insertMarker(mapRef, val.ID, val.coordinate, val.image);
   //   });
 
-  useEffect(() => {if (markersList && mapRef) {
-    deleteAllMarkers(mapRef);
-  // console.log("MARKERLIST: "+ markersList);
-
-    notEmpy(markersList) &&
-      markersList.forEach((val, k) => {
-     //     console.log(val[1].name);
-        if (val[1].name == "susceptibilityAreas") {
-        //  console.log("floodzones")
-          insertPolygon(mapRef, val[1].ID, val[1].coordinate);
-        }
-        else {
-          insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
-        }
-      });
-  }
-}, [markersList, dataOptionsToShow]);
+  useEffect(() => {
+    if (markersList && mapRef) {
+      deleteAllMarkers(mapRef);
 
+      notEmpy(markersList) &&
+        markersList.forEach((val, k) => {
+          if (val[1].name == "susceptibilityAreas") {
+            insertPolygon(mapRef, val[1].ID, val[1].coordinate);
+          } else {
+            insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
+          }
+        });
+    }
+  }, [markersList, dataOptionsToShow]);
 
   return (
     <View flex={1}>

src/app/hooks/useFiltering.js

@@ -32,14 +32,14 @@ function useFiltering(location) {
       name: "susceptibilityAreas",
       socketUrl: new WebSocket(
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
-          `type=FLOODZONES_FORM&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5`
+          `type=FLOODZONES_OFFICIAL&lat=-9.9740&lon=-67.8098&buffer=5000&limit=3`
       ),
     },
     {
       name: "automaticPluviometer",
       socketUrl: new WebSocket(
         "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
-          `type=PLUVIOMETERS_OFFICIAL&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5`
+          `type=PLUVIOMETERS_OFFICIAL&lat=-9.9740&lon=-67.8098&buffer=5000&limit=5`
       ),
     },
   ];

src/app/hooks/useSocketMarkers.js

@@ -83,8 +83,9 @@ function getImage(name, situation) {
 }
 
 function buildPolygonsObject(response, name) {
+  var r = JSON.parse(response);
   var coordinate = [];
-  var formsanswersgeom = response.formsanswersgeom;
+  var formsanswersgeom = r.formsanswersgeom;
   const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0];
   var n = Object.keys(arrayCoordinates).length;
 
@@ -94,11 +95,11 @@ function buildPolygonsObject(response, name) {
     coordinate.push([lat, lon]);
   }
   var polygonObject = {
-    ID: response.formsanswersid,
+    ID: r.formsanswersid,
     name: name,
     title: "Titulo", //response.fieldsanswerssituation
     address: "Endereço", //response.fieldsanswerseventaddress,
-    coordinate: { coordinate },
+    coordinate: coordinate,
     date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
     description: "comentário", //response.fielsanswercomment,
     logo: custom_assets.pluviometer,
@@ -127,7 +128,7 @@ function buildMarkerObject(response, name) {
     description: "comentário", //response.fielsanswercomment,
     logo: custom_assets.pluviometer,
     pictures: null,
-    image: getImage(name, "situação"), //getMarkerImage(answer.name),
+    image: getImage(name, "situacão"), //getMarkerImage(answer.name),
   };
 }
 
@@ -141,7 +142,7 @@ function verifyResponse(response, name) {
 
       answer.responseData.array_to_json.forEach((r) =>
         r.formcode == "FLOODZONES_OFFICIAL"
-          ? markers.push(buildPolygonsObject(r, name))
+          ? markers.push(buildPolygonsObject(JSON.stringify(r), name))
           : markers.push(buildMarkerObject(JSON.stringify(r), name))
       );
     }

src/app/screens/MapFeedScreen.js

@@ -21,12 +21,12 @@ export default function MapFeedScreen(props) {
   const [dataOptionsToShow, setDataOptionsToShow] = useState({
     oficial: {
       automaticPluviometer: false,
-      susceptibilityAreas: false,
+      susceptibilityAreas: true,
     },
     citzen: {
       floodRisk: false,
       pluviometer: false,
-      rain: true,
+      rain: false,
       floodZones: false,
       riverFlood: false,
     },