Traffic

This guide provides instructions on how to enable or disable traffic incidents on your route using Compose. Additionally, it elaborates on the various types of traffic incidents that are supported and may be encountered during your journey.

Project setup

1. Before proceeding, follow the Quickstart guide for Maps and the Quickstart guide for Navigation. These are essential for using the Routing Visualization Compose module that displays on-route traffic incidents.
2. Add the Routing Visualization Compose dependency to the build.gradle file of your application module and synchronize the project:
   Copyimplementation("com.tomtom.sdk.maps.visualization:routing-compose:2.1.2")

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

3. Create the RoutingVisualizationInfrastructure 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 routingVisualizationInfrastructure = RoutingVisualizationInfrastructure( routingVisualizationDataProvider = flowOf( RoutingVisualizationDataProvider( routes = routes, selectedRouteId = selectedRouteId, ), ), )

   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 routingVisualizationInfrastructure = RoutingVisualizationInfrastructure(
   8    routingVisualizationDataProvider = flowOf(
   9        RoutingVisualizationDataProvider(
   10            routes = routes,
   11            selectedRouteId = selectedRouteId,
   12        ),
   13    ),
   14)

4. Create the RoutingVisualization composable, with the TrafficVisualization composable as a child node and the corresponding states:
   CopyTomTomMap( infrastructure = viewModel.mapDisplayInfrastructure, state = mapViewState, ) { val routingVisualizationState = rememberRoutingVisualizationState() val trafficVisualizationState = rememberTrafficVisualizationState() RoutingVisualization( infrastructure = viewModel.routingVisualizationInfrastructure, state = routingVisualizationState, ) { TrafficVisualization( state = trafficVisualizationState, ) } }

   1TomTomMap(
   2    infrastructure = viewModel.mapDisplayInfrastructure,
   3    state = mapViewState,
   4) {
   5    val routingVisualizationState = rememberRoutingVisualizationState()
   6    val trafficVisualizationState = rememberTrafficVisualizationState()
   7
   8    RoutingVisualization(
   9        infrastructure = viewModel.routingVisualizationInfrastructure,
   10        state = routingVisualizationState,
   11    ) {
   12        TrafficVisualization(
   13            state = trafficVisualizationState,
   14        )
   15    }
   16}

Displaying traffic incidents on the route

To display traffic incidents along the route, begin by creating or updating the routes flow passed to the RoutingVisualizationDataProvider with a RoutePlan:

routes.update { routePlan.routes }

Traffic incidents on the route are enabled by default. However, you can disable them by using the TrafficVisualizationState:

1val trafficVisualizationState = rememberTrafficVisualizationState(
2    trafficIncidentsEnabled = false,
3)
4// Or after the instance was created:
5trafficVisualizationState.trafficIncidentsEnabled = false

Traffic incident types

We currently support four types of traffic incidents that may occur on a route:

Jam

Jam incidents denote regular traffic congestion. They are identifiable by a numeric marker indicating the delay in minutes. These delays fall into three categories:

Minor

Moderate

Major

RoadWorks

Road works may appear in one of four magnitudes:

Unknown

Minor

Moderate

Major

RoadClosed

Although closed roads are typically avoided during routing, users might deviate from the suggested path and enter closed roads. The RoadClosed incident type does not have an associated magnitude.

Unknown

Incidents that do not fall into the above categories are grouped under the Unknown category. These can also be classified by magnitude:

Unknown

Minor

Moderate

Major

Traffic style customization

While creating the RoutingVisualizationState that is passed to the RoutingVisualization composable, you can pass a RoutingVisualizationStyleConfig to define custom styling. If not specified, the default style is applied. To define a custom style for traffic, use RouteTrafficIncidentStyle. Pass the custom style object like this:

1val routingVisualizationState = rememberRoutingVisualizationState(
2    styleConfig = RoutingVisualizationStyleConfig {
3        routeTrafficIncident = customTrafficStyle
4    },
5)

Next steps

Since you have learned how to display traffic incidents on a route, here are recommendations for the next steps:

• Free driving
• Continuous replanning