Traffic Flow Module

The Traffic Flow Module controls the map layers that display 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, and red shows congestion. Dark gray indicates road closures.

import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { TomTomMap, TrafficFlowModule } from '@tomtom-org/maps-sdk/map';
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,
        },
    });
    await TrafficFlowModule.get(map, { visible: true });
})();

Looking for something else?

• For traffic events (accidents, closures, construction) across the map, see Traffic Incidents Module
• For traffic incidents along a specific route, see Routing Module

Initialization

1
import { TomTomMap, TrafficFlowModule } from '@tomtom-org/maps-sdk/map';
2

3
const map = new TomTomMap( { mapLibre: { container: 'map' } });
4
const trafficFlowModule = await TrafficFlowModule.get(map);

Visibility

Traffic flow is hidden by default. This helps you control better when you want it to appear on the map.

You can make it visible during initialization:

1
const trafficFlowModule = await TrafficFlowModule.get(map, { visible: true });

You can change visibility later using the setVisible method.

1
trafficFlowModule.setVisible(true);

Filtering

A filter can be applied either during module initialization or later using the filter method.

1
// Initialize with filter
2
const trafficFlowModule = await TrafficFlowModule.get(map, {
3
    filters: ...,
4
});
5

6
// Apply or update filter later
7
trafficFlowModule.filter(...);

Road Category

Display traffic flow only for specific road types:

1
// Show only major highways
2
trafficFlowModule.filter({
3
    any: [{
4
        roadCategories: {
5
            show: 'only',
6
            values: ['motorway', 'trunk']
7
        }
8
    }]
9
});
10

11
// Hide local streets
12
trafficFlow.filter({
13
    any: [{
14
        roadCategories: {
15
            show: 'all_except',
16
            values: ['street']
17
        }
18
    }]
19
});
20

21
// Show only major local roads within tertiary category
22
trafficFlow.filter({
23
    any: [{
24
        roadCategories: {
25
            show: 'only',
26
            values: ['tertiary']
27
        },
28
        roadSubCategories: {
29
            show: 'only',
30
            values: ['major_local']
31
        }
32
    }]
33
});

Available Road Categories:

• motorway - Major highways
• trunk - Major roads
• primary - Primary roads
• secondary - Secondary roads
• tertiary - Tertiary roads
• street - Local streets

Available Road Subcategories:

• tertiary
  • connecting - Roads connecting different areas
  • major_local - Major roads within local areas
• street
  • local - Standard local streets
  • minor_local - Minor residential streets

Road Closures

Display or exclude road closures:

1
// Show only road closures
2
trafficFlow.filter({
3
    any: [{ showRoadClosures: 'only' }]
4
});
5

6
// Exclude road closures
7
trafficFlow.filter({
8
    any: [{ showRoadClosures: 'all_except' }]
9
});

Multiple Filters

Combine multiple filter criteria using “any” logic:

1
// Show motorways OR road closures
2
trafficFlow.filter({
3
    any: [
4
        { roadCategories: { show: 'only', values: ['motorway'] } },
5
        { showRoadClosures: 'only' }
6
    ]
7
});

Reset Filters

Remove all filters and show all traffic flow:

1
trafficFlow.filter(undefined);

Events

Handle user interactions with traffic flow segments:

1
// Click events
2
trafficFlow.events.on('click', (feature) => {
3
    ...
4
});
5

6
// Hover events
7
trafficFlow.events.on('hover', (feature) => {
8
    ...
9
});
10

11
// Long hover events
12
trafficFlow.events.on('long-hover', (feature) => {
13
    ...
14
});
15

16
// Remove event listeners
17
trafficFlow.events.off('click', handler);

API Reference

For complete documentation of all Traffic Flow Module properties, methods, and types, see the TrafficFlowModule API Reference .

Related Guides and Examples

Traffic Overview

• Traffic Overview - Overview of all traffic visualization options including flow, incidents, and route-specific traffic

Related Traffic Modules

• Traffic Incidents Module - Display real-time traffic events and incidents
• Routing Module - Display routes with traffic incidents along the path

Related Examples

• Traffic Flow - Interactive traffic flow visualization with filtering
• Traffic Config Playground - Explore traffic configuration options