Fixing map markers data structure bug

src/app/components/MapMarkerList.js

@@ -1,3 +1,5 @@
+import {useState} from "react";
+
 function isRequestedValue(item, renderOptions) {
   return (
     (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
@@ -13,10 +15,13 @@ function isRequestedValue(item, renderOptions) {
 function MapMarkerList({ markers, renderOptions }) {
   if (!markers) return null;
 
+  const [selectedMarkers, _] = useState(new Map());
+  markers.markers.forEach((item,key) => {
+    if (isRequestedValue(item, renderOptions))
+      selectedMarkers.set(key, item);
+  })
   
-  return [...markers.markers].filter(([_, item]) => {
-    return isRequestedValue(item, renderOptions);
-  });
+  return selectedMarkers
 }
 
 export { MapMarkerList };

src/app/components/MapModal.js

@@ -231,7 +231,7 @@ function isPluviometer(name) {
 
 function MapModal({ showModal, setShowModal, markers }) {
   var currentMarker = undefined;
-  //console.log(markers);
+
   if (markers && showModal != null && markers.has(showModal)) {
     currentMarker = markers.get(showModal);
   }

src/app/components/map/OpenStreetMap.js

@@ -35,7 +35,7 @@ function bindEventsToListeners(
 }
 
 function notEmpy(lista) {
-  return lista && lista.length > 0;
+  return lista && [...lista].length > 0;
 }
 
 export default function OpenStreetMap({
@@ -71,13 +71,11 @@ export default function OpenStreetMap({
 
       notEmpy(markersList) &&
         markersList.forEach((val, k) => {
-          //  console.log(val);
-          if (val[1].name == "susceptibilityAreas") {
-          //  console.log("floodzones")
-            insertPolygon(mapRef, val[1].ID, val[1].coordinate);
+          if (val.name == "susceptibilityAreas") {
+            insertPolygon(mapRef, val.ID, val.coordinate);
           }
           else {
-            insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
+            insertMarker(mapRef, val.ID, val.coordinate, val.image);
           }
         });
     }