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 UIKit2import Nbmap3enum LocationType {4case HidePuckView5case UpdateToFollow6case UpdateToFollowWithHeading7case UpdateToFollowWithCourse8case GetUserLocation9}10class LocationStyleViewController: UIViewController {11var nbMapView: NGLMapView! {12didSet {13oldValue?.removeFromSuperview()14if let mapView = nbMapView {15view.insertSubview(mapView, at: 0)16}17}18}1920var button: UIButton!2122let typeList = [23LocationType.HidePuckView,24LocationType.UpdateToFollow,25LocationType.UpdateToFollowWithCourse,26LocationType.UpdateToFollowWithHeading,27LocationType.GetUserLocation28]2930override func viewDidLoad() {31super.viewDidLoad()32nbMapView = NGLMapView(frame:self.view.bounds)33nbMapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]34nbMapView.delegate = self3536button = UIButton(type: .system)37button.setTitle("Settings", for: .normal)38button.addTarget(self, action: #selector(showSetings), for: .touchUpInside)39button.frame = CGRect(x: 0, y: 0, width: 100, height: 40)40navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)41}4243@objc func showSetings() {44let tableViewController = UITableViewController(style: .plain)45tableViewController.tableView.delegate = self46tableViewController.tableView.dataSource = self47tableViewController.title = "Locations Settings"48self.present(tableViewController, animated: true)49}5051func performeSettings(tyle: LocationType) {52switch tyle {53case LocationType.UpdateToFollow:54nbMapView.setUserTrackingMode(.follow,animated: true,completionHandler: nil)55break56case LocationType.UpdateToFollowWithCourse:57nbMapView.setUserTrackingMode(.followWithCourse,animated: true,completionHandler: nil)58break59case LocationType.UpdateToFollowWithHeading:60nbMapView.setUserTrackingMode(.followWithHeading,animated: true,completionHandler: nil)61break62case LocationType.HidePuckView:63nbMapView.setUserTrackingMode(.none,animated: true,completionHandler: nil)64break65case LocationType.GetUserLocation:66if let userLocation = nbMapView.userLocation {67let location = userLocation.location68let isUpdating = userLocation.isUpdating69let title = userLocation.title70let subtitle = userLocation.subtitle ?? ""71print("location:" + location!.description)72print("isUpdating:" + String(isUpdating))73print("title:" + title)74print("subtitle:" + subtitle)75if let heading = userLocation.heading {76print(heading.description)77}78}79break80}8182}83}84extension LocationStyleViewController: NGLMapViewDelegate {85func mapView(_ mapView: NGLMapView, didFinishLoading style: NGLStyle){8687let camera = NGLMapCamera(lookingAtCenter: CLLocationCoordinate2DMake(12.94798778, 77.57375084),88acrossDistance:10000,89pitch:0,90heading:0)91// This method only works after the map has finished loading the style92nbMapView.fly(to: camera)9394}9596/**97Tells the user that the map view will begin tracking the user's location.98This method is called when the value of the `showsUserLocation` property99changes to `YES`.100@param mapView The map view that is tracking the user's location.101*/102func mapViewWillStartLocatingUser(_ mapView: NGLMapView) {103104}105106/**107Tells the user that the map view has stopped tracking the user's location.108This method is called when the value of the `showsUserLocation` property109changes to `NO`.110@param mapView The map view that is tracking the user's location.111*/112func mapViewDidStopLocatingUser(_ mapView: NGLMapView) {113114}115116117/**118Asks the user styling options for each default user location annotation view.119120This method is called many times during gesturing, so you should avoid performing121complex or performance-intensive tasks in your implementation.122123@param mapView The map view that is tracking the user's location.124*/125func mapView(styleForDefaultUserLocationAnnotationView mapView: NGLMapView) -> NGLUserLocationAnnotationViewStyle {126let locationStyle = NGLUserLocationAnnotationViewStyle()127/**128The fill color for the puck view.129*/130locationStyle.puckFillColor = UIColor.blue131/**132The shadow color for the puck view.133*/134locationStyle.puckShadowColor = UIColor.red135/**136The shadow opacity for the puck view.137Set any value between 0.0 and 1.0.138The default value of this property is equal to `0.25`139*/140locationStyle.puckShadowOpacity = 0.25141/**142The fill color for the arrow puck.143*/144locationStyle.puckArrowFillColor = UIColor.black145/**146The fill color for the puck view.147*/148locationStyle.haloFillColor = UIColor.white149150if #available(iOS 14, *) {151/**152The halo fill color for the approximate view.153*/154locationStyle.approximateHaloFillColor = UIColor.white155/**156The halo border color for the approximate view.157*/158locationStyle.approximateHaloBorderColor = UIColor.white159/**160The halo border width for the approximate view.161The default value of this property is equal to `2.0`162*/163locationStyle.approximateHaloBorderWidth = 2.0164/**165The halo opacity for the approximate view.166Set any value between 0.0 and 1.0167The default value of this property is equal to `0.15`168*/169locationStyle.approximateHaloOpacity = 0.15170}171172return locationStyle173}174175/**176Tells the user that the location of the user was updated.177While the `showsUserLocation` property is set to `YES`, this method is called178whenever a new location update is received by the map view. This method is also179called if the map view's user tracking mode is set to180`NGLUserTrackingModeFollowWithHeading` and the heading changes, or if it is set181to `NGLUserTrackingModeFollowWithCourse` and the course changes.182This method is not called if the application is currently running in the183background. If you want to receive location updates while running in the184background, you must use the Core Location framework.185private @param mapView The map view that is tracking the user's location.186@param userLocation The location object representing the user's latest187location. This property may be `nil`.188*/189func mapView(_ mapView: NGLMapView, didUpdate userLocation: NGLUserLocation?) {190191}192193/**194Tells 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 tracking197failed.198*/199func mapView(_ mapView: NGLMapView, didFailToLocateUserWithError error: Error) {200201}202203204/**205Tells the user that the map view's user tracking mode has changed.206This method is called after the map view asynchronously changes to reflect the207new user tracking mode, for example by beginning to zoom or rotate.208private @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*/212func mapView(_ mapView: NGLMapView, didChange mode: NGLUserTrackingMode, animated: Bool ) {213214}215216/**217Returns a screen coordinate at which to position the user location annotation.218This coordinate is relative to the map view's origin after applying the map view's219content insets.220When unimplemented, the user location annotation is aligned within the center of221the map view with respect to the content insets.222This method will override any values set by `NGLMapView.userLocationVerticalAlignment`223or `-[NGLMapView setUserLocationVerticalAlignment:animated:]`.224@param mapView The map view that is tracking the user's location.225226Notes: We don't need to set the anchor point for now, so comment out this method first227*/228// func mapViewUserLocationAnchorPoint(_ mapView: NGLMapView ) -> CGPoint {229//230// }231/**232Tells the user that the map's location updates accuracy authorization has changed.233234This method is called after the user changes location accuracy authorization when235requesting location permissions or in privacy settings.236237@param mapView The map view that changed its location accuracy authorization.238@param manager The location manager reporting the update.239240*/241func mapView(_ apView: NGLMapView, didChangeLocationManagerAuthorization manager: NGLLocationManager) {242243}244245/**246Returns a view object to mark the given point annotation object on the map.247Implement this method to mark a point annotation with a view object. If you248want to mark a particular point annotation with a static image instead, omit249this method or have it return `nil` for that annotation, then implement250`-mapView:imageForAnnotation:` instead.251Annotation views are compatible with UIKit, Core Animation, and other Cocoa252Touch frameworks. On the other hand, static annotation images use less memory253and draw more quickly than annotation views.254The user location annotation view can also be customized via this method. When255`annotation` is an instance of `NGLUserLocation` (or equal to the map view's256`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 be260displayed.261@return The view object to display for the given annotation or `nil` if you262want to display an annotation image instead.263*/264func mapView(_ mapView: NGLMapView, viewFor annotation: NGLAnnotation) -> NGLAnnotationView? {265return nil266}267268}269extension LocationStyleViewController: UITableViewDelegate, UITableViewDataSource {270271func settingsTitlesForRaw(index: Int) -> String {272let type = typeList[index]273var title: String = ""274switch type {275case LocationType.HidePuckView :276title = "Hide puck view"277break278case LocationType.UpdateToFollowWithHeading:279title = "Update puck view to follow with heading"280break281case LocationType.UpdateToFollowWithCourse:282title = "Update puck view to follow with course"283break284case LocationType.UpdateToFollow:285title = "Update puck view to follow"286break287case LocationType.GetUserLocation:288title = "Get user location"289break290}291return title292}293//294func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {295return typeList.count296}297func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {298let cell = UITableViewCell(style: .default, reuseIdentifier: nil)299cell.textLabel?.text = settingsTitlesForRaw(index: indexPath.row)300return cell301}302func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {303tableView.isHidden = true304let type = typeList[indexPath.row]305dismissSettings(type: type)306}307308func dismissSettings(type: LocationType) {309dismiss(animated: true)310performeSettings(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.
-