MapView Marker

This example shows how to add a marker on the NGLMapView.

  • User long-press to select points.

  • Add a marker on the NGLMapView

  • Provide delegate methods to set properties of the Marker, such as color and width.

  • Provide delegate methods to handle user gesture events, such as selecting and deselecting the marker.

  • Provide delegate method to customize the marker image

documentation image

For all code examples, refer to Maps Code Examples

MarkerViewController view source

1
import Foundation
2
import UIKit
3
import Nbmap
4
5
class MarkerViewController: UIViewController {
6
var nbMapView: NGLMapView! {
7
didSet {
8
oldValue?.removeFromSuperview()
9
if let mapView = nbMapView {
10
configureMapView(mapView)
11
view.insertSubview(mapView, at: 0)
12
mapView.delegate = self
13
}
14
}
15
}
16
17
var points : Array = [CLLocationCoordinate2D]()
18
19
override func viewDidLoad() {
20
super.viewDidLoad()
21
nbMapView = NGLMapView(frame:self.view.bounds)
22
}
23
24
func configureMapView(_ mapView: NGLMapView) {
25
mapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
26
mapView.delegate = self
27
28
let singleTap = UITapGestureRecognizer(target: self, action: #selector(didTapMap(_:)))
29
mapView.gestureRecognizers?.filter({ $0 is UITapGestureRecognizer }).forEach(singleTap.require(toFail:))
30
mapView.addGestureRecognizer(singleTap)
31
}
32
33
@objc func didTapMap(_ tap: UITapGestureRecognizer) {
34
let point = tap.location(in: tap.view)
35
let coordinate = nbMapView.convert(point, toCoordinateFrom: nbMapView)
36
addMarker(coordinates: [coordinate])
37
}
38
39
func addMarker(coordinates: [CLLocationCoordinate2D]){
40
if let currentAnnotations = nbMapView.annotations {
41
nbMapView.removeAnnotations(currentAnnotations)
42
}
43
44
nbMapView.addAnnotations(coordinates.map({(coord)-> NGLPointAnnotation in
45
let annotation = NGLPointAnnotation()
46
annotation.title = "title"
47
annotation.subtitle = "subtitle"
48
annotation.coordinate = coord
49
return annotation
50
}))
51
}
52
}
53
extension MarkerViewController: NGLMapViewDelegate {
54
func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
55
56
let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.97780156, 77.59656748),
57
acrossDistance:10000,
58
pitch:0,
59
heading:0)
60
61
nbMapView.setCamera(camera, animated: false)
62
63
64
}
65
66
67
/**
68
Tells the delegate that one of its annotations was deselected.
69
You can use this method to track changes in the selection state of annotations.
70
If the annotation is associated with an annotation view, you can also implement
71
`-mapView:didDeselectAnnotationView:`, which is called immediately after this
72
method is called.
73
@param mapView The map view containing the annotation.
74
@param annotation The annotation that was deselected.
75
*/
76
func mapView(_ mapView: NGLMapView, didDeselect annotation: NGLAnnotation){
77
print("didDeselect annotation")
78
}
79
80
/**
81
Tells the delegate that one of its annotation views was selected.
82
You can use this method to track changes in the selection state of annotation
83
views.
84
This method is only called for annotation views. To track changes in the
85
selection state of all annotations, including those associated with static
86
annotation images, implement `-mapView:didSelectAnnotation:`, which is called
87
immediately before this method is called.
88
@param mapView The map view containing the annotation.
89
@param annotationView The annotation view that was selected.
90
*/
91
func mapView(_ mapView: NGLMapView, didSelect annotationView: NGLAnnotationView){
92
print("didSelect annotationView")
93
}
94
95
/**
96
Get an annotation image object to mark the given point annotation object on
97
the map.
98
Implement this method to mark a point annotation with a static image. If you
99
want to mark a particular point annotation with an annotation view instead,
100
omit this method or have it return `nil` for that annotation, then implement
101
`-mapView:viewForAnnotation:`.
102
Static annotation images use less memory and draw more quickly than annotation
103
views. On the other hand, annotation views are compatible with UIKit, Core
104
Animation, and other Cocoa Touch frameworks.
105
@param mapView The map view that requested the annotation image.
106
@param annotation The object representing the annotation that is about to be
107
displayed.
108
@return The annotation image object to display for the given annotation or
109
`nil` if you want to display the default marker image or an annotation view.
110
*/
111
func mapView(_ mapView: NGLMapView, imageFor annotation: NGLAnnotation) -> NGLAnnotationImage?{
112
return NGLAnnotationImage(image: UIImage(named: "marker")!,reuseIdentifier:"Marker-Identifier")
113
}
114
115
116
/**
117
Tells the delegate that one of its annotation views was deselected.
118
You can use this method to track changes in the selection state of annotation
119
views.
120
This method is only called for annotation views. To track changes in the
121
selection state of all annotations, including those associated with static
122
annotation images, implement `-mapView:didDeselectAnnotation:`, which is called
123
immediately before this method is called.
124
@param mapView The map view containing the annotation.
125
@param annotationView The annotation view that was deselected.
126
*/
127
func mapView(_ mapView: NGLMapView, didDeselect annotationView: NGLAnnotationView){
128
print("didDeselect annotationView")
129
}
130
// #pragma mark Managing Callout Views
131
/**
132
Returns a Boolean value indicating whether the annotation is able to display
133
extra information in a callout bubble.
134
This method is called after an annotation is selected, before any callout is
135
displayed for the annotation.
136
If the return value is `YES`, a callout view is shown when the user taps on an
137
annotation, selecting it. The default callout displays the annotation's title
138
and subtitle. You can add accessory views to either end of the callout by
139
implementing the `-mapView:leftCalloutAccessoryViewForAnnotation:` and
140
`-mapView:rightCalloutAccessoryViewForAnnotation:` methods. You can further
141
customize the callout's contents by implementing the
142
`-mapView:calloutViewForAnnotation:` method.
143
If the return value is `NO`, or if this method is absent from the delegate, or
144
if the annotation lacks a title, the annotation will not show a callout even
145
when selected.
146
@param mapView The map view that has selected the annotation.
147
@param annotation The object representing the annotation.
148
@return A Boolean value indicating whether the annotation should show a
149
callout.
150
*/
151
func mapView(_ mapView: NGLMapView, annotationCanShowCallout annotation: NGLAnnotation) -> Bool{
152
print("didDeselect annotationCanShowCallout")
153
return true
154
}
155
156
/**
157
Returns a callout view to display for the given annotation.
158
If this method is present in the delegate, it must return a new instance of a
159
view dedicated to display the callout. The returned view will be configured by
160
the map view.
161
If this method is absent from the delegate, or if it returns `nil`, a standard,
162
two-line, bubble-like callout view is displayed by default.
163
@param mapView The map view that requested the callout view.
164
@param annotation The object representing the annotation.
165
@return A view conforming to the `NGLCalloutView` protocol, or `nil` to use the
166
default callout view.
167
*/
168
func mapView(_ mapView: NGLMapView, calloutViewFor annotation: NGLAnnotation) -> NGLCalloutView? {
169
print("didDeselect calloutViewFor")
170
return nil
171
}
172
173
/**
174
Returns the view to display on the left side of the standard callout bubble.
175
The left callout view is typically used to convey information about the
176
annotation or to link to custom information provided by your application.
177
If the view you specify is a descendant of the `UIControl` class, you can use
178
the map view's delegate to receive notifications when your control is tapped,
179
by implementing the `-mapView:annotation:calloutAccessoryControlTapped:`
180
method. If the view you specify does not descend from `UIControl`, your view is
181
responsible for handling any touch events within its bounds.
182
If this method is absent from the delegate, or if it returns `nil`, the
183
standard callout view has no accessory view on its left side. The return value
184
of this method is ignored if `-mapView:calloutViewForAnnotation:` is present in
185
the delegate.
186
To display a view on the callout's right side, implement the
187
`-mapView:rightCalloutAccessoryViewForAnnotation:` method.
188
@param mapView The map view presenting the annotation callout.
189
@param annotation The object representing the annotation with the callout.
190
@return The accessory view to display.
191
*/
192
func mapView(_ mapView: NGLMapView, leftCalloutAccessoryViewFor annotation: NGLAnnotation) -> UIView? {
193
print("leftCalloutAccessoryViewFor")
194
return nil
195
}
196
197
/**
198
Returns the view to display on the right side of the standard callout bubble.
199
The right callout view is typically used to convey information about the
200
annotation or to link to custom information provided by your application.
201
If the view you specify is a descendant of the `UIControl` class, you can use
202
the map view's delegate to receive notifications when your control is tapped,
203
by implementing the `-mapView:annotation:calloutAccessoryControlTapped:`
204
method. If the view you specify does not descend from `UIControl`, your view is
205
responsible for handling any touch events within its bounds.
206
If this method is absent from the delegate, or if it returns `nil`, the
207
standard callout view has no accessory view on its right side. The return value
208
of this method is ignored if `-mapView:calloutViewForAnnotation:` is present in
209
the delegate.
210
To display a view on the callout's left side, implement the
211
`-mapView:leftCalloutAccessoryViewForAnnotation:` method.
212
@param mapView The map view presenting the annotation callout.
213
@param annotation The object representing the annotation with the callout.
214
@return The accessory view to display.
215
*/
216
func mapView(_ mapView: NGLMapView, rightCalloutAccessoryViewFor annotation: NGLAnnotation) -> UIView? {
217
print("rightCalloutAccessoryViewFor")
218
return nil
219
}
220
221
/**
222
Tells the delegate that the user tapped one of the accessory controls in the
223
annotation's callout view.
224
In a standard callout view, accessory views contain custom content and are
225
positioned on either side of the annotation title text. If an accessory view
226
you specify is a descendant of the `UIControl` class, the map view calls this
227
method as a convenience whenever the user taps your view. You can use this
228
method to respond to taps and perform any actions associated with that control.
229
For example, if your control displays additional information about the
230
annotation, you could use this method to present a modal panel with that
231
information.
232
If your custom accessory views are not descendants of the `UIControl` class,
233
the map view does not call this method. If the annotation has a custom callout
234
view via the `-mapView:calloutViewForAnnotation:` method, you can specify the
235
custom accessory views using the `NGLCalloutView` protocol's
236
`leftAccessoryView` and `rightAccessoryView` properties.
237
@param mapView The map view containing the specified annotation.
238
@param annotation The annotation whose accessory view was tapped.
239
@param control The control that was tapped.
240
*/
241
func mapView(_ mapView: NGLMapView, calloutAccessoryControlTapped control: UIControl){
242
print("calloutAccessoryControlTapped control")
243
}
244
245
/**
246
Tells the delegate that the user tapped on an annotation's callout view.
247
This method is called when the user taps on the body of the callout view, as
248
opposed to the callout's left or right accessory view. If the annotation has a
249
custom callout view via the `-mapView:calloutViewForAnnotation:` method, this
250
method is only called whenever the callout view calls its delegate's
251
`-[NGLCalloutViewDelegate calloutViewTapped:]` method.
252
If this method is present on the delegate, the standard callout view's body
253
momentarily highlights when the user taps it, whether or not this method does
254
anything in response to the tap.
255
@param mapView The map view containing the specified annotation.
256
@param annotation The annotation whose callout was tapped.
257
*/
258
func mapView(_ mapView: NGLMapView, tapOnCalloutFor annotation: NGLAnnotation){
259
print("tapOnCalloutFor")
260
}
261
}

