react-native-maps-directions icon indicating copy to clipboard operation
react-native-maps-directions copied to clipboard

Consider separating google maps API from Visual component

Open CapsAdmin opened this issue 6 years ago • 0 comments
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/>
  }
...

CapsAdmin avatar Jul 29 '19 09:07 CapsAdmin