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 (
+
+ );
+ }
}
}