Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

With avoidTolls, avoidHighways, and avoidFerries options #216

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

With avoidTolls, avoidHighways, and avoidFerries options #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
55c70a3
avoid tolls, highways, and ferries when possible
AllanBengco Mar 15, 2023
4bb383b
edited readme
AllanBengco Mar 15, 2023
bf6a206
removed a line: console.log(url)
AllanBengco Mar 15, 2023
be85693
added 1.9.1 to changelog
AllanBengco Mar 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# `react-native-maps-directions` Changelog

## 1.9.1 – 2023-03-15

- Add `avoidTolls` option;
- Add `avoidHighways` option;
- Add `avoidFerries` option;

## 1.9.0 – 2022-07-27

- Fix: `timePrecision` prop type to `MapViewDirectionsTimePrecision`
Expand Down Expand Up @@ -46,7 +52,6 @@
- Return “Duration with traffic” as `duration`
- Return `fare` in `onReady`


## 1.6.0 - 2018-03-09

- Add `directionsServiceBaseUrl` prop to allow customisation of service to use.
Expand Down
129 changes: 70 additions & 59 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,22 +56,26 @@ Once the directions in between `destination` and `origin` has been fetched, a `M

### Props

| Prop | Type | Default | Note
|---|---|---|---|
| `origin` | `LatLng` or `String` | | The origin location to start routing from.
| `destination` | `LatLng` or `String` | | The destination location to start routing to.
| `apikey` | `String` | | Your Google Maps API Key _(request one [here](https://developers.google.com/maps/documentation/directions/get-api-key); if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Directions API for that key using the [Google API Console](https://console.developers.google.com/apis/) by hitting the “Enable APIs and Services“ button)_.
| `waypoints` | [`LatLng` or `String`] | `[]` | Array of waypoints to use between origin and destination.
| `language` | `String` | `"en"` | The language to use when calculating directions. See [here](https://developers.google.com/maps/documentation/javascript/localization) for more info.
| `mode` | `String` | `"DRIVING"` | Which transportation mode to use when calculating directions. Allowed values are `"DRIVING"`, `"BICYCLING"`, `"WALKING"`, and `"TRANSIT"`. _(See [here](https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes) for more info)_.
| `resetOnChange` | `boolean` | `true` | Tweak if the rendered `MapView.Polyline` should reset or not when calculating the route between `origin` and `destionation`. Set to `false` if you see the directions line glitching.
| `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 at a higher rate by Google as stated [here](https://developers.google.com/maps/documentation/javascript/directions#Waypoints).
| `splitWaypoints` | `boolean` | `false` | Directions API has a [limit](https://developers.google.com/maps/documentation/directions/usage-and-billing#directions-advanced) of 10 or 25 (depends on the billing plan) waypoints per route. When exceeding this limit you will be billed at a higher reate by Google. Set this to `true` if you would like to automatically split waypoints into multiple routes, thus bypassing this waypoints limit.
| `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.
| `precision` | `String` | `"low"` | The precision level of detail of the drawn polyline. Allowed values are "high", and "low". Setting to "low" will yield a polyline that is an approximate (smoothed) path of the resulting directions. Setting to "high" may cause a hit in performance in case a complex route is returned.
| `timePrecision` | `String` | `"none"` | The timePrecision to get Realtime traffic info. Allowed values are "none", and "now". Defaults to "none".
| `channel` | `String` | `null` | If you include the channel parameter in your requests, you can generate a Successful Requests report that shows a breakdown of your application's API requests across different applications that use the same client ID (such as externally facing access vs. internally facing access).
| Prop | Type | Default | Note |
| -------------------------- | ---------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `origin` | `LatLng` or `String` | | The origin location to start routing from. |
| `destination` | `LatLng` or `String` | | The destination location to start routing to. |
| `apikey` | `String` | | Your Google Maps API Key _(request one [here](https://developers.google.com/maps/documentation/directions/get-api-key); if you're using an existing Google Maps API Key make sure you've enabled the Google Maps Directions API for that key using the [Google API Console](https://console.developers.google.com/apis/) by hitting the “Enable APIs and Services“ button)_. |
| `waypoints` | [`LatLng` or `String`] | `[]` | Array of waypoints to use between origin and destination. |
| `language` | `String` | `"en"` | The language to use when calculating directions. See [here](https://developers.google.com/maps/documentation/javascript/localization) for more info. |
| `mode` | `String` | `"DRIVING"` | Which transportation mode to use when calculating directions. Allowed values are `"DRIVING"`, `"BICYCLING"`, `"WALKING"`, and `"TRANSIT"`. _(See [here](https://developers.google.com/maps/documentation/javascript/examples/directions-travel-modes) for more info)_. |
| `resetOnChange` | `boolean` | `true` | Tweak if the rendered `MapView.Polyline` should reset or not when calculating the route between `origin` and `destionation`. Set to `false` if you see the directions line glitching. |
| `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 at a higher rate by Google as stated [here](https://developers.google.com/maps/documentation/javascript/directions#Waypoints). |
| `splitWaypoints` | `boolean` | `false` | Directions API has a [limit](https://developers.google.com/maps/documentation/directions/usage-and-billing#directions-advanced) of 10 or 25 (depends on the billing plan) waypoints per route. When exceeding this limit you will be billed at a higher reate by Google. Set this to `true` if you would like to automatically split waypoints into multiple routes, thus bypassing this waypoints limit. |
| `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. |
| `precision` | `String` | `"low"` | The precision level of detail of the drawn polyline. Allowed values are "high", and "low". Setting to "low" will yield a polyline that is an approximate (smoothed) path of the resulting directions. Setting to "high" may cause a hit in performance in case a complex route is returned. |
| `timePrecision` | `String` | `"none"` | The timePrecision to get Realtime traffic info. Allowed values are "none", and "now". Defaults to "none". |
| `channel` | `String` | `null` | If you include the channel parameter in your requests, you can generate a Successful Requests report that shows a breakdown of your application's API requests across different applications that use the same client ID (such as externally facing access vs. internally facing access). |
| `avoidTolls` | `boolean` | `false` | Set to `true` if you want direction routing to avoid Tollways when possible. Can be combined with other 'avoid' parameters. There might be instances that setting `avoidTolls` may be anough to avoid directions passing both tollways and highways, so just test which parameters apply to your application. |
| `avoidHighways` | `boolean` | `false` | Set to `true` if you want direction routing to avoid Highways when possible. |
| `avoidFerries` | `boolean` | `false` | Set to `true` if you want direction routing to avoid Ferries when possible. |

#### More props

Since the result rendered on screen is a `MapView.Polyline` component, all [`MapView.Polyline` props](https://github.com/airbnb/react-native-maps/blob/master/docs/polyline.md#props) – except for `coordinates` – are also accepted.
Expand All @@ -93,7 +97,7 @@ Since the result rendered on screen is a `MapView.Polyline` component, all [`Map
The values for the `origin` and `destination` props can take several forms. They can either be:

- Coordinates in the form of an object with `latitude` and `longitude` keys
- Coordinates in the form of a string with `latitude` and `longitude` values separated by a comma
- Coordinates in the form of a string with `latitude` and `longitude` values separated by a comma
- Strings representing an address
- Strings representing a location
- Strings containing a Place Id from the Google Maps Place API prefixed with `place_id:`
Expand All @@ -114,35 +118,34 @@ Tip: Don't forget to tweak the `language` prop when using localized location nam

### Events/Callbacks

| 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, waypointOrder: [[]] }` | 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.
| 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, waypointOrder: [[]] }` | 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

This example will draw a route between AirBnB's Office and Apple's HQ

```js
import React, { Component } from 'react';
import { Dimensions, StyleSheet } from 'react-native';
import MapView from 'react-native-maps';
import MapViewDirections from 'react-native-maps-directions';
import React, { Component } from 'react'
import { Dimensions, StyleSheet } from 'react-native'
import MapView from 'react-native-maps'
import MapViewDirections from 'react-native-maps-directions'

const { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;
const LATITUDE = 37.771707;
const LONGITUDE = -122.4053769;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;
const { width, height } = Dimensions.get('window')
const ASPECT_RATIO = width / height
const LATITUDE = 37.771707
const LONGITUDE = -122.4053769
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

const GOOGLE_MAPS_APIKEY = '…';
const GOOGLE_MAPS_APIKEY = '…'

class Example extends Component {

constructor(props) {
super(props);
super(props)

// AirBnB's Office, and Apple Park
this.state = {
Expand All @@ -156,18 +159,15 @@ class Example extends Component {
longitude: -122.4053769,
},
],
};
}

this.mapView = null;
this.mapView = null
}

onMapPress = (e) => {
this.setState({
coordinates: [
...this.state.coordinates,
e.nativeEvent.coordinate,
],
});
coordinates: [...this.state.coordinates, e.nativeEvent.coordinate],
})
}

render() {
Expand All @@ -180,48 +180,59 @@ class Example extends Component {
longitudeDelta: LONGITUDE_DELTA,
}}
style={StyleSheet.absoluteFill}
ref={c => this.mapView = c}
ref={(c) => (this.mapView = c)}
onPress={this.onMapPress}
>
{this.state.coordinates.map((coordinate, index) =>
{this.state.coordinates.map((coordinate, index) => (
<MapView.Marker key={`coordinate_${index}`} coordinate={coordinate} />
)}
{(this.state.coordinates.length >= 2) && (
))}
{this.state.coordinates.length >= 2 && (
<MapViewDirections
origin={this.state.coordinates[0]}
waypoints={ (this.state.coordinates.length > 2) ? this.state.coordinates.slice(1, -1): undefined}
destination={this.state.coordinates[this.state.coordinates.length-1]}
waypoints={
this.state.coordinates.length > 2
? this.state.coordinates.slice(1, -1)
: undefined
}
destination={
this.state.coordinates[this.state.coordinates.length - 1]
}
apikey={GOOGLE_MAPS_APIKEY}
strokeWidth={3}
strokeColor="hotpink"
strokeColor='hotpink'
optimizeWaypoints={true}
onStart={(params) => {
console.log(`Started routing between "${params.origin}" and "${params.destination}"`);
console.log(
`Started routing between "${params.origin}" and "${params.destination}"`
)
}}
onReady={result => {
onReady={(result) => {
console.log(`Distance: ${result.distance} km`)
console.log(`Duration: ${result.duration} min.`)

this.mapView.fitToCoordinates(result.coordinates, {
edgePadding: {
right: (width / 20),
bottom: (height / 20),
left: (width / 20),
top: (height / 20),
}
});
right: width / 20,
bottom: height / 20,
left: width / 20,
top: height / 20,
},
})
}}
onError={(errorMessage) => {
// console.log('GOT AN ERROR');
}}
avoidTolls={true}
avoidFerries={true}
avoidHighways={true}
/>
)}
</MapView>
);
)
}
}

export default Example;
export default Example
```

## Example App
Expand Down
Loading