gabriellopes320
/
WPD-MobileApp
forked from cemaden-educacao/WPD-MobileApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

adding polygons from official floodzones

master
analuizaff 3 years ago
parent
0f81d482d1
commit
3ea24504f3
8 changed files with 159 additions and 93 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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. 84
      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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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
View File

@ -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]);

84
src/app/hooks/useFiltering.js
View File

@ -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,
"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,
}
]
}, {
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,
}
]
} }
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
View File

@ -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
View File

@ -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(() => {

Write Preview
Loading…
Cancel
Save