Browse Source

adding polygons from official floodzones

master
analuizaff 3 years ago
parent
commit
3ea24504f3
  1. 16
      src/app/api/Websockets/SocketClient.js
  2. 5
      src/app/components/MapMarkerList.js
  3. 19
      src/app/components/map/LeafLetMap.js
  4. 1
      src/app/components/map/Map.html
  5. 16
      src/app/components/map/OpenStreetMap.js
  6. 86
      src/app/hooks/useFiltering.js
  7. 98
      src/app/hooks/useFormsAswers.js
  8. 11
      src/app/screens/MapFeedScreen.js

16
src/app/api/Websockets/SocketClient.js

@ -4,10 +4,12 @@ import { useFiltering } from '../../hooks/useFiltering';
function isRequestedValue(item, renderOptions) { function isRequestedValue(item, renderOptions) {
if ( if (
(item.name == "pluviometer" && renderOptions.citzen.pluviometer) || (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
(item.name == "officialPluviometer" && renderOptions.oficial.automaticPluviometer) ||
/*(item.name == "automaticPluviometer" &&
renderOptions.oficial.automaticPluviometer) ||*/
(item.name == "rain" && renderOptions.citzen.rain) || (item.name == "rain" && renderOptions.citzen.rain) ||
(item.name == "riverFlood" && renderOptions.citzen.riverFlood) || (item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
(item.name == "floodZones" && renderOptions.citzen.floodRisk)
(item.name == "floodZones" && renderOptions.citzen.floodRisk) ||
(item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas)
) { ) {
return true; return true;
@ -16,26 +18,24 @@ function isRequestedValue(item, renderOptions) {
function verify_existingSockets(formType, renderOptions) { function verify_existingSockets(formType, renderOptions) {
if (formType.response == null && isRequestedValue(formType, renderOptions)) { if (formType.response == null && isRequestedValue(formType, renderOptions)) {
console.log("Resposta é null");
// console.log("Resposta é null");
const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint); const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint);
socket.onmessage = ({ data }) => { socket.onmessage = ({ data }) => {
formType.response = data; formType.response = data;
} }
} }
else {
/* else {
console.log("\nresposta preenchida"); console.log("\nresposta preenchida");
}
}*/
} }
export default function SocketClient(dataOptionObject, focusChanged) { export default function SocketClient(dataOptionObject, focusChanged) {
const [data, setData] = useState(useFiltering()); const [data, setData] = useState(useFiltering());
useEffect(() => { useEffect(() => {
data.citizen.map((e) => verify_existingSockets(e, dataOptionObject));
data.oficial.map((e) => verify_existingSockets(e, dataOptionObject));
data.forms.map((e) => verify_existingSockets(e, dataOptionObject));
}, [dataOptionObject, focusChanged]); }, [dataOptionObject, focusChanged]);

5
src/app/components/MapMarkerList.js

@ -1,11 +1,12 @@
function isRequestedValue(item, renderOptions) { function isRequestedValue(item, renderOptions) {
return ( return (
(item.name == "pluviometer" && renderOptions.citzen.pluviometer) || (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
(item.name == "officialPluviometer" &&
(item.name == "automaticPluviometer" &&
renderOptions.oficial.automaticPluviometer) || renderOptions.oficial.automaticPluviometer) ||
(item.name == "rain" && renderOptions.citzen.rain) || (item.name == "rain" && renderOptions.citzen.rain) ||
(item.name == "riverFlood" && renderOptions.citzen.riverFlood) || (item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
(item.name == "floodZones" && renderOptions.citzen.floodRisk)
(item.name == "floodZones" && renderOptions.citzen.floodRisk) ||
(item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas)
); );
} }

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

@ -75,21 +75,34 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
html: \`<body>${icon}</body>\`, html: \`<body>${icon}</body>\`,
iconSize: 70 iconSize: 70
}); });
// 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}], { ID: ${ID}});
markers[${ID}] = L.marker([${coordinate.latitude}, ${coordinate.longitude}], {icon: customIcon, ID: ${ID}});
// Add marker to map and bind 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);
}`); }`);
} }
async function insertPolygon(mapRef, ID, coordinate) {
// console.log("COORDENADAS: "+JSON.stringify(coordinate.coordinate));
var coordinates = JSON.stringify(coordinate.coordinate);
// console.log(ID);
mapRef.injectJavaScript(`
polygons = (L.polygon(${coordinates}, { ID: ${ID}}));
polygons.addTo(map);
`);
/* mapRef.injectJavaScript(`
var polygon = L.polygon(${coordinates}).addTo(map);
`);*/
}
export { export {
loadHTMLFile, loadHTMLFile,
handleEvent, handleEvent,
insertMarker, insertMarker,
insertPolygon,
goToRegion, goToRegion,
setViewCode, setViewCode,
deleteAllMarkers, deleteAllMarkers,

1
src/app/components/map/Map.html

@ -51,6 +51,7 @@
<script> <script>
var map = L.map("map").setView([-15.804627, -51.810855], 3.4); var map = L.map("map").setView([-15.804627, -51.810855], 3.4);
var markers = {}; var markers = {};
var polygons = {};
function setCustomView(lat, long, zoom) { function setCustomView(lat, long, zoom) {
map.setView([lat, long], zoom); map.setView([lat, long], zoom);

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

@ -6,6 +6,7 @@ import {
handleEvent, handleEvent,
insertMarker, insertMarker,
deleteAllMarkers, deleteAllMarkers,
insertPolygon,
} from "./LeafLetMap"; } from "./LeafLetMap";
import MapModal from "../MapModal"; import MapModal from "../MapModal";
import html_content from "./Map.js"; import html_content from "./Map.js";
@ -69,10 +70,17 @@ export default function OpenStreetMap({
if (markersList && mapRef) { if (markersList && mapRef) {
deleteAllMarkers(mapRef); deleteAllMarkers(mapRef);
notEmpy(markersList) &&
markersList.forEach((val, k) => {
insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
});
notEmpy(markersList) &&
markersList.forEach((val, k) => {
// console.log(val);
if (val[1].name == "susceptibilityAreas") {
console.log("FLOODZONES_OFFICIAL");
insertPolygon(mapRef, val[1].ID, val[1].coordinate);
}
else {
insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
}
});
} }
}, [markersList, dataOptionsToShow]); }, [markersList, dataOptionsToShow]);

86
src/app/hooks/useFiltering.js

@ -1,59 +1,41 @@
function useFiltering() { function useFiltering() {
const filters = { const filters = {
"citizen":
[
{
name: "floodZones",
endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=3",
response: null,
}, {
name: "rain",
endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
response: null,
},
{
name: "riverFlood",
endpoint: "type=RIVERFLOOD_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
response: null,
},
{
name: "pluviometer",
endpoint: "type=PLUVIOMETER_REGISTRATION&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
response: null,
}
],
"oficial":
[
{
name: "susceptibilityAreas",
endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
response: null,
},
{
name: "automaticPluviometer",
endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
response: null,
}
]
"forms": [
{
name: "floodZones",
endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=3",
response: null,
}, {
name: "rain",
endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
response: null,
},
{
name: "riverFlood",
endpoint: "type=RIVERFLOOD_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
response: null,
},
{
name: "pluviometer",
endpoint: "type=PLUVIOMETER_REGISTRATION&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
response: null,
},
{
name: "susceptibilityAreas",
endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=3",
response: null,
},
{
name: "automaticPluviometer",
endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
response: null,
}
]
} }
return filters; return filters;
} }
const endPoint_susceptibilityAreas = () => {
return "type=FLOODZONES_OFFICIAL"
+ "&lat=-9.98132"
+ "&lon=-67.81544"
+ "&buffer=5000"
+ "&limit=1"
}
const endPoint_automaticPluviometer = () => {
return "type=PLUVIOMETERS_OFFICIAL"
+ "&lat=-9.98132"
+ "&lon=-67.81544"
+ "&buffer=5000"
+ "&limit=1"
}
export { endPoint_susceptibilityAreas, endPoint_automaticPluviometer, useFiltering };
export { useFiltering };

98
src/app/hooks/useFormsAswers.js

@ -5,32 +5,94 @@ import assets from "../config/assets";
import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel"; import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel";
import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel"; import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel";
function buildMarkersArray(markers, answer) {
if (answer.response) {
const response = JSON.parse(answer.response).responseData.array_to_json[0];
var markerObject = {
ID: response.formsanswersid,
name: answer.name,
address: "",//response.fieldsanswerseventaddress,
coordinate: {
latitude: response.formsanswerslatitude,
longitude: response.formsanswerslongitude,
},
date: response.fias[0].fieldsanswersdtfilling, //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
description: "", //response.fielsanswercomment,
image: "",//getMarkerImage(answer.name),
title: "", //response.fieldsanswerssituation
const custom_assets_pin = {
pluviometer: assets.pluviometer_pin,
officialPluviometer: assets.officialPluviometer_pin,
floodZones: {
passable: PinTransitavel,
not_passable: PinIntransitavel,
},
riverLevel: ["low_pin", "normal_pin", "high_pin", "flooding_pin"].map(
(key) => {
return assets.riverLevel[key];
} }
markers.set(markerObject.ID, markerObject);
),
rainLevel: [
"rain_0_5_pin",
"rain_1_5_pin",
"rain_2_5_pin",
"rain_3_5_pin",
].map((key) => {
return assets.rainLevel[key];
}),
};
function getImage(name, situation){
//TODO
}
function buildPolygonsObject(markers, response, name) {
var coordinate = [];
var formsanswersgeom = response.formsanswersgeom;
const arrayCoordinates = (JSON.parse(formsanswersgeom)["coordinates"][0]);
var n = Object.keys(arrayCoordinates).length;
//console.log(arrayCoordinates);
for (let i = 0; i < n; i++) {
var lat = arrayCoordinates[i][1];
var lon = arrayCoordinates[i][0];
coordinate.push([lat, lon]);
}
// console.log(coordinate);
var polygonObject = {
ID: response.formsanswersid,
name: name,
title: response.fias[0].fieldsanswersvalue ? response.fias[0].fieldsanswersvalue : "", //response.fieldsanswerssituation
address: response.fias[1].fieldsanswersvalue ? response.fias[1].fieldsanswersvalue : "",//response.fieldsanswerseventaddress,
coordinate: { coordinate },
date: response.fias[2].fieldsanswersvalue + " | " + response.fias[3].fieldsanswersvalue, //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
description: response.fias[4].fieldsanswersvalue, //response.fielsanswercomment,
image: "",//getMarkerImage(answer.name),
}
markers.set(polygonObject.ID, polygonObject);
}
function buildMarkerObject(markers, response, name) {
var markerObject = {
ID: response.formsanswersid,
name: name,
title: response.fias[0].fieldsanswersvalue ? response.fias[0].fieldsanswersvalue : "", //response.fieldsanswerssituation
address: response.fias[1].fieldsanswersvalue ? response.fias[1].fieldsanswersvalue : "",//response.fieldsanswerseventaddress,
coordinate: {
latitude: response.formsanswerslatitude,
longitude: response.formsanswerslongitude,
},
date: response.fias[2].fieldsanswersvalue + " | " + response.fias[3].fieldsanswersvalue, //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
description: response.fias[4].fieldsanswersvalue, //response.fielsanswercomment,
image: custom_assets_pin.pluviometer,//getMarkerImage(answer.name),
}
markers.set(markerObject.ID, markerObject);
}
function verifyResponse(markers, data) {
// console.log(data.response);
if (data.response) {
const response = JSON.parse(data.response).responseData.array_to_json;
response.forEach((r) => r.formcode == "FLOODZONES_OFFICIAL" ? buildPolygonsObject(markers.markers, r, data.name) : buildMarkerObject(markers.markers, r, data.name));
} }
} }
const getFormsAnswers = (dataOptionObject, focusChanged) => { const getFormsAnswers = (dataOptionObject, focusChanged) => {
var markers = { markers: new Map() }; var markers = { markers: new Map() };
const answers = (SocketClient(dataOptionObject));
answers.citizen.forEach((r) => buildMarkersArray(markers.markers, r));
const answers = SocketClient(dataOptionObject, focusChanged);
// console.log("\n\nAnswers: " + JSON.stringify(answers));
answers.forms.forEach((r) => verifyResponse(markers, r));//buildMarkerObject(markers.markers, r));
//console.log("\n\nMarkers: " + JSON.stringify(markers));
return markers; return markers;
} }

11
src/app/screens/MapFeedScreen.js

@ -19,19 +19,18 @@ export default function MapFeedScreen(props) {
const [dataOptionsToShow, setDataOptionsToShow] = useState({ const [dataOptionsToShow, setDataOptionsToShow] = useState({
oficial: { oficial: {
automaticPluviometer: true,
automaticPluviometer: false,
susceptibilityAreas: false, susceptibilityAreas: false,
}, },
citzen: { citzen: {
floodRisk: true,
pluviometer: true,
floodRisk: false,
pluviometer: false,
rain: true, rain: true,
floodZones: true,
riverFlood: true,
floodZones: false,
riverFlood: false,
}, },
}); });
const markers = getFormsAnswers(dataOptionsToShow, focusChanged); const markers = getFormsAnswers(dataOptionsToShow, focusChanged);
//console.log(markers);
// useEffect(() => { // useEffect(() => {

Loading…
Cancel
Save