Build a navigation app

VERSION 0.28.2

The Navigation SDK for iOS is only available upon request. Contact us to get started.

This tutorial shows how to build a simple navigation application using the TomTom Navigation SDK for iOS. The app uses built-in UI components. However, you can build custom components and integrate them with the SDK.

The application displays a map that shows the user’s location and configures the components needed for online navigation. After the user selects a destination with a long click, the app plans a route and draws it on the map. Navigation is started automatically using the route simulation.

Project setup

Create an empty SwiftUI application project with Xcode 13.4 or newer. Set the deployment target to iOS 13.
Complete the project setup guide for the project you’ve created.

Open your project’s Podfile and add the required modules to the project’s target:

1TOMTOM_SDK_VERSION = '0.28.2'
2
3target 'YourAppTarget' do
use_frameworks!
pod 'TomTomSDKCommon', TOMTOM_SDK_VERSION
pod 'TomTomSDKCommonUI', TOMTOM_SDK_VERSION
pod 'TomTomSDKDefaultTextToSpeech', TOMTOM_SDK_VERSION
pod 'TomTomSDKLocationProvider', TOMTOM_SDK_VERSION
pod 'TomTomSDKMapDisplay', TOMTOM_SDK_VERSION
pod 'TomTomSDKNavigation', TOMTOM_SDK_VERSION
pod 'TomTomSDKNavigationEngines', TOMTOM_SDK_VERSION
pod 'TomTomSDKNavigationOnline', TOMTOM_SDK_VERSION
pod 'TomTomSDKNavigationUI', TOMTOM_SDK_VERSION
pod 'TomTomSDKRoute', TOMTOM_SDK_VERSION
pod 'TomTomSDKRoutePlanner', TOMTOM_SDK_VERSION
pod 'TomTomSDKRoutePlannerOnline', TOMTOM_SDK_VERSION
pod 'TomTomSDKRouteReplannerDefault', TOMTOM_SDK_VERSION
pod 'TomTomSDKMapDisplay', TOMTOM_SDK_VERSION
pod 'TomTomSDKNavigation', TOMTOM_SDK_VERSION
pod 'TomTomSDKSearch', TOMTOM_SDK_VERSION
pod 'TomTomSDKRoutePlannerOnline', TOMTOM_SDK_VERSION
22end

Install the dependencies by executing the following commands in the project directory:
```
pod repo-art update tomtom-sdk-cocoapods
pod install --repo-update
```

Creating an iOS application

The code will successfully compile only at the end of each section.

Add all the snippets from this tutorial to a single swift file, for example, your project’s App.swift file.

This section explains how to create an empty SwiftUI application with an iOS 13 deployment target and set the MapsDisplayService key to your TomTom API key.

Create an empty launch screen storyboard file and set it to be the "Launch screen storyboard" in the target’s general settings for the application UI to be rendered full screen.
Import the following frameworks in your project’s App.swift file:
```
1// System modules
2import Combine
3import CoreLocation
4import SwiftUI
5
6// TomTomSDK modules
7import TomTomSDKCommon
8import TomTomSDKCommonUI
9import TomTomSDKDefaultTextToSpeech
10import TomTomSDKLocationProvider
11import TomTomSDKMapDisplay
12import TomTomSDKNavigation
13import TomTomSDKNavigationEngines
14import TomTomSDKNavigationOnline
15import TomTomSDKNavigationUI
16import TomTomSDKRoute
17import TomTomSDKRoutePlanner
18import TomTomSDKRoutePlannerOnline
19import TomTomSDKRouteReplannerDefault
```

Create an empty MainView struct:

1struct MainView: View {
  var body: some View {
      ZStack(alignment: .bottom) {
          Text("Hello TomTom SDK!")
      }
  }
7}

Add the AppDelegate class to present the MainView on devices running iOS 13. Set your TomTom API key to the MapsDisplayService in application(_:, didFinishLaunchingWithOptions:) function:

