Skip to main content

Mappls Geofence UI

MapplsGeofenceUI Plugin for iOS


Mappls Geofence Plugin SDK provides the functionalities to create a geofence in circle and polygon shape.

Getting Started

Anyone can integrate the Mappls Geofence Plugin by following simple steps.Please note that this Plugin for iOS supports iOS SDK 9.0 and above.

To integrate Geofence SDK, it is important to pass an object of MapplsMapView which is part of Mappls's MapplsMap SDK.

Step 1 :- Setup your Project

  1. To start with, MapplsAPIKit and MapplsMap frameworks are required to be added in your project. These are available on Cocoapods and it can be accessed by using below pod commands.

    pod 'MapplsGeofenceUI'

    Note: Mappls's SDK keys will required to initialize MapplsMap SDK.

    Fore more information on setting Click here. user can get the keys by login/signup on Mappls's developer Dashboard.

    Below are commands to install SDK using Cocoapods:

    • cd Your Project path
    • pod init
    • pod install
    • open your xcworkspace

Step 2 :- Authorization


It is required to set Mappls keys to use any MAPPL's SDK. Please refer the documentatation here.

Step 3 :- Initialization of GeofenceViewUI

To Initialize, add MapplsGeofenceUI and MapplsMap Framework in your controller File.

import MapplsMap
import MapplsGeofenceUI
var geofenceView: MapplsGeofenceView!
override func viewDidLoad() {
// If you're on a background thread and want to execute code on the main thread, you need to call async()
DispatchQueue.main.async {
let geofenceInstance: MapplsGeofenceView = {
geofenceView = MapplsGeofenceView.init(geofenceframe: self.view.bounds)
geofenceView?.autoresizingMask = [.flexibleWidth, .flexibleHeight]
return geofenceView
geofenceInstance.delegate = self

User must implement the MapplsGeofenceViewDelegate protocol class to use delegate methods of MapplsGeofenceView

 geofenceInstance.delegate = self

Thats All! The plugin is added in your application.

This highly customizable plugin offers a wide range of properties can be edited based on the requirements of the users. Lets have alook at them.

Customizing the Geofence using various properties:

  1. Set Geofence Mode: To set Geofence mode as a circle or a polygon

    geofenceView.setMode(mode: .circle)
  2. Show/Hide Default Slider: To show/hide CircleSlider. Defaults to true.

    geofenceView.isShowDefaultSliderForCircle = false
  3. Mode Panel: To show/hide modePanel for Circle and Polygon. Defaults to true.

    geofenceView.isShowDefaultModePanel = false
  4. Polygon Delete Button Image: To change PolygonDelete button default image

    geofenceView.deleteBtnDefaultImage = UIImage(named: "")
  5. Polygon Drag Point To Move DeleteImage: To change polygonDeleteImage while dragging to any point.

    geofenceView.deleteBtnDeleteImage = UIImage(named: "")
  6. Circle Fill Color: To set fill color of circle

    geofenceView.circlefillColor = .red
  7. Circle Stroke Color : To set the stroke color of the circle.

    geofenceView.circleStrokeColor = .red
  8. Polygon Fill Color : To set the fill color of the polygon

    geofenceView.polygonFillColor = .red
  9. Polygon Stroke Color: To set the stroke of the polygon

    geofenceView.polygonStrokeColor = .red
  10. Polygon ToolTipBackgroundColor: To change top instruction tool tip Background Color.

    geofenceView.toolTipBackgroundColor = .blue
  11. Marker Fill Color : To change Marker Annotation Color.

    geofenceView.markerFillColor = .blue
  12. Marker Stroke Color : To change Polygon Marker Stroke Color.

    geofenceView.markerStrokeColor = .blue
  13. Mid Marker Fill Color : To change Polygon Mid Marker Color.

    geofenceView.midMarkerFillColor = .blue
  14. Circle Slider MinTrack Color : To change CircleSlider MinTrackColor by using this property. Defaults to blue color.

    geofenceView.sliderMinTrackColor = .blue
  15. Circle Slider MaxTrack Color : To change CircleSlider MaxTrackColor by using this property. Defaults to Grey color.

    geofenceView.sliderMaxTrackColor = .blue
  16. Circle Slider ThumbTint Color : To change CircleSlider ThumbTintColor by using this property. Defaults to white.

    geofenceView.sliderThumbTintColor = .blue
  17. Dragging Edges line Color : To set geofence Dragging Edges line Color.

    geofenceView.draggingEdgesLineColor = .red
  18. Geofence Stroke Width : To set geofence Stroke width.

    geofenceView.geofenceStrokeWidth = 2.5
  19. Geofence Circle Center marker Image : To set the Circle Center marker Image.

        geofenceView.circleCenterMarker = UIImage(named: "image")
  20. Geofence sketch board overlay : To set sketch board overlay color.

    geofenceView.polygonDrawingOverlayColor = .red
  21. Dynamic zoom level adjustment : To set zoom of map.

    geofenceView.mapview.zoomlevel = 18
  22. DefaultOverlayToolTipView : To remove default overlay tool tip view.

    geofenceView.showHideDefaultOverlayIcons = true
  23. BackgroundOvarlayColor : To set polygon background overlay color.

    geofenceView.polygonDrawingOverlayColor = UIColor.clear
  24. IsShowDeleteControl : To remove DeleteControlPoint.. Defaults to true.

    geofenceView.IsShowDeleteControl = false
  25. Polygon Direction : To set polygon direction in Clockwise, anticlockwise or None. If set clockwise,the current points will convert in clockwise shape.

    geofenceView.convertPointsToClockWise(pointsType: .clockWise)
  26. Circle Radius : To set the radius of the circle .

    // user can pass your slider value over here 
    geofenceView.circleRadius = slider.value
  27. Circle Minimum Radius : To set the minimum value of the circle in the slider.

    geofenceView.circleMinRadius = Double(slider.minimumValue)
  28. Circle Maximum Radius : To set the maximum value of the circle in the slider.

    geofenceView.circleMaxRadius = Double(slider.maximumValue)
  29. Geofence Anchor Point : To set Geofence tip marker(Anchor Point) with the help of this property. Default property value is (x=0,y=0). For top tip marker user can set cgpoint value as below example.

      geofenceView.setGeofenceAnchorPoint = CGPoint(x: 0.5, y: 1.0)
  30. Circle Proposed Radius : It is the dotted line draw around a circle when user moves the slider value. Code to use this feature is as follows :

    @IBAction func btnSliderValueChanged(_ sender: UISlider, forEvent event: UIEvent) {

    if let touchEvent = event.allTouches?.first {
    switch touchEvent.phase {
    case .began:
    print("Slider Began")
    // handling the drag began
    case .moved:
    print("Slider Moved")

    geofenceView.circleProposedRadius = Double(sender.value)

    // handling the drag moved
    case .ended:
    print("Slider Ended")

    geofenceView.circleRadius = Double(sender.value)

    handle drag ended
  31. Circle Center Coordinate : To set center of circle using coordinates.

    geofenceView.setCircleCenterCoordinate(coordinate: CLLocationCoordinate2D(latitude: 28.7041, longitude: 77.1025))
  32. Geofence Polygon Drawing Enabled : To enable or disable the polygon drawing board.

    Note: While using Polygon Mode and using setMode functions, it resets property isPolygonDrawingEnabled to true. Value of this property must be considered on receiving callback using delegate method geofenceShapeDidChanged.

    geofenceView.isPolygonDrawingEnabled = true
  33. Polygon Drawing Stroke Width : To set the width of stroke of drawing board while creating polygon geofence. Default value is 2.

    geofenceView.polygonDrawingStorkeWidth = 2
  34. Polygon Drawing Stroke Color : To set the color of stroke of drawing board while creating polygon geofence.

    geofenceView.polygonDrawingStrokeColor = UIColor.gray
  35. Change Polygon's Mid Marker Image : To change image of marker in the middle of polygon edge lines.

    geofenceView.midMarkerViewImage = UIImage(named: "pinMid")
  36. Change Polygon's Creation Mode : Polygon can be created either by free hand drawing on a drawing overlay or by simply tapping on the map.

    As suggested by name itself, it is property is used change mode of creating polygon.Default to draw.

    Note: On setting its value to tap, value of isPolygonDrawingEnabled will be changed to false automatically.

    geofenceView.polygonCreationMode = .tap
  37. Auto Hide Edge Markers : Control points of polygon while dragging are visible by default so the value remains false. To hide them, user can set below property to true.

    geofenceView.isHiddenPolygonControlPoints = true
  38. MapplsGeofenceViewDelegate : It is a protocol class which will be used for callback methods as shown below:

    1. Call Back Handler : Geofence's Shape object can be queried by using this protocol. Geofence shape data will return in following case.

    • When CircleSlider Value Changed.
    • When circle centre points changed.
    • When set radius changed.
    • When free hand drawing finished.
    • When polygon point dragging finished.
    • When any polygon point to move and Delete.
    • When Geofence Circle did end dragging.
    geofenceShapeDidChanged(_ shape: MapplsGeofenceShape)

    2. Mode Callback : It basically returns your current mode like circle or polygon

    geofenceModeChanged (mode: MapplsOverlayShapeGeometryType)

    3. Circle Radius Changed : To get circle radius changed value in this delegate method.

    circleRadiusChanged(radius: Double) 

    3. Circle Radius Changed : To get if circle did end dragging.

    didDragGeofence(isdragged: Bool)
  39. Custom Marker on Geofence View : For adding custom marker on geofence view, we have created one class in sample Custom geofence annotation. This class is inherited with MGLPointAnnotation and GeofenceAnnotation.

    Basically **geofence Annotation** is protocol class that contain annotation image. User can set image by using this property  `geofenceAnnotationImage`.

    **Note** *- To help more, we are showing one marker on the top right corner in the sample app (ClassCustomGeofenceVC)*.
 To Check this, Refer to the code below after creating Polygon Click marker button:

// Use this class to test marker on map.
let annotation = CustomGeofenceAnnotation()
annotation.title = ""
annotation.coordinate = coordinate
if let image = UIImage(named: "pin.png") {
annotation.geofenceAnnotationImage = image
  1. Polygon Center as Coordinate : We have added property and method to get polygon center as Coordinates. Below code refers one Class function and another as global property to get the Polygon Center as coordinate.

    let center = geofenceView.polygonCenterCoordinate
    let location = MapplsGeofenceView.centerCoordinateOf(coordinates: polygonPints, mapView: geofenceView.mapView)
  2. Rectangle Polygon: To draw a rectangle-shaped polygon, mode must be set to polygon, polygonCreationMode property must be set to be tap, isPolygonDrawingEnabled property must be set to false and isRectangleShapeSelected must be set to true. See below code snippet

    geofenceView.polygonCreationMode = .tap
    geofenceView.setMode(mode: .polygon)
    geofenceView.isPolygonDrawingEnabled = false
    geofenceView.isRectangleShapeSelected = true

Sample App

In the Sample Version 0.5.0, we have added some more functionalities like:

1. Polygon points Check (Anticlockwise or Clockwise)

To see if the polygon points are drawn clockwise or antoclockwise, draw polygon points in sampleApp. We have one button that shows direction in top right corner of custom geofence class.

2. Draw Geofence Shape View

To view your geofence created shape by clicking on Apply button(In customGeofenceVC Class). When the user clicks on Apply button, it will navigate to related list in class(DrawCircleVC).

3. Edit Geofence Shape

In Class (DrawCircle) we are showing one option to edit on click. It will navigate to the related geofence screen with current shape, here, user can modified it.

After clicking Apply button, it will reflect in (DrawCircleVCClass).

4. Delete Geofence Shape

We have provided a delete button in (rawCircleVC Class). Clicking on this, will delete the current shape in the list.