Themed map

Open the map in your own colours: a warm Lisbon palette from the very first frame, with no flash of the default style

import { TomTomConfig } from '@tomtom-org/maps-sdk/core';
import { type MapColors, StylingFoundationsModule, TomTomMap } 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-GB' });

// A Lisbon summer: limestone streets, Atlantic water, olive groves and terracotta main roads.
const lisbonSummer: MapColors = {
    land: '#f6f1e7',
    water: '#9ccfdc',
    vegetation: '#cfd9b4',
    park: '#d5e0b9',
    artificial: '#efe7da',
    roadMajor: '#e8a07f',
    road: '#fffdf8',
    roadOutline: '#d9cbb6',
    label: '#4e3426',
    labelHalo: '#fffdf8',
};

(async () => {
    const map = new TomTomMap({
        mapLibre: { container: 'sdk-map', center: [-9.1393, 38.7223], zoom: 13 },
    });
    const styling = await StylingFoundationsModule.get(map);
    styling.setMapColors(lisbonSummer);
})();

Open Sandbox

Lisbon opens in limestone, Atlantic blue and terracotta, already themed on the first frame the map draws.

StylingFoundationsModule.get resolves once the style has loaded and before it is drawn, and colours set ahead of that first frame land at once rather than fading in from the default palette.
setMapColors takes ten semantic colours and re-derives every outline, tunnel and road class the style built from each, by the style’s own offsets.