1class AppDelegate: NSObject, UIApplicationDelegate {
  var window: UIWindow?
3
  func application(
      _ application: UIApplication,
      didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
  )
      -> Bool {
      TomTomSDKMapDisplay.MapsDisplayService.apiKey = Keys.ttAPIKey
10
      if #available(iOS 14.0, *) {
          // TomTomSDKNavigationUseCaseApp will instantiate MainView()
      } else {
          let window = UIWindow(frame: UIScreen.main.bounds)
          window.rootViewController = UIHostingController(
              rootView: MainView()
          )
          self.window = window
          window.makeKeyAndVisible()
      }
21
      return true
  }
24}

Add the TomTomSDKNavigationUseCaseApp struct to present the MainView on the devices running iOS 14 and newer:
```
1@available(iOS 14.0, *)
2struct TomTomSDKNavigationUseCaseApp: App {
3    @UIApplicationDelegateAdaptor(AppDelegate.self)
4    var appDelegate
5
6    var body: some Scene {
7        WindowGroup {
8            MainView()
9        }
10    }
11}
```
Add the TomTomSDKNavigationUseCaseAppWrapper.main() function to define the application’s main function for both iOS 13 and iOS 14+ devices:
```
1@main
2enum TomTomSDKNavigationUseCaseAppWrapper {
3    static func main() {
4        if #available(iOS 14.0, *) {
5            TomTomSDKNavigationUseCaseApp.main()
6        } else {
7            UIApplicationMain(CommandLine.argc, CommandLine.unsafeArgv, nil, NSStringFromClass(AppDelegate.self))
8        }
9    }
10}
```

Build and run your application. The application screen should have a "Hello TomTom SDK!" text.

Displaying a map

Once the iOS application is created you can initialize and display the map.

Create the MapCoordinator class which facilitates communication from the UIKit to the SwiftUI environment:
```
1final class MapCoordinator {
2    init(mapView: TomTomSDKMapDisplay.MapView) {
3        self.mapView = mapView
4    }
5
6    private let mapView: TomTomSDKMapDisplay.MapView
7    private var map: TomTomSDKMapDisplay.TomTomMap?
8}
```
Extend the MapCoordinator class to conform to the TomTomSDKMapDisplay.MapDelegate protocol and stub the functions to handle a long press on the map:
```
1extension MapCoordinator: TomTomSDKMapDisplay.MapDelegate {
2    func map(_ map: TomTomMap, onInteraction interaction: MapInteraction) {
3        // Handle map interactions
4    }
5
6    func map(_ map: TomTomMap, onCameraEvent event: CameraEvent) {
7        // Handle camera events
8    }
9}
```
Extend the MapCoordinator class to conform to the TomTomSDKMapDisplay.MapViewDelegate protocol by implementing the mapView(_:, onMapReady:) delegate function. This delegate function notifies MapCoordinator that the TomTomMap can be displayed. The TomTomMap instance can be configured in this function:
```
1extension MapCoordinator: TomTomSDKMapDisplay.MapViewDelegate {
2    func mapView(_ mapView: MapView, onMapReady map: TomTomMap) {
3        // Store the map to be used later
4        self.map = map
5
6        // Observe map events
7        map.delegate = self
8    }
9
10    func mapView(_ mapView: MapView, onStyleLoad result: Result<StyleContainer, Error>) {
11        print("Style loaded")
12    }
13}
```
Create the TomTomMapView struct:
```
1struct TomTomMapView {
2    var mapView = TomTomSDKMapDisplay.MapView()
3}
```
Extend the TomTomMapView struct to conform to the UIViewRepresentable protocol. This allows you to use the TomTomMapView in SwiftUI:
```
1extension TomTomMapView: UIViewRepresentable {
2    func makeUIView(context: Context) -> TomTomSDKMapDisplay.MapView {
3        mapView.delegate = context.coordinator
4        return mapView
5    }
6
7    func updateUIView(_: TomTomSDKMapDisplay.MapView, context: Context) {}
8
9    func makeCoordinator() -> MapCoordinator {
10        MapCoordinator(mapView: mapView)
11    }
12}
```
Present TomTomMapView on the application screen. Find the MainView struct declaration and replace it with the following implementation:
```
1struct MainView: View {
2    var body: some View {
3        ZStack(alignment: .bottom) {
4            TomTomMapView()
5        }
6    }
7}
```

