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

documentation image

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.

© 2024 NextBillion.ai all rights reserved.