Safety locations

Before you start, check the Starting navigation guide

Project setup

1. Before proceeding, follow the Quickstart guide for Maps and the Quickstart guide for Navigation to create the TomTomNavigation object. These are essential for using the Navigation Visualization Compose module, which displays Safety Locations during the navigation session.
2. Add the Navigation Visualization Compose dependency to the build.gradle file of your application module, then synchronize the project:
   Copyimplementation("com.tomtom.sdk.maps.visualization:navigation-compose:2.1.2")

   implementation("com.tomtom.sdk.maps.visualization:navigation-compose:2.1.2")

3. Create the NavigationVisualizationInfrastructure in the data layer of your application:
   Copy// The route plan val routes = MutableStateFlow<List<Route>>(emptyList()) // The ID of the selected route val selectedRouteId = MutableStateFlow<RouteId?>(null) val navigationVisualizationInfrastructure = NavigationVisualizationInfrastructure( routingVisualizationDataProvider = flowOf( RoutingVisualizationDataProvider( routes = routes, selectedRouteId = selectedRouteId, ), ), navigationVisualizationDataProvider = flowOf( NavigationVisualizationDataProvider( tomtomNavigation = tomtomNavigation, ), ), )

   1// The route plan
   2val routes = MutableStateFlow<List<Route>>(emptyList())
   3
   4// The ID of the selected route
   5val selectedRouteId = MutableStateFlow<RouteId?>(null)
   6
   7val navigationVisualizationInfrastructure = NavigationVisualizationInfrastructure(
   8    routingVisualizationDataProvider = flowOf(
   9        RoutingVisualizationDataProvider(
   10            routes = routes,
   11            selectedRouteId = selectedRouteId,
   12        ),
   13    ),
   14    navigationVisualizationDataProvider = flowOf(
   15        NavigationVisualizationDataProvider(
   16            tomtomNavigation = tomtomNavigation,
   17        ),
   18    ),
   19)

4. Create the NavigationVisualization composable, with the HorizonVisualization composable as a child node and the corresponding states:
   CopyTomTomMap( infrastructure = viewModel.mapDisplayInfrastructure, state = mapViewState, ) { val navigationVisualizationState = rememberNavigationVisualizationState() val horizonVisualizationState = rememberHorizonVisualizationState() NavigationVisualization( infrastructure = viewModel.navigationVisualizationInfrastructure, state = navigationVisualizationState, ) { HorizonVisualization( state = horizonVisualizationState, ) } }

   1TomTomMap(
   2    infrastructure = viewModel.mapDisplayInfrastructure,
   3    state = mapViewState,
   4) {
   5    val navigationVisualizationState = rememberNavigationVisualizationState()
   6    val horizonVisualizationState = rememberHorizonVisualizationState()
   7
   8    NavigationVisualization(
   9        infrastructure = viewModel.navigationVisualizationInfrastructure,
   10        state = navigationVisualizationState,
   11    ) {
   12        HorizonVisualization(
   13            state = horizonVisualizationState,
   14        )
   15    }
   16}

Safety location types

All SafetyLocationTypes are enabled, by default. You can hide specific types of safety locations by using the HorizonVisualizationState:

1val horizonVisualizationState = rememberHorizonVisualizationState()
2horizonVisualizationState.safetyLocationVisualization.hiddenSafetyLocationTypes = setOf(
3    SafetyLocationType.DangerZone,
4    SafetyLocationType.AverageSpeedZone,
5    SafetyLocationType.RedLightSpeedCamera,
6)

Speed and danger zones on the route

Speed and danger zones are visualized as tubes with outlines along the route. Both zones include a Start Marker indicating the beginning of the zone and an End Marker showing where it ends.

Speed zone

Danger zone

Safety locations style customization

When creating the NavigationVisualizationState that is passed to the NavigationVisualization composable, you can pass a NavigationVisualizationStyleConfig to define custom styling. If not provided, the default style is applied. To customize the appearance of safety locations, use SafetyLocationStyle. Here’s how to pass your custom style:

1val navigationVisualizationState = rememberNavigationVisualizationState(
2    styleConfig = NavigationVisualizationStyleConfig {
3        safetyLocationStyle = customSafetyLocationStyle
4    },
5)

Learn more

Since you have learned how to set up and display Safety locations, here are recommendations for the next steps:

• Free driving
• Continuous replanning