'React Native Map : How to fit Polyline coordinates to screen?
I am working with react native map and i used polyline and Marker but when i display polyline to map it not fit to screen its just shows some part of line in screen other i have to scroll then i see, so how to fit polyline coordinatin inside current screen .
But i want to make polyline look it like this. so how can i do it
here is my code look likes.
<MapView
style={styles.mapStyle}
provider={PROVIDER_GOOGLE}
minZoomLevel={0}
paddingAdjustmentBehavior="automatic"
ref={(ref) => {
this.mapRef = ref;
}}
onLayout={() =>
this.mapRef.fitToCoordinates(this.state.cord, {
edgePadding: {top: 50, right: 10, bottom: 10, left: 10},
animated: false,
})
}
onMapReady={this.onMapReadyHandler.bind(this)}
showsUserLocation={true}
fitToElements={true}
region={{
latitude: this.state.start[0],
longitude: this.state.start[1],
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
initialRegion={{
latitude: this.state.start[0],
longitude: this.state.start[1],
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<Circle
center={{
latitude: this.state.start[0],
longitude: this.state.start[1],
}}
radius={40}
strokeColor={'blue'}
strokeWidth={6}
fillColor={'#fff'}
zIndex={1}
/>
{speed.map((d) =>
d.segments.map((c, i) => (
<Polyline
key={i}
coordinates={c.coordinates.map((c) => ({
latitude: c[0],
longitude: c[1],
}))}
strokeColor={c.color}
strokeWidth={6}></Polyline>
)),
)}
</MapView>
Thanks in advance
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|