Build and run your application. The application screen should have a globe on it.

Showing user location

This section explains how to show the user’s location on the map and how to make the camera focus on the user’s location.

In Xcode, update the configuration in the target’s Info tab. Set the "Application requires GPS to display your position on map" string value for the following settings:
- NSLocationAlwaysUsageDescription
- NSLocationAlwaysAndWhenInUseUsageDescription
- NSLocationWhenInUseUsageDescription The application will use these strings when requesting location data access from the user.
Add the cameraUpdated property to the MapCoordinator class. Find the MapCoordinator class declaration and replace it with:
```
1final class MapCoordinator {
2    init(mapView: TomTomSDKMapDisplay.MapView) {
3        self.mapView = mapView
4    }
5
6    private let mapView: TomTomSDKMapDisplay.MapView
7    private var map: TomTomSDKMapDisplay.TomTomMap?
8    private var cameraUpdated = false
9}
```

Extend the MapCoordinator class with the camera utility functions to provide a 3D navigation experience by zooming, panning, rotating, and tilting the map:

1extension MapCoordinator {
  private var defaultCameraUpdate: CameraUpdate {
      let defaultLocation = CLLocation(latitude: 0.0, longitude: 0.0)
      return CameraUpdate(
          position: defaultLocation.coordinate,
          zoom: 1.0,
          tilt: 0.0,
          rotation: 0.0,
          positionMarkerVerticalOffset: 0.0
      )
  }
12
  func animateCamera(zoom: Double, position: CLLocationCoordinate2D, animationDurationInSeconds: TimeInterval, onceOnly: Bool) {
      if onceOnly, cameraUpdated {
          return
      }
      cameraUpdated = true
      var cameraUpdate = defaultCameraUpdate
      cameraUpdate.zoom = zoom
      cameraUpdate.position = position
      map?.applyCamera(cameraUpdate, animationDuration: animationDurationInSeconds)
  }
23}

Extend the MapCoordinator class to conform to the TomTomSDKLocationProvider.LocationProviderObservable protocol. This extension enables the MapCoordinator to observe GPS updates and authorization changes.
```
1extension MapCoordinator: TomTomSDKLocationProvider.LocationProviderObservable {
2    func onLocationUpdated(location: GeoLocation) {
3        // Zoom and center the camera on the first location received
4        animateCamera(zoom: 9.0, position: location.location.coordinate, animationDurationInSeconds: 1.5, onceOnly: true)
5    }
6
7    func onHeadingUpdate(newHeading: CLHeading, lastLocation: GeoLocation) {
8        // Handle heading updates
9    }
10
11    func onAuthorizationStatusChanged(isGranted: Bool) {
12        // Handle authorization changes
13    }
14}
```
Activate the GPS location engine and start observing location updates. Find the MapCoordinator conformance to the TomTomSDKMapDisplay.MapViewDelegate protocol and replace it with:
```
1extension MapCoordinator: TomTomSDKMapDisplay.MapViewDelegate {
2    func mapView(_ mapView: MapView, onMapReady map: TomTomMap) {
3        // Store the map to be used later
4        self.map = map
5
6        // Observe map events
7        map.delegate = self
8
9        // Observe location updates
10        map.locationProvider.addObserver(self)
11
12        // Display a chevron
13        map.locationIndicatorType = .navigationChevron(scale: 1)
14
15        // Activate the GPS location engine in TomTomSDK
16        map.activateLocationProvider()
17
18        // Configure the camera to centre on the current location
19        map.applyCamera(defaultCameraUpdate)
20    }
21
22    func mapView(_ mapView: MapView, onStyleLoad result: Result<StyleContainer, Error>) {
23        print("Style loaded")
24    }
25}
```

After completing these steps, build the app. The camera will zoom in on your current location at startup. The location itself is indicated by the blue chevron. Don’t forget to simulate the location if you use the iOS Simulator.

Navigation use case - showing current location

Create the NavigationController class which wraps all the navigation-related TomTomSDK components:

