hi everyone i'm doing a project and i have a problem in react-native with a piece of code. I have the station status which contains a list of stations that I want to mark (with markers) on the map. How do I use Polyline between one marker and another?
export default class Map extends Component {
constructor(){
super();
this.state=stations:
[{"lat": "45.43331", "lon": "9.241"},
{"lat": "45.4643", "lon": "9.2387"},
{"lat": "45.4847", "lon": "9.23688"},
{"lat": "45.47669", "lon": "9.23217"}]
}
render(){
return(
<View style={styles.container}>
<MapView style={styles.map}
onRegionChange={this.handleRegionChanged}
initialRegion={{
latitude: 45.6835,
longitude: 8.7035,
latitudeDelta: 1,
longitudeDelta: 1,
}}>
<View style={{ position: 'absolute', top: 100, left: 50 }}/>
{this.state.stations.map((marker,item) => (
<MapView.Marker
key={item}
coordinate={{
latitude: Number(marker.lat),
longitude: Number(marker.lon)}}
title={marker.sname}
/>
))}
//this is my problems
{this.state.stations.map((marker,item) => (
<MapView.Polyline
key={item}
coordinates={[{latitude:Number(marker.lat),longitude:Number(marker.lon)}]}
strokeColor="#000" // fallback for when `strokeColors` is not supported by the map-provider
strokeColors={[
'#7F0000',
'#00000000', // no color, creates a "long" gradient between the previous and next coordinate
'#B24112',
'#E5845C',
'#238C23',
'#7F0000'
]}
strokeWidth={4}
/>
))}
</MapView>
</View>
)}
}
}
my code prints the markers correctly but does not draw the lines between one marker and another (with polynes). How can I show on the map the markers corresponding to the stations and draw a line between one marker and another (with Polyline)?