67 lines
1.9 KiB
JavaScript
67 lines
1.9 KiB
JavaScript
import React from 'react';
|
|
import {useState, useEffect} from 'react';
|
|
import {ScrollView, StyleSheet, Text, View, Dimensions, Button, Image, TextInput, TouchableOpacity, ActivityIndicator} from 'react-native';
|
|
import Theme from '../../../../components/theme.style.js';
|
|
import Assets from '../../../../components/assets.manager.js';
|
|
import Icon from '../../../../components/icons';
|
|
import DB from '../../../../components/storage';
|
|
import REQUEST from '../../../../components/api';
|
|
import {Divider} from 'react-native-elements';
|
|
|
|
import Geolocation from '@react-native-community/geolocation';
|
|
import SlidingUpPanel from 'rn-sliding-up-panel';
|
|
import MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
|
|
|
|
const styles = {
|
|
mapContainer: {
|
|
...StyleSheet.absoluteFillObject,
|
|
flex: 1,
|
|
marginTop: 60,
|
|
height: Theme.screen.h - 15,
|
|
width: Theme.screen.w,
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'center',
|
|
},
|
|
map: {
|
|
...StyleSheet.absoluteFillObject,
|
|
height: Theme.screen.h - 150,
|
|
width: Theme.screen.w,
|
|
}
|
|
}
|
|
|
|
export default function RenderMap(props){
|
|
|
|
const defaultRegion = {
|
|
latitude: 14.599512,
|
|
longitude: 120.984222,
|
|
latitudeDelta: 12,
|
|
longitudeDelta: 6,
|
|
}
|
|
|
|
return (
|
|
<MapView
|
|
ref={props.getRef}
|
|
// provider={PROVIDER_GOOGLE}
|
|
provider={null}
|
|
loadingEnabled={true}
|
|
style={styles.map}
|
|
showsUserLocation={true}
|
|
region={props.region || defaultRegion}
|
|
onMapReady={props.onMapReady}
|
|
>
|
|
{props.markers.map((marker, i) => (
|
|
<Marker
|
|
key={i}
|
|
coordinate={marker.latlng}
|
|
title={marker.name}
|
|
description={marker.address}
|
|
image={Assets.icons.stationMapPin}
|
|
onPress={e => {
|
|
props.onMarkerClick ? props.onMarkerClick(marker) : console.log('marker is pressed', marker)
|
|
}}
|
|
/>
|
|
))}
|
|
</MapView>
|
|
)
|
|
}
|