Mappls Nearby Widget-React Native

Getting started

npm install mappls-nearby-widget-react-native

• Install peerDependencies

npm i mappls-map-react-native

• If using React-native<0.60

react-native link mappls-nearby-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.mappls.com/repository/mappls/'}

           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 MapmyindiaNearbyWidget from "mappls-nearby-widget-react-native";
import  MapmyIndiaGL  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
MapplsGL.setAtlasGrantType(atlasGrantType);

Step 3: Open MapplsNearbyWidget

 try {
  const  data = await MapplsNearbyWidget.openNearbyWidget({});
  console.log(JSON.stringify(data));
  } catch (e) {
 //error log
  }

Request Props

• nearbyOptions(Object): You can use nearbyOptions to set the following properties:

1. radius(number): provides the range of distance to search over(default: 1000, min: 500, max: 10000)
2. sortBy(Enum): provides configured sorting operations for the client on cloud.Below are the available sorts:

• NearbyCriteria.DISTANCE_ASCENDING
• NearbyCriteria.DISTANCE_DESCENDING will sort the data on distance basis.
• NearbyCriteria.NAME_ASCENDING
• NearbyCriteria.NAME_DESCENDING will sort the data on alphabetically basis.

3. searchBy(Enum): provides configurable search operations for the client on cloud. Below are the available sorts:​

• NearbyCriteria.DISTANCE
• NearbyCriteria.IMPORTANCE - will search data in order of prominence of the place.

4. bounds(String): Allows the developer to send in map bounds to provide a nearby search within the bounds.
   {e.g. (bounds(“28.56812,77.240519;28.532790,77.290854”))

5. pod(Enum): it takes in the place type code which helps in restricting the results to certain chosen type. Access to this parameter is controlled from the backend. This parameter if provided will override any values provided in keywords request param.
   Below mentioned are the codes for the pod

   • NearbyCriteria.POD_SUB_LOCALITY
   • NearbyCriteria.POD_LOCALITY
   • NearbyCriteria.POD_CITY
   • NearbyCriteria.POD_STATE

6. filter(String): This parameter helps you get a specific type of EV charging Station

   • filter = model:(string);brandId:(string);plugType:(string)

7. richData(Boolean): Rich Data related to POI

8. userName(String): Use to set the user name

• categoryCodes(Array[Object]): You can set array of categoryCodes with following parameters:

1. category (String): Name of the category that display on a view
2. icon(image): To show icon of category
3. categoryCode (Array<String>): List of category codes
4. markerIcon (image): Marker icon to display on a map

For any queries and support, please contact:

Email us at [email protected]

Support Need support? contact us!