TomTom Maps SDK for JavaScript
This is the documentation of version 1.0.0-rc.4. 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, namely the ten base-map ones plus accent, ready for StylingFoundationsModule.setMapColors.

    Type Declaration

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

      • Parameters

        • colors: string[]

          One to roughly eight CSS colours, in any order. Near-duplicates count once.

        • Optionaloptions: MapThemeOptions

        Returns Required<MapColors>

    Public Preview until the plugin's 1.0.0 release.

    Deterministic, and no two roles share a colour:

    • land: the lightest colour of low OKLCH chroma (the darkest, on a dark theme), toned down if saturated. It comes from the theme's side of mid-lightness, any colour there before the nearest one on the other side.
    • 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, or roadMajor's complement for the accent, so the result is complete. Apply it over a style of the same light or dark (see 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