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

1import UIKit
2import Nbmap
3class 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}
35extension 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.