Map colours

Recolour the whole base map with ten semantic colours in one call: every shade, outline and variant the style derived from one of them follows it

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

// (Set your own API key when working in your own environment)
TomTomConfig.instance.put({ apiKey: API_KEY, language: 'en-GB' });

// The style the map opens on, and the one a light palette goes back to.
const BASE_STYLE: StandardStyleID = 'streetLight';

(async () => {
    const map = new TomTomMap({
        mapLibre: { container: 'sdk-map', center: [-0.1276, 51.5072], zoom: 12 },
        style: BASE_STYLE,
    });
    const styling = await StylingFoundationsModule.get(map);

    initColorPickers(styling, map);
    initSamplePalettes(styling, map, BASE_STYLE);
    initStyleExport(styling);
    initTogglePanel();
})();

Open Sandbox

Pick a colour set from the panel, or set one of the ten colours by hand, and the map redraws under it.

setMapColors takes any subset of the ten and re-derives every shade the style built from each one, by the style’s own offsets, so a set recolours the map rather than inverting it.
Each picker starts from styling.get, which reads the colour in force off the loaded style, so the pickers follow a style switch with no colour table of their own.
exportStyle returns the recoloured style as a MapLibre StyleSpecification, ready to store or diff.