Automatic line colouring & steps

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

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}&region=${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 (
-			<MapView.Polyline coordinates={this.state.coordinates} {...props} />
-		);
+        } = 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 (
+                    <MapView.Polyline key={index} coordinates={this.decode(step.polyline.points)} {...props} strokeColor={color} />
+                );
+            })
+        } else {
+            return (
+                <MapView.Polyline coordinates={coordinates} {...props} />
+            );
+        }
 	}
 
 }