mappls-direction-widget-react-native
v1.1.0
Published
Mappls direction widget in react native for Navigation.
Downloads
9
Readme
Mappls Direction Widget React Native
Getting started
npm install mappls-direction-widget-react-native
- Install peerDependencies
npm i mappls-map-react-native
- If using React-native<0.60
react-native link mappls-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 MapplsDirectionWidget from "mappls-direction-widget-react-native"
import MapplsGL from 'mappls-map-react-native';
Step 2. Initialization
Initialize the SDK with your keys.
// for map sdk
MapplsGL.setMapSDKKey(mapSDKKey);//place your mapsdkKey
MapplsGL.setRestAPIKey(restAPIKey);//your restApiKey
MapplsGL.setAtlasClientId(atlasClientId);//your atlasClientId key
MapplsGL.setAtlasClientSecret(atlasClientSecret); //your atlasClientSecret key
Step 3: Open MapplsDirectionWidget
try {
const data = await MapplsDirectionWidget.openDirectionWidget({});
console.log(JSON.stringify(data));
} catch (e) {
//error log
}
Request Props
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.
showAlternative(Boolean)
: Show alternative routes.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.
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
steps(Boolean)
: Return route steps for each route leg. Possible values are true/false. By default it will be used as false.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
showStartNavigation(Boolean)
: To show the Start Navigation button if the origin is current location.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 addressdestination:{eloc:"MMI000",name:"MapmyIndia",address:"Okhla,New Delhi"}
: It takes eloc, place name and place address
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 addresssource:{eloc:"MMI000",name:"MapmyIndia",address:"Okhla,New Delhi"}
: It takes eloc, place name and place address
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
location(Array)
: set location around which your search will appear. Ex.[77.56,28.34]
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")
historyCount(number)
: Maximum number of history results appear. (Android )zoom(number)
: takes the zoom level of the current scope of the map (min: 4, max: 18).saveHistory(Boolean)
: If it sets totrue
it shows the history selected data. (Android )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
tokenizeAddress(Boolean)
: provides the different address attributes in a structured object.backgroundColor(HexColor)
: to set the background color of the widgettoolbarColor(HexColor)
: to set the toolbar color of the widget.hint(String)
: To set the hint on the Search view of the widget.(Android)attributionHorizontalAlignment(int)
: To set the vertical alignment for attribution. Below mentioned are the values:- PlaceOptionsConstants.GRAVITY_LEFT
- PlaceOptionsConstants.GRAVITY_CENTER
- PlaceOptionsConstants.GRAVITY_RIGHT
attributionVerticalAlignment(int)
: To set the horizontal alignment for attribution. Below mentioned are the values:- PlaceOptionsConstants.GRAVITY_TOP
- PlaceOptionsConstants.GRAVITY_BOTTOM'
logoSize(int)
: To set the logo size. Below mentioned are the values:PlaceOptionsConstants.SIZE_SMALL
PlaceOptionsConstants.SIZE_MEDIUM
PlaceOptionsConstants.SIZE_LARGE
For any queries and support, please contact:
Email us at [email protected]
Support Need support? contact us!