Merge branch 'custom-map-marker'

src/app/components/MapMarker.js

@@ -1,27 +1,95 @@
-import React from "react";
-import { View, StyleSheet, Image } from "react-native";
-import MapView from "react-native-maps";
-
+import React, { useState } from "react";
+import { View, StyleSheet, Image, Text } from "react-native";
+import MapView, { Callout } from "react-native-maps";
+import colors from "../config/colors";
+import assets from "../config/assets";
+import { dimensions, screen_height, screen_width } from "../config/dimensions";
+import { Svg, Image as ImageSvg } from "react-native-svg";
 const markerSize = 30;
 
-export default function MapMarker({ title, image, coordinate, ...props }) {
-  // console.log({ title, image, coordinate, ...props });
+export default function MapMarker({
+  title,
+  image,
+  pictures,
+  coordinate,
+  description,
+  ...props
+}) {
+  console.log(pictures);
+  const pictures_s = JSON.parse(pictures);
   return (
-    <MapView.Marker coordinate={coordinate} title={title} {...props}>
+    <MapView.Marker coordinate={coordinate} {...props}>
+      <View>
+        <Image style={styles.markerPoint} resizeMode="stretch" source={image} />
+      </View>
+      <Callout tooltip style={{ width: 250 }}>
         <View>
-        <Image style={styles.markerPoint} source={image} resizeMode="stretch" />
+          <View style={styles.container}>
+            <Text style={styles.title}>{title}</Text>
+            <Text style={styles.description}>{description}</Text>
+          </View>
+          <View style={styles.arrow}></View>
         </View>
+      </Callout>
     </MapView.Marker>
   );
 }
 
 const styles = StyleSheet.create({
+  title: {
+    fontWeight: "bold",
+    fontSize: dimensions.text.secondary,
+    alignSelf: "center",
+    paddingBottom: dimensions.spacing.minimal_padding,
+  },
+  description: {
+    fontSize: dimensions.text.default,
+  },
+  arrow: {
+    alignSelf: "center",
+    borderTopWidth: 15,
+    borderRightWidth: 10,
+    borderBottomWidth: 0,
+    borderLeftWidth: 10,
+    borderTopColor: colors.lightGray,
+    borderRightColor: "transparent",
+    borderBottomColor: "transparent",
+    borderLeftColor: "transparent",
+    paddingBottom: 5,
+  },
+
+  container: {
+    flexDirection: "column",
+    alignSelf: "center",
+    backgroundColor: colors.lightestGray,
+    borderColor: colors.lightGray,
+    borderRadius: 6,
+    borderWidth: 4,
+    borderTopWidth: 2,
+    padding: dimensions.spacing.minimal_padding,
+    width: 200,
+  },
   markerPoint: {
     alignSelf: "center",
     height: markerSize,
     width: markerSize,
   },
-  title: {
-    fontWeight: "400",
-  },
 });
+
+/*
+ * NOTE: Code for displaying images inside MapMarker. Leaved here for possible
+ * future needs
+ *
+ *
+ *   {pictures_s.length > 0 && (
+ *     <Svg width={240} height={120}>
+ *       <ImageSvg
+ *         width={"100%"}
+ *         height={"100%"}
+ *         preserveAspectRatio="xMidYMid stretch"
+ *         href={{ uri: pictures_s[0] }}
+ *       />
+ *     </Svg>
+ *   )}
+ *
+ */

src/app/config/colors.js

@@ -9,4 +9,5 @@ export default {
   danger: "#ff5252",
   lightGray: "#d3d3d3",
   gray: "gray",
+  lightestGray: "#F0F0F0",
 };

src/app/config/dimensions.js

@@ -10,6 +10,11 @@ const dimensions = {
     default: 16,
     tertiary: 12,
   },
+
+  spacing: {
+    normal_padding: 10,
+    minimal_padding: 5,
+  },
 };
 
 /* imageScaleToSize (iw, ih, scale_w)

src/app/hooks/selectFromDB.js

@@ -59,6 +59,7 @@ function partsePluviometer(row) {
     },
     image: custom_assets.pluviometer,
     description: row["Precipitation"] + "mm" + ",  " + row["Date"],
+    pictures: row["Images"],
   };
   console.log(i);
   return i;
@@ -82,6 +83,7 @@ function parseFloodZones(row) {
         ? custom_assets.floodZones.passable
         : custom_assets.floodZones.notPassable,
     description: row["Description"],
+    pictures: row["Images"],
   };
 }
 
@@ -102,6 +104,7 @@ function parseRiverLevel(row) {
     },
     image: custom_assets.riverLevel[riverIdx],
     description: row["Description"],
+    pictures: row["Images"],
   };
 }
 
@@ -129,7 +132,8 @@ function parseRainLevel(row) {
       longitude: row["Longitude"] + displacement,
     },
     image: custom_assets.rainLevel[rainIdx],
-    description: row["Description"],
+    description: rainLevel[rainIdx],
+    pictures: row["Images"],
   };
 }
 

src/package.json

@@ -41,7 +41,8 @@
     "react-native-safe-area-context": "3.1.4",
     "react-native-screens": "~2.10.1",
     "react-native-simple-dialogs": "^1.4.0",
-    "react-native-svg": "12.1.0",
+    "react-native-svg": "^12.1.0",
+    "react-native-walkthrough-tooltip": "^1.1.11",
     "react-native-web": "~0.13.12",
     "react-navigation": "^4.4.3",
     "react-navigation-tabs": "^2.10.1",