diff --git a/README.md b/README.md index 746ec67..c83814e 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,7 @@ Once the directions in between `destination` and `origin` has been fetched, a `M | `optimizeWaypoints` | `boolean` | `false` | Set it to true if you would like Google Maps to re-order all the waypoints to optimize the route for the fastest route. Please be aware that if this option is enabled, you will be billed for a higher rate by Google as stated [here](https://developers.google.com/maps/documentation/javascript/directions#Waypoints). | `directionsServiceBaseUrl` | `string` | _(Google's)_ | Base URL of the Directions Service (API) you are using. By default the Google Directions API is used (`"https://maps.googleapis.com/maps/api/directions/json"`). Usually you won't need to change this. | `region` | `String` | | If you are using strings for **origin** or **destination**, sometimes you will get an incorrect route because Google Maps API needs the region where this places belong to. See [here](https://developers.google.com/maps/documentation/javascript/localization#Region) for more info. +| `autoTransitColor` | `boolean` | `false` | Set it to true if you would like the directions line to be split in to coloured segments based on the transport type. #### More props @@ -114,7 +115,7 @@ Tip: Don't forget to tweak the `language` prop when using localized location nam | Event Name | Returns | Notes |---|---|---| | `onStart` | `{ origin, destination, waypoints: [] }` | Callback that is called when the routing has started. -| `onReady` | `{ distance: Number, duration: Number, coordinates: [], fare: Object }` | Callback that is called when the routing has succesfully finished. Note: distance returned in kilometers and duration in minutes. +| `onReady` | `{ distance: Number, duration: Number, durationText: String, coordinates: [], fare: Object. steps: [] }` | Callback that is called when the routing has succesfully finished. Note: distance returned in kilometers and duration in minutes. | `onError` | `errorMessage` | Callback that is called in case the routing has failed. ## Extended Example diff --git a/src/MapViewDirections.js b/src/MapViewDirections.js index 00e9be0..fb6144a 100644 --- a/src/MapViewDirections.js +++ b/src/MapViewDirections.js @@ -11,7 +11,8 @@ class MapViewDirections extends Component { this.state = { coordinates: null, distance: null, - duration: null, + duration: null, + steps: null }; } @@ -25,7 +26,7 @@ class MapViewDirections extends Component { } componentWillReceiveProps(nextProps) { - if (!isEqual(nextProps.origin, this.props.origin) || !isEqual(nextProps.destination, this.props.destination) || !isEqual(nextProps.waypoints, this.props.waypoints) || !isEqual(nextProps.mode, this.props.mode)) { + if (!isEqual(nextProps.origin, this.props.origin) || !isEqual(nextProps.destination, this.props.destination) || !isEqual(nextProps.waypoints, this.props.waypoints)) { if (nextProps.resetOnChange === false) { this.fetchAndRenderRoute(nextProps); } else { @@ -73,9 +74,7 @@ class MapViewDirections extends Component { onError, mode = 'DRIVING', language = 'en', - optimizeWaypoints, directionsServiceBaseUrl = 'https://maps.googleapis.com/maps/api/directions/json', - region, } = props; if (!origin || !destination) { @@ -98,17 +97,13 @@ class MapViewDirections extends Component { .join('|'); } - if (optimizeWaypoints) { - waypoints = `optimize:true|${waypoints}`; - } - onStart && onStart({ origin, destination, waypoints: waypoints ? waypoints.split('|') : [], }); - this.fetchRoute(directionsServiceBaseUrl, origin, waypoints, destination, apikey, mode, language, region) + this.fetchRoute(directionsServiceBaseUrl, origin, waypoints, destination, apikey, mode, language) .then(result => { if (!this._mounted) return; this.setState(result); @@ -121,12 +116,12 @@ class MapViewDirections extends Component { }); } - fetchRoute(directionsServiceBaseUrl, origin, waypoints, destination, apikey, mode, language, region) { + fetchRoute(directionsServiceBaseUrl, origin, waypoints, destination, apikey, mode, language) { // Define the URL to call. Only add default parameters to the URL if it's a string. let url = directionsServiceBaseUrl; if (typeof (directionsServiceBaseUrl) === 'string') { - url += `?origin=${origin}&waypoints=${waypoints}&destination=${destination}&key=${apikey}&mode=${mode.toLowerCase()}&language=${language}®ion=${region}`; + url += `?origin=${origin}&waypoints=${waypoints}&destination=${destination}&key=${apikey}&mode=${mode}&language=${language}`; } return fetch(url) @@ -136,7 +131,7 @@ class MapViewDirections extends Component { if (json.status !== 'OK') { const errorMessage = json.error_message || 'Unknown error'; return Promise.reject(errorMessage); - } + } if (json.routes.length) { @@ -148,20 +143,15 @@ class MapViewDirections extends Component { }, 0) / 1000, duration: route.legs.reduce((carry, curr) => { return carry + curr.duration.value; - }, 0) / 60, - coordinates: this.decode(route.overview_polyline.points), - fare: route.fare, + }, 0) / 60, + durationText: route.legs[0].duration.text, + coordinates: this.decode(route.overview_polyline.points), + steps: route.legs[0].steps }); } else { return Promise.reject(); } - }) - .catch(err => { - console.warn( - 'react-native-maps-directions Error on GMAPS route request', - err - ); }); } @@ -178,14 +168,34 @@ class MapViewDirections extends Component { onReady, // eslint-disable-line no-unused-vars onError, // eslint-disable-line no-unused-vars mode, // eslint-disable-line no-unused-vars - language, // eslint-disable-line no-unused-vars - region, + language, // eslint-disable-line no-unused-vars + autoTransitColor, // eslint-disable-line no-unused-vars ...props - } = this.props; - - return ( - - ); + } = this.props; + + const { + coordinates, + distance, + duration, + steps + } = this.state; + + if (autoTransitColor) { + return steps.map((step, index) => { + let color = this.props.strokeColor; + if (step.travel_mode == "TRANSIT") { + color = step.transit_details.line.color + } + + return ( + + ); + }) + } else { + return ( + + ); + } } }