From e30f4a94f378910a476da25fa1e88181213d7082 Mon Sep 17 00:00:00 2001 From: analuizaff Date: Mon, 13 Sep 2021 16:10:06 -0300 Subject: [PATCH] applying the 'menu' logic to polygons --- src/app/components/map/LeafLetMap.js | 25 +++++++++++--------- src/app/components/map/OpenStreetMap.js | 31 +++++++++++-------------- src/app/hooks/useFiltering.js | 4 ++-- src/app/hooks/useSocketMarkers.js | 11 +++++---- src/app/screens/MapFeedScreen.js | 4 ++-- 5 files changed, 37 insertions(+), 38 deletions(-) diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js index 932a912..e2307f2 100644 --- a/src/app/components/map/LeafLetMap.js +++ b/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 { diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js index 3fe3ffd..8557a53 100644 --- a/src/app/components/map/OpenStreetMap.js +++ b/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 ( diff --git a/src/app/hooks/useFiltering.js b/src/app/hooks/useFiltering.js index 9b085dc..fadf1d9 100644 --- a/src/app/hooks/useFiltering.js +++ b/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` ), }, ]; diff --git a/src/app/hooks/useSocketMarkers.js b/src/app/hooks/useSocketMarkers.js index 18245f0..0ffb4e6 100644 --- a/src/app/hooks/useSocketMarkers.js +++ b/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)) ); } diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js index 4654f9d..22c1888 100644 --- a/src/app/screens/MapFeedScreen.js +++ b/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, },