MapmyIndia Direction Widget React Native

Getting started

npm install mapmyindia-direction-widget-react-native

• Install peerDependencies

npm  i  mapmyindia-map-react-native-beta

• If using React-native<0.60

react-native link mapmyindia-direction-widget-react-native

Installation

Android

• Add followling line in android/build.gradle file:-

allprojects {

repositories {

mavenLocal()

maven {

// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm

url("$rootDir/../node_modules/react-native/android")

}

maven {

// Android JSC is installed from npm

url("$rootDir/../node_modules/jsc-android/dist")

}

  

+ maven { url 'https://maven.mapmyindia.com/repository/mapmyindia/'}

  

google()

jcenter()

maven { url 'https://www.jitpack.io' }

  

}

  

}

• Add followling line in android/app/build.gradle file:-

defaultConfig {

  

applicationId "com.example"

  

minSdkVersion rootProject.ext.minSdkVersion

  

targetSdkVersion rootProject.ext.targetSdkVersion

  

versionCode 1

  

versionName "1.0"

  

+ multiDexEnabled true

  

}

+ dataBinding {

+ enabled true

+ }

ios

• run pod install from ios folder

Usage

Step 1: Import

import  MapmyindiaDirectionWidget  from  "mapmyindia-direction-widget-react-native"

import  MapmyIndiaGL  from  'mapmyindia-map-react-native-beta';

Step 2. Initialization

Initialize the SDK with your keys.

// for map sdk

MapmyIndiaGL.setMapSDKKey(mapSDKKey);//place your mapsdkKey

MapmyIndiaGL.setRestAPIKey(restAPIKey);//your restApiKey

MapmyIndiaGL.setAtlasClientId(atlasClientId);//your atlasClientId key

MapmyIndiaGL.setAtlasClientSecret(atlasClientSecret); //your atlasClientSecret key

MapmyIndiaGL.setAtlasGrantType(atlasGrantType);

  

Step 3: Open MapmyindiaDirectionWidget

try {

const  data = await  MapmyindiaDirectionWidget.openDirectionWidget({});

console.log(JSON.stringify(data));

} catch (e) {

//error log

}

Request Props

