Browse Source

Implementing custom Callout of MarMarker component

master
GabrielTrettel 4 years ago
parent
commit
53a94e55e7
  1. 63
      src/app/components/MapMarker.js
  2. 1
      src/app/config/colors.js
  3. 4
      src/app/hooks/selectFromDB.js

63
src/app/components/MapMarker.js

@ -1,21 +1,70 @@
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 { dimensions, screen_height, screen_width } from "../config/dimensions";
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);
return (
<MapView.Marker coordinate={coordinate} title={title} {...props}>
<MapView.Marker coordinate={coordinate} {...props}>
<View>
<Image style={styles.markerPoint} source={image} resizeMode="stretch" />
<Image style={styles.markerPoint} resizeMode="stretch" source={image} />
</View>
<Callout tooltip>
<View>
<View style={styles.container}>
<Text>{"Título: \t" + title}</Text>
<Text>{"Descrição: \t" + description}</Text>
<Image
style={{ width: 200, height: 200 }}
resizeMode="stretch"
source={{ uri: JSON.parse(pictures)[0] }}
/>
</View>
<View style={styles.arrow}></View>
</View>
</Callout>
</MapView.Marker>
);
}
const styles = StyleSheet.create({
arrow: {
alignSelf: "center",
borderTopWidth: 20,
borderRightWidth: 20,
borderBottomWidth: 0,
borderLeftWidth: 20,
borderTopColor: colors.lightGray,
borderRightColor: "transparent",
borderBottomColor: "transparent",
borderLeftColor: "transparent",
paddingBottom: 8,
},
container: {
flexDirection: "column",
alignSelf: "center",
backgroundColor: colors.lightestGray,
borderColor: colors.lightGray,
borderRadius: 6,
borderWidth: 2,
borderBottomWidth: 4,
borderRightWidth: 4,
padding: 15,
width: screen_width * 0.95,
height: screen_height * 0.2,
},
markerPoint: {
alignSelf: "center",
height: markerSize,

1
src/app/config/colors.js

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

4
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,6 +132,7 @@ function parseRainLevel(row) {
},
image: custom_assets.rainLevel[rainIdx],
description: rainLevel[rainIdx],
pictures: row["Images"],
};
}

Loading…
Cancel
Save