TomTom Maps SDK for JavaScript
This is the documentation of version 0.60.0. Go to the latest version, 1.0.0-rc.5.
TomTom Maps for JavaScript
    Preparing search index...

    Variable deriveMapColorsConst

    deriveMapColors: (
        colors: string[],
        options?: MapThemeOptions,
    ) => Required<MapColors>

    Assigns a handful of colours — a brand's, a website's, an artist's, a mood's — to the map colours: the ten base-map ones plus accent, ready for StylingModule.setMapColors.

    Type Declaration

      • (colors: string[], options?: MapThemeOptions): Required<MapColors>

      • Parameters

        • colors: string[]

          One to roughly eight CSS colours; order does not matter, near-duplicates count once.

        • Optionaloptions: MapThemeOptions

        Returns Required<MapColors>

    Deterministic, and no two roles share a colour:

    • land: the lightest low-saturation colour (the darkest, on a dark theme), toned down if saturated.
    • roadMajor: the most colourful by OKLCH chroma, preferring one that is not a blue or a green.
    • water: a blue or cyan; vegetation: a green.
    • label: the one contrasting most with land, when it reaches WCAG 4.5:1.
    • accent: the most colourful one left reading against land (3:1) and apart from roadMajor.

    Picked colours come back as given; roles no colour fits are hsl() shades of land — the accent roadMajor's complement — so the result is complete. Apply it over a style of the same light or dark: mapColorsLightDark.

    RangeError when no colour can be parsed.

    const colors = deriveMapColors(['#0b2a3a', '#0fa8c8', '#f6efe3', '#d9822b'], { mode: 'light' });
    styling.setMapColors(colors); // `colors` also tells a UI what became what

    Settings
    Member Visibility