Mappls Geofence UI

MapplsGeofenceUI Plugin for iOS

Introduction

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

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

MapplsAPICore

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() {
        super.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
self.view.addSubview(geofenceInstance)
}
}

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:

Set Geofence Mode: To set Geofence mode as a circle or a polygon
```
geofenceView.setMode(mode: .circle)
```
Show/Hide Default Slider: To show/hide CircleSlider. Defaults to true.
```
geofenceView.isShowDefaultSliderForCircle = false
```
Mode Panel: To show/hide modePanel for Circle and Polygon. Defaults to true.
```
geofenceView.isShowDefaultModePanel = false
```
Polygon Delete Button Image: To change PolygonDelete button default image
```
geofenceView.deleteBtnDefaultImage = UIImage(named: "")
```
Polygon Drag Point To Move DeleteImage: To change polygonDeleteImage while dragging to any point.
```
geofenceView.deleteBtnDeleteImage = UIImage(named: "")
```
Circle Fill Color: To set fill color of circle
```
geofenceView.circlefillColor = .red
```
Circle Stroke Color : To set the stroke color of the circle.
```
geofenceView.circleStrokeColor = .red
```
Polygon Fill Color : To set the fill color of the polygon
```
geofenceView.polygonFillColor = .red
```
Polygon Stroke Color: To set the stroke of the polygon
```
geofenceView.polygonStrokeColor = .red
```
Polygon ToolTipBackgroundColor: To change top instruction tool tip Background Color.
```
geofenceView.toolTipBackgroundColor = .blue
```
Marker Fill Color : To change Marker Annotation Color.
```
geofenceView.markerFillColor = .blue
```
Marker Stroke Color : To change Polygon Marker Stroke Color.
```
geofenceView.markerStrokeColor = .blue
```
Mid Marker Fill Color : To change Polygon Mid Marker Color.
```
geofenceView.midMarkerFillColor = .blue
```
Circle Slider MinTrack Color : To change CircleSlider MinTrackColor by using this property. Defaults to blue color.
```
geofenceView.sliderMinTrackColor = .blue
```
Circle Slider MaxTrack Color : To change CircleSlider MaxTrackColor by using this property. Defaults to Grey color.
```
geofenceView.sliderMaxTrackColor = .blue
```
Circle Slider ThumbTint Color : To change CircleSlider ThumbTintColor by using this property. Defaults to white.
```
geofenceView.sliderThumbTintColor = .blue
```
Dragging Edges line Color : To set geofence Dragging Edges line Color.
```
geofenceView.draggingEdgesLineColor = .red
```
Geofence Stroke Width : To set geofence Stroke width.
```
geofenceView.geofenceStrokeWidth = 2.5
```
Geofence Circle Center marker Image : To set the Circle Center marker Image.
```
    geofenceView.circleCenterMarker = UIImage(named: "image")
```
Geofence sketch board overlay : To set sketch board overlay color.
```
geofenceView.polygonDrawingOverlayColor = .red
```
Dynamic zoom level adjustment : To set zoom of map.
```
```swift
geofenceView.mapview.zoomlevel = 18
```
```
DefaultOverlayToolTipView : To remove default overlay tool tip view.
```
geofenceView.showHideDefaultOverlayIcons = true
```
BackgroundOvarlayColor : To set polygon background overlay color.
```
geofenceView.polygonDrawingOverlayColor = UIColor.clear
```
IsShowDeleteControl : To remove DeleteControlPoint.. Defaults to true.
```
geofenceView.IsShowDeleteControl = false
```
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)
```

Circle Radius : To set the radius of the circle .

// user can pass your slider value over here 
geofenceView.circleRadius = slider.value

Circle Minimum Radius : To set the minimum value of the circle in the slider.
```
geofenceView.circleMinRadius = Double(slider.minimumValue)
```
Circle Maximum Radius : To set the maximum value of the circle in the slider.
```
geofenceView.circleMaxRadius = Double(slider.maximumValue)
```
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)
```

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")
      break
    // handling the drag began
      case .moved:
      print("Slider Moved")
      
      geofenceView.circleProposedRadius = Double(sender.value)

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

      geofenceView.circleRadius = Double(sender.value)

    break
    handle drag ended
    default:
    break
  }
}

Circle Center Coordinate : To set center of circle using coordinates.

geofenceView.setCircleCenterCoordinate(coordinate: CLLocationCoordinate2D(latitude: 28.7041, longitude: 77.1025))

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
```
Polygon Drawing Stroke Width : To set the width of stroke of drawing board while creating polygon geofence. Default value is 2.
```
geofenceView.polygonDrawingStorkeWidth = 2
```
Polygon Drawing Stroke Color : To set the color of stroke of drawing board while creating polygon geofence.
```
geofenceView.polygonDrawingStrokeColor = UIColor.gray
```
Change Polygon's Mid Marker Image : To change image of marker in the middle of polygon edge lines.
```
geofenceView.midMarkerViewImage = UIImage(named: "pinMid")
```
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
```
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
```
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)
```

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:

```swift
// 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
} 
geofenceView.mapView.addAnnotation(annotation)
```

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.
```
```swift
let center = geofenceView.polygonCenterCoordinate
print(center)
let location = MapplsGeofenceView.centerCoordinateOf(coordinates: polygonPints, mapView: geofenceView.mapView)
print(location)
```
```
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
```
```swift
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.

MapplsGeofenceUI Plugin for iOS

Introduction​

Getting Started​

Step 1 :- Setup your Project​

Step 2 :- Authorization​

MapplsAPICore​

Step 3 :- Initialization of GeofenceViewUI​

Customizing the Geofence using various properties:​