In this page

MapView Marker

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

  1. User long-press to select points.

  2. Add a marker on the NGLMapView

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

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

  5. 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:

  1. 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.

  2. 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.

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

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

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

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

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

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

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

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

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

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

DIDN'T FIND WHAT YOU LOOKING FOR?