1final class NavigationController: ObservableObject {
  // swiftlint:disable force_try
  convenience init() {
      let textToSpeech = SystemTextToSpeechEngine()
      let routePlanner = TomTomSDKRoutePlannerOnline.OnlineRoutePlanner(apiKey: Keys.ttAPIKey)
      let routeReplanner = RouteReplannerFactory.create(routePlanner: routePlanner)
      let locationProvider = DefaultCLLocationProvider()
      let simulatedLocationProvider = SimulatedLocationProvider(delay: Measurement.tt.seconds(1))
      let navigationConfiguration = OnlineTomTomNavigationFactory.Configuration(
          locationProvider: simulatedLocationProvider,
          routeReplanner: routeReplanner,
          apiKey: Keys.ttAPIKey,
          betterProposalAcceptanceMode: .automatic
      )
      let navigation = try! OnlineTomTomNavigationFactory
          .create(configuration: navigationConfiguration)
      let navigationModel = TomTomSDKNavigationUI.NavigationView.ViewModel(navigation, tts: textToSpeech)
18
      self.init(
          locationProvider: locationProvider,
          simulatedLocationProvider: simulatedLocationProvider,
          routePlanner: routePlanner,
          navigation: navigation,
          navigationModel: navigationModel
      )
  }
27
  init(
      locationProvider: LocationProvider,
      simulatedLocationProvider: SimulatedLocationProvider,
      routePlanner: TomTomSDKRoutePlannerOnline.OnlineRoutePlanner,
      navigation: TomTomNavigation,
      navigationModel: TomTomSDKNavigationUI.NavigationView.ViewModel
  ) {
      self.locationProvider = locationProvider
      self.simulatedLocationProvider = simulatedLocationProvider
      self.routePlanner = routePlanner
      self.navigation = navigation
      self.navigationViewModel = navigationModel
40
      self.navigation.addProgressObserver(self)
      locationProvider.start()
  }
44
  let locationProvider: LocationProvider
  let simulatedLocationProvider: SimulatedLocationProvider
  let routePlanner: TomTomSDKRoutePlannerOnline.OnlineRoutePlanner
  let navigation: TomTomNavigation
  let navigationViewModel: TomTomSDKNavigationUI.NavigationView.ViewModel
50
  let displayedRouteSubject = PassthroughSubject<TomTomSDKRoute.Route?, Never>()
  let progressOnRouteSubject = PassthroughSubject<Measurement<UnitLength>, Never>()
  let mapMatchedLocationProvider = PassthroughSubject<LocationProvider, Never>()
54
  @Published
  var showNavigationView: Bool = false
57}

Conform the NavigationController class to the TomTomSDKNavigation.NavigationProgressObserver protocol to receive route progress updates:
```
1extension NavigationController: TomTomSDKNavigation.NavigationProgressObserver {
2    func didUpdateProgress(progress: RouteProgress) {
3        progressOnRouteSubject.send(progress.distanceAlongRoute)
4    }
5}
```
Add the navigationController property to the MapCoordinator class. Find the MapCoordinator class declaration and replace it with:
```
1final class MapCoordinator {
2    init(mapView: TomTomSDKMapDisplay.MapView, navigationController: NavigationController) {
3        self.mapView = mapView
4        self.navigationController = navigationController
5    }
6
7    private let mapView: TomTomSDKMapDisplay.MapView
8    private var map: TomTomSDKMapDisplay.TomTomMap?
9    private var cameraUpdated = false
10    private let navigationController: NavigationController
11}
```
Add the navigationController property to the TomTomMapView struct. Find the TomTomMapView struct declaration and replace it with:
```
1struct TomTomMapView {
2    var mapView = TomTomSDKMapDisplay.MapView()
3    var navigationController: NavigationController
4}
```
Pass the navigationController property to MapCoordinator on initialization. Find the TomTomMapView extension with UIViewRepresentable protocol conformance and replace it with:
```
1extension TomTomMapView: UIViewRepresentable {
2    func makeUIView(context: Context) -> TomTomSDKMapDisplay.MapView {
3        mapView.delegate = context.coordinator
4        return mapView
5    }
6
7    func updateUIView(_: TomTomSDKMapDisplay.MapView, context: Context) {}
8
9    func makeCoordinator() -> MapCoordinator {
10        MapCoordinator(mapView: mapView, navigationController: navigationController)
11    }
12}
```
Add the navigationController observable object property to MainView. Find the MainView declaration and replace it with:
```
1struct MainView: View {
2    @ObservedObject
3    var navigationController = NavigationController()
4
5    var body: some View {
6        ZStack(alignment: .bottom) {
7            TomTomMapView(navigationController: navigationController)
8        }
9    }
10}
```

