TomTom Maps SDK for JavaScript
This is the documentation of version 1.0.0-rc.2. 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;
    }

    The parameters to initialize a TomTom map with.

    They combine the global SDK configuration with map-specific settings such as style, events and MapLibre options. All GlobalConfig properties (apiKey, commonBaseURL, etc.) are optional and merge in from the global configuration. Only mapLibre.container is 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

      The MapLibre options for the map, such as viewport settings, interaction controls and rendering options.

      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. Vite 8, and vite build on Vite 7, then render the map with no worker setup; the Vite 7 dev server needs the SDK excluded from optimizeDeps, as the project-setup guide shows.

      MapLibre keeps its own worker lookup if you already called its setWorkerUrl, if MapLibre loads unbundled (from a CDN or an import map), and under bundlers that build classic workers or none, as webpack does by default and Rollup and esbuild do. Next.js with Turbopack emits neither the worker nor maplibre-gl-shared.mjs, which the worker imports beside itself. Copy both from maplibre-gl/dist/ into one public/ directory and call setWorkerUrl before creating the map. Pass false to keep MapLibre's lookup in every case.

      true
    • Optionalstyle?: StyleInput

      The map style to load.

      'streetLight'

      // Use dark theme
      style: 'streetDark'

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

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

    Settings
    Member Visibility