Browse Source

applying the 'menu' logic to polygons

master
analuizaff 3 years ago
parent
commit
e30f4a94f3
  1. 23
      src/app/components/map/LeafLetMap.js
  2. 13
      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

23
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("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 {

13
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) {
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 {
} else {
insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
}
});
}
}, [markersList, dataOptionsToShow]);
}, [markersList, dataOptionsToShow]);
return (
<View flex={1}>

4
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`
),
},
];

11
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))
);
}

4
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,
},

Loading…
Cancel
Save