mappls-search-widgets-react-native
v1.2.0
Published
Mappls React Native Search Widget is a readymade widget used to search
Downloads
268
Readme
Mappls Search Widget
Getting started
npm install mappls-search-widgets-react-native --save
- Install peerDependencies
npm i mappls-map-react-native react-native-simple-toast @react-native-community/netinfo
- If using React-native<0.60
react-native link mappls-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.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
}
ios
run pod install from ios folder
Usage
Step 1: Import
import MapplsUIWidgets from 'mappls-search-widgets-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: Use MapplsUIWidgets.PlacePicker
<MapplsUIWidgets.PlacePicker
center={plcePickerCenter}
zoom={10}
searchWidgetProps={{backgroundColor:'#F0FFF0'}}
resultCallback={(res) =>
}
/>
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 MapplsUIWidgets.searchWidget
try{
const res = await MapplsUIWidgets.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 totrue
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- MapplsUIWidgets.POD_SUB_LOCALITY
- MapplsUIWidgets.POD_LOCALITY
- MapplsUIWidgets.POD_CITY
- MapplsUIWidgets.POD_VILLAGE
- MapplsUIWidgets.POD_SUB_DISTRICT
- MapplsUIWidgets.POD_DISTRICT
- MapplsUIWidgets.POD_STATE
- MapplsUIWidgets.POD_SUB_SUB_LOCALITY
tokenizeAddress(Boolean)
: provides the different address attributes in a structured object.backgroundColor(HexColor)
: to set the background color of the widgettoolbarColor(HexColor)
: to set the toolbar color of the widget.hint(String)
: To set the hint on the Search view of the widget.
For any queries and support, please contact:
Email us at [email protected]
Support Need support? contact us!