react-native-maps-directions
react-native-maps-directions copied to clipboard
Consider separating google maps API from Visual component
trafficstars
I think this is better if someone wants to keep updating a route.
IMO relying on component render and updates seem flimsy but I can maybe see the appeal of rendering something once.
Your functions within the component are already sort of separated. Here's a working example of the more complete example if you were to separate the API
...
componentDidMount() {
mapDirections({
origin: base.address,
waypoints: addresses,
destination: base.address,
apikey: GOOGLE_MAPS_APIKEY,
optimizeWaypoints: false,
}).then(result => {
this.setState({directionResults: result})
const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
this.mapView.fitToCoordinates(result.coordinates, {
edgePadding: {
right: (width / 20),
bottom: (height / 20),
left: (width / 20),
top: (height / 20),
}
});
}).catch(err => {
throw err
})
}
renderMarkers() {
if(!this.state.directionResults) return;
return <MapView.Polyline coordinates={this.state.directionResults.coordinates} strokeColor="hotpink" strokeWidth={3}/>
}
render() {
<MapView>
{this.renderMarkers()}
<MapView/>
}
...