Mapview Polyline

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

  • User long-press to select points.

  • Draw a Polyline between points.

  • Provide proxy methods to set properties of the Polyline, such as color and width. 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

PolylineViewController view source

1
import UIKit
2
import Nbmap
3
class PolylineViewController: UIViewController {
4
var nbMapView: NGLMapView! {
5
didSet {
6
oldValue?.removeFromSuperview()
7
if let mapView = nbMapView {
8
configureMapView(nbMapView)
9
view.insertSubview(mapView, at: 0)
10
}
11
}
12
}
13
14
var points : Array = [CLLocationCoordinate2D]()
15
16
func configureMapView(_ mapView: NGLMapView) {
17
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
18
mapView.delegate = self
19
20
let singleTap = UILongPressGestureRecognizer(target: self, action: #selector(didLongPress(sender:)))
21
mapView.gestureRecognizers?.filter({ $0 is UILongPressGestureRecognizer }).forEach(singleTap.require(toFail:))
22
mapView.addGestureRecognizer(singleTap)
23
24
}
25
26
override func viewDidLoad() {
27
super.viewDidLoad()
28
nbMapView = NGLMapView(frame:self.view.bounds)
29
}
30
31
32
@objc func didLongPress(sender: UILongPressGestureRecognizer) {
33
if(sender.state == UIGestureRecognizer.State.began){
34
let point = sender.location(in: sender.view)
35
let coordinate = nbMapView.convert(point, toCoordinateFrom: nbMapView)
36
points.append(coordinate)
37
drawPolyline()
38
}
39
}
40
41
func drawPolyline(){
42
if(points.count > 1){
43
let line = NGLPolyline(coordinates:points,count: UInt(points.count))
44
nbMapView.addAnnotation(line)
45
46
}
47
}
48
}
49
extension PolylineViewController: NGLMapViewDelegate {
50
func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
51
52
let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.94798778, 77.57375084),
53
acrossDistance:10000,
54
pitch:0,
55
heading:0)
56
57
// Set the camera after map style loaded
58
nbMapView.fly(to: camera)
59
}
60
/**
61
Gets the alpha value to use when rendering a shape annotation.
62
A value of `0.0` results in a completely transparent shape. A value of `1.0`,
63
the default, results in a completely opaque shape.
64
This method sets the opacity of an entire shape, inclusive of its stroke and
65
fill. To independently set the values for stroke or fill, specify an alpha
66
component in the color returned by `-mapView:strokeColorForShapeAnnotation:` or
67
`-mapView:fillColorForPolygonAnnotation:`.
68
@param mapView The map view rendering the shape annotation.
69
@param annotation The annotation being rendered.
70
@return An alpha value between `0` and `1.0`.
71
*/
72
func mapView(_ mapView: NGLMapView, alphaForShapeAnnotation annotation: NGLShape) -> CGFloat {
73
return 1.0
74
}
75
/**
76
Gets the color to use when rendering the outline of a shape annotation.
77
The default stroke color is the map view's tint color. If a pattern color is
78
specified, the result is undefined.
79
Opacity may be set by specifying an alpha component. The default alpha value is
80
`1.0` and results in a completely opaque stroke.
81
@param mapView The map view rendering the shape annotation.
82
@param annotation The annotation being rendered.
83
@return A color to use for the shape outline.
84
*/
85
func mapView(_ mapView: NGLMapView, strokeColorForShapeAnnotation annotation: NGLShape) -> UIColor {
86
return UIColor.red
87
}
88
/**
89
Gets the color to use when rendering the fill of a polygon annotation.
90
The default fill color is the map view's tint color. If a pattern color is
91
specified, the result is undefined.
92
Opacity may be set by specifying an alpha component. The default alpha value is
93
`1.0` and results in a completely opaque shape.
94
@param mapView The map view rendering the polygon annotation.
95
@param annotation The annotation being rendered.
96
@return The polygon's interior fill color.
97
*/
98
99
func mapView(_ mapView: NGLMapView, fillColorForPolygonAnnotation annotation: NGLPolygon) -> UIColor {
100
return UIColor.blue
101
}
102
103
/**
104
Gets the line width in points to use when rendering the outline of a
105
polyline annotation.
106
By default, the polyline is outlined with a line `3.0` points wide.
107
@param mapView The map view rendering the polygon annotation.
108
@param annotation The annotation being rendered.
109
@return A line width for the polyline, measured in points.
110
*/
111
func mapView(_ mapView: NGLMapView, lineWidthForPolylineAnnotation annotation: NGLPolyline) -> CGFloat {
112
return 3.0
113
}
114
115
/**
116
Tells the user that one of its annotations was selected.
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:didSelectAnnotationView:`, 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 selected.
123
*/
124
func mapView(_ mapView: NGLMapView, didSelect annotation: NGLAnnotation){
125
let title = (annotation.title ?? "") ?? ""
126
print("didSelect title:" + title)
127
let subtitle = (annotation.subtitle ?? "") ?? ""
128
print("didSelect subtitle:" + subtitle)
129
}
130
/**
131
Tells the user that one of its annotations was deselected.
132
You can use this method to track changes in the selection state of annotations.
133
If the annotation is associated with an annotation view, you can also implement
134
`-mapView:didDeselectAnnotationView:`, which is called immediately after this
135
method is called.
136
@param mapView The map view containing the annotation.
137
@param annotation The annotation that was deselected.
138
*/
139
func mapView(_ mapView: NGLMapView, didDeselect annotation: NGLAnnotation){
140
let title = (annotation.title ?? "") ?? ""
141
print("didDeselect title:" + title)
142
let subtitle = (annotation.subtitle ?? "") ?? ""
143
print("didDeselect subtitle:" + subtitle)
144
}
145
}

The example code sets up a view controller with a map view, allows drawing a polyline on the map by adding points via long-press gestures, and customizes the polyline'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 Polyline

  • The code defines a function named drawPolyline that creates a polyline on the map view. It checks if there are at least two points in the points array, creates an NGLPolyline object with the coordinates from the points array, and adds the polyline as an annotation to the map view.

Custom Polyline Style

  • The code includes several delegate methods from the NGLMapViewDelegate protocol to customize the style of the polyline 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 polyline annotation, respectively.

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

Additionally, the code includes a long-press gesture recognizer that allows the user to add points to the polyline by long-pressing on the map view. The long-press gesture handler didLongPress retrieves the long-press location, converts it to a coordinate, adds the coordinate to the points array, and calls the drawPolyline function to update the polyline on the map.

© 2024 NextBillion.ai all rights reserved.