Draw Route Line on NavigationMapView

Specify a source and destination and watch as the requested route is displayed on the map, enabling users to visualize their journey.

This example shows how to request and draw a route in the NavigationMapView:

  • It first requests a simple route from the given source and destination location

  • Then the given route will be shown in the NavigationMapView

docs-image

For all code examples, refer to Navigation Code Examples

DrawRouteLineViewController view source

1import UIKit
2import NbmapNavigation
3import NbmapCoreNavigation
4import NbmapDirections
5import Nbmap
6
7class DrawRouteLineViewController: UIViewController, NGLMapViewDelegate {
8
9 var navigationMapView: NavigationMapView? {
10 didSet {
11 oldValue?.removeFromSuperview()
12 if let navigationMapView = navigationMapView {
13 view.insertSubview(navigationMapView, at: 0)
14 }
15 }
16 }
17
18 var routes : [Route] = []
19
20 override func viewDidLoad() {
21 super.viewDidLoad()
22
23 let origin = CLLocation(latitude: 37.77440680146262, longitude: -122.43539772352648)
24 let destination = CLLocation(latitude: 37.76556957793795, longitude: -122.42409811526268)
25
26 self.navigationMapView = NavigationMapView(frame: view.bounds)
27 navigationMapView?.userTrackingMode = .followWithHeading
28 navigationMapView?.delegate = self
29
30 self.view.setNeedsLayout()
31
32 requestRoutes(origin: origin, destination: destination)
33 }
34
35 func requestRoutes(origin: CLLocation, destination: CLLocation){
36
37 let options = NavigationRouteOptions(origin: origin, destination: destination)
38 /**
39 Sets whether the route contains an alternate route
40 By default , it set to `false`
41 */
42 options.includesAlternativeRoutes = false
43
44 /**
45 The route classes that the calculated routes will avoid.
46 We can set an array road class to avoid. This property can be set to `.toll`,`.ferry`,`.highway`
47 By default , this property is set to empty
48 */
49 options.roadClassesToAvoid = [.toll,.ferry,.highway]
50 /**
51 Set up the navigation measurement unit
52 This property should be set to `.metric` or `.imperial`
53 By default , this property is set to the unit follow with current system locale.
54 */
55 options.distanceMeasurementSystem = .imperial
56
57 /**
58 Set specifying the primary mode of transportation for the routes.
59 This property should be set to `NBNavigationModeCar`, `NBNavigationModeAuto`, `NBNavigationModeBike`, `NBNavigationMode4W`,`NBNavigationMode2W`,`NBNavigationMode6W`, or `NBNavigationModeEscooter`. The default value of this property is `NBNavigationMode4W`, which specifies driving directions.
60 */
61 options.profileIdentifier = NBNavigationMode.mode4W
62 /**
63 Set the departureTime of the route , By default , it sets the current timestamp since from 1970
64 */
65 options.departureTime = Int(Date().timeIntervalSince1970)
66
67 /**
68 Set up the locale in which the route's instructions are written.
69 If you use NbmapDirections.swift with the Nbmap Directions API, this property affects the sentence contained within the `RouteStep.instructions` property, but it does not affect any road names contained in that property or other properties such as `RouteStep.name`.
70 The Navigation API can provide instructions in [a number of languages]. Set this property to `Bundle.main.preferredLocalizations.first` or `Locale.autoupdatingCurrent` to match the application's language or the system language, respectively.
71 By default, this property is set to the current system locale.
72 */
73 options.locale = Locale.autoupdatingCurrent
74
75 /**
76 Set map options, This property may make the ETA more accurate. If set to `NBMapOption.valhala`, shapeFormat needs to be set to `polyline`.
77 By default , the value of this property is `NBMapOption.none`
78 */
79 options.mapOption = NBMapOption.none
80 /**
81 Format of the data from which the shapes of the returned route and its steps are derived.
82
83 This property has no effect on the returned shape objects, although the choice of format can significantly affect the size of the underlying HTTP response.
84
85 The default value of this property is `polyline6`.
86 */
87 options.shapeFormat = .polyline6
88
89 Directions.shared.calculate(options) { [weak self] routes, error in
90 guard let weakSelf = self else {
91 return
92 }
93 guard error == nil else {
94 print(error!)
95 return
96 }
97
98 guard let routes = routes else { return }
99
100 weakSelf.navigationMapView?.showRoutes(routes)
101
102 guard let current = routes.first else { return }
103 weakSelf.navigationMapView?.showWaypoints(current)
104 weakSelf.routes = routes
105 }
106 }
107}

The code first imports the following frameworks:

  • UIKit

  • NbmapNavigation

  • NbmapCoreNavigation

  • NbmapDirections

  • Nbmap

These frameworks provide the necessary functionality to create a map view, request routes, and draw the routes on the map.

The next part of the code defines a class called DrawRouteLineViewController. This class inherits from UIViewController and implements the NGLMapViewDelegate protocol.

The DrawRouteLineViewController class has the following properties:

  • navigationMapView: A NavigationMapView object that is used to display the map.

  • routes: An array of Route objects that contain the route information.

The DrawRouteLineViewController class also has the following methods:

  • viewDidLoad(): This method is called when the view controller is loaded. It initializes the map view and requests routes from the Directions API.

  • requestRoutes(): This method requests routes from the Directions API. The method takes two parameters: the origin location and the destination location.

  • directionsDidCalculate(): This method is called when the Directions API finishes calculating the routes. The method takes two parameters: an array of Route objects and an error object.

  • showRoutes(): This method displays the routes on the map.

  • showWaypoints(): This method displays the waypoints on the map.

The DrawRouteLineViewController class can be used to create a map view that displays a route between two locations. The route can be customized by setting the options property of the requestRoutes() method.