MapView Polygon

This example shows how to draw a NGLPolygon on the NGLMapView.

  • Draw a Polygon by the given coordinates.

  • Provide proxy methods to set properties of the Polygon, such as color and alpha. Also, provide some methods to handle user gesture events, such as selecting and deselecting the Polyline.

docs-image

For all code examples, refer to Maps Code Examples

PolygonViewController view source

1
import UIKit
2
import Nbmap
3
class PolygonViewController: UIViewController {
4
var nbMapView: NGLMapView! {
5
didSet {
6
oldValue?.removeFromSuperview()
7
if let mapView = nbMapView {
8
view.insertSubview(mapView, at: 0)
9
}
10
}
11
}
12
13
override func viewDidLoad() {
14
super.viewDidLoad()
15
nbMapView = NGLMapView(frame:self.view.bounds)
16
nbMapView.delegate = self
17
drawPolygon()
18
}
19
20
func drawPolygon(){
21
let locations: [CLLocationCoordinate2D] = [
22
CLLocationCoordinate2D(latitude: 12.94798778, longitude: 77.57375084),
23
CLLocationCoordinate2D(latitude: 12.93669616, longitude: 77.57385337),
24
CLLocationCoordinate2D(latitude: 12.93639637, longitude: 77.58031279),
25
CLLocationCoordinate2D(latitude: 12.94808770, longitude: 77.58000520)
26
]
27
if let currentAnnotations = nbMapView.annotations {
28
nbMapView.removeAnnotations(currentAnnotations)
29
}
30
31
let polygon: NGLPolygon = NGLPolygon.init(coordinates: locations, count: 4)
32
nbMapView.addAnnotation(polygon)
33
}
34
}
35
extension PolygonViewController: NGLMapViewDelegate {
36
func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
37
38
let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.94798778, 77.57375084),
39
acrossDistance:10000,
40
pitch:0,
41
heading:0)
42
nbMapView.fly(to: camera)
43
44
}
45
/**
46
Returns the alpha value to use when rendering a shape annotation.
47
A value of `0.0` results in a completely transparent shape. A value of `1.0`,
48
the default, results in a completely opaque shape.
49
This method sets the opacity of an entire shape, inclusive of its stroke and
50
fill. To independently set the values for stroke or fill, specify an alpha
51
component in the color returned by `-mapView:strokeColorForShapeAnnotation:` or
52
`-mapView:fillColorForPolygonAnnotation:`.
53
@param mapView The map view rendering the shape annotation.
54
@param annotation The annotation being rendered.
55
@return An alpha value between `0` and `1.0`.
56
*/
57
func mapView(_ mapView: NGLMapView, alphaForShapeAnnotation annotation: NGLShape) -> CGFloat {
58
return 1.0
59
}
60
/**
61
Returns the color to use when rendering the outline of a shape annotation.
62
The default stroke color is the map view's tint color. If a pattern color is
63
specified, the result is undefined.
64
Opacity may be set by specifying an alpha component. The default alpha value is
65
`1.0` and results in a completely opaque stroke.
66
@param mapView The map view rendering the shape annotation.
67
@param annotation The annotation being rendered.
68
@return A color to use for the shape outline.
69
*/
70
func mapView(_ mapView: NGLMapView, strokeColorForShapeAnnotation annotation: NGLShape) -> UIColor {
71
return UIColor.red
72
}
73
/**
74
Returns the color to use when rendering the fill of a polygon annotation.
75
The default fill color is the map view's tint color. If a pattern color is
76
specified, the result is undefined.
77
Opacity may be set by specifying an alpha component. The default alpha value is
78
`1.0` and results in a completely opaque shape.
79
@param mapView The map view rendering the polygon annotation.
80
@param annotation The annotation being rendered.
81
@return The polygon's interior fill color.
82
*/
83
84
func mapView(_ mapView: NGLMapView, fillColorForPolygonAnnotation annotation: NGLPolygon) -> UIColor {
85
return UIColor.blue
86
}
87
88
/**
89
Returns the line width in points to use when rendering the outline of a
90
polyline annotation.
91
By default, the polyline is outlined with a line `3.0` points wide.
92
@param mapView The map view rendering the polygon annotation.
93
@param annotation The annotation being rendered.
94
@return A line width for the polyline, measured in points.
95
*/
96
func mapView(_ mapView: NGLMapView, lineWidthForPolylineAnnotation annotation: NGLPolyline) -> CGFloat {
97
return 3.0
98
}
99
100
/**
101
Tells the delegate that one of its annotations was selected.
102
You can use this method to track changes in the selection state of annotations.
103
If the annotation is associated with an annotation view, you can also implement
104
`-mapView:didSelectAnnotationView:`, which is called immediately after this
105
method is called.
106
@param mapView The map view containing the annotation.
107
@param annotation The annotation that was selected.
108
*/
109
func mapView(_ mapView: NGLMapView, didSelect annotation: NGLAnnotation){
110
let title = (annotation.title ?? "") ?? ""
111
print("didSelect title:" + title)
112
let subtitle = (annotation.subtitle ?? "") ?? ""
113
print("didSelect subtitle:" + subtitle)
114
}
115
/**
116
Tells the delegate that one of its annotations was deselected.
117
You can use this method to track changes in the selection state of annotations.
118
If the annotation is associated with an annotation view, you can also implement
119
`-mapView:didDeselectAnnotationView:`, which is called immediately after this
120
method is called.
121
@param mapView The map view containing the annotation.
122
@param annotation The annotation that was deselected.
123
*/
124
func mapView(_ mapView: NGLMapView, didDeselect annotation: NGLAnnotation){
125
let title = (annotation.title ?? "") ?? ""
126
print("didDeselect title:" + title)
127
let subtitle = (annotation.subtitle ?? "") ?? ""
128
print("didDeselect subtitle:" + subtitle)
129
}
130
}

The example code sets up a view controller with a map view, allows drawing a polygon on the map, and customizes the polygon's style and annotation events using the NGLMapViewDelegate methods.

Initialization of MapView

  • The code initializes an instance of NGLMapView and assigns it to the nbMapView property. The map view is configured with a flexible width and height and added as a subview to the view controller's view. The map view's delegate is set to the view controller.

Drawing a Polygon

  • The code defines a function named drawPolygon that creates a polygon on the map view. It specifies an array of coordinates for the polygon's vertices and creates an NGLPolygon object with these coordinates. The existing annotations on the map view are removed, and the created polygon is added as an annotation to the map view.

Custom Polygon Style

  • The code includes several delegate methods from the NGLMapViewDelegate protocol to customize the style of the polygon and handle various events related to annotations.

    • mapView(_:didFinishLoading:) method sets the initial camera position.

    • mapView(_:alphaForShapeAnnotation:), mapView(_:strokeColorForShapeAnnotation:) mapView(_:fillColorForPolygonAnnotation:), mapView(_:lineWidthForPolylineAnnotation:) methods define the alpha value, stroke color, fill color, and line width for the polygon annotation, respectively.

    • mapView(_:didSelect:) and mapView(_:didDeselect:) methods handle the selection and deselection events of annotations and print their titles and subtitles.

© 2024 NextBillion.ai all rights reserved.