Build and run your application.

Now we will add the ability to plan a route to a location on the map once the long press event has been triggered. Navigation will be started automatically using the route simulation.

Extend the NavigationController class with the route planning functions:

1extension NavigationController {
  enum RoutePlanError: Error {
      case unknownStartingLocation
      case unableToPlanRoute(_ description: String = "")
  }
6
  private func startCoordinate() throws -> CLLocationCoordinate2D {
      if let simulatedPosition = simulatedLocationProvider.location?.location.coordinate {
          return simulatedPosition
      }
      if let currentPosition = locationProvider.location?.location.coordinate {
          return currentPosition
      }
      throw RoutePlanError.unknownStartingLocation
  }
16
  private func createRoutePlanningOptions(
      from origin: CLLocationCoordinate2D,
      to destination: CLLocationCoordinate2D
  )
      throws -> TomTomSDKRoutePlanner.RoutePlanningOptions {
      let itinerary = Itinerary(
          origin: ItineraryPoint(coordinate: origin),
          destination: ItineraryPoint(coordinate: destination)
      )
      let costModel = CostModel(routeType: .fast)
27
      let locale = Locale(identifier: "en-GB")
      let guidanceOptions = try GuidanceOptions(
          instructionType: .tagged,
          language: locale,
          roadShieldReferences: .all,
          announcementPoints: .all,
          phoneticsType: .IPA,
          progressPoints: .all
      )
37
      let options = try RoutePlanningOptions(
          itinerary: itinerary,
          costModel: costModel,
          guidanceOptions: guidanceOptions
      )
      return options
  }
45
  private func planRoute(
      from origin: CLLocationCoordinate2D,
      to destination: CLLocationCoordinate2D
  ) async throws
      -> TomTomSDKNavigationEngines.RoutePlan {
      let routePlanningOptions = try createRoutePlanningOptions(from: origin, to: destination)
      let route = try await planRoute(withRoutePlanner: routePlanner, routePlanningOptions: routePlanningOptions)
      return TomTomSDKNavigationEngines.RoutePlan(route: route, routingOptions: routePlanningOptions)
  }
55
  private func planRoute(
      withRoutePlanner routePlanner: OnlineRoutePlanner,
      routePlanningOptions: RoutePlanningOptions
  ) async throws
      -> TomTomSDKRoute.Route {
      return try await withCheckedThrowingContinuation { (continuation: CheckedContinuation<TomTomSDKRoute.Route, Error>) in
          routePlanner.planRoute(options: routePlanningOptions, onRouteReady: nil) { result in
              switch result {
              case let .failure(error):
                  if let routingError = error as? RoutingError {
                      print("Error code: \(routingError.code)")
                      print("Error message: \(String(describing: routingError.errorDescription))")
                      continuation.resume(throwing: routingError)
                      return
                  }
                  continuation.resume(throwing: error)
              case let .success(response):
                  guard let routes = response.routes else {
                      continuation.resume(throwing: RoutePlanError.unableToPlanRoute())
                      return
                  }
                  guard let route = routes.first else {
                      continuation.resume(throwing: RoutePlanError.unableToPlanRoute())
                      return
                  }
                  continuation.resume(returning: route)
              }
          }
      }
  }
86}

Extend the NavigationController class with the navigateToCoordinate(destination:) function that plans a route, starts location simulation, and starts the navigation process.

