Map styles

Map Styles in the TomTom Maps SDK define the visual appearance and data presentation of maps. This guide covers TomTom’s built-in styles, style components, and customization options.

A map style consists of various layers and sources that determine how geographic features are rendered.

The SDK provides several pre-defined styles optimized for different use cases, along with the ability to customize styles by including additional layers or modifying existing ones.

import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { type StandardStyleID, standardStyleIDs, TomTomMap } from '@tomtom-org/maps-sdk/map';
import './style.css';
import { API_KEY } from './config';
import { initTogglePanel } from './togglePanel';

TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-GB' });

const map = new TomTomMap({
    mapLibre: {
        container: 'sdk-map',
        zoom: 14,
        center: [-0.12621, 51.50394],
    },
});

const stylesSelector = document.querySelector('#sdk-example-mapStyles') as HTMLSelectElement;
standardStyleIDs.forEach((id) => stylesSelector.add(new Option(id)));
stylesSelector.addEventListener('change', (event) =>
    map.setStyle((event.target as HTMLOptionElement).value as StandardStyleID),
);

initTogglePanel();

Built-in Styles

Basic Styles

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

3
// Light theme (default)
4
const map = new TomTomMap({
5
    mapLibre: {
6
        container: 'map'
7
    },
8
    style: 'monoLight'
9
});
10

11
// Dark theme
12
const map = new TomTomMap({
13
    mapLibre: {
14
        container: 'map'
15
    },
16
    style: 'monoDark'
17
});
18

19
// Satellite imagery with roads
20
const map = new TomTomMap({
21
    mapLibre: {
22
        container: 'map'
23
    },
24
    style: 'hybrid'
25
});
26

27
// Pure satellite imagery
28
const map = new TomTomMap({
29
    mapLibre: {
30
        container: 'map'
31
    },
32
    style: 'satellite'
33
});

Dynamic Style Switching

1
const map = new TomTomMap({ mapLibre: { container: 'map' } });
2

3
// Change style after map creation
4
map.setStyle('monoDark');
5
// ...
6
map.setStyle('drivingLight');

Listening to Style Changes

Use addStyleChangeHandler to react when a style transition triggered by map.setStyle() begins or completes. This is the right hook for preserving custom layers, syncing UI state, or reinitializing anything that depends on the current style.

:::note This handler only fires for setStyle calls on TomTomMap. It does not fire on initial map construction. For lower-level style lifecycle hooks — such as reacting to the initial style load or to any style-related MapLibre event — use map.mapLibreMap.on('styledata', ...) directly. :::

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

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

5
map.addStyleChangeHandler({
6
    onStyleAboutToChange: () => {
7
        // Called before the style change begins — clean up anything tied to the current style
8
    },
9
    onStyleChanged: () => {
10
        // Called after the new style is fully loaded — restore state, re-add layers, update UI
11
    },
12
});

Both callbacks are optional. Use only the one(s) you need.

Preserving custom MapLibre layers

Custom sources and layers added via map.mapLibreMap are removed when the style changes. Use onStyleAboutToChange to save their data and onStyleChanged to restore them:

1
let savedData: GeoJSON.FeatureCollection | null = null;
2

3
map.addStyleChangeHandler({
4
    onStyleAboutToChange: () => {
5
        const source = map.mapLibreMap.getSource('my-data') as maplibre.GeoJSONSource | undefined;
6
        if (source) {
7
            savedData = source._data as GeoJSON.FeatureCollection;
8
        }
9
    },
10
    onStyleChanged: () => {
11
        if (savedData) {
12
            map.mapLibreMap.addSource('my-data', { type: 'geojson', data: savedData });
13
            map.mapLibreMap.addLayer({
14
                id: 'my-layer',
15
                type: 'circle',
16
                source: 'my-data',
17
                paint: { 'circle-radius': 6, 'circle-color': '#007cbf' },
18
            });
19
        }
20
    },
21
});

Updating UI based on the active style

1
map.addStyleChangeHandler({
2
    onStyleChanged: () => {
3
        const style = map.getStyle();
4
        const isDark = typeof style === 'string'
5
            ? style.toLowerCase().includes('dark')
6
            : style?.id?.toLowerCase().includes('dark') ?? false;
7
        document.body.classList.toggle('dark-mode', isDark);
8
    },
9
});

Async handlers

Both callbacks can be async. The SDK awaits each one before continuing:

1
map.addStyleChangeHandler({
2
    onStyleAboutToChange: async () => {
3
        await persistStateToServer(map.getStyle());
4
    },
5
    onStyleChanged: async () => {
6
        await restoreStateFromServer();
7
    },
8
});

Available Style Parts

The map style includes multiple parts that come from different data sources:

• Base Map and POIs: Core geographic features and points of interest.
  • Included and visible by default with all styles.
  • Controlled by BaseMapModule and POIsModule .
• Traffic Incidents: Real-time traffic incident data.
  • Included in the style by default, but hidden upfront.
  • Can be optionally excluded from the style for performance.
  • Controlled by TrafficIncidentsModule .
• Traffic Flow: Live traffic flow information.
  • Included in the style by default, but hidden upfront.
  • Can be optionally excluded from the style for performance.
  • Controlled by TrafficFlowModule .
• Hillshade: Terrain elevation shading for enhanced topography.
  • Included in the style by default, but hidden upfront.
  • Can be optionally excluded from the style for performance.
  • Controlled by HillshadeModule .

1
// Common layer modules you can include or not:
2
include: [
3
    'trafficIncidents',  // Traffic incidents
4
    'trafficFlow',       // Traffic flow data
5
    'hillshade'          // Terrain shading
6
]

Map Language

1
const map = new TomTomMap({
2
    mapLibre: {
3
        container: 'map'
4
    },
5
    style: 'monoLight',
6
    language: 'de-DE' // German labels
7
});
8
);

Related Guides and Examples

Core Map Setup

• Map Quickstart - Basic map creation and style configuration
• Base Map - Control fundamental map layer visibility
• About MapLibre - Understanding the underlying mapping technology

Advanced Features

• Traffic Flow - Add real-time traffic data to your styles
• Traffic Incidents - Display traffic incidents with custom styling
• Hillshade - Add terrain elevation shading to your maps

Practical Examples

• Keep State When Changing Style - Maintain map state during style transitions
• Load Style Parts - Dynamic style component loading
• Map Language - Language switching and localization
• Base Map Example - Simple style implementation

Integration and Customization

• User Interaction Events - Handle style-related user interactions
• Places - Style integration with places data
• Routes - Route visualization with different map styles