import React from 'react' import { Marker, Polyline } from 'react-native-maps' import MapView from 'react-native-map-clustering' import night from '../assets/night.json' import day from '../assets/day.json' /** * Google Map **/ const Map = ({ polylineSource, markerSource, onPressHandler, isDark }) => { // MapView Markers const markers = () => { if (markerSource.length > 0) { return markerSource.map((marker, index) => { const coords = { latitude: marker.Lat, longitude: marker.Lon } return ( <Marker key={index} coordinate={coords} title={marker.Name} description={' '} onPress={() => onPressHandler(marker.StopId, marker.Name)} pinColor={'#de373d'} tracksViewChanges={false} icon={require('../assets/images/b.png')} /> ) }) } } // MapView Polylines const polylines = () => { if (polylineSource != null) { return ( <Polyline coordinates={polylineSource} strokeWidth={4} strokeColor='#fff829' /> ) } } return ( <MapView style={{ flex: 1 }} provider='google' initialRegion={{ latitude: 41.7330215, longitude: 44.7989883, latitudeDelta: 0.35, longitudeDelta: 0.25 }} clusterColor={isDark ? 'rgba(255, 0, 0, 0.4)' : 'rgba(255, 0, 0, 0.5)'} radius={170} extent={700} showsCompass={true} customMapStyle={isDark ? night : day} showsUserLocation={true} showsMyLocationButton={true} followsUserLocation={true} > {markers()} {polylines()} </MapView> ) } export default Map