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>

    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, 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