The code provided is an implementation of a MarkerViewController that manages a map view with custom marker annotations. Here's a summary of the code:

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

Custom Marker View:

  • The code provides functionality for adding custom markers to the map view. When the user taps on the map view, a marker is added at the tapped location. The existing markers are removed before adding the new marker. Each marker is represented by an NGLPointAnnotation object with a title, subtitle, and coordinate.

  • The maker's image is set using the imageFor annotation delegate method, which returns a custom marker image. The code also includes delegate methods for handling events related to marker selection and callout views.

    • mapView(_:didFinishLoading:): Called when the map view finishes loading its style. It sets the initial camera position using an NGLMapCamera.

    • mapView(_:didDeselect:): Called when one of the annotations is deselected.

    • mapView(_:didSelect:): Called when one of the annotation views is selected.

    • mapView(_:imageFor:): Returns an NGLAnnotationImage to display for the given annotation. In this case, it returns a marker image with a specific identifier.

    • mapView(_:annotationCanShowCallout:): Returns a Boolean indicating whether the annotation should show a callout.

    • mapView(_:calloutViewFor:): Returns a custom callout view to display for the given annotation.

    • mapView(_:leftCalloutAccessoryViewFor:): Returns the left accessory view for the standard callout bubble.

    • mapView(_:rightCalloutAccessoryViewFor:): Returns the right accessory view for the standard callout bubble.

    • mapView(_:calloutAccessoryControlTapped:): Called when the user taps on an accessory control in the annotation's callout view.

    • mapView(_:tapOnCalloutFor:): Called when the user taps on the body of the callout view.

© 2024 NextBillion.ai all rights reserved.