• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Custom Puck View

This example shows how to customize your location puck view.

  • To achieve a custom Puck view, you can inherit from the NGLUserLocationAnnotationView class.

  • Replace the custom puck view of the NGLMapView


For all code examples, refer to Maps Code Examples

CustomPuckViewController view source

1import UIKit
2import Nbmap
3class CustomPuckViewController: UIViewController {
4 var nbMapView: NGLMapView! {
5 didSet {
6 oldValue?.removeFromSuperview()
7 if let mapView = nbMapView {
8 view.insertSubview(mapView, at: 0)
9 }
10 }
11 }
12 override func viewDidLoad() {
13 super.viewDidLoad()
14 nbMapView = NGLMapView(frame:self.view.bounds)
15 nbMapView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
16 nbMapView.delegate = self
17 nbMapView.userTrackingMode = .follow
18 }


1import UIKit
2import Nbmap
3let CustomUserLocationDotSize: CGFloat = 10
4class CustomUserLocationAnnotationView: NGLUserLocationAnnotationView {
6 override init(frame: CGRect) {
7 super.init(frame: frame)
8 self.backgroundColor = .clear
9 }
11 required init?(coder aDecoder: NSCoder) {
12 fatalError("init(coder:) has not been implemented")
13 }
15 override func update() {
16 updateFrame(with: intrinsicContentSize)
17 setNeedsDisplay()
18 }

This example provided code is for a view controller (CustomPuckViewController) that sets up a map view (NGLMapView) and customizes the user location style and view.

Initialization of MapView:

  • The nbMapView property is initialized as an instance of NGLMapView with the frame matching the bounds of the view controller's view.

  • The autoresizingMask is set to allow the map view to resize automatically with the view controller's view.

  • The delegate property is set to self to receive map view delegate callbacks.

  • The userTrackingMode is set to .follow to enable user location tracking and center the map on the user's location.

Custom User Location Style:

  • The mapView(styleForDefaultUserLocationAnnotationView:) method is implemented to provide custom styling options for the default user location annotation view.

  • An instance of NGLUserLocationAnnotationViewStyle is created and configured with various properties to customize the appearance of the user location puck, arrow, and halo.

  • The method returns the configured NGLUserLocationAnnotationViewStyle object.

Custom user location view:

  • The mapView(_:viewFor:) method is implemented to provide a custom annotation view for the user location.

  • An instance of NGLUserLocationAnnotationView is created and its frame is set based on the intrinsic content size.

  • The method returns the CustomUserLocationAnnotationView object as the view for the user location annotation.

Have Questions ?