Custom Location View Style
This example shows how to customize the location view style for NGLMapView.
-
Move the map camera to the given location after the map is loaded
-
Update the map location mode by use setUserTrackingMode method

For all code examples, refer to Maps Code Examples
LocationStyleViewController view source
1import UIKit
2import Nbmap
3enum LocationType {
4 case HidePuckView
5 case UpdateToFollow
6 case UpdateToFollowWithHeading
7 case UpdateToFollowWithCourse
8 case GetUserLocation
9}
10class LocationStyleViewController: UIViewController {
11 var nbMapView: NGLMapView! {
12 didSet {
13 oldValue?.removeFromSuperview()
14 if let mapView = nbMapView {
15 view.insertSubview(mapView, at: 0)
16 }
17 }
18 }
19
20 var button: UIButton!
21
22 let typeList = [
23 LocationType.HidePuckView,
24 LocationType.UpdateToFollow,
25 LocationType.UpdateToFollowWithCourse,
26 LocationType.UpdateToFollowWithHeading,
27 LocationType.GetUserLocation
28 ]
29
30 override func viewDidLoad() {
31 super.viewDidLoad()
32 nbMapView = NGLMapView(frame:self.view.bounds)
33 nbMapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
34 nbMapView.delegate = self
35
36 button = UIButton(type: .system)
37 button.setTitle("Settings", for: .normal)
38 button.addTarget(self, action: #selector(showSetings), for: .touchUpInside)
39 button.frame = CGRect(x: 0, y: 0, width: 100, height: 40)
40 navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
41 }
42
43 @objc func showSetings() {
44 let tableViewController = UITableViewController(style: .plain)
45 tableViewController.tableView.delegate = self
46 tableViewController.tableView.dataSource = self
47 tableViewController.title = "Locations Settings"
48 self.present(tableViewController, animated: true)
49 }
50
51 func performeSettings(tyle: LocationType) {
52 switch tyle {
53 case LocationType.UpdateToFollow:
54 nbMapView.setUserTrackingMode(.follow,animated: true,completionHandler: nil)
55 break
56 case LocationType.UpdateToFollowWithCourse:
57 nbMapView.setUserTrackingMode(.followWithCourse,animated: true,completionHandler: nil)
58 break
59 case LocationType.UpdateToFollowWithHeading:
60 nbMapView.setUserTrackingMode(.followWithHeading,animated: true,completionHandler: nil)
61 break
62 case LocationType.HidePuckView:
63 nbMapView.setUserTrackingMode(.none,animated: true,completionHandler: nil)
64 break
65 case LocationType.GetUserLocation:
66 if let userLocation = nbMapView.userLocation {
67 let location = userLocation.location
68 let isUpdating = userLocation.isUpdating
69 let title = userLocation.title
70 let subtitle = userLocation.subtitle ?? ""
71 print("location:" + location!.description)
72 print("isUpdating:" + String(isUpdating))
73 print("title:" + title)
74 print("subtitle:" + subtitle)
75 if let heading = userLocation.heading {
76 print(heading.description)
77 }
78 }
79 break
80 }
81
82 }
83}
84extension LocationStyleViewController: NGLMapViewDelegate {
85 func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){
86
87 let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.94798778, 77.57375084),
88 acrossDistance:10000,
89 pitch:0,
90 heading:0)
91 // This method only works after the map has finished loading the style
92 nbMapView.fly(to: camera)
93
94 }
95
96 /**
97 Tells the user that the map view will begin tracking the user's location.
98 This method is called when the value of the `showsUserLocation` property
99 changes to `YES`.
100 @param mapView The map view that is tracking the user's location.
101 */
102 func mapViewWillStartLocatingUser(_ mapView: NGLMapView) {
103
104 }
105
106 /**
107 Tells the user that the map view has stopped tracking the user's location.
108 This method is called when the value of the `showsUserLocation` property
109 changes to `NO`.
110 @param mapView The map view that is tracking the user's location.
111 */
112 func mapViewDidStopLocatingUser(_ mapView: NGLMapView) {
113
114 }
115
116
117 /**
118 Asks the user styling options for each default user location annotation view.
119
120 This method is called many times during gesturing, so you should avoid performing
121 complex or performance-intensive tasks in your implementation.
122
123 @param mapView The map view that is tracking the user's location.
124 */
125 func mapView(styleForDefaultUserLocationAnnotationView mapView: NGLMapView) -> NGLUserLocationAnnotationViewStyle {
126 let locationStyle = NGLUserLocationAnnotationViewStyle()
127 /**
128 The fill color for the puck view.
129 */
130 locationStyle.puckFillColor = UIColor.blue
131 /**
132 The shadow color for the puck view.
133 */
134 locationStyle.puckShadowColor = UIColor.red
135 /**
136 The shadow opacity for the puck view.
137 Set any value between 0.0 and 1.0.
138 The default value of this property is equal to `0.25`
139 */
140 locationStyle.puckShadowOpacity = 0.25
141 /**
142 The fill color for the arrow puck.
143 */
144 locationStyle.puckArrowFillColor = UIColor.black
145 /**
146 The fill color for the puck view.
147 */
148 locationStyle.haloFillColor = UIColor.white
149
150 if #available(iOS 14, *) {
151 /**
152 The halo fill color for the approximate view.
153 */
154 locationStyle.approximateHaloFillColor = UIColor.white
155 /**
156 The halo border color for the approximate view.
157 */
158 locationStyle.approximateHaloBorderColor = UIColor.white
159 /**
160 The halo border width for the approximate view.
161 The default value of this property is equal to `2.0`
162 */
163 locationStyle.approximateHaloBorderWidth = 2.0
164 /**
165 The halo opacity for the approximate view.
166 Set any value between 0.0 and 1.0
167 The default value of this property is equal to `0.15`
168 */
169 locationStyle.approximateHaloOpacity = 0.15
170 }
171
172 return locationStyle
173 }
174
175 /**
176 Tells the user that the location of the user was updated.
177 While the `showsUserLocation` property is set to `YES`, this method is called
178 whenever a new location update is received by the map view. This method is also
179 called if the map view's user tracking mode is set to
180 `NGLUserTrackingModeFollowWithHeading` and the heading changes, or if it is set
181 to `NGLUserTrackingModeFollowWithCourse` and the course changes.
182 This method is not called if the application is currently running in the
183 background. If you want to receive location updates while running in the
184 background, you must use the Core Location framework.
185 private @param mapView The map view that is tracking the user's location.
186 @param userLocation The location object representing the user's latest
187 location. This property may be `nil`.
188 */
189 func mapView(_ mapView: NGLMapView, didUpdate userLocation: NGLUserLocation?) {
190
191 }
192
193 /**
194 Tells the user that an attempt to locate the user's position failed.
195 @param mapView The map view that is tracking the user's location.
196 @param error An error object containing the reason why location tracking
197 failed.
198 */
199 func mapView(_ mapView: NGLMapView, didFailToLocateUserWithError error: Error) {
200
201 }
202
203
204 /**
205 Tells the user that the map view's user tracking mode has changed.
206 This method is called after the map view asynchronously changes to reflect the
207 new user tracking mode, for example by beginning to zoom or rotate.
208 private @param mapView The map view that changed its tracking mode.
209 @param mode The new tracking mode.
210 @param animated Whether the change caused an animated effect on the map.
211 */
212 func mapView(_ mapView: NGLMapView, didChange mode: NGLUserTrackingMode, animated: Bool ) {
213
214 }
215
216 /**
217 Returns a screen coordinate at which to position the user location annotation.
218 This coordinate is relative to the map view's origin after applying the map view's
219 content insets.
220 When unimplemented, the user location annotation is aligned within the center of
221 the map view with respect to the content insets.
222 This method will override any values set by `NGLMapView.userLocationVerticalAlignment`
223 or `-[NGLMapView setUserLocationVerticalAlignment:animated:]`.
224 @param mapView The map view that is tracking the user's location.
225
226 Notes: We don't need to set the anchor point for now, so comment out this method first
227 */
228// func mapViewUserLocationAnchorPoint(_ mapView: NGLMapView ) -> CGPoint {
229//
230// }
231 /**
232 Tells the user that the map's location updates accuracy authorization has changed.
233
234 This method is called after the user changes location accuracy authorization when
235 requesting location permissions or in privacy settings.
236
237 @param mapView The map view that changed its location accuracy authorization.
238 @param manager The location manager reporting the update.
239
240 */
241 func mapView(_ apView: NGLMapView, didChangeLocationManagerAuthorization manager: NGLLocationManager) {
242
243 }
244
245 /**
246 Returns a view object to mark the given point annotation object on the map.
247 Implement this method to mark a point annotation with a view object. If you
248 want to mark a particular point annotation with a static image instead, omit
249 this method or have it return `nil` for that annotation, then implement
250 `-mapView:imageForAnnotation:` instead.
251 Annotation views are compatible with UIKit, Core Animation, and other Cocoa
252 Touch frameworks. On the other hand, static annotation images use less memory
253 and draw more quickly than annotation views.
254 The user location annotation view can also be customized via this method. When
255 `annotation` is an instance of `NGLUserLocation` (or equal to the map view's
256 `userLocation` property), return an instance of `NGLUserLocationAnnotationView`
257 (or a subclass thereof).
258 @param mapView The map view that requested the annotation view.
259 @param annotation The object representing the annotation that is about to be
260 displayed.
261 @return The view object to display for the given annotation or `nil` if you
262 want to display an annotation image instead.
263 */
264 func mapView(_ mapView: NGLMapView, viewFor annotation: NGLAnnotation) -> NGLAnnotationView? {
265 return nil
266 }
267
268}
269extension LocationStyleViewController: UITableViewDelegate, UITableViewDataSource {
270
271 func settingsTitlesForRaw(index: Int) -> String {
272 let type = typeList[index]
273 var title: String = ""
274 switch type {
275 case LocationType.HidePuckView :
276 title = "Hide puck view"
277 break
278 case LocationType.UpdateToFollowWithHeading:
279 title = "Update puck view to follow with heading"
280 break
281 case LocationType.UpdateToFollowWithCourse:
282 title = "Update puck view to follow with course"
283 break
284 case LocationType.UpdateToFollow:
285 title = "Update puck view to follow"
286 break
287 case LocationType.GetUserLocation:
288 title = "Get user location"
289 break
290 }
291 return title
292 }
293 //
294 func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
295 return typeList.count
296 }
297 func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
298 let cell = UITableViewCell(style: .default, reuseIdentifier: nil)
299 cell.textLabel?.text = settingsTitlesForRaw(index: indexPath.row)
300 return cell
301 }
302 func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
303 tableView.isHidden = true
304 let type = typeList[indexPath.row]
305 dismissSettings(type: type)
306 }
307
308 func dismissSettings(type: LocationType) {
309 dismiss(animated: true)
310 performeSettings(tyle: type)
311 }
312}
The example code is a LocationStyleViewController class that sets up a map view (NGLMapView) and handles various location-related functionalities.
Initializing MapView:
-
The nbMapView property is initialized as an instance of NGLMapView and added as a subview to the view controller's view.
-
The autoresizingMask property is set to allow the map view to resize with the view controller's view.
-
The delegate property is set to self to receive map view delegate callbacks.
Custom User Location Style:
-
The mapView(styleForDefaultUserLocationAnnotationView:) method is implemented to customize the appearance of the default user location annotation view.
-
A NGLUserLocationAnnotationViewStyle object is created and configured with various properties to customize the puck, arrow, and halo colors. The method returns the configured NGLUserLocationAnnotationViewStyle object.
Setting User Tracking Mode:
-
Depending on the selected LocationType, the method calls nbMapView.setUserTrackingMode with the appropriate mode.
-
The setUserTrackingMode(_:animated:completionHandler:) method is used to set the user tracking mode for the map view.
-
NGLUserTrackingModeNone The map does not follow the user location.
-
NGLUserTrackingModeFollow The map follows the user location. This tracking mode falls back to
NGLUserTrackingModeNone
if the user pans the map view. -
NGLUserTrackingModeFollowWithHeading The map follows the user location and rotates when the heading changes.
-
NGLUserTrackingModeFollowWithCourse The map follows the user location and rotates when the course changes.
-