Mappls Geofence Widget

Getting started

npm install mappls-geofence-widget-react-native

Install peerDependencies

npm i mappls-map-react-native

If using React-native<0.60

react-native link mappls-geofence-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
}

ios

run pod install from ios folder

Usage

Step 1: Import

import  MapplsGeoFence  from  'mappls-geofence-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
MapplsGL.setAtlasGrantType(atlasGrantType);

Step 3: Open MapplsGeoFence Widget

MapplsGeoFence.openGeoFenceWidget({minRadius: 2000,  maxRadius: 10000})
.then(e  =>  {console.log(e)})
.catch(err  =>  console.log("error catch search:",  err.message))

Request Props

circleFillColor(string): To change Circle Fill colors
circleFillOutlineColor(string): To change circle Outline color
circleOutlineWidth(number): To change the circle outline width
draggingLineColor(string): To change the dragging line of Polygon edges and circle radius changing line.
maxRadius(number): To set maximum radius of circle
minRadius(number): To set minimum radius of circle.
polygonDrawingBackgroundColor(string): To change the color of Polygon drawing board color.
polygonDrawingLineColor(string): To set the polygon sketch drawing line.
polygonFillColor(String): To change fill color of polygon
polygonFillOutlineColor(string): To change outline color of polygon
polygonOutlineWidth(number): To set the polygon outline width
radiusInterval(number): To set the step size of radius changing
seekbarCornerRadius(number): To change seekbar corner radius
polygonCreationMode(number): To change the creation mode of polygon. Below mentioned are the values:
- MapplsGeoFence.POLYGON_CREATION_MODE_DRAW:User can draw on screen to create polygon
- MapplsGeoFence.POLYGON_CREATION_MODE_TAP : User can tap on the screen to create polygon
toolbarTitle(string): To change the title of toolbar .
toolbarColor(string): To change the color of toolbar
toolbarTintColor(string): To change done button tint color.
initialiseGeoFence(GeoFence):Set initial properties for Geofence. Takes GeoFence Object as parameter.
simplifyOnIntersection(boolean): To auto correct self intersecting polygon
maxEdgesInPolygon(number): To restrict number of points in a polygon
convertPointsToClockWise(string): To get Polygon points in clockwise/anti-clockwise directions. Below mentioned are the values:
- MapplsGeoFence.CONVERT_POINTS_ORIENTATION_NONE
- MapplsGeoFence.CONVERT_POINTS_ORIENTATION_ANTICLOCKWISE
- MapplsGeoFence.CONVERT_POINTS_ORIENTATION_CLOCKWISE
doneButtonColor(string): To change done button color.
doneButtonTintColor(string): To change done button tint color.

Geofence

isPolygon (boolean): To set if polygon or circle.
circleRadius(number): To set the radius of circle.
circleCenter(Array<number>): To set the center of circle.
polygon(Array<Array<Array<number>>>) : To set the polygon points.
polygonType(String) : To set the type of polygon. Below mentioned are the values:
- MapplsGeoFence.POLYGON_TYPE_NORMAL
- MapplsGeoFence.POLYGON_TYPE_QUADRILATERAL