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';

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),
);

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');

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