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

For all code examples, refer to Maps Code Examples
MarkerViewController view source
1import Foundation
2import UIKit
3import Nbmap
4
5class 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}
53extension 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.
-