Skip to content

Latest commit

 

History

History
172 lines (114 loc) · 6.18 KB

Nearby-Widget.md

File metadata and controls

172 lines (114 loc) · 6.18 KB
Raw

Mappls Nearby Widget React Native

Getting started

npm i 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 MapplsNearbyWidget from "mappls-nearby-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 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.
  1. 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.

  1. 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”))

  2. 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

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

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

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

  5. 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, example:- icon:Image.resolveAssetSource(require('./coffee.png'))
  3. categoryCode (Array<String>): List of category codes
  4. markerIcon (image): Marker icon to display on a map , example:- icon:Image.resolveAssetSource(require('./marker.png'))




For any queries and support, please contact:

Email us at [email protected]

Support Need support? contact us!





@ Copyright 2024 CE Info Systems Ltd. All Rights Reserved.