Routing Module

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

3
// Initialize map
4
const map = new TomTomMap({ mapLibre: { container: 'map' } });
5

6
// Initialize Routes module with default configuration
7
const routingModule = await RoutingModule.get(map);
8

9
// Or with custom configuration
10
const routingModule = await RoutingModule.get(map, {
11
    displayUnits: {
12
        distance: { type: 'metric' }
13
    },
14
    waypointsSource: {
15
        entryPoints: 'main-when-available'
16
    }
17
});

1
import { calculateRoute, geocodeOne } from '@tomtom-org/maps-sdk/services';
2

3
// Calculate a route with coordinates
4
const route = await calculateRoute({
5
    locations: [
6
        [4.9041, 52.3676], // Amsterdam
7
        [4.4777, 51.9244]  // Rotterdam
8
    ],
9
});
10

11
// Or calculate a route with geocoded locations
12
const waypoints = await Promise.all([
13
    geocodeOne('Amsterdam, Netherlands'),
14
    geocodeOne('Rotterdam, Netherlands')
15
]);
16

17
const routes = await calculateRoute({ locations: waypoints });
18

19
// Show the route
20
await routingModule.showRoutes(route);

1
import { calculateRoute } from '@tomtom-org/maps-sdk/services';
2

3
const route = await calculateRoute({
4
    locations: [
5
        [4.9041, 52.3676], // Amsterdam
6
        [4.4777, 51.9244]  // Rotterdam
7
    ],
8
    guidance: {
9
        type: 'coded'
10
    }
11
});
12

13
// Display route with guidance on map
14
await routingModule.showRoutes(route);

1
import { calculateRoute } from '@tomtom-org/maps-sdk/services';
2

3
// Calculate route with alternatives
4
const routes = await calculateRoute({
5
    locations: [
6
        [4.9041, 52.3676], // Amsterdam
7
        [4.4777, 51.9244]  // Rotterdam
8
    ],
9
    maxAlternatives: 2,
10
});
11

12
// Show the routes (first route selected by default)
13
await routingModule.showRoutes(routes);
14

15
// Show the routes with specific selection
16
await routingModule.showRoutes(routes, { selectedIndex: 1 });
17

18
// Switch to second route
19
await routingModule.selectRoute(1);
20

21
// Switch back to first route
22
await routingModule.selectRoute(0);

1
// Show custom waypoints
2
await routingModule.showWaypoints([
3
    [4.9041, 52.3676], // Amsterdam
4
    [4.4777, 51.9244] // Rotterdam
5
]);
6

7
// Clear waypoints from the map
8
await routingModule.clearWaypoints();

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

3
// Custom layer styling
4
const customLayerSpec = {
5
    layers: {
6
        ...defaultRouteLayersConfig,
7
        mainLines: defaultRouteLayersConfig.mainLines.map(layer => ({
8
            ...layer,
9
            layerSpec: {
10
                ...layer.layerSpec,
11
                paint: {
12
                    ...(layer.layerSpec.paint || {}),
13
                    'line-color': '#FF0000', // Red color for main route line
14
                    'line-width': 6
15
                }
16
            }
17
        }))
18
    }
19
}
20

21
const routingModule = await RoutingModule.get(map, customLayerSpec);

1
// Route click events
2
routingModule.events.mainLines.on('click', (feature, lngLat) => {
3
    console.log('Route clicked:', feature.properties);
4
    console.log('Coordinates:', lngLat);
5
});
6

7
// Waypoint events
8
routingModule.events.waypoints.on('click', (feature, lngLat) => {
9
    console.log('Waypoint:', feature.properties);
10
});
11

12
// Traffic incident events
13
routingModule.events.incidents.on('hover', (feature, lngLat) => {
14
    console.log('Traffic delay:', feature.features.map(feature => feature.properties.delayInSeconds));
15
});
16

17
// Turn-by-turn instruction events
18
routingModule.events.instructionLines.on('click', (feature, lngLat) => {
19
    console.log('Instruction properties:', feature.properties);
20
});
21

22
// Summary bubble events
23
routingModule.events.summaryBubbles.on('click', (feature, lngLat) => {
24
    console.log('Route summary:', feature.properties);
25
});
26

27
// Route section events
28
routingModule.events.ferries.on('click', (feature, lngLat) => {
29
    console.log('Ferry section');
30
});
31

32
routingModule.events.tollRoads.on('click', (feature, lngLat) => {
33
    console.log('Toll road section');
34
});
35

36
routingModule.events.tunnels.on('click', (feature, lngLat) => {
37
    console.log('Tunnel section');
38
});
39

40
routingModule.events.vehicleRestricted.on('click', (feature, lngLat) => {
41
    console.log('Vehicle restricted section');
42
});
43

44
routingModule.events.chargingStops.on('click', (feature, lngLat) => {
45
    console.log('EV charging station');
46
});
47

48
// Remove event listeners
49
routingModule.events.mainLines.off('click', handler);

1
// Create separate instances for different route types
2
const carRoutes = await RoutingModule.get(map, {
3
    customLayerSpec: {
4
        layers: {
5
            mainLines: [{ layerSpec: { paint: { 'line-color': '#2ECC71' } } }]
6
        }
7
    }
8
});
9

10
const truckRoutes = await RoutingModule.get(map, {
11
    customLayerSpec: {
12
        layers: {
13
            mainLines: [{ layerSpec: { paint: { 'line-color': '#E67E22' } } }]
14
        }
15
    }
16
});
17

18
// Each instance manages its own routes independently
19
await carRoutes.showRoutes(carRoute);
20
await truckRoutes.showRoutes(truckRoute);