1. resource(String)`: Below are the available resource:

• DirectionsCriteria.RESOURCE_ROUTE (Default): to calculate a route & its duration without considering traffic conditions.

• DirectionsCriteria.RESOURCE_ROUTE_ETA get the updated duration of a route considering live traffic; Applicable for India only "region=ind" and "rtype=1" is not supported. This is different from route_traffic; since this doesn't search for a route considering traffic, it only applies delays to the default route.

• DirectionsCriteria.RESOURCE_ROUTE_TRAFFIC:

to search for routes considering live traffic.

2. showAlternative(Boolean): Show alternative routes.

3. profile(String): Below are the available profile:

• DirectionsCriteria.PROFILE_DRIVING (Default):Meant for car routing

• DirectionsCriteria.PROFILE_WALKING: Meant for pedestrian routing. Routing with this profile is restricted to route_adv only. region & rtype request parameters are not supported in pedestrian routing

• DirectionsCriteria.PROFILE_BIKING:Meant for two-wheeler routing. Routing with this profile is restricted to route_adv only. region & rtype request parameters are not supported in two-wheeler routing.

• DirectionsCriteria.PROFILE_TRUCKING:Meant for Truck routing. Routing with this profile is restricted to route_adv only. region & rtype request parameters are not supported in truck routing.

4. overview(String): Add overview geometry either full, simplified according to highest zoom level it could be display on, or not at all. Below are the available value:

• DirectionsCriteria.OVERVIEW_FULL

• DirectionsCriteria.OVERVIEW_FALSE

• DirectionsCriteria.OVERVIEW_SIMPLIFIED

5. steps(Boolean): Return route steps for each route leg. Possible values are true/false. By default it will be used as false.

6. excludes(List<String>) : Additive list of road classes to avoid, order does not matter. Below are the available value:

• DirectionsCriteria.EXCLUDE_FERRY

• DirectionsCriteria.EXCLUDE_MOTORWAY

• DirectionsCriteria.EXCLUDE_TOLL

7. showStartNavigation(Boolean): To show the Start Navigation button if the origin is current location.

8. destination: You can use this to pass the destination in direction widget:

• destination:{longitude:77.56,latitude:28.67,name:"MapmyIndia",address:"Okhla,New Delhi"}: It takes coordinate, place name and place address

• destination:{eloc:"MMI000",name:"MapmyIndia",address:"Okhla,New Delhi"}: It takes eloc, place name and place address

9. source: You can use this to pass the source in direction widget(Only for IOS):

• source:{longitude:77.56,latitude:28.67,name:"MapmyIndia",address:"Okhla,New Delhi"}: It takes coordinate, place name and place address

• source:{eloc:"MMI000",name:"MapmyIndia",address:"Okhla,New Delhi"}: It takes eloc, place name and place address

10. searchPlaceOption(PlaceOptions): To set the properties of search widget

Additional Parameter - Search Along The Route

searchAlongRoute(Boolean) : An easy, ready to use UI has been introduced to search pois Along the route with default categories list.Default is true.

To access this parameter , please contact API Support This parameter takes the encoded route along which POIs will be searched.

This parameter is further having configurable options listed below.

• alongRouteBuffer (number) : 200, // Buffer of the road. Minimum value is 25m, maximum is 1000m and default is 25m

categoryCodes: This is used to set the information for the poi categories to show in Widget. It contains the following properties in constructor:

• category (String): Name of the category that display on a view
• icon(ImageResolvedAssetSource): To show icon of category
• categoryCode (List): List of category codes
• markerIcon (ImageResolvedAssetSource): Marker icon to display on a map
• isSelected (Boolean)(optional): To set the category is selected or not.

PlaceOptions

1. location(Array): set location around which your search will appear. Ex. [77.56,28.34]

2. filter(String): this parameter helps you restrict the result either by mentioning a bounded area or to certain eloc (6 digit code to any poi, locality, city, etc.), below mentioned are the both types:

• filter = bounds: lat1, lng1; lat2, lng2 (latitude, longitude) {e.g. filter("bounds: 28.598882, 77.212407; 28.467375, 77.353513")

• filter = cop: {eloc} (string) {e.g. filter("cop:YMCZ0J")

3. historyCount(number): Maximum number of history results appear. (Android )

4. zoom(number): takes the zoom level of the current scope of the map (min: 4, max: 18).

5. saveHistory(Boolean): If it sets to true it shows the history selected data. (Android )

6. pod(String): 1. it takes in the place type code which helps in restricting the results to certain chosen type.Below mentioned are the codes for the pod

• PlaceOptionsConstants.POD_SUB_LOCALITY

• PlaceOptionsConstants.POD_LOCALITY

• PlaceOptionsConstants.POD_CITY

• PlaceOptionsConstants.POD_VILLAGE

• PlaceOptionsConstants.POD_SUB_DISTRICT

• PlaceOptionsConstants.POD_DISTRICT

• PlaceOptionsConstants.POD_STATE

• PlaceOptionsConstants.POD_SUB_SUB_LOCALITY

7. tokenizeAddress(Boolean): provides the different address attributes in a structured object.

8. backgroundColor(HexColor): to set the background color of the widget

9. toolbarColor(HexColor): to set the toolbar color of the widget.

10. hint(String): To set the hint on the Search view of the widget.(Android)

11. attributionHorizontalAlignment(int): To set the vertical alignment for attribution. Below mentioned are the values:

• PlaceOptionsConstants.GRAVITY_LEFT

• PlaceOptionsConstants.GRAVITY_CENTER

• PlaceOptionsConstants.GRAVITY_RIGHT

12. attributionVerticalAlignment(int): To set the horizontal alignment for attribution. Below mentioned are the values:

• PlaceOptionsConstants.GRAVITY_TOP

• PlaceOptionsConstants.GRAVITY_BOTTOM'

13. logoSize(int): To set the logo size. Below mentioned are the values:

• PlaceOptionsConstants.SIZE_SMALL

• PlaceOptionsConstants.SIZE_MEDIUM

• PlaceOptionsConstants.SIZE_LARGE

Email us at [email protected]

Stack Overflow

Ask a question under the mapmyindia-api