|
@ -1,10 +1,8 @@ |
|
|
import React, { useState } from "react"; |
|
|
import React, { useState } from "react"; |
|
|
import { View, StyleSheet, Image, Text } from "react-native"; |
|
|
|
|
|
import MapView, { Callout } from "react-native-maps"; |
|
|
|
|
|
|
|
|
import { View, StyleSheet, Image } from "react-native"; |
|
|
|
|
|
import MapView from "react-native-maps"; |
|
|
import colors from "../config/colors"; |
|
|
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"; |
|
|
|
|
|
|
|
|
import { dimensions } from "../config/dimensions"; |
|
|
import MapModal from "./MapModal"; |
|
|
import MapModal from "./MapModal"; |
|
|
const markerSize = 30; |
|
|
const markerSize = 30; |
|
|
|
|
|
|
|
@ -12,34 +10,23 @@ export default function MapMarker(props) { |
|
|
const [isModalVisible, setIsModalVisible] = useState(false); |
|
|
const [isModalVisible, setIsModalVisible] = useState(false); |
|
|
|
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<MapView.Marker coordinate={props.coordinate}> |
|
|
|
|
|
|
|
|
<MapView.Marker |
|
|
|
|
|
coordinate={props.coordinate} |
|
|
|
|
|
onPress={() => setIsModalVisible(!isModalVisible)} |
|
|
|
|
|
> |
|
|
<View> |
|
|
<View> |
|
|
<Image |
|
|
<Image |
|
|
style={styles.markerPoint} |
|
|
style={styles.markerPoint} |
|
|
resizeMode="stretch" |
|
|
resizeMode="stretch" |
|
|
source={props.image} |
|
|
source={props.image} |
|
|
/> |
|
|
/> |
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
<MapModal |
|
|
<MapModal |
|
|
isVisible={isModalVisible} |
|
|
isVisible={isModalVisible} |
|
|
setIsVisible={setIsModalVisible} |
|
|
setIsVisible={setIsModalVisible} |
|
|
{...props} |
|
|
{...props} |
|
|
/> |
|
|
/> |
|
|
|
|
|
|
|
|
<Callout |
|
|
|
|
|
tooltip |
|
|
|
|
|
style={{ width: 250 }} |
|
|
|
|
|
onPress={() => setIsModalVisible(!isModalVisible)} |
|
|
|
|
|
> |
|
|
|
|
|
<View> |
|
|
|
|
|
<View style={styles.container}> |
|
|
|
|
|
<Text style={styles.title}>{props.title}</Text> |
|
|
|
|
|
<Text style={styles.description}>{props.description}</Text> |
|
|
|
|
|
</View> |
|
|
</View> |
|
|
<View style={styles.arrow}></View> |
|
|
|
|
|
</View> |
|
|
|
|
|
</Callout> |
|
|
|
|
|
</MapView.Marker> |
|
|
</MapView.Marker> |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
@ -84,21 +71,3 @@ const styles = StyleSheet.create({ |
|
|
width: markerSize, |
|
|
width: markerSize, |
|
|
}, |
|
|
}, |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
/* |
|
|
|
|
|
* 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> |
|
|
|
|
|
* )} |
|
|
|
|
|
* |
|
|
|
|
|
*/ |
|
|
|