Browse Source

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)
master
GabrielTrettel 3 years ago
parent
commit
9481b2bf8c
  1. 49
      src/app/components/MapMarkerList.js
  2. 24
      src/app/components/map/LeafLetMap.js
  3. 70
      src/app/components/map/OpenStreetMap.js
  4. 3
      src/app/hooks/selectFromDB.js

49
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 ( 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 }; export { MapMarkerList };

24
src/app/components/map/LeafLetMap.js

@ -59,6 +59,15 @@ function handleEvent(event) {
return code_to_function[payload.code](payload); 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) { async function insertMarker(mapRef, ID, coordinate, icon) {
mapRef.injectJavaScript(` mapRef.injectJavaScript(`
var customIcon = L.divIcon({ 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 // Check if there is no other marker with same ID already in map
if (!(${ID} in markers)) { if (!(${ID} in markers)) {
// Creates marker object // 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); markers[${ID}].addTo(map).on('click', onPopupClick);
}`); }`);
} }
export { loadHTMLFile, handleEvent, insertMarker, goToRegion, setViewCode };
export {
loadHTMLFile,
handleEvent,
insertMarker,
goToRegion,
setViewCode,
deleteAllMarkers,
};

70
src/app/components/map/OpenStreetMap.js

@ -1,16 +1,16 @@
import React, { useState, useEffect } from "react"; 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 WebView from "react-native-webview";
import { import {
setViewCode, setViewCode,
handleEvent, handleEvent,
insertMarker, insertMarker,
deleteAllMarkers,
} from "./LeafLetMap"; } from "./LeafLetMap";
import MapModal from "../MapModal"; import MapModal from "../MapModal";
import html_content from "./Map.js"; import html_content from "./Map.js";
import MapDataMenu from "../MapDataMenu"; import MapDataMenu from "../MapDataMenu";
import {MapMarkerList} from "../MapMarkerList";
import { MapMarkerList } from "../MapMarkerList";
function bindEventsToListeners( function bindEventsToListeners(
event, event,
@ -34,14 +34,14 @@ function bindEventsToListeners(
} }
function notEmpy(lista) { function notEmpy(lista) {
return lista && lista.size > 0;
return lista && lista.length > 0;
} }
export default function OpenStreetMap({ export default function OpenStreetMap({
markers, markers,
clickListener, clickListener,
moveEndListener, moveEndListener,
isForm=false
isForm = false,
}) { }) {
const [dataOptionsToShow, setDataOptionsToShow] = useState({ const [dataOptionsToShow, setDataOptionsToShow] = useState({
oficial: { oficial: {
@ -49,7 +49,7 @@ export default function OpenStreetMap({
susceptibilityAreas: false, susceptibilityAreas: false,
}, },
citzen: { citzen: {
floodRisk: false,
floodRisk: true,
pluviometer: true, pluviometer: true,
rain: false, rain: false,
floodZones: true, floodZones: true,
@ -57,31 +57,34 @@ export default function OpenStreetMap({
}, },
}); });
console.log(dataOptionsToShow)
const [mapRef, setMapRef] = useState(null); const [mapRef, setMapRef] = useState(null);
const webviewContent = html_content; const webviewContent = html_content;
const [markerListener, setMarkerListener] = useState(null); const [markerListener, setMarkerListener] = useState(null);
const viewFunction = setViewCode(global.location.lat, global.location.long); 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(() => { 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 ( return (
<View flex={1}> <View flex={1}>
@ -104,18 +107,19 @@ export default function OpenStreetMap({
/> />
)} )}
{!isForm && ( {!isForm && (
<View>
<MapModal
showModal={markerListener}
setShowModal={setMarkerListener}
markers={markersList}
/>
<View>
<MapModal
showModal={markerListener}
setShowModal={setMarkerListener}
markers={markers.markers}
/>
<MapDataMenu
dataOptionsToShow={dataOptionsToShow}
setDataOptionsToShow={setDataOptionsToShow}/>
</View>)}
<MapDataMenu
dataOptionsToShow={dataOptionsToShow}
setDataOptionsToShow={setDataOptionsToShow}
/>
</View>
)}
</View> </View>
); );
} }

3
src/app/hooks/selectFromDB.js

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

Loading…
Cancel
Save