TomTom Maps for JavaScript
    Preparing search index...

    Type Alias CustomStyle

    Configuration for a custom map style.

    Allows using your own map style either via URL or direct JSON specification.

    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: [ ... ]
      }
    };
    type CustomStyle = {
        json?: StyleSpecification;
        lightDarkTheme?: LightDark;
        url?: string;
    }
    Index
    json? lightDarkTheme? url?
    json?: StyleSpecification

    Direct style specification as JSON.

    Provide the complete MapLibre Style Specification object. Mutually exclusive with the url property.

    MapLibre Style Specification

    json: {
      version: 8,
      sources: {
        'my-source': { type: 'vector', url: '...' }
      },
      layers: [
        { id: 'background', type: 'background', paint: { 'background-color': '#f0f0f0' } }
      ]
    }
    lightDarkTheme?: 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' }
    url?: string

    URL to a MapLibre/Mapbox style JSON.

    The URL should not include the API key - it will be automatically added. Mutually exclusive with the json property.

    url: 'https://api.tomtom.com/style/1/style/my-custom-style'

    Settings
    Member Visibility

    On This Page
    Properties