Fixing pins in map feed

src/app/components/MapMarker.js

@@ -4,7 +4,10 @@ import MapView from "react-native-maps";
 import colors from "../config/colors";
 import { dimensions } from "../config/dimensions";
 import MapModal from "./MapModal";
-const markerSize = 30;
+
+const imageScale = 0.025;
+const markerSizeWidth = Math.floor(1667 * imageScale);
+const markerSizeHeigth = Math.floor(2501 * imageScale);
 
 export default function MapMarker(props) {
   const [isModalVisible, setIsModalVisible] = useState(false);
@@ -67,7 +70,7 @@ const styles = StyleSheet.create({
   },
   markerPoint: {
     alignSelf: "center",
-    height: markerSize,
-    width: markerSize,
+    height: markerSizeHeigth,
+    width: markerSizeWidth,
   },
 });

src/app/components/MapModal.js

@@ -187,11 +187,7 @@ function componentBody(props) {
 
   return (
     <View style={styles.bodyRow}>
-      <Image
-        style={styles.bodyIcon}
-        resizeMode="stretch"
-        source={props.image}
-      />
+      <Image style={styles.bodyIcon} resizeMode="stretch" source={props.logo} />
 
       <View style={styles.bodyInfo}>
         <Text style={styles.bodyTitle}>{props.title}</Text>

src/app/config/assets.js

@@ -35,51 +35,63 @@ export default {
   floodZones: {
     FloodZonesIcon: FloodZones,
     passable: require("../assets/floodZonesAssets/passable_icon.png"),
+    passable_pin: require("../assets/floodZonesAssets/PinTransitável.png"),
     passable_toggle: require("../assets/floodZonesAssets/Transitavel_c.png"),
 
     passable_2: require("../assets/floodZonesAssets/passable_2.png"),
     notPassable: require("../assets/floodZonesAssets/not_passable_icon.png"),
+    notPassable_pin: require("../assets/floodZonesAssets/PinIntransitável.png"),
     notPassable2: require("../assets/floodZonesAssets/notpassable_2_toggle.png"),
     notPassable_toggle: require("../assets/floodZonesAssets/Intransitavel_c.png"),
   },
+
   riverLevel: {
     RiverIcon: RiverIcon,
 
+    low_pin: require("../assets/river/PinRioBaixo.png"),
     low: require("../assets/river/rio_baixo.png"),
     Low: RiverLow,
     LowToggle: RiverLowToggle,
 
+    normal_pin: require("../assets/river/PinRioNormal.png"),
     normal: require("../assets/river/rio_normal.png"),
     Normal: RiverNormal,
     NormalToggle: RiverNormalToggle,
 
+    high_pin: require("../assets/river/PinRioCheio.png"),
     high: require("../assets/river/rio_alto.png"),
     High: RiverHigh,
     HighToggle: RiverHighToggle,
 
+    flooding_pin: require("../assets/river/PinRioExtravasado.png"),
     flooding: require("../assets/river/rio_transbordando.png"),
     Flooding: RiverFlood,
     FloodingToggle: RiverFloodToggle,
   },
   rainLevel: {
     RainIcon: RainIcon,
+    rain_0_5_pin: require("../assets/rain/PinNublado.png"),
     rain_0_5: require("../assets/rain/sem_chuva.png"),
     Rain_0_5: RainNot,
     Rain_0_5_Toggle: RainNotToggle,
 
     rain_1_5: require("../assets/rain/chuva_fraca.png"),
+    rain_1_5_pin: require("../assets/rain/PinChuvaFraca.png"),
     Rain_1_5: RainLow,
     Rain_1_5_Toggle: RainLowToggle,
 
     rain_2_5: require("../assets/rain/chuva_logo.png"),
+    rain_2_5_pin: require("../assets/rain/PinChuvaModerada.png"),
     Rain_2_5: RainMedium,
     Rain_2_5_Toggle: RainMediumToggle,
 
     rain_3_5: require("../assets/rain/chuva_forte.png"),
+    rain_3_5_pin: require("../assets/rain/PinChuvaForte.png"),
     Rain_3_5: RainHigh,
     Rain_3_5_Toggle: RainHighToggle,
 
     rain_4_5: require("../assets/rain/chuva_muito_forte.png"),
+    rain_4_5_pin: require("../assets/rain/PinChuvaMuitoForte.png"),
     Rain_4_5: RainVeryHigh,
     Rain_4_5_Toggle: RainVeryHighToggle,
 
@@ -94,7 +106,9 @@ export default {
     Weather_5_clean,
   ],
   pluviometer: require("../assets/pluviometer/diario_pluviometrico.png"),
+  pluviometer_pin: require("../assets/pluviometer/PinPluviometroArt.png"),
   officialPluviometer: require("../assets/pluviometer/pluviometroOficial.png"),
+  officialPluviometer_pin: require("../assets/pluviometer/PinPluviometroOficial.png"),
   PluviometerIcon: Pluviometer,
   AppLogoTitle: AppLogoTitle,
 };

src/app/hooks/selectFromDB.js

@@ -23,6 +23,30 @@ const custom_assets = {
   }),
 };
 
+const custom_assets_pin = {
+  pluviometer: assets.pluviometer_pin,
+  officialPluviometer: assets.officialPluviometer_pin,
+  floodZones: {
+    passable: assets.floodZones.passable_pin,
+    not_passable: assets.floodZones.notPassable_pin,
+  },
+  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",
+    "rain_4_5_pin",
+    "rain_5_5_pin",
+  ].map((key) => {
+    return assets.rainLevel[key];
+  }),
+};
+
 // 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.0001;
@@ -61,6 +85,10 @@ function parseFloodZones(row) {
       longitude: row["Longitude"] + displacement,
     },
     image:
+      row["Passable"] == 1
+        ? custom_assets_pin.floodZones.passable
+        : custom_assets_pin.floodZones.not_passable,
+    logo:
       row["Passable"] == 1
         ? custom_assets.floodZones.passable
         : custom_assets.floodZones.notPassable,
@@ -88,7 +116,8 @@ function parseRiverLevel(row) {
       latitude: row["Latitude"],
       longitude: row["Longitude"] + displacement,
     },
-    image: custom_assets.riverLevel[riverIdx],
+    image: custom_assets_pin.riverLevel[riverIdx],
+    logo: custom_assets.riverLevel[riverIdx],
     description: row["Description"],
     date: row["Date"] + " | " + row["Time"],
     pictures: row["Images"],
@@ -121,7 +150,8 @@ function parseRainLevel(row) {
       latitude: row["Latitude"],
       longitude: row["Longitude"] + displacement,
     },
-    image: custom_assets.rainLevel[rainIdx],
+    image: custom_assets_pin.rainLevel[rainIdx],
+    logo: custom_assets.rainLevel[rainIdx],
     description: description,
     date: row["Date"] + " | " + row["Time"],
     pictures: row["Images"],
@@ -209,7 +239,8 @@ function buildRandonData(location, addr) {
 
   return points.map((points) => {
     return {
-      image: custom_assets.officialPluviometer,
+      image: custom_assets_pin.officialPluviometer,
+      logo: custom_assets.officialPluviometer_pin,
       ID: ++ID,
       name: "officialPluviometer",
       title: "Pluviometro Oficial " + i++,
@@ -286,7 +317,8 @@ function useMarkers(isFocused) {
     });
 
     const result = {
-      image: custom_assets.pluviometer,
+      image: custom_assets_pin.pluviometer,
+      logo: custom_assets.pluviometer,
       ID: ++ID,
       name: "pluviometer",
       title: "Pluviometro 1",