1extension NavigationController {
  func navigateToCoordinate(destination: CLLocationCoordinate2D) {
      Task { @MainActor in
          do {
              // Plan the route and add it to the map
              let start = try startCoordinate()
              let routePlan = try await planRoute(from: start, to: destination)
8
              stopNavigating()
10
              let route = routePlan.route
              self.displayedRouteSubject.send(route)
13
              let navigationOptions = NavigationOptions(activeRoutePlan: routePlan)
              self.navigationViewModel.start(navigationOptions)
16
              // Start navigation after a short delay so that we can clearly see the transition to the driving view
              try await Task.sleep(nanoseconds: UInt64(1.0 * 1_000_000_000))
19
              // Use simulated location updates
              self.simulatedLocationProvider.updateCoordinates(route.geometry, interpolate: true)
              self.simulatedLocationProvider.start()
              self.mapMatchedLocationProvider.send(navigation.mapMatchedLocationProvider)
24
              self.showNavigationView = true
          } catch {
              print("Error when planning a route: \(error)")
          }
      }
  }
31
  func stopNavigating() {
      displayedRouteSubject.send(nil)
      navigationViewModel.stop()
      simulatedLocationProvider.stop()
      showNavigationView = false
  }
38}

The call to the async planRoute function is wrapped in a Task so that it can be called from the navigateToCoordinate(destination:) function, even though that function is not async.

Update the implementation of the TomTomSDKMapDisplay.MapDelegate protocol to plan a route and show it on the map after a long press. Find the implementation of the TomTomSDKMapDisplay.MapDelegate protocol and replace it with:
```
1extension MapCoordinator: TomTomSDKMapDisplay.MapDelegate {
2    func map(_ map: TomTomMap, onInteraction interaction: MapInteraction) {
3        switch interaction {
4        case let .longPressed(coordinate):
5            navigationController.navigateToCoordinate(destination: coordinate)
6        default:
7            // Handle other gestures
8            break
9        }
10    }
11
12    func map(_ map: TomTomMap, onCameraEvent event: CameraEvent) {
13        // Handle camera events
14    }
15}
```
Add the routeOnMap and cancellableBag properties, and call the observe(navigationController:) function in the MapCoordinator class. Find the MapCoordinator class declaration and replace it with the following implementation:
```
1final class MapCoordinator {
2    init(mapView: TomTomSDKMapDisplay.MapView, navigationController: NavigationController) {
3        self.mapView = mapView
4        self.navigationController = navigationController
5        observe(navigationController: navigationController)
6    }
7
8    private let mapView: TomTomSDKMapDisplay.MapView
9    private var map: TomTomSDKMapDisplay.TomTomMap?
10    private var cameraUpdated = false
11    private let navigationController: NavigationController
12    private var routeOnMap: TomTomSDKMapDisplay.Route?
13    private var cancellableBag = Set<AnyCancellable>()
14}
```
Extend the MapCoordinator class to add the planned route to the map. After adding a route on the map, you will receive a reference to that route. The addRouteToMap(route:) function stores the reference to a route in the routeOnMap property so that it can show the visual progress along the route.
```
1extension MapCoordinator {
2    private func createMapRouteOptions(coordinates: [CLLocationCoordinate2D]) -> TomTomSDKMapDisplay.RouteOptions {
3        var routeOptions = RouteOptions(coordinates: coordinates)
4        routeOptions.outlineWidth = 1
5        routeOptions.routeWidth = 5
6        routeOptions.color = .activeRoute
7        return routeOptions
8    }
9
10    func addRouteToMap(route: TomTomSDKRoute.Route) {
11        // Create the route options from the route geometry and add it to the map
12        let routeOptions = createMapRouteOptions(coordinates: route.geometry)
13        if let routeOnMap = try? map?.addRoute(routeOptions) {
14            self.routeOnMap = routeOnMap
15
16            // Zoom the map to make the route visible
17            map?.zoomToRoutes(padding: 32)
18        }
19    }
20}
```

Extend the MapCoordinator class with the setCamera(trackingMode:) function:

1extension MapCoordinator {
  func setCamera(trackingMode: TomTomSDKMapDisplay.CameraTrackingMode) {
      map?.cameraTrackingMode = trackingMode
4
      // Update chevron position on the screen so it is not hidden behind the navigation panel
      if trackingMode == .followRoute || trackingMode == .follow {
          let cameraUpdate = CameraUpdate(positionMarkerVerticalOffset: 0.4)
          map?.moveCamera(cameraUpdate)
      }
  }
11}

