Browse Source

fixing issue - markers showing on map

master
analuizaff 3 years ago
parent
commit
12eeb3e386
  1. 3
      src/App.js
  2. 6
      src/app/hooks/useFiltering.js
  3. 41
      src/app/hooks/useSocketMarkers.js
  4. 12
      src/app/screens/MapFeedScreen.js

3
src/App.js

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

6
src/app/hooks/useFiltering.js

@ -6,7 +6,6 @@ function useFiltering(location) {
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
`type=FLOODZONES_FORM&lat=-9.9740&lon=-67.8098&buffer=5000&limit=5` `type=FLOODZONES_FORM&lat=-9.9740&lon=-67.8098&buffer=5000&limit=5`
), ),
response: null,
}, },
{ {
name: "rain", name: "rain",
@ -14,7 +13,6 @@ function useFiltering(location) {
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
`type=RAIN_FORM&lat=-9.9740&lon=-67.8098&buffer=5000&limit=5` `type=RAIN_FORM&lat=-9.9740&lon=-67.8098&buffer=5000&limit=5`
), ),
response: null,
}, },
{ {
name: "riverFlood", name: "riverFlood",
@ -22,7 +20,6 @@ function useFiltering(location) {
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
`type=RIVERFLOOD_FORM&-9.9740&lon=-67.8098&buffer=5000&limit=5` `type=RIVERFLOOD_FORM&-9.9740&lon=-67.8098&buffer=5000&limit=5`
), ),
response: null,
}, },
{ {
name: "pluviometer", name: "pluviometer",
@ -30,7 +27,6 @@ function useFiltering(location) {
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
`type=PLUVIOMETER_REGISTRATION&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5` `type=PLUVIOMETER_REGISTRATION&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5`
), ),
response: null,
}, },
{ {
name: "susceptibilityAreas", name: "susceptibilityAreas",
@ -38,7 +34,6 @@ function useFiltering(location) {
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + "wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" +
`type=FLOODZONES_FORM&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5` `type=FLOODZONES_FORM&lat=${location.lat}&lon=${location.long}&buffer=5000&limit=5`
), ),
response: null,
}, },
{ {
name: "automaticPluviometer", name: "automaticPluviometer",
@ -46,7 +41,6 @@ function useFiltering(location) {
"wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + "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=${location.lat}&lon=${location.long}&buffer=5000&limit=5`
), ),
response: null,
}, },
]; ];

41
src/app/hooks/useSocketMarkers.js

@ -1,5 +1,4 @@
import { useState, useEffect, useReducer, useContext } from "react"; import { useState, useEffect, useReducer, useContext } from "react";
import assets from "../config/assets"; 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";
@ -15,6 +14,7 @@ const custom_assets = {
return assets.rainLevel[key]; return assets.rainLevel[key];
}), }),
}; };
const custom_assets_pin = { const custom_assets_pin = {
pluviometer: assets.pluviometer_pin, pluviometer: assets.pluviometer_pin,
officialPluviometer: assets.officialPluviometer_pin, officialPluviometer: assets.officialPluviometer_pin,
@ -36,6 +36,7 @@ const custom_assets_pin = {
return assets.rainLevel[key]; return assets.rainLevel[key];
}), }),
}; };
const initialState = { markers: new Map() }; const initialState = { markers: new Map() };
function getImage(name, situation) { function getImage(name, situation) {
@ -87,14 +88,11 @@ function buildPolygonsObject(response, name) {
const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0]; const arrayCoordinates = JSON.parse(formsanswersgeom)["coordinates"][0];
var n = Object.keys(arrayCoordinates).length; var n = Object.keys(arrayCoordinates).length;
// console.log(arrayCoordinates);
for (let i = 0; i < n; i++) { for (let i = 0; i < n; i++) {
var lat = arrayCoordinates[i][1]; var lat = arrayCoordinates[i][1];
var lon = arrayCoordinates[i][0]; var lon = arrayCoordinates[i][0];
coordinate.push([lat, lon]); coordinate.push([lat, lon]);
} }
// console.log(coordinate);
var polygonObject = { var polygonObject = {
ID: response.formsanswersid, ID: response.formsanswersid,
name: name, name: name,
@ -115,9 +113,9 @@ function buildMarkerObject(response, name) {
const r = JSON.parse(response); const r = JSON.parse(response);
const resposta = r.formsanswersgeom; const resposta = r.formsanswersgeom;
const formsanswersgeom = JSON.parse(resposta).coordinates; const formsanswersgeom = JSON.parse(resposta).coordinates;
return { return {
ID: 3168, //response.formsanswersid,
ID: r.formsanswersid, //response.formsanswersid,
name: name, name: name,
title: "Titulo", //response.fieldsanswerssituation title: "Titulo", //response.fieldsanswerssituation
address: "Endereço", //response.fieldsanswerseventaddress, address: "Endereço", //response.fieldsanswerseventaddress,
@ -141,27 +139,25 @@ function verifyResponse(response, name) {
if (answer.success == true) { if (answer.success == true) {
const formAnswer = answer.responseData.array_to_json; const formAnswer = answer.responseData.array_to_json;
answer.responseData.array_to_json.forEach(
(r) =>
r.formcode == "FLOODZONES_OFFICIAL"
? markers.push(buildPolygonsObject(r, name))
: markers.push(buildMarkerObject(JSON.stringify(r), name))
answer.responseData.array_to_json.forEach((r) =>
r.formcode == "FLOODZONES_OFFICIAL"
? markers.push(buildPolygonsObject(r, name))
: markers.push(buildMarkerObject(JSON.stringify(r), name))
); );
} }
} }
//console.log("\n--------------------------------------------\n"+JSON.stringify(markers)+"\n--------------------------------------------\n");
return markers; return markers;
} }
function getFormsAnswers(socketObject, dispatch) { function getFormsAnswers(socketObject, dispatch) {
//console.log("\n\n-------------\n"+(socketObject.name +" : " + socketObject.socketUrl.readyState));
//const []
const [socketResponse, setSocketResponse] = useState();
socketObject.socketUrl.onmessage = ({ data }) => {
setSocketResponse(data);
};
useEffect(() => { useEffect(() => {
socketObject.socketUrl.onmessage = ({ data }) => {
// console.log(data)
dispatch({ increment: verifyResponse(data, socketObject.name) });
};
}, []);
dispatch({ increment: verifyResponse(socketResponse, socketObject.name) });
}, [socketResponse]);
} }
function reducer(state = initialState, action) { function reducer(state = initialState, action) {
@ -169,15 +165,12 @@ function reducer(state = initialState, action) {
state.markers.set(val.ID, val); state.markers.set(val.ID, val);
}); });
return {
markers: state.markers,
};
return { markers: state.markers };
} }
export default function useSocketMarkers() { export default function useSocketMarkers() {
const [state, dispatch] = useReducer(reducer, initialState); const [state, dispatch] = useReducer(reducer, initialState);
global.formsSockets.forEach((socket) => getFormsAnswers(socket, dispatch)); global.formsSockets.forEach((socket) => getFormsAnswers(socket, dispatch));
// console.log("\n\n========================================================== STATE:\n"+JSON.stringify(state.markers));
return state; return state;
} }

12
src/app/screens/MapFeedScreen.js

@ -16,10 +16,8 @@ export default function MapFeedScreen(props) {
const focusChanged = attachFocusToQuery(); const focusChanged = attachFocusToQuery();
//const [error, setError] = useState(false); //const [error, setError] = useState(false);
const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
//const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
//console.log(markersdb);
const [dataOptionsToShow, setDataOptionsToShow] = useState({ const [dataOptionsToShow, setDataOptionsToShow] = useState({
oficial: { oficial: {
automaticPluviometer: false, automaticPluviometer: false,
@ -35,14 +33,6 @@ export default function MapFeedScreen(props) {
}); });
const markers = useSocketMarkers(); const markers = useSocketMarkers();
console.log("\n\n============================================Markers:\n "+JSON.stringify(markers));
//console.log(markers);
//const markers = getFormsAnswers(dataOptionsToShow, focusChanged);
// useEffect(() => {
// setMarkers(getFormsAnswers(dataOptionsToShow, focusChanged, data));
// }, [dataOptionsToShow, focusChanged]);
//console.log(markers);
// useEffect(() => { // useEffect(() => {
// loadForms(); // loadForms();

Loading…
Cancel
Save