react-native-maps#Polyline JavaScript Examples
The following examples show how to use
react-native-maps#Polyline.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Map.js From timetable with MIT License | 5 votes |
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>
)
}
Example #2
Source File: index.js From pandoa with GNU General Public License v3.0 | 4 votes |
MapHistory = ({ positions, setDetailTrigger, warnings }) => {
const lines = positions.map(point => {
return {
latitude: point.lat ? point.lat : 0,
longitude: point.lng ? point.lng : 0
};
});
const connectedPoints = warnings;
var concatPoints = [];
connectedPoints.forEach((position, i) => {
const foundSimilar = concatPoints.findIndex(existingPoint => {
const diff = diffCalc(position, existingPoint);
if (diff.distance <= 100 && diff.timeDifference <= 1000 * 60 * 60 * 2) {
return true;
}
});
if (foundSimilar === -1) {
concatPoints.push(position);
}
});
const circle = positions.map((point, index) => {
const coordinates = {
longitude: point.lng,
latitude: point.lat
};
return (
<Circle
key={index}
strokeColor={commonColor.brandPrimary}
center={coordinates}
fillColor={commonColor.brandPrimary}
radius={Platform.OS === "ios" ? 0.3 : 0.1}
/>
);
});
const connectedLines = connectedPoints.map((point, index) => {
if (point.matches && point.matches.length >= 1) {
return point.matches.map((e, i) => (
<Polyline
key={`${i}-${index}`}
coordinates={[
{ latitude: point.position.lat, longitude: point.position.lng },
{ latitude: e.lat, longitude: e.lng }
]}
strokeColor="rgba(255,0,0,0.1)" // fallback for when `strokeColors` is not supported by the map-provider
strokeColors={["rgba(255,0,0,0.5)", "rgba(255,168,12,0.8)"]}
strokeWidth={15.5}
/>
));
}
});
const points = connectedPoints.map((point, index) => {
const coordinates = {
longitude: point.position.lng,
latitude: point.position.lat
};
return (
<Marker
key={index}
anchor={Platform.OS === "ios" ? { x: 0, y: 0 } : { x: 0.53, y: 0.53 }}
coordinate={coordinates}
onCalloutPress={() => setDetailTrigger(point)}
title={`${new Date(point.position.time).toLocaleDateString(
"de-DE",
options
)}`}
description={contactLengthText(point.duration)}
>
{point.matches.length >= 1 ? (
<View style={styles.matchCircle}>
<View style={styles.matchCircleBackground}></View>
<View style={styles.matchCircleInner}></View>
</View>
) : (
<View style={styles.historyCircle} />
)}
</Marker>
);
});
//
//
//
return (
<React.Fragment>
<Polyline
coordinates={lines}
geodesic={true}
// strokeColor={Colors.tintColor} fallback for when `strokeColors` is not supported by the map-provider
strokeWidth={2}
strokeColor="rgba(0,122,255,0.7)"
/>
{circle}
{connectedLines}
{points}
</React.Fragment>
);
}