diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..48e341a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
diff --git a/src/App.js b/src/App.js
index 9ade42e..5faf779 100644
--- a/src/App.js
+++ b/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);
   };
 
diff --git a/src/app/api/Websockets/SocketClient.js b/src/app/api/Websockets/SocketClient.js
new file mode 100644
index 0000000..469eaf7
--- /dev/null
+++ b/src/app/api/Websockets/SocketClient.js
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { useFiltering } from '../../hooks/useFiltering';
+
+function isRequestedValue(item, renderOptions) {
+  if (
+    (item.name == "pluviometer" && renderOptions.citzen.pluviometer) ||
+    (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 == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas)
+  ) {
+    return true;
+
+  }
+}
+
+function verify_existingSockets(formType, renderOptions) {
+  if (formType.response == null && isRequestedValue(formType, renderOptions)) {
+    console.log("Criou socket: "+formType.name);
+    const socket = new WebSocket("wss://waterproofing.geog.uni-heidelberg.de/wss/hot/data?" + formType.endpoint);
+
+    socket.onmessage = ({ data }) => {
+      formType.response = data;
+    }
+  }
+ /* else {
+    console.log("\nresposta preenchida");
+  }*/
+}
+
+
+export default function SocketClient(dataOptionObject, focusChanged, data) {
+  
+
+ // useEffect(() => {
+    data.map((e) => verify_existingSockets(e, dataOptionObject));
+
+//  }, []);
+  console.log("data socket client: "+ JSON.stringify(data));
+  return data;
+};
+
+
diff --git a/src/app/components/MapMarkerList.js b/src/app/components/MapMarkerList.js
index 4d7d36c..55f8566 100644
--- a/src/app/components/MapMarkerList.js
+++ b/src/app/components/MapMarkerList.js
@@ -1,17 +1,19 @@
 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 == "river" && renderOptions.citzen.riverFlood) ||
-    (item.name == "flood" && renderOptions.citzen.floodRisk)
+    (item.name == "riverFlood" && renderOptions.citzen.riverFlood) ||
+    (item.name == "floodZones" && renderOptions.citzen.floodRisk) ||
+    (item.name == "susceptibilityAreas" && renderOptions.oficial.susceptibilityAreas)
   );
 }
 
 function MapMarkerList({ markers, renderOptions }) {
   if (!markers) return null;
 
+
   return [...markers.markers].filter(([_, item]) => {
     return isRequestedValue(item, renderOptions);
   });
diff --git a/src/app/components/MapModal.js b/src/app/components/MapModal.js
index e3db450..abaf187 100644
--- a/src/app/components/MapModal.js
+++ b/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);
   }
diff --git a/src/app/components/map/LeafLetMap.js b/src/app/components/map/LeafLetMap.js
index d43b0f5..932a912 100644
--- a/src/app/components/map/LeafLetMap.js
+++ b/src/app/components/map/LeafLetMap.js
@@ -75,21 +75,36 @@ 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}], {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(coordinates);
+  mapRef.injectJavaScript(`
+  if (!(${ID} in polygons)) {
+    polygons[${ID}] = L.polygon(${coordinates}, { ID: ${ID}});     
+    
+    polygons[${ID}].addTo(map);
+  }
+  `);
+  /* mapRef.injectJavaScript(`
+   
+   var polygon = L.polygon(${coordinates}).addTo(map);
+   `);*/
+}
 
 export {
   loadHTMLFile,
   handleEvent,
   insertMarker,
+  insertPolygon,
   goToRegion,
   setViewCode,
   deleteAllMarkers,
diff --git a/src/app/components/map/Map.html b/src/app/components/map/Map.html
index 7d1d8eb..5017ae0 100644
--- 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);
diff --git a/src/app/components/map/Map.js b/src/app/components/map/Map.js
index 337e94d..b22423f 100644
--- a/src/app/components/map/Map.js
+++ b/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);
diff --git a/src/app/components/map/OpenStreetMap.js b/src/app/components/map/OpenStreetMap.js
index e48143e..54bf220 100644
--- 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";
@@ -41,21 +42,10 @@ export default function OpenStreetMap({
   markers,
   clickListener,
   moveEndListener,
+  dataOptionsToShow,
+  setDataOptionsToShow,
   isForm = false,
 }) {
-  const [dataOptionsToShow, setDataOptionsToShow] = useState({
-    oficial: {
-      automaticPluviometer: false,
-      susceptibilityAreas: false,
-    },
-    citzen: {
-      floodRisk: true,
-      pluviometer: true,
-      rain: false,
-      floodZones: true,
-      riverFlood: true,
-    },
-  });
 
   const [mapRef, setMapRef] = useState(null);
   const webviewContent = html_content;
@@ -66,7 +56,6 @@ export default function OpenStreetMap({
     markers: markers,
     renderOptions: dataOptionsToShow,
   });
-  // console.log(markersList)
 
   // markersList &&
   //   mapRef &&
@@ -80,10 +69,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")
+            insertPolygon(mapRef, val[1].ID, val[1].coordinate);
+          }
+          else {
+            insertMarker(mapRef, val[1].ID, val[1].coordinate, val[1].image);
+          }
+        });
     }
   }, [markersList, dataOptionsToShow]);
 
