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

docs-image

For all code examples, refer to Navigation Code Examples

CustomBannersViewController view source

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