🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
react-native-maps-directions-via-server
Advanced tools
react-native-maps-directions-via-server - npm Package Compare versions
Comparing version 1.0.0 to 1.0.1
| { | ||
| "name": "react-native-maps-directions-via-server", | ||
| "version": "1.0.0", | ||
| "version": "1.0.1", | ||
| "description": "use react-native-maps-directions package via server driven data, avoid compromising of google api key", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
116
README.md
@@ -1,3 +0,14 @@ | ||
| # `react-native-maps-directions` | ||
| # `react-native-maps-directions-via-server` | ||
| [](https://www.npmjs.com/package/react-native-maps-directions-via-server) | ||
| This component is built based on [react-native-maps-directions](https://github.com/bramus/react-native-maps-directions), with changes at below: | ||
| 1. Removed `apikey` as the required param, this assures the apikey won't be compromised from app side. | ||
| 2. Markd `directionsServiceBaseUrl` as the required param, as the request for fetching directions will go to the url specified with this param. | ||
| BTW, these changes addressed the issue mentioned at [https://github.com/bramus/react-native-maps-directions/issues/84](https://github.com/bramus/react-native-maps-directions/issues/84). | ||
| ### Original documentation from react-native-maps-directions as follows: | ||
| [](https://www.npmjs.com/package/react-native-maps-directions) | ||
@@ -59,18 +70,19 @@ [](https://www.npmtrends.com/react-native-maps-directions) | ||
| | 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). | | ||
| #### More props | ||
@@ -97,3 +109,3 @@ | ||
| - 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 | ||
@@ -119,7 +131,7 @@ - Strings representing a location | ||
| | 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. | | ||
@@ -131,8 +143,8 @@ ## Extended Example | ||
| ```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 { width, height } = Dimensions.get("window"); | ||
| const ASPECT_RATIO = width / height; | ||
@@ -144,6 +156,5 @@ const LATITUDE = 37.771707; | ||
| const GOOGLE_MAPS_APIKEY = '…'; | ||
| const GOOGLE_MAPS_APIKEY = "…"; | ||
| class Example extends Component { | ||
| constructor(props) { | ||
@@ -171,8 +182,5 @@ super(props); | ||
| this.setState({ | ||
| coordinates: [ | ||
| ...this.state.coordinates, | ||
| e.nativeEvent.coordinate, | ||
| ], | ||
| coordinates: [...this.state.coordinates, e.nativeEvent.coordinate], | ||
| }); | ||
| } | ||
| }; | ||
@@ -189,13 +197,19 @@ render() { | ||
| 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} | ||
@@ -206,15 +220,17 @@ strokeWidth={3} | ||
| onStart={(params) => { | ||
| console.log(`Started routing between "${params.origin}" and "${params.destination}"`); | ||
| console.log( | ||
| `Started routing between "${params.origin}" and "${params.destination}"` | ||
| ); | ||
| }} | ||
| onReady={result => { | ||
| console.log(`Distance: ${result.distance} km`) | ||
| console.log(`Duration: ${result.duration} min.`) | ||
| 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, | ||
| }, | ||
| }); | ||
@@ -221,0 +237,0 @@ }} |
No alert changes
Improved metrics
- Total package byte prevSize
41368
15.56%- Number of lines in readme file
261
6.53%No dependency changes