adding polygons from official floodzones

3 years ago · 3ea24504f3
8 changed files with 159 additions and 93 deletions
--- a/src/app/api/Websockets/SocketClient.js
+++ b/src/app/api/Websockets/SocketClient.js
@ -4,10 +4,12 @@ import { useFiltering } from '../../hooks/useFiltering';
 function isRequestedValue(item, renderOptions) {
  if (
    (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 == "riverFlood" && renderOptions.citzen.riverFlood) ||
-    (item.name == "floodZones" && renderOptions.citzen.floodRisk)
+    (item.name == "floodZones" && renderOptions.citzen.floodRisk) ||
+    (item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas)
  ) {
    return true;

@ -16,26 +18,24 @@ function isRequestedValue(item, renderOptions) {

 function verify_existingSockets(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);

    socket.onmessage = ({ data }) => {
      formType.response = data;
    }
  }
-  else {
+ /* else {
    console.log("\nresposta preenchida");
-  }
+  }*/
 }


 export default function SocketClient(dataOptionObject, focusChanged) {
  const [data, setData] = useState(useFiltering());

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

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

--- a/src/app/components/map/LeafLetMap.js
+++ b/src/app/components/map/LeafLetMap.js
@ -75,21 +75,34 @@ async function insertMarker(mapRef, ID, coordinate, icon) {
    html: \`<body>${icon}</body>\`,
    iconSize: 70
  });
-
  // Check if there is no other marker with same ID already in map
  if (!(${ID} in markers)) {
    // 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
    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 {
  loadHTMLFile,
  handleEvent,
  insertMarker,
+  insertPolygon,
  goToRegion,
  setViewCode,
  deleteAllMarkers,
--- a/src/app/components/map/Map.html
+++ b/src/app/components/map/Map.html
@ -51,6 +51,7 @@
    <script>
      var map = L.map("map").setView([-15.804627, -51.810855], 3.4);
      var markers = {};
+      var polygons = {};

      function setCustomView(lat, long, zoom) {
        map.setView([lat, long], zoom);
--- a/src/app/components/map/OpenStreetMap.js
+++ b/src/app/components/map/OpenStreetMap.js
@ -6,6 +6,7 @@ import {
  handleEvent,
  insertMarker,
  deleteAllMarkers,
+  insertPolygon,
 } from "./LeafLetMap";
 import MapModal from "../MapModal";
 import html_content from "./Map.js";
@ -69,10 +70,17 @@ export default function OpenStreetMap({
    if (markersList && 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]);

--- a/src/app/hooks/useFiltering.js
+++ b/src/app/hooks/useFiltering.js
@ -1,59 +1,41 @@
 function useFiltering() {
    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;
 }

-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 };
--- a/src/app/hooks/useFormsAswers.js
+++ b/src/app/hooks/useFormsAswers.js
@ -5,32 +5,94 @@ import assets from "../config/assets";
 import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel";
 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) => {
  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;

 }
--- a/src/app/screens/MapFeedScreen.js
+++ b/src/app/screens/MapFeedScreen.js
@ -19,19 +19,18 @@ export default function MapFeedScreen(props) {

  const [dataOptionsToShow, setDataOptionsToShow] = useState({
    oficial: {
-      automaticPluviometer: true,
+      automaticPluviometer: false,
      susceptibilityAreas: false,
    },
    citzen: {
-      floodRisk: true,
-      pluviometer: true,
+      floodRisk: false,
+      pluviometer: false,
      rain: true,
-      floodZones: true,
-      riverFlood: true,
+      floodZones: false,
+      riverFlood: false,
    },
  });  
  const markers = getFormsAnswers(dataOptionsToShow, focusChanged);
-  //console.log(markers);


  // useEffect(() => {