Themed map

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

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

// Every label in Fraunces, an open-source serif (SIL Open Font License) the map downloads from the
// Fontsource CDN.
const fraunces = (weight: number) =>
    `https://cdn.jsdelivr.net/fontsource/fonts/fraunces@5.3.0/latin-${weight}-normal.woff2`;
const lisbonType: CustomTypeface = { regular: fraunces(400), medium: fraunces(500), bold: fraunces(700) };

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

Open Sandbox

Lisbon opens in limestone, Atlantic blue and terracotta, already themed on the first frame the map draws, with its labels set in Fraunces.

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.
A labels.customTypeface sets every label in an open-source font, from files the map downloads itself.