Skip to content

Mappls Geofence Widget

Getting started

A ready to use UI Widget to create/edit GeoFence in a React Native application.

Version History

Version Last Updated Author Release Note
v2.0.0 06 Oct, 2025 Mappls API Team (MA) (ST) - Authentication and authorization mechanisms have been revised.
- Updated minimum Android version to 21.
- Added Support for 16 KB Page Sizes
- Added SPM(Swift Package Manager Support) for IOS.

Installation

  • First install mappls-geofence-widget-react-native:
npm install mappls-geofence-widget-react-native
  • Install peerDependencies 
npm install mappls-map-react-native

Android Setup

Click Here for Android Setup

IOS Setup

  • Click Here for IOS Setup
  • On iOS it's necessary to add $MAPPLS_GEOFENCE_WIDGETS.post_install(installer) to the post_install block in the ios/Podfile is necessary:
     post_install do |installer|
     # Other post install hooks...
     + $MAPPLS_GEOFENCE_WIDGETS.post_install(installer)
     end

Usage

Import

import  MapplsGeoFence  from  'mappls-geofence-widget-react-native';

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): To set the center of circle.
  4. polygon(Array>>) : 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 apisupport@mappls.com

Support Need support? contact us!



@ Copyright 2025 CE Info Systems Ltd. All Rights Reserved.