solving polygons issue

src/App.js

@@ -23,7 +23,8 @@ export default function App() {
   
   const restoreUser = async () => {
     const user = await authStorage.getUser();
-    global.location = await getLocation();
+    global.location ={"lat":-10.0173780726763,
+     "long": -67.8170775249999} // await getLocation();
     if (user) setUser(user);
   };
 

src/app/api/Websockets/SocketClient.js

@@ -4,10 +4,10 @@ import { useFiltering } from '../../hooks/useFiltering';
 function isRequestedValue(item, renderOptions) {
   if (
     (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
-    /*(item.name == "automaticPluviometer" &&
-      renderOptions.oficial.automaticPluviometer) ||*/
+    (item.name == "automaticPluviometer" &&
+      renderOptions.oficial.automaticPluviometer) ||
     (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 == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas)
   ) {
@@ -18,7 +18,7 @@ function isRequestedValue(item, renderOptions) {
 
 function verify_existingSockets(formType, renderOptions) {
   if (formType.response == null && isRequestedValue(formType, renderOptions)) {
- //   console.log("Resposta é null");
+    console.log("Criou socket: "+formType.name);
     const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint);
 
     socket.onmessage = ({ data }) => {
@@ -31,14 +31,14 @@ function verify_existingSockets(formType, renderOptions) {
 }
 
 
-export default function SocketClient(dataOptionObject, focusChanged) {
-  const [data, setData] = useState(useFiltering());
+export default function SocketClient(dataOptionObject, focusChanged, data) {
   
-  useEffect(() => {
-    data.forms.map((e) => verify_existingSockets(e, dataOptionObject));
 
-  }, [dataOptionObject, focusChanged]);
+ // useEffect(() => {
+    data.map((e) => verify_existingSockets(e, dataOptionObject));
 
+//  }, []);
+  console.log("data socket client: "+ JSON.stringify(data));
   return data;
 };
 

src/app/components/MapModal.js

@@ -231,6 +231,7 @@ function isPluviometer(name) {
 
 function MapModal({ showModal, setShowModal, markers }) {
   var currentMarker = undefined;
+  //console.log(markers);
   if (markers && showModal != null && markers.has(showModal)) {
     currentMarker = markers.get(showModal);
   }

src/app/components/map/LeafLetMap.js

@@ -86,11 +86,13 @@ 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(ID);
+ // console.log(coordinates);
   mapRef.injectJavaScript(`
-    polygons = (L.polygon(${coordinates}, { ID: ${ID}}));     
+  if (!(${ID} in polygons)) {
+    polygons[${ID}] = L.polygon(${coordinates}, { ID: ${ID}});     
     
-    polygons.addTo(map);
+    polygons[${ID}].addTo(map);
+  }
   `);
   /* mapRef.injectJavaScript(`
    

src/app/components/map/Map.js

@@ -52,6 +52,8 @@ export default html_content = `
     <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);

src/app/components/map/OpenStreetMap.js

@@ -56,7 +56,6 @@ export default function OpenStreetMap({
     markers: markers,
     renderOptions: dataOptionsToShow,
   });
-  // console.log(markersList)
 
   // markersList &&
   //   mapRef &&
@@ -74,7 +73,7 @@ export default function OpenStreetMap({
         markersList.forEach((val, k) => {
           //  console.log(val);
           if (val[1].name == "susceptibilityAreas") {
-               console.log("FLOODZONES_OFFICIAL");
+          //  console.log("floodzones")
             insertPolygon(mapRef, val[1].ID, val[1].coordinate);
           }
           else {

src/app/hooks/useFiltering.js

@@ -3,12 +3,12 @@ function useFiltering() {
         "forms": [
             {
                 name: "floodZones",
-                endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=3",
+                endpoint: "type=FLOODZONES_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
                 response: null,
 
             }, {
                 name: "rain",
-                endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
+                endpoint: "type=RAIN_FORM&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
                 response: null,
             },
             {
@@ -23,12 +23,12 @@ function useFiltering() {
             },
             {
                 name: "susceptibilityAreas",
-                endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=3",
+                endpoint: "type=FLOODZONES_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
                 response: null,
             },
             {
                 name: "automaticPluviometer",
-                endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=1",
+                endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
                 response: null,
             }
         ]

src/app/hooks/useFormsAswers.js

@@ -28,8 +28,47 @@ const custom_assets_pin = {
   }),
 };
 
-function getImage(name, situation){
-  //TODO
+function getImage(name, situation) {
+  if (name == "automaticPluviometer") {
+    return custom_assets_pin.pluviometer;
+  }
+
+  if (name == "pluviometer") {
+    return custom_assets_pin.pluviometer;
+  }
+
+  if (name == "rain") {
+    if (situation == "sem chuva") {
+      return custom_assets_pin.rainLevel[0];
+    } else if (situation == "chuva fraca") {
+      return custom_assets_pin.rainLevel[1];
+    } else if (situation == "chuva moderada") {
+      return custom_assets_pin.rainLevel[2];
+    } else if (situation == "chuva forte") {
+      return custom_assets_pin.rainLevel[3];
+    }
+    return custom_assets_pin.rainLevel[3];
+  }
+
+  if (name == "riverFlood") {
+    if (situation == "baixo") {
+      return custom_assets_pin.riverLevel[0];
+    } else if (situation == "normal") {
+      return custom_assets_pin.riverLevel[1];
+    } else if (situation == "alto") {
+      return custom_assets_pin.riverLevel[2];
+    } else if (situation == "inundar") {
+      return custom_assets_pin.riverLevel[3];
+    }
+    return custom_assets_pin.riverLevel[0];
+  }
+  if (name == "floodZones") {
+    if (situation == "transitavel") {
+      return custom_assets_pin.floodZones.passable;
+    } else {
+      return custom_assets_pin.floodZones.not_passable;
+    }
+  }
 }
 
 function buildPolygonsObject(markers, response, name) {
@@ -38,47 +77,52 @@ function buildPolygonsObject(markers, response, name) {
   const arrayCoordinates = (JSON.parse(formsanswersgeom)["coordinates"][0]);
   var n = Object.keys(arrayCoordinates).length;
 
-  //console.log(arrayCoordinates);
+ // 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);
+ //  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,
+     title: "Titulo", //response.fieldsanswerssituation
+     address: "Endereço",//response.fieldsanswerseventaddress,
     coordinate: { coordinate },
-    date: response.fias[2].fieldsanswersvalue + " | " + response.fias[3].fieldsanswersvalue, //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
-    description: response.fias[4].fieldsanswersvalue, //response.fielsanswercomment,
+     date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
+    description: "comentário", //response.fielsanswercomment,
     image: "",//getMarkerImage(answer.name),
   }
+
   markers.set(polygonObject.ID, polygonObject);
 }
 
 function buildMarkerObject(markers, response, name) {
+  const formsanswersgeom = JSON.parse(response.formsanswersgeom)["coordinates"];
+
   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,
+    title: "Titulo", //response.fieldsanswerssituation
+    address: "Endereço",//response.fieldsanswerseventaddress,
     coordinate: {
-      latitude: response.formsanswerslatitude,
-      longitude: response.formsanswerslongitude,
+      latitude: formsanswersgeom[1],
+      longitude: formsanswersgeom[0],
     },
-    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),
+    date: "data" + " | " + "hora", //response.fieldsanswerseventdate + " | " + response.fieldsanswerseventtime,
+    description: "comentário", //response.fielsanswercomment,
+    image: getImage(name, "situação"),//getMarkerImage(answer.name),
   }
+
   markers.set(markerObject.ID, markerObject);
 
 }
+
 function verifyResponse(markers, data) {
   // console.log(data.response);
-  if (data.response) {
+  if (data.response != null) {
     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));
 
@@ -86,13 +130,14 @@ function verifyResponse(markers, data) {
 
 }
 
-const getFormsAnswers = (dataOptionObject, focusChanged) => {
+const getFormsAnswers = (dataOptionObject, focusChanged, data) => {
   var markers = { markers: new Map() };
-  const answers = SocketClient(dataOptionObject, focusChanged);
-  //  console.log("\n\nAnswers: " + JSON.stringify(answers));
+  const answers = SocketClient(dataOptionObject, focusChanged, data);
+  
+  // 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));
+  answers.forEach((r) => verifyResponse(markers, r));//buildMarkerObject(markers.markers, r));
+ // console.log("\n\nMarkers: " + JSON.stringify(markers));
   return markers;
 
 }

src/app/screens/MapFeedScreen.js

@@ -8,6 +8,7 @@ import useMarkers from "../hooks/selectFromDB";
 import HeaderBarMenu from "../components/HeaderBarMenu";
 import { getFormsAnswers } from "../hooks/useFormsAswers";
 import SocketClient from "../api/Websockets/SocketClient";
+import { useFiltering } from "../hooks/useFiltering";
 
 export default function MapFeedScreen(props) {
   HeaderBarMenu(props.navigation);
@@ -15,7 +16,8 @@ export default function MapFeedScreen(props) {
   const focusChanged = attachFocusToQuery();
   //const [error, setError] = useState(false);
  const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
-// console.log(markersdb);
+ const [data, _] = useState(useFiltering().forms);
+ //console.log(markersdb);
 
   const [dataOptionsToShow, setDataOptionsToShow] = useState({
     oficial: {
@@ -30,7 +32,11 @@ export default function MapFeedScreen(props) {
       riverFlood: false,
     },
   });  
-  const markers = getFormsAnswers(dataOptionsToShow, focusChanged);
+  const [markers, setMarkers] = useState(getFormsAnswers(dataOptionsToShow, focusChanged, data));
+   useEffect(() => {
+    setMarkers(getFormsAnswers(dataOptionsToShow, focusChanged, data));
+   }, [dataOptionsToShow, focusChanged]);
+  console.log(markers);
 
 
   // useEffect(() => {