diff --git a/src/app/hooks/useFiltering.js b/src/app/hooks/useFiltering.js
new file mode 100644
index 0000000..96b0f11
--- /dev/null
+++ b/src/app/hooks/useFiltering.js
@@ -0,0 +1,41 @@
+function useFiltering() {
+    const filters = {
+        "forms": [
+            {
+                name: "floodZones",
+                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=5",
+                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=5",
+                response: null,
+            },
+            {
+                name: "automaticPluviometer",
+                endpoint: "type=PLUVIOMETERS_OFFICIAL&lat=-9.98132&lon=-67.81544&buffer=5000&limit=5",
+                response: null,
+            }
+        ]
+
+    }
+
+    return filters;
+}
+
+export { useFiltering };
diff --git a/src/app/hooks/useFormsAswers.js b/src/app/hooks/useFormsAswers.js
new file mode 100644
index 0000000..8d77684
--- /dev/null
+++ b/src/app/hooks/useFormsAswers.js
@@ -0,0 +1,151 @@
+import React, { useEffect, useState } from "react";
+import * as Location from 'expo-location';
+import SocketClient from "../api/Websockets/SocketClient";
+import assets from "../config/assets";
+import PinIntransitavel from "../assets/floodZonesAssets/PinIntransitavel";
+import PinTransitavel from "../assets/floodZonesAssets/PinTransitavel";
+
+
+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];
+    }
+  ),
+  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) {
+  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) {
+  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: "Titulo", //response.fieldsanswerssituation
+     address: "Endereço",//response.fieldsanswerseventaddress,
+    coordinate: { coordinate },
+     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: "Titulo", //response.fieldsanswerssituation
+    address: "Endereço",//response.fieldsanswerseventaddress,
+    coordinate: {
+      latitude: formsanswersgeom[1],
+      longitude: formsanswersgeom[0],
+    },
+    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 != 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));
+
+  }
+
+}
+
+const getFormsAnswers = (dataOptionObject, focusChanged, data) => {
+  var markers = { markers: new Map() };
+  const answers = SocketClient(dataOptionObject, focusChanged, data);
+  
+  // console.log("\n\nAnswers: " + JSON.stringify(answers));
+
+  answers.forEach((r) => verifyResponse(markers, r));//buildMarkerObject(markers.markers, r));
+ // console.log("\n\nMarkers: " + JSON.stringify(markers));
+  return markers;
+
+}
+
+
+
+
+
+
+
+export { getFormsAnswers };
diff --git a/src/app/screens/MapFeedScreen.js b/src/app/screens/MapFeedScreen.js
index c9c9679..d27a048 100644
--- a/src/app/screens/MapFeedScreen.js
+++ b/src/app/screens/MapFeedScreen.js
@@ -6,13 +6,38 @@ import { MapMarkerList } from "../components/MapMarkerList";
 import formsApi from "../api/getforms";
 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);
 
   const focusChanged = attachFocusToQuery();
-  const [error, setError] = useState(false);
-  const markers = useMarkers(focusChanged);
+  //const [error, setError] = useState(false);
+ const markersdb = useMarkers(focusChanged);// (apagar useMarker - não será mais usado)
+ const [data, _] = useState(useFiltering().forms);
+ //console.log(markersdb);
+
+  const [dataOptionsToShow, setDataOptionsToShow] = useState({
+    oficial: {
+      automaticPluviometer: false,
+      susceptibilityAreas: false,
+    },
+    citzen: {
+      floodRisk: false,
+      pluviometer: false,
+      rain: true,
+      floodZones: false,
+      riverFlood: false,
+    },
+  });  
+  const [markers, setMarkers] = useState(getFormsAnswers(dataOptionsToShow, focusChanged, data));
+   useEffect(() => {
+    setMarkers(getFormsAnswers(dataOptionsToShow, focusChanged, data));
+   }, [dataOptionsToShow, focusChanged]);
+  console.log(markers);
+
 
   // useEffect(() => {
   //   loadForms();
@@ -34,6 +59,8 @@ export default function MapFeedScreen(props) {
       <OpenStreetMap
         markers={markers}
         centerUserLocation={true}
+        dataOptionsToShow={dataOptionsToShow}
+        setDataOptionsToShow={setDataOptionsToShow}
       />
     </View>
   );