diff --git a/src/app/components/MapMarkerList.js b/src/app/components/MapMarkerList.js index f2d3862..4d7d36c 100644 --- a/src/app/components/MapMarkerList.js +++ b/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 }; diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index f89a4fd..d43b0f5 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/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, +}; diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index 5ac9e01..6bf0d21 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/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}) + const markersList = MapMarkerList({ + markers: markers, + renderOptions: dataOptionsToShow, + }); + // console.log(markersList) - markersList && - mapRef && - notEmpy(markersList) && - markersList.forEach((val, _) => { - insertMarker(mapRef, val.ID, val.coordinate, val.image); - }); + // 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 ( @@ -104,18 +107,19 @@ export default function OpenStreetMap({ /> )} {!isForm && ( - - + + - - - )} + + + )} ); } diff --git a/src/app/hooks/selectFromDB.js b/src/app/hooks/selectFromDB.js index 05ecaf9..76d3750 100644 --- a/src/app/hooks/selectFromDB.js +++ b/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"];