• Optimization
  • Navigation
  • Tracking
  • Maps
  • Places

Custom banners

Enhance user experience by displaying customized banners, providing information like upcoming events and notification.

This example shows:

  • How to customize the styling of the Navigation Top banner and Bottom Banner

  • How to config custom banner for NavigationViewController

For all code examples, refer to Navigation Code Examples

CustomBannersViewController view source

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
import UIKit
import NbmapNavigation
import NbmapCoreNavigation
import NbmapDirections

class CustomBannersViewController: UIViewController {
  
   override func viewDidLoad() {
       super.viewDidLoad()
      
      
       let origin = CLLocation(latitude: 37.77440680146262, longitude: -122.43539772352648)
       let destination = CLLocation(latitude: 37.76556957793795, longitude: -122.42409811526268)
       let options = NavigationRouteOptions(origin: origin, destination: destination)
       Directions.shared.calculate(options) { [weak self] routes, error in
           guard let strongSelf = self else {
               return
           }
           guard error == nil else {
               print(error!)
               return
           }
          
           guard let routes = routes else { return }
          
          
           // Initialize  NBNavigationService with the fetched routes, set routeIndex of the primary route to 0
           let navigationService = NBNavigationService(routes: routes, routeIndex: 0)
          
           let topBanner = CustomTopBarViewController()
           let bottomBanner = CustomBottomBarViewController()
           let navigationOptions = NavigationOptions(navigationService: navigationService,topBanner: topBanner,bottomBanner:bottomBanner)
          
           // Initialize the NavigationViewController
           let navigationViewController = NavigationViewController(for: routes,navigationOptions: navigationOptions)
          
           bottomBanner.navigationViewController = navigationViewController
          
           let parentSafeArea = navigationViewController.view.safeAreaLayoutGuide
           let bannerHeight: CGFloat = 80.0
           let verticalOffset: CGFloat = 20.0
           let horizontalOffset: CGFloat = 10.0
          
           // To change the top and bottom banner size and position change layout constraints directly.
           topBanner.view.topAnchor.constraint(equalTo: parentSafeArea.topAnchor).isActive = true
          
           bottomBanner.view.heightAnchor.constraint(equalToConstant: bannerHeight).isActive = true
           bottomBanner.view.bottomAnchor.constraint(equalTo: parentSafeArea.bottomAnchor, constant: -verticalOffset).isActive = true
           bottomBanner.view.leadingAnchor.constraint(equalTo: parentSafeArea.leadingAnchor, constant: horizontalOffset).isActive = true
           bottomBanner.view.trailingAnchor.constraint(equalTo: parentSafeArea.trailingAnchor, constant: -horizontalOffset).isActive = true
          
          
           // Set the delegate of navigationViewController to subscribe for NavigationView's events, This is optional
           navigationViewController.modalPresentationStyle = .fullScreen
          
           // Render part of the route that has been traversed with full transparency, to give the illusion of a disappearing route.
           navigationViewController.routeLineTracksTraversal = true
          
           // Start navigation
           strongSelf.present(navigationViewController, animated: true, completion: nil)
       }
      
   }
  
}

This code creates a simple navigation app using NbmapNavigation.

  • The code begins by importing necessary libraries.

  • It defines a CustomBannersViewController class that inherits from UIViewController, a base class for managing a view.

  • Inside the viewDidLoad() method, which is called after the view controller, which is responsible for managing your screen, has loaded into memory,

  • It calculates the route using Directions.shared.calculate(options).

  • The options contain information about the origin and destination coordinates for the route, which are hardcoded into the CLLocation objects.

  • If there are no errors, and the routes are returned, the NBNavigationService is initialized with these routes.

  • The code then creates two custom view controllers: CustomTopBarViewController and CustomBottomBarViewController. These controllers handle the banner at the top and the bottom of the navigation view, respectively.

  • It then creates NavigationOptions with the navigationService, topBanner, and bottomBanner.

  • A NavigationViewController is initialized using the routes and navigationOptions.

  • Then, navigationViewController is set as the property of bottomBanner for accessing `navigationViewController,

  • The code then defines the constraints for topBanner and bottomBanner views, which control their size and position on the screen.

  • navigationViewController.modalPresentationStyle = .fullScreen makes the navigation view appear as a full screen when presented.

  • navigationViewController.routeLineTracksTraversal = true makes the navigation view render the traversed route with full transparency, giving the illusion of a disappearing route.

  • The navigation is started by presenting the navigationViewController.