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

    Type Alias CustomStyle

    CustomStyle: CustomStyleSource & { lightDarkTheme?: LightDark }

    Configuration for a custom map style.

    Type Declaration

    • OptionallightDarkTheme?: LightDark

      Whether the style draws a light or a dark map.

      Overlays that are drawn on top of the style — places, routes, waypoint labels, the pin sprite — pick their colours from this, so that their text stays legible on the canvas underneath. TomTomMap.styleLightDarkTheme reports the value in effect.

      Leave it out and the SDK reads the theme off the loaded style, from the colour its background layer paints the canvas with. Set it when that guess is wrong or when you would rather not depend on a guess: a style whose canvas is hidden behind full-coverage imagery, or one whose background colour does not represent what the map ends up looking like.

      Read from the background colour of the loaded style, falling back to 'light'

      style: { type: 'custom', url: 'https://example.com/midnight.json', lightDarkTheme: 'dark' }

    Use custom styles for:

    • Branded map appearances
    • Specialized use cases (indoor maps, thematic maps)
    • Integration with custom tile servers
    // Load from URL
    const urlStyle: CustomStyle = {
      url: 'https://example.com/my-custom-style.json'
    };

    // Direct JSON specification
    const jsonStyle: CustomStyle = {
      json: {
        version: 8,
        sources: { ... },
        layers: [ ... ]
      }
    };

    Settings
    Member Visibility