Increasing map zoom and setting a marker to user location.

src/app/config/dimensions.js

@@ -1,6 +1,7 @@
 import { Dimensions } from "react-native";
 
 const screen_width = Dimensions.get("window").width;
+const screen_height = Dimensions.get("window").height;
 
 const dimensions = {
   text: {
@@ -30,4 +31,4 @@ function scaleDimsFromWidth(iw, ih, scale_w) {
   return { width: sw, height: sh };
 }
 
-export { screen_width, scaleDimsFromWidth, dimensions };
+export { screen_width, screen_height, scaleDimsFromWidth, dimensions };

src/app/hooks/selectFromDB.js

@@ -5,7 +5,7 @@ import assets from "../config/assets";
 
 const custom_assets = {
   pluviometer: assets.pluviometer,
-  floodZones: assets.floodZones.floodIcon,
+  floodZones: assets.floodZones,
   riverLevel: ["low", "normal", "high", "flooding"].map((key) => {
     return assets.riverLevel[key];
   }),
@@ -23,7 +23,7 @@ const custom_assets = {
 
 // NOTE: For debug pourposes, every icon will be placed some `offset` from
 // another. In final release, offset must be assigned to 0.0
-var offset = 0.001;
+var offset = 0.0001;
 var displacement = 0;
 
 var ID = 0;
@@ -50,7 +50,7 @@ function partsePluviometer(row) {
   }
 
   displacement += offset;
-  return {
+  const i = {
     ID: ++ID,
     title: "Pluviometro",
     coordinate: {
@@ -60,6 +60,8 @@ function partsePluviometer(row) {
     image: custom_assets.pluviometer,
     description: row["Pluviometer"],
   };
+  console.log(i);
+  return i;
 }
 
 function parseFloodZones(row) {
@@ -75,7 +77,10 @@ function parseFloodZones(row) {
       latitude: row["Latitude"],
       longitude: row["Longitude"] + displacement,
     },
-    image: custom_assets.floodIcon,
+    image:
+      row["Passable"] == 0
+        ? custom_assets.floodZones.passable
+        : custom_assets.floodZones.notPassable,
     description: row["Description"],
   };
 }
@@ -86,7 +91,7 @@ function parseRiverLevel(row) {
   }
 
   displacement += offset;
-  const riverLevel = ["Baixo", "Rio normal", "Alto", "Transfordando"];
+  const riverLevel = ["Baixo", "Rio normal", "Alto", "Transbordando"];
   const riverIdx = row["RiverIdx"];
   return {
     ID: ++ID,

src/app/hooks/useLocation.js

@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 import * as Location from "expo-location";
 
-export default function useLocation(defaultLocation = { longitude: 0.0, latitude: 0.0 }) {
+export default function useLocation(
+  defaultLocation = { longitude: 0.0, latitude: 0.0 }
+) {
   const [location, setLocation] = useState(defaultLocation);
 
   const getLocation = async () => {
@@ -15,8 +17,7 @@ export default function useLocation(defaultLocation = { longitude: 0.0, latitude
       } = await Location.getLastKnownPositionAsync();
 
       setLocation({ latitude, longitude });
-    } 
-    catch (error) {
+    } catch (error) {
       console.log(error);
     }
   };

src/app/screens/MapFeedScreen.js

@@ -3,6 +3,7 @@ import { StyleSheet, View } from "react-native";
 import MapView from "react-native-maps";
 
 import colors from "../config/colors";
+import { screen_width, screen_height } from "../config/dimensions";
 
 import useLocation from "../hooks/useLocation";
 import useMarkers from "../hooks/selectFromDB";
@@ -18,6 +19,13 @@ function MapFeedScreen(props) {
   const hasToQuery = attachFocusToQuery();
   const markers = useMarkers(hasToQuery);
 
+  // console.log(markers);
+  const map_scale = 0.005;
+  const lat_long_delta = {
+    latitudeDelta: map_scale,
+    longitudeDelta: map_scale * (screen_width / screen_height),
+  };
+
   return (
     <View style={styles.container}>
       <MapView
@@ -25,19 +33,23 @@ function MapFeedScreen(props) {
         initialRegion={{
           latitude: -22.1070263,
           longitude: -51.3948396,
-          latitudeDelta: 0.0922,
-          longitudeDelta: 0.0421,
+          ...lat_long_delta,
         }}
         region={{
           latitude: location["latitude"],
           longitude: location["longitude"],
-          latitudeDelta: 0.0922,
-          longitudeDelta: 0.0421,
+          ...lat_long_delta,
         }}
       >
         {[...markers.markers].map(({ ID, ...val }) => {
           return <MapMarker key={ID.toString()} {...val} />;
         })}
+        <MapView.Marker
+          coordinate={{
+            latitude: location["latitude"],
+            longitude: location["longitude"],
+          }}
+        />
       </MapView>
     </View>
   );