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

    Type Alias TomTomMapParams

    TomTomMapParams: Partial<GlobalConfig> & {
        events?: MapEventsConfig;
        mapLibre: MapLibreOptions;
        registerMapLibreWorker?: boolean;
        style?: StyleInput;
    }

    Parameters for initializing a TomTom map instance.

    Combines global SDK configuration with map-specific settings like style, events, and MapLibre options. All GlobalConfig properties (apiKey, commonBaseURL, etc.) are optional and will be merged from global configuration. Only mapLibre.container is strictly required.

    Type Declaration

    • Optionalevents?: MapEventsConfig

      How user events are detected and timed, and which cursors they show, for every module. Change it later with TomTomMap.updateEventsConfig.

      events: { paddingBoxPx: 10, longHoverDelayOnStillMapMS: 500, hoverGracePeriodMS: 1000 }
    • mapLibre: MapLibreOptions

      MapLibre-specific options for map configuration.

      Includes options for viewport settings, interaction controls, rendering options, and more.

      mapLibre: {
        container: 'map',
        center: [4.9041, 52.3676],
        zoom: 12,
        pitch: 45,
        bearing: -17.6,
        maxZoom: 18,
        minZoom: 8
      }
    • OptionalregisterMapLibreWorker?: boolean

      Whether the map starts MapLibre's web worker from the copy your bundler builds out of your own maplibre-gl, served from your app's origin. A Vite build or dev server then renders the map with no worker setup.

      MapLibre's own worker lookup stays in place when you already called its setWorkerUrl, when MapLibre loads unbundled (from a CDN or an import map), and under bundlers that build classic workers, as webpack does by default. Pass false to keep MapLibre's lookup in every case.

      true
    • Optionalstyle?: StyleInput

      Map style to load.

      If not specified, defaults to 'standardLight'.

      'standardLight'

      // Use dark theme
      style: 'standardDark'

      // Custom configuration
      style: {
        type: 'standard',
        id: 'standardLight',
        include: ['trafficFlow']
      }

    const mapParams: TomTomMapParams = {
      apiKey: 'your-api-key',
      style: 'standardLight',
      events: { precisionMode: 'point-then-box', cursorOnMap: 'crosshair' },
      mapLibre: {
        container: 'map-container',
        center: [4.9041, 52.3676],
        zoom: 12
      }
    };

    Settings
    Member Visibility