Extend the MapCoordinator class with the observe(navigationController:) function to display changes to the current route and its progress on the map:

1extension MapCoordinator {
  func observe(navigationController: NavigationController) {
      navigationController.displayedRouteSubject.sink { [weak self] route in
          guard let self = self else { return }
          if let route = route {
              self.addRouteToMap(route: route)
              self.setCamera(trackingMode: .followRoute)
          } else {
              self.routeOnMap = nil
              self.map?.removeRoutes()
              self.setCamera(trackingMode: .follow)
          }
      }.store(in: &cancellableBag)
14
      navigationController.progressOnRouteSubject.sink { [weak self] progress in
          self?.routeOnMap?.progressOnRoute = progress
      }.store(in: &cancellableBag)
18
      navigationController.mapMatchedLocationProvider.sink { [weak self] locationProvider in
          self?.map?.locationProvider = locationProvider
      }.store(in: &cancellableBag)
  }
23}

Extend the NavigationController class with navigation events handling. Make sure to use TomTomSDKNavigationUI.NavigationView.ViewModel to display both the visual and voice instructions.

1extension NavigationController {
  func onNavigationViewAction(_ action: TomTomSDKNavigationUI.NavigationView.Action) {
      switch action {
      case let .arrival(action):
          onArrivalAction(action)
      case let .instruction(action):
          onInstructionAction(action)
      case let .confirmation(action):
          onConfirmationAction(action)
      case let .error(action):
          onErrorAction(action)
      @unknown default:
          /* YOUR CODE GOES HERE */
          break
      }
  }
17
  fileprivate func onArrivalAction(_ action: TomTomSDKNavigationUI.NavigationView.ArrivalAction) {
      switch action {
      case .close:
          stopNavigating()
      @unknown default:
          /* YOUR CODE GOES HERE */
          break
      }
  }
27
  fileprivate func onInstructionAction(_ action: TomTomSDKNavigationUI.NavigationView.InstructionAction) {
      switch action {
      case let .tapSound(muted):
          navigationViewModel.muteTextToSpeech(mute: !muted)
      case .tapLanes:
          navigationViewModel.hideLanes()
      case .tapThen:
          navigationViewModel.hideCombinedInstruction()
      @unknown default:
          /* YOUR CODE GOES HERE */
          break
      }
  }
41
  fileprivate func onConfirmationAction(_ action: TomTomSDKNavigationUI.NavigationView.ConfirmationAction) {
      switch action {
      case .yes:
          stopNavigating()
      case .no:
          /* YOUR CODE GOES HERE */
          break
      @unknown default:
          /* YOUR CODE GOES HERE */
          break
      }
  }
54
  fileprivate func onErrorAction(_ action: TomTomSDKNavigationUI.NavigationView.ErrorAction) {
      /* YOUR CODE GOES HERE */
  }
58}

Present the Navigation view. Find the MainView struct and replace it with the following implementation:

1struct MainView: View {
  @ObservedObject
  var navigationController = NavigationController()
4
  var body: some View {
      ZStack(alignment: .bottom) {
          TomTomMapView(navigationController: navigationController)
          if navigationController.showNavigationView {
              NavigationView(
                  navigationController.navigationViewModel,
                  action: navigationController.onNavigationViewAction
              )
          }
      }
  }
16}

To enable voice guidance on the iOS 16+ simulator, access the "Settings" app on the simulator’s home screen. Within the Settings, navigate to "Accessibility" → "Spoken Content" and enable the "Speak Selection" toggle. Proceed to the "Voices" submenu, select and download a voice. Finally, press the play button on the downloaded voice to test it.

You can build the app after completing these steps. Do a long press on the map. The app will plan a route from your current location to the selected point on the map and start the navigation simulation, including voice guidance.

Next steps

The TomTom Navigation SDK allows you to customize the appearance of the map and its overlays, use your own Navigation UI components, or provide a custom implementation of certain navigation behaviors. See the following guides for more information: