Browse Source

Merge branch 'custom-map-marker'

master
GabrielTrettel 4 years ago
parent
commit
e537b0a36c
  1. 90
      src/app/components/MapMarker.js
  2. 1
      src/app/config/colors.js
  3. 5
      src/app/config/dimensions.js
  4. 6
      src/app/hooks/selectFromDB.js
  5. 3
      src/package.json
  6. 4453
      src/yarn.lock

90
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; 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 ( 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> <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> </View>
</Callout>
</MapView.Marker> </MapView.Marker>
); );
} }
const styles = StyleSheet.create({ 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: { markerPoint: {
alignSelf: "center", alignSelf: "center",
height: markerSize, height: markerSize,
width: 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>
* )}
*
*/

1
src/app/config/colors.js

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

5
src/app/config/dimensions.js

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

6
src/app/hooks/selectFromDB.js

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

3
src/package.json

@ -41,7 +41,8 @@
"react-native-safe-area-context": "3.1.4", "react-native-safe-area-context": "3.1.4",
"react-native-screens": "~2.10.1", "react-native-screens": "~2.10.1",
"react-native-simple-dialogs": "^1.4.0", "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-native-web": "~0.13.12",
"react-navigation": "^4.4.3", "react-navigation": "^4.4.3",
"react-navigation-tabs": "^2.10.1", "react-navigation-tabs": "^2.10.1",

4453
src/yarn.lock
File diff suppressed because it is too large
View File

Loading…
Cancel
Save