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

documentation image

For all code examples, refer to Maps Code Examples

LocationStyleViewController view source

1
import UIKit
2
import Nbmap
3
enum LocationType {
4
case HidePuckView
5
case UpdateToFollow
6
case UpdateToFollowWithHeading
7
case UpdateToFollowWithCourse
8
case GetUserLocation
9
}
10
class 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
}
84
extension 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
}
269
extension 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.

© 2024 NextBillion.ai all rights reserved.