mapmyindia-search-widgets-react-native

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';

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: 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

1. center :(number) place picker center coordinate(optional) note- if center is not provided map will zoom to current location of user.

2. zoom:(number) place picker map zoom level (optional)

3. pickerImage :place picker marker image. You can use static images or image urls.(optional)

4. searchWidgetProps :(object) custom configuration for search widget props inside place picker.(optional)

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

1. location(Array): set location around which your search will appear. Ex. [77.56,28.34]

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

3. historyCount(number): Maximum number of history results appear. (Android )

4. zoom(number): takes the zoom level of the current scope of the map (min: 4, max: 18).

5. saveHistory(Boolean): If it sets to true it shows the history selected data. (Android )

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

7. tokenizeAddress(Boolean): provides the different address attributes in a structured object.

8. backgroundColor(HexColor): to set the background color of the widget

9. toolbarColor(HexColor): to set the toolbar color of the widget.

10. hint(String): To set the hint on the Search view of the widget.

Email us at [e-mail]

Stack Overflow

Ask a question under the mapmyindia-api

© Copyright 2022. CE Info Systems Ltd. All Rights Reserved. | Terms & Conditions