Attaching filter rules to markers appearing/disappearing on map

Strategy: Remove all markers before attaching new ones (already selected the ones the user wants to see)

src/app/components/MapMarkerList.js

@@ -1,45 +1,20 @@
-import useMarkers from "../hooks/selectFromDB";
-
-function isRequestedValue(
-  item,
-  renderRain,
-  renderFlood,
-  renderRiver,
-  renderPluviometer,
-  renderOfficialPluviometer
-) {
+function isRequestedValue(item, renderOptions) {
   return (
-    (item.name == "pluviometer" && renderPluviometer) ||
-    (item.name == "officialPluviometer") & renderOfficialPluviometer ||
-    (item.name == "rain" && renderRain) ||
-    (item.name == "river" && renderRiver) ||
-    (item.name == "flood" && renderFlood)
+    (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
+    (item.name == "officialPluviometer" &&
+      renderOptions.oficial.automaticPluviometer) ||
+    (item.name == "rain" && renderOptions.citzen.rain) ||
+    (item.name == "river" && renderOptions.citzen.riverFlood) ||
+    (item.name == "flood" && renderOptions.citzen.floodRisk)
   );
 }
 
-function MapMarkerList({
-  markers,
-  renderRain = true,
-  renderFlood = true,
-  renderRiver = true,
-  renderPluviometer = true,
-  renderOfficialPluviometer = true,
-}) {
-  
-  // FIXME: Resolve this later!!!
-  return markers.markers;
+function MapMarkerList({ markers, renderOptions }) {
+  if (!markers) return null;
 
-  // return [...markers.markers].filter(([k, item]) => {
-  //   isRequestedValue(
-  //     item,
-  //     renderRain,
-  //     renderFlood,
-  //     renderRiver,
-  //     renderPluviometer,
-  //     renderOfficialPluviometer
-  //   )
-  // }
-  // );
+  return [...markers.markers].filter(([_, item]) => {
+    return isRequestedValue(item, renderOptions);
+  });
 }
 
 export { MapMarkerList };

src/app/components/map/LeafLetMap.js

@@ -59,6 +59,15 @@ function handleEvent(event) {
   return code_to_function[payload.code](payload);
 }
 
+function deleteAllMarkers(mapRef) {
+  mapRef.injectJavaScript(`
+  for (const [key, value] of Object.entries(markers)) {
+    map.removeLayer(value);
+  }
+  markers = {};
+  `);
+}
+
 async function insertMarker(mapRef, ID, coordinate, icon) {
   mapRef.injectJavaScript(`
   var customIcon = L.divIcon({
@@ -70,13 +79,18 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
   // Check if there is no other marker with same ID already in map
   if (!(${ID} in markers)) {
     // Creates marker object
-    markers[${ID}] = L.marker([${coordinate.latitude}, ${
-    coordinate.longitude
-  }], {icon: customIcon, ID: ${ID}});
+    markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}});
 
-    // Add marker to map and bing callback event to its function
+    // Add marker to map and bind callback event to its function
     markers[${ID}].addTo(map).on('click', onPopupClick);
   }`);
 }
 
-export { loadHTMLFile, handleEvent, insertMarker, goToRegion, setViewCode };
+export {
+  loadHTMLFile,
+  handleEvent,
+  insertMarker,
+  goToRegion,
+  setViewCode,
+  deleteAllMarkers,
+};

src/app/components/map/OpenStreetMap.js

@@ -1,16 +1,16 @@
 import React, { useState, useEffect } from "react";
-import { View, StyleSheet, Text } from "react-native";
+import { View } from "react-native";
 import WebView from "react-native-webview";
 import {
   setViewCode,
   handleEvent,
   insertMarker,
+  deleteAllMarkers,
 } from "./LeafLetMap";
 import MapModal from "../MapModal";
 import html_content from "./Map.js";
 import MapDataMenu from "../MapDataMenu";
-import {MapMarkerList} from "../MapMarkerList";
-
+import { MapMarkerList } from "../MapMarkerList";
 
 function bindEventsToListeners(
   event,
@@ -34,14 +34,14 @@ function bindEventsToListeners(
 }
 
 function notEmpy(lista) {
-  return lista && lista.size > 0;
+  return lista && lista.length > 0;
 }
 
 export default function OpenStreetMap({
   markers,
   clickListener,
   moveEndListener,
-  isForm=false
+  isForm = false,
 }) {
   const [dataOptionsToShow, setDataOptionsToShow] = useState({
     oficial: {
@@ -49,7 +49,7 @@ export default function OpenStreetMap({
       susceptibilityAreas: false,
     },
     citzen: {
-      floodRisk: false,
+      floodRisk: true,
       pluviometer: true,
       rain: false,
       floodZones: true,
@@ -57,31 +57,34 @@ export default function OpenStreetMap({
     },
   });
 
-
-  console.log(dataOptionsToShow)
-
   const [mapRef, setMapRef] = useState(null);
   const webviewContent = html_content;
   const [markerListener, setMarkerListener] = useState(null);
   const viewFunction = setViewCode(global.location.lat, global.location.long);
 
-  const markersList = MapMarkerList({markers: markers, renderRain: true})
-
-  markersList &&
-    mapRef &&
-    notEmpy(markersList) &&
-    markersList.forEach((val, _) => {
-      insertMarker(mapRef, val.ID, val.coordinate, val.image);
+  const markersList = MapMarkerList({
+    markers: markers,
+    renderOptions: dataOptionsToShow,
   });
+  // console.log(markersList)
+
+  // markersList &&
+  //   mapRef &&
+  //   notEmpy(markersList) &&
+  //   markersList.forEach((val, _) => {
+  //     // console.log(val);
+  //     insertMarker(mapRef, val.ID, val.coordinate, val.image);
+  //   });
 
   useEffect(() => {
-    markersList &&
-      mapRef &&
-      notEmpy(markersList) &&
-      markersList.forEach((val, _) => {
-        insertMarker(mapRef, val.ID, val.coordinate, val.image);
+    if (markersList && mapRef && notEmpy(markersList)) {
+      deleteAllMarkers(mapRef);
+
+      markersList.forEach((val, k) => {
+        insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
       });
-  }, [markersList])
+    }
+  }, [markersList, dataOptionsToShow]);
 
   return (
     <View flex={1}>
@@ -108,14 +111,15 @@ export default function OpenStreetMap({
           <MapModal
             showModal={markerListener}
             setShowModal={setMarkerListener}
-          markers={markersList}
+            markers={markers.markers}
           />
 
           <MapDataMenu
             dataOptionsToShow={dataOptionsToShow}
-          setDataOptionsToShow={setDataOptionsToShow}/>
-
-      </View>)}
+            setDataOptionsToShow={setDataOptionsToShow}
+          />
+        </View>
+      )}
     </View>
   );
 }

src/app/hooks/selectFromDB.js

@@ -99,11 +99,10 @@ function parseFloodZones(row) {
 }
 
 function parseRiverLevel(row) {
-  console.log("IDDD " + row["Id"]);
   if (!is_valid(row["Id"], "river")) {
     return null;
   }
-  console.log(JSON.stringify(row));
+  // console.log(JSON.stringify(row));
   // displacement += offset;
   const riverLevel = ["baixo", "normal", "alto", "transbordando"];
   const riverIdx = row["RiverIdx"];