Traffic

The TomTom Maps SDK provides real-time traffic visualization in different ways, each optimized for specific use cases.

import type { Place } from '@tomtom-org/maps-sdk/core';
import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { TomTomMap, TrafficFlowModule, TrafficIncidentsModule } from '@tomtom-org/maps-sdk/map';
import { geocode } from '@tomtom-org/maps-sdk/services';
import type { LngLatBoundsLike } from 'maplibre-gl';
import { configPresets } from './configPresets';
import { jumpToPlaces } from './jumpToPlaces';
import './style.css';
import { API_KEY } from './config';

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-US' });

(async () => {
    const map = new TomTomMap({
        mapLibre: {
            container: 'sdk-map',
            center: [2.34281, 48.85639],
            zoom: 12,
        },
    });
    const trafficIncidentsModule = await TrafficIncidentsModule.get(map, { visible: true });
    const trafficFlowModule = await TrafficFlowModule.get(map, { visible: true });

    const cachedPlacesByQuery: Record<string, Place> = {};
    const geocodeWithCache = async (query: string): Promise<Place> => {
        let fetchedPlace = cachedPlacesByQuery[query];
        if (!fetchedPlace) {
            fetchedPlace = (await geocode({ query, limit: 1 })).features[0];
            cachedPlacesByQuery[query] = fetchedPlace;
        }
        return fetchedPlace;
    };

    const presetSelector = document.getElementById('sdk-example-preset-selector') as HTMLSelectElement;
    configPresets.forEach((preset, index) => presetSelector.add(new Option(preset.title, String(index))));
    presetSelector.addEventListener('change', (event) => {
        const config = configPresets[Number((event.target as HTMLOptionElement).value)].config;
        trafficIncidentsModule.applyConfig(config?.incidents);
        trafficFlowModule.applyConfig(config?.flow);
    });

    const locationsSelector = document.getElementById('sdk-example-jump-to-location-selector') as HTMLSelectElement;
    jumpToPlaces.forEach((location, index) => locationsSelector.add(new Option(location, String(index))));
    locationsSelector.addEventListener('change', async (event) => {
        const place = await geocodeWithCache(jumpToPlaces[Number((event.target as HTMLOptionElement).value)]);
        // We clear the selected Jump-to location when the user moves the map after we have centered it there:
        map.mapLibreMap.once('moveend', () =>
            map.mapLibreMap.once('moveend', () => (locationsSelector.selectedIndex = -1)),
        );
        map.mapLibreMap.fitBounds(place.bbox as LngLatBoundsLike, { duration: 0 });
    });
    locationsSelector.selectedIndex = 0;
})();

Open Sandbox

Traffic Incidents

TrafficIncidentsModule displays real-time traffic events across the entire map area, such as accidents, road closures, construction, and weather disruptions. Each incident shows its type, severity, affected road segments, and expected delay impact.

Use when: You need to display and filter traffic events (accidents, closures, construction) across the map.

Traffic Flow

TrafficFlowModule displays real-time traffic speed conditions across the entire road network using color-coded road segments. Green indicates free-flowing traffic, yellow/orange represents moderate speeds, red shows congestion, and dark gray indicates road closures.

Use when: You need a comprehensive view of current traffic conditions across all visible roads on the map.

Traffic Along Routes

RoutingModule displays traffic incidents specifically along calculated routes, showing only incidents that directly affect the planned path. This focused view helps users understand delays and hazards affecting their specific journey.

Use when: You need to show traffic incidents relevant to a specific calculated route.