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
import UIKit
2
import NbmapNavigation
3
import NbmapCoreNavigation
4
import NbmapDirections
5

6
class CustomBannersViewController: UIViewController {
7
  
8
   override func viewDidLoad() {
9
       super.viewDidLoad()
10
      
11
      
12
       let origin = CLLocation(latitude: 37.77440680146262, longitude: -122.43539772352648)
13
       let destination = CLLocation(latitude: 37.76556957793795, longitude: -122.42409811526268)
14
       let options = NavigationRouteOptions(origin: origin, destination: destination)
15
       Directions.shared.calculate(options) { [weak self] routes, error in
16
           guard let strongSelf = self else {
17
               return
18
           }
19
           guard error == nil else {
20
               print(error!)
21
               return
22
           }
23
          
24
           guard let routes = routes else { return }
25
          
26
          
27
           // Initialize  NBNavigationService with the fetched routes, set routeIndex of the primary route to 0
28
           let navigationService = NBNavigationService(routes: routes, routeIndex: 0)
29
          
30
           let topBanner = CustomTopBarViewController()
31
           let bottomBanner = CustomBottomBarViewController()
32
           let navigationOptions = NavigationOptions(navigationService: navigationService,topBanner: topBanner,bottomBanner:bottomBanner)
33
          
34
           // Initialize the NavigationViewController
35
           let navigationViewController = NavigationViewController(for: routes,navigationOptions: navigationOptions)
36
          
37
           bottomBanner.navigationViewController = navigationViewController
38
          
39
           let parentSafeArea = navigationViewController.view.safeAreaLayoutGuide
40
           let bannerHeight: CGFloat = 80.0
41
           let verticalOffset: CGFloat = 20.0
42
           let horizontalOffset: CGFloat = 10.0
43
          
44
           // To change the top and bottom banner size and position change layout constraints directly.
45
           topBanner.view.topAnchor.constraint(equalTo: parentSafeArea.topAnchor).isActive = true
46
          
47
           bottomBanner.view.heightAnchor.constraint(equalToConstant: bannerHeight).isActive = true
48
           bottomBanner.view.bottomAnchor.constraint(equalTo: parentSafeArea.bottomAnchor, constant: -verticalOffset).isActive = true
49
           bottomBanner.view.leadingAnchor.constraint(equalTo: parentSafeArea.leadingAnchor, constant: horizontalOffset).isActive = true
50
           bottomBanner.view.trailingAnchor.constraint(equalTo: parentSafeArea.trailingAnchor, constant: -horizontalOffset).isActive = true
51
          
52
          
53
           // Set the delegate of navigationViewController to subscribe for NavigationView's events, This is optional
54
           navigationViewController.modalPresentationStyle = .fullScreen
55
          
56
           // Render part of the route that has been traversed with full transparency, to give the illusion of a disappearing route.
57
           navigationViewController.routeLineTracksTraversal = true
58
          
59
           // Start navigation
60
           strongSelf.present(navigationViewController, animated: true, completion: nil)
61
       }
62
      
63
   }
64
  
65
}

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.

Custom banners

PRODUCTS

SOLUTIONS

COMPARE

DEVELOPERS

GUIDES

RESOURCES

COMPANY

UNITED STATES

SINGAPORE