I'm hand drawing a Polyline but it's really slow, is it a way to improve it? When the finger moves slow over the map the Polyline really gets rendered slowly.
I'm using: "react-native": "0.59.10","react-native-map-clustering": "^3.1.2","react-native-maps": "^0.25.0".
Here is the code I'm using:
constructor(args) {
this.state={
regionLocal: {latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.1022,
longitudeDelta: 0.0521
},
polylines: [],
editing: null
}
}
onPanDrag(e) {
const { editing } = this.state;
if (!editing) {
this.setState({
editing: {
id: id++,
coordinates: [e.nativeEvent.coordinate],
},
});
} else {
this.setState({
editing: {
...editing,
coordinates: [...editing.coordinates, e.nativeEvent.coordinate],
},
});
}
}
render() {
return (
<MapView mapRef={ref => this.map = ref}
style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0
}}
initialRegion={this.state.regionLocal}
showsUserLocation={true}
showsPointsOfInterest={true}
showsBuildings={true}
showsMyLocationButton={false}
loadingEnabled={true}
clusterColor={"#140c98"}
spiderLineColor={"#140c98"}
radius={30}
moveOnMarkerPress={false}
maxZoom={13}
scrollEnabled={false}
onPanDrag={(e)=>{this.onPanDrag(e)}}>
{this.state.polylines.map(polyline => (<Polyline
key={polyline.id}
coordinates={polyline.coordinates}
strokeColor="#000"
fillColor="rgba(255,0,0,0.5)"
strokeWidth={1}
/>
))}
{this.state.editing && (<Polyline
key="editingPolyline"
coordinates={this.state.editing.coordinates}
strokeColor="#F00"
fillColor="rgba(255,0,0,0.5)"
strokeWidth={1}
/>
)}</MapView>
)}Also Here's an example of the way I want it to work:
