From b6a7851cd5d41c8eda6eeb3df36d5545c684549f Mon Sep 17 00:00:00 2001 From: Gary Devenay Date: Mon, 20 May 2019 16:04:40 +0100 Subject: [PATCH 1/4] Added ability to automatically segment the directions line by transport type and colour accordingly. Added the individual direction steps to the return type in order to break down the journey in to multiple steps. --- src/MapViewDirections.js | 75 ++++++++++++++++++++++------------------ 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/src/MapViewDirections.js b/src/MapViewDirections.js index 00e9be0..ff7b1aa 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 { @@ -71,11 +72,9 @@ class MapViewDirections extends Component { onStart, onReady, onError, - mode = 'DRIVING', + 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 ( + + ); + } } } @@ -213,17 +223,16 @@ MapViewDirections.propTypes = { latitude: PropTypes.number.isRequired, longitude: PropTypes.number.isRequired, }), - ]), + ]), + autoTransitColor: PropTypes.bool, apikey: PropTypes.string.isRequired, onStart: PropTypes.func, onReady: PropTypes.func, onError: PropTypes.func, - mode: PropTypes.oneOf(['DRIVING', 'BICYCLING', 'TRANSIT', 'WALKING']), + mode: PropTypes.oneOf(['driving', 'bicycling', 'transit', 'walking']), language: PropTypes.string, resetOnChange: PropTypes.bool, - optimizeWaypoints: PropTypes.bool, directionsServiceBaseUrl: PropTypes.string, - region: PropTypes.string, }; export default MapViewDirections; From e30e5faac23a971563c54c618b34b64aaf136e9c Mon Sep 17 00:00:00 2001 From: Gary Devenay Date: Mon, 20 May 2019 16:06:03 +0100 Subject: [PATCH 2/4] Updated readme docs for additional features --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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 From f4817d37c673febf361d6acdcfbd2b235a5b6355 Mon Sep 17 00:00:00 2001 From: Gary Devenay Date: Wed, 22 May 2019 10:07:18 +0100 Subject: [PATCH 3/4] Added in missing props and changed back to uppercase --- src/MapViewDirections.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/MapViewDirections.js b/src/MapViewDirections.js index ff7b1aa..f91f87a 100644 --- a/src/MapViewDirections.js +++ b/src/MapViewDirections.js @@ -223,16 +223,17 @@ MapViewDirections.propTypes = { latitude: PropTypes.number.isRequired, longitude: PropTypes.number.isRequired, }), - ]), - autoTransitColor: PropTypes.bool, + ]), apikey: PropTypes.string.isRequired, onStart: PropTypes.func, onReady: PropTypes.func, onError: PropTypes.func, - mode: PropTypes.oneOf(['driving', 'bicycling', 'transit', 'walking']), + mode: PropTypes.oneOf(['DRIVING', 'BICYCLING', 'TRANSIT', 'WALKING']), language: PropTypes.string, resetOnChange: PropTypes.bool, + optimizeWaypoints: PropTypes.bool, directionsServiceBaseUrl: PropTypes.string, + region: PropTypes.string, }; export default MapViewDirections; From f660c0451e95475b2864e60631857d5d1a1c8ea1 Mon Sep 17 00:00:00 2001 From: Gary Devenay Date: Wed, 22 May 2019 10:09:12 +0100 Subject: [PATCH 4/4] ensure driving is uppercase --- src/MapViewDirections.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/MapViewDirections.js b/src/MapViewDirections.js index f91f87a..fb6144a 100644 --- a/src/MapViewDirections.js +++ b/src/MapViewDirections.js @@ -72,7 +72,7 @@ class MapViewDirections extends Component { onStart, onReady, onError, - mode = 'driving', + mode = 'DRIVING', language = 'en', directionsServiceBaseUrl = 'https://maps.googleapis.com/maps/api/directions/json', } = props;