forked from cemaden-educacao/WPD-MobileApp
GabrielTrettel
3 years ago
8 changed files with 171 additions and 194 deletions
-
81src/app/components/MapMarker.js
-
36src/app/components/MapMarkerList.js
-
29src/app/components/MapModal.js
-
5src/app/components/SelfClosingModal.js
-
12src/app/components/map/LeafLetMap.js
-
62src/app/components/map/OpenStreetMap.js
-
125src/app/hooks/selectFromDB.js
-
15src/app/screens/MapFeedScreen.js
@ -1,76 +1,15 @@ |
|||
import React, { useState } from "react"; |
|||
import { View, StyleSheet, Image } from "react-native"; |
|||
import MapView from "react-native-maps"; |
|||
import colors from "../config/colors"; |
|||
import { dimensions } from "../config/dimensions"; |
|||
import React, { useState, useEffect } from "react"; |
|||
import { View } from "react-native"; |
|||
import MapModal from "./MapModal"; |
|||
|
|||
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); |
|||
|
|||
export default function MapMarker(markerListener, setMarkerListener, markers) { |
|||
return ( |
|||
<MapView.Marker |
|||
coordinate={props.coordinate} |
|||
onPress={() => setIsModalVisible(!isModalVisible)} |
|||
> |
|||
<View> |
|||
<Image |
|||
style={styles.markerPoint} |
|||
resizeMode="stretch" |
|||
source={props.image} |
|||
/> |
|||
|
|||
<MapModal |
|||
isVisible={isModalVisible} |
|||
setIsVisible={setIsModalVisible} |
|||
{...props} |
|||
/> |
|||
</View> |
|||
</MapView.Marker> |
|||
<View> |
|||
<MapModal |
|||
markerToRender={} |
|||
setMarkerToRender={setIsModalVisible} |
|||
markers={markers} |
|||
/> |
|||
</View> |
|||
); |
|||
} |
|||
|
|||
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: markerSizeHeigth, |
|||
width: markerSizeWidth, |
|||
}, |
|||
}); |
Write
Preview
Loading…
Cancel
Save
Reference in new issue