I need to delete the polyline I've drawn on the component when a user performs a new search. Right now I end up with 2+ routes all drawn on the same map instead of the new search displaying only the new route.
I followed this tutorial to render the polyline: https://medium.com/@ali_oguzhan/react-native-maps-with-google-directions-api-bc716ed7a366.
I've tried emptying state(which gives the polyline the coordinates to draw through) in componentWillUnmount and ComponentWillMount. I've also seen references to polyline.remove() but that functionality doesn't exists with react-native-maps or the mapbox/polyline package as far as I can tell. Mapbox appears to have a way to delete layers however I can't find a way to incorporate that into my project.
I'd appreciate any leads about how to delete the polyline.
Here's some of the code. JSX:
<MapView style={styles.map} initialRegion={{
latitude:startLat,
longitude:startLng,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
showsUserLocation={true}
loadingEnabled={true}
loadingIndicatorColor="#e6fef6"
loadingBackgroundColor="#400230"
>
<MapView.Polyline
coordinates={this.state.coords}
strokeWidth={2}
strokeColor="purple"/>
</MapView>
Decoding the Polyline:
async getBikeDirections(startBike, endBike) {
try {
let respBike = await fetch(`https://maps.googleapis.com/maps/api/directions/json?origin=${startBike}&destination=${endBike}&mode=bicycling`)
let respJsonBike = await respBike.json()
let completeBikeSteps = respJsonBike.routes[0].legs[0].steps
let pointsBike = Polyline.decode(respJsonBike.routes[0].overview_polyline.points)
let coordsBike = pointsBike.map((point, index) => {
return {
latitude: point[0],
longitude: point[1]
}
})
let text = completeBikeSteps.map((obj, index) => {
let regex = /(<([^>]+)>)/ig,
result = obj.html_instructions.replace(regex, "")
return result
})
return {
coordsBike,
text
}
} catch (error) {
alert(error)
return error
}
}