mappls-direction-widget-react-native
Advanced tools
Mappls direction widget in react native for Navigation.
npm install mappls-direction-widget-react-native
npm i mappls-map-react-native
react-native link mappls-direction-widget-react-native
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' }
}
}
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
+ }
import MapplsDirectionWidget from "mappls-direction-widget-react-native"
import MapplsGL from 'mappls-map-react-native';
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
try {
const data = await MapplsDirectionWidget.openDirectionWidget({});
console.log(JSON.stringify(data));
} catch (e) {
//error log
}
resource(String)`: Below are the available resource:
showAlternative(Boolean): Show alternative routes.
profile(String): Below are the available profile:
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:
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:
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 addresssource: 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 addresssearchPlaceOption(PlaceOptions): To set the properties of search widget
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.
categoryCodes: This is used to set the information for the poi categories to show in Widget. It contains the following properties in constructor:
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 to true 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
tokenizeAddress(Boolean): provides the different address attributes in a structured object.
backgroundColor(HexColor): to set the background color of the widget
toolbarColor(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:
attributionVerticalAlignment(int): To set the horizontal alignment for attribution. Below mentioned are the values:
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:
Support
Need support? contact us!
FAQs
Mappls direction widget in react native for Navigation.
We found that mappls-direction-widget-react-native demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.