](https://www.mapmyindia.com/api)
# Mappls Nearby Widget-React Native
## Getting started
`npm install mappls-nearby-widget-react-native`
* Install peerDependencies
~~~javascript
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:-
```diff
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:-
```diff
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
```javascript
import MapmyindiaNearbyWidget from "mappls-nearby-widget-react-native";
import MapmyIndiaGL from 'mappls-map-react-native';
```
#### Step 2. Initialization
Initialize the SDK with your keys.
```javascript
// 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
MapplsGL.setAtlasGrantType(atlasGrantType);
```
#### Step 3: Open MapplsNearbyWidget
```javascript
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.
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
](https://about.mappls.com/api/)
Email us at [apisupport@mappls.com](mailto:apisupport@mappls.com)
[Support](https://about.mappls.com/contact/)
Need support? contact us!
[
](https://stackoverflow.com/questions/tagged/mappls-api)[](https://about.mappls.com/blog/)[](https://github.com/Mappls-api)[
](https://www.facebook.com/Mapplsofficial)[](https://twitter.com/mappls)[](https://www.linkedin.com/company/mappls/)[](https://www.youtube.com/channel/UCAWvWsh-dZLLeUU7_J9HiOA)
@ Copyright 2022 CE Info Systems Ltd. All Rights Reserved.
Terms & Conditions | Privacy Policy | Supplier Sustainability Policy | Health & Safety Policy | Environmental Policy & CSR Report
Customer Care: +91-9999333223
---
_Source: https://npm.io/package/mappls-nearby-widget-react-native · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._