Mapmyindia Nearby Widget-React Native

Getting started

npm install mapmyindia-nearby-widget-react-native

• Install peerDependencies

npm i mapmyindia-map-react-native-beta

• If using React-native<0.60

react-native link mapmyindia-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.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 MapmyindiaNearbyWidget from "mapmyindia-nearby-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 MapmyindiaNearbyWidget.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

Email us at [e-mail]

Stack Overflow

Ask a question under the mapmyindia-api