From 01c288d783a0d3ff2851bbf4448ce54b1cac4bae Mon Sep 17 00:00:00 2001 From: Mokhlas Hussein Date: Tue, 11 Jun 2024 10:43:12 +0300 Subject: [PATCH 1/2] Added unit system suppor using units to specify the unit system KM, Mile and Feet --- src/MapViewDirections.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/MapViewDirections.js b/src/MapViewDirections.js index 8e05906..e6011e9 100644 --- a/src/MapViewDirections.js +++ b/src/MapViewDirections.js @@ -91,6 +91,7 @@ class MapViewDirections extends Component { region, precision = 'low', timePrecision = 'none', + unitSystem = 'metric', channel, } = props; @@ -174,7 +175,7 @@ class MapViewDirections extends Component { } return ( - this.fetchRoute(directionsServiceBaseUrl, origin, waypoints, destination, apikey, mode, language, region, precision, timePrecisionString, channel) + this.fetchRoute(directionsServiceBaseUrl, origin, waypoints, destination, apikey, mode, language, region, precision, timePrecisionString, unitSystem, channel) .then(result => { return result; }) @@ -227,7 +228,7 @@ class MapViewDirections extends Component { }); } - fetchRoute(directionsServiceBaseUrl, origin, waypoints, destination, apikey, mode, language, region, precision, timePrecision, channel) { + fetchRoute(directionsServiceBaseUrl, origin, waypoints, destination, apikey, mode, language, region, precision, timePrecision, unitSystem, channel) { // Define the URL to call. Only add default parameters to the URL if it's a string. let url = directionsServiceBaseUrl; @@ -236,6 +237,9 @@ class MapViewDirections extends Component { if(timePrecision){ url+=`&departure_time=${timePrecision}`; } + if (unitSystem) { + url+=`&units=${unitSystem}`; + } if(channel){ url+=`&channel=${channel}`; } @@ -351,6 +355,7 @@ MapViewDirections.propTypes = { region: PropTypes.string, precision: PropTypes.oneOf(['high', 'low']), timePrecision: PropTypes.oneOf(['now', 'none']), + unitSystem: PropTypes.oneOf(['metric', 'imperial']), channel: PropTypes.string, }; From f283c7c3675cc4fa6b9a4b682b9a9aba4d709443 Mon Sep 17 00:00:00 2001 From: Mokhlas Hussein Date: Tue, 11 Jun 2024 10:47:57 +0300 Subject: [PATCH 2/2] unitSystem description in README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 63e636d..33d7c71 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,7 @@ Once the directions in between `destination` and `origin` has been fetched, a `M | `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). +| `unitSystem` | `String` | `metric` | Specifies the unit system to use when displaying results. Directions results contain text within distance fields that may be displayed to the user to indicate the distance of a particular "step" of the route. By default, this text uses the unit system of the origin's country or region. For example, a route from "Chicago, IL" to "Toronto, ONT" will display results in miles, while the reverse route will display results in kilometers. You may override this unit system by setting one explicitly within the request's units parameter, passing one of the following values: `metric` specifies usage of the metric system. Textual distances are returned using kilometers and meters. `imperial` specifies usage of the Imperial (English) system. Textual distances are returned using miles and feet. ). #### 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.