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

1. circleFillColor(string): To change Circle Fill colors
2. circleFillOutlineColor(string): To change circle Outline color
3. circleOutlineWidth(number): To change the circle outline width
4. draggingLineColor(string): To change the dragging line of Polygon edges and circle radius changing line.
5. maxRadius(number): To set maximum radius of circle
6. minRadius(number): To set minimum radius of circle.
7. polygonDrawingBackgroundColor(string): To change the color of Polygon drawing board color.
8. polygonDrawingLineColor(string): To set the polygon sketch drawing line.
9. polygonFillColor(String): To change fill color of polygon
10. polygonFillOutlineColor(string): To change outline color of polygon
11. polygonOutlineWidth(number): To set the polygon outline width
12. radiusInterval(number): To set the step size of radius changing
13. seekbarCornerRadius(number): To change seekbar corner radius
14. 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
15. toolbarTitle(string): To change the title of toolbar .
16. toolbarColor(string): To change the color of toolbar
17. toolbarTintColor(string): To change done button tint color.
18. initialiseGeoFence(GeoFence):Set initial properties for Geofence. Takes GeoFence Object as parameter.
19. simplifyOnIntersection(boolean): To auto correct self intersecting polygon
20. maxEdgesInPolygon(number): To restrict number of points in a polygon
21. 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
22. doneButtonColor(string): To change done button color.
23. doneButtonTintColor(string): To change done button tint color.

Geofence

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

For any queries and support, please contact:

Email us at [email protected]

Support Need support? contact us!