Browse Source

applying the 'menu' logic to polygons

master
analuizaff 3 years ago
parent
commit
e30f4a94f3
  1. 25
      src/app/components/map/LeafLetMap.js
  2. 31
      src/app/components/map/OpenStreetMap.js
  3. 4
      src/app/hooks/useFiltering.js
  4. 11
      src/app/hooks/useSocketMarkers.js
  5. 4
      src/app/screens/MapFeedScreen.js

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

@ -29,9 +29,9 @@ function setViewCode(lat, long, zoom = 16.5) {
} }
const code_to_function = { const code_to_function = {
"1": clickCallback,
"2": markerCallback,
"3": moveEndCallback,
1: clickCallback,
2: markerCallback,
3: moveEndCallback,
}; };
function clickCallback(payload) { function clickCallback(payload) {
@ -65,6 +65,11 @@ function deleteAllMarkers(mapRef) {
map.removeLayer(value); map.removeLayer(value);
} }
markers = {}; 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) { 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(` mapRef.injectJavaScript(`
if (!(${ID} in polygons)) { if (!(${ID} in polygons)) {
polygons[${ID}] = L.polygon(${coordinates}, { ID: ${ID}});
polygons[${ID}] = L.polygon(${JSON.stringify(
coordinate
)}, { ID: ${ID}});
polygons[${ID}].addTo(map); polygons[${ID}].addTo(map);
} }
`); `);
/* mapRef.injectJavaScript(`
var polygon = L.polygon(${coordinates}).addTo(map);
`);*/
} }
export { export {

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

@ -46,7 +46,6 @@ export default function OpenStreetMap({
setDataOptionsToShow, setDataOptionsToShow,
isForm = false, isForm = false,
}) { }) {
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);
@ -65,24 +64,20 @@ export default function OpenStreetMap({
// insertMarker(mapRef, val.ID, val.coordinate, val.image); // 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 ( return (
<View flex={1}> <View flex={1}>

4
src/app/hooks/useFiltering.js

@ -32,14 +32,14 @@ function useFiltering(location) {
name: "susceptibilityAreas", name: "susceptibilityAreas",
socketUrl: new WebSocket( socketUrl: new WebSocket(
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + "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", name: "automaticPluviometer",
socketUrl: new WebSocket( socketUrl: new WebSocket(
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + "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`
), ),
}, },
]; ];

11
src/app/hooks/useSocketMarkers.js

@ -83,8 +83,9 @@ function getImage(name, situation) {
} }
function buildPolygonsObject(response, name) { function buildPolygonsObject(response, name) {
var r = JSON.parse(response);
var coordinate = []; var coordinate = [];
var formsanswersgeom = response.formsanswersgeom;
var formsanswersgeom = r.formsanswersgeom;
const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0]; const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0];
var n = Object.keys(arrayCoordinates).length; var n = Object.keys(arrayCoordinates).length;
@ -94,11 +95,11 @@ function buildPolygonsObject(response, name) {
coordinate.push([lat, lon]); coordinate.push([lat, lon]);
} }
var polygonObject = { var polygonObject = {
ID: response.formsanswersid,
ID: r.formsanswersid,
name: name, name: name,
title: "Titulo", //response.fieldsanswerssituation title: "Titulo", //response.fieldsanswerssituation
address: "Endereço", //response.fieldsanswerseventaddress, address: "Endereço", //response.fieldsanswerseventaddress,
coordinate: { coordinate },
coordinate: coordinate,
date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime, date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
description: "comentário", //response.fielsanswercomment, description: "comentário", //response.fielsanswercomment,
logo: custom_assets.pluviometer, logo: custom_assets.pluviometer,
@ -127,7 +128,7 @@ function buildMarkerObject(response, name) {
description: "comentário", //response.fielsanswercomment, description: "comentário", //response.fielsanswercomment,
logo: custom_assets.pluviometer, logo: custom_assets.pluviometer,
pictures: null, 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) => answer.responseData.array_to_json.forEach((r) =>
r.formcode == "FLOODZONES_OFFICIAL" r.formcode == "FLOODZONES_OFFICIAL"
? markers.push(buildPolygonsObject(r, name))
? markers.push(buildPolygonsObject(JSON.stringify(r), name))
: markers.push(buildMarkerObject(JSON.stringify(r), name)) : markers.push(buildMarkerObject(JSON.stringify(r), name))
); );
} }

4
src/app/screens/MapFeedScreen.js

@ -21,12 +21,12 @@ export default function MapFeedScreen(props) {
const [dataOptionsToShow, setDataOptionsToShow] = useState({ const [dataOptionsToShow, setDataOptionsToShow] = useState({
oficial: { oficial: {
automaticPluviometer: false, automaticPluviometer: false,
susceptibilityAreas: false,
susceptibilityAreas: true,
}, },
citzen: { citzen: {
floodRisk: false, floodRisk: false,
pluviometer: false, pluviometer: false,
rain: true,
rain: false,
floodZones: false, floodZones: false,
riverFlood: false, riverFlood: false,
}, },

Loading…
Cancel
Save