MapmyIndia Search Widgets React Native

MapmyIndia APIs

MapmyIndia Search Widget

Getting started

npm install mapmyindia-search-widgets-react-native --save

Install peerDependencies

npm i mapmyindia-map-react-native-beta mapmyindia-restapi-react-native-beta react-native-simple-toast @react-native-community/netinfo

If using React-native<0.60

react-native link mapmyindia-search-widgets-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

}

ios

run pod install from ios folder

Usage

Step 1: Import

import  MapmyIndiaUIWidgets  from  'mapmyindia-search-widgets-react-native'
import  MapmyIndiaGL  from  'mapmyindia-map-react-native-beta';
import  MapmyIndia  from  'mapmyindia-restapi-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);

//restApi sdk
MapmyIndia.setRestApiKey(restAPIKey);//your restApiKey
MapmyIndia.setClientId(atlasClientId);//your atlasClientId key
MapmyIndia.setClientSecret(atlasClientSecret);//your atlasClientSecret key

Step 3: Use MapmyIndiaUIWidgets.PlacePicker

  <MapmyIndiaUIWidgets.PlacePicker
      center={plcePickerCenter}
      zoom={10}
      searchWidgetProps={{backgroundColor:'#F0FFF0'}}
      pickerImage={{uri:'http://maps.google.com/mapfiles/ms/micons/blue.png'}}
      resultCallback={(res) => 
      //Do something with result
         }
   />

Request Props

center :(number) place picker center coordinate(optional) note- if center is not provided map will zoom to current location of user.
zoom:(number) place picker map zoom level (optional)
pickerImage :place picker marker image. You can use static images or image urls.(optional)
searchWidgetProps :(object) custom configuration for search widget props inside place picker.(optional)
resultCallback:(function) returns result of place picker

Step 4. Use MapmyIndiaUIWidgets.searchWidget

try{
 const res = await MapmyIndiaUIWidgets.searchWidget({toolbarColor:'#F5F5F5'});
 //Do something with result
 }catch(e){
   //error logs
     console.log(e);
  }

Search Widget Request Properties

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
- MapmyIndiaUIWidgets.POD_SUB_LOCALITY
- MapmyIndiaUIWidgets.POD_LOCALITY
- MapmyIndiaUIWidgets.POD_CITY
- MapmyIndiaUIWidgets.POD_VILLAGE
- MapmyIndiaUIWidgets.POD_SUB_DISTRICT
- MapmyIndiaUIWidgets.POD_DISTRICT
- MapmyIndiaUIWidgets.POD_STATE
- MapmyIndiaUIWidgets.POD_SUB_SUB_LOCALITY
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.
hyperLocal(Boolean): This parameter lets the search give results that are hyper-localized to the reference location passed in the location parameter. This means that nearby results are given a higher ranking than results far from the reference location. Highly prominent results will still appear in the search results, however they will be lower in the list of results. This parameter will work ONLY in conjunction with the location parameter.