Map Modules

Map Modules are self-contained extensions that add specialized functionality to a TomTomMap instance.

Each module provides focused capabilities for different mapping needs — from displaying traffic information to handling user-generated content — while following a consistent pattern for initialization, configuration, and lifecycle management that makes them easy to integrate and use together.

Key Features

• Composition: Modules can be combined to work together seamlessly. Some modules can be instantiated multiple times on the same map for the same module type.
• Data management: Modules handle their own data sources and rendering
• Style integration: Modules automatically integrate with map styles and themes
• Statefulness: Modules maintain their own state and configuration independently. Modules restore their state when the map style changes.
• Smart event handling: Modules provide their own event systems for user interactions with seamless mapping to the original typed data.
• Service integration: Seamless integration with TomTom services for added data such as places, routes and geometries
• Lazy loading: Modules are loaded only when needed for optimal performance

Types of Modules

There are two types of modules in the TomTom Maps SDK depending on their data source:

• Existing data modules: These modules do not display data by themselves, but offer some control and user events for existing map data.
  • Example: Base Map, POIs, Traffic Incidents/Flow, Hillshade.
• Own data modules: These modules display GeoJSON data obtained from TomTom services or user-provided data.
  • Example: Places, Routing, Geometries.

List of Modules

Base Map Module

A BaseMapModule provides visibility and events for layer groups of the base map.

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

3
// Control specific layer groups
4
const baseMapModule = await BaseMapModule.get(map, {
5
    layerGroupsFilter: {
6
        mode: 'include',
7
        names: ['borders', 'buildings2D', 'roadLines']
8
    }
9
});
10

11
// Toggle layer group visibility
12
baseMapModule.setVisible(true);

Learn more about Base Map Module →

Places Module

A PlacesModule handles search results visualization and place information display.

1
import { PlacesModule } from '@tomtom-org/maps-sdk/map';
2
import { search } from '@tomtom-org/maps-sdk/services';
3

4
// Initialize places module
5
const placesModule = await PlacesModule.get(map);
6

7
// Search and display results
8
const results = await search({ query: 'restaurants near me' });
9
placesModule.show(results);
10

11
// Handle place interactions
12
placesModule.events.on('click', (place) => {
13
    console.log('Selected place:', place.properties.name);
14
});

POIs Module

A POIsModule controls the display and events for Points of Interest with category-based filtering and styling.

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

3
// Display specific POI categories
4
const poisModule = await POIsModule.get(map, {
5
    filters: {
6
        categories: { show: 'all_except', values: ['ELECTRIC_VEHICLE_STATION'] },
7
    },
8
});

Learn more about POIs Module →

Routing Module

A RoutingModule controls the display of routes, waypoints, and navigation instructions, and user events on such parts.

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

4
// Initialize routing module
5
const routingModule = await RoutingModule.get(map);
6

7
// Calculate and display route
8
const route = await calculateRoute({
9
    geoInputs,
10
});
11
routingModule.showRoutes(route);

Learn more about Routing Module →

Traffic Flow Module

The TrafficFlowModule displays real-time traffic flow information with color-coded speed indicators.

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

3
// Add traffic flow visualization
4
const trafficFlowModule = await TrafficFlowModule.get(map);
5

6
// Control traffic display
7
trafficFlowModule.setVisible(true);
8

9
// Configure traffic styling
10
trafficFlowModule.filter({
11
    any: [{ showRoadClosures: 'only' }],
12
});

Learn more about Traffic Flow Module →

Traffic Incidents Module

The TrafficIncidentsModule shows traffic incidents like accidents, road closures, and construction.

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

3
// Display traffic incidents
4
const trafficIncidentsModule = await TrafficIncidentsModule.get(map, {
5
    icons: { visible: false },
6
    filters: { any: [{ magnitudes: { show: 'all_except', values: ['minor'] } }] },
7
});

Learn more about Traffic Incidents Module →

Geometries Module

The GeometriesModule displays custom geometric data like polygons, lines, and markers.

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

3
// Initialize geometries module
4
const geometryModule = await GeometriesModule.get(map);
5

6
const geometryToSearch = await geometryData({ geometries: location });
7
geometryModule.show(geometryToSearch);

Learn more about Geometries Module →

Hillshade Module

The HillshadeModule adds terrain elevation shading for topographic visualization.

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

3
const hillshadeModule = await HillshadeModule.get(map, {
4
    ensureAddedToStyle: true,
5
});
6

7
// Toggle hillshade visibility
8
hillshadeModule.setVisible(true);

Learn more about Hillshade Module →