TomTom Maps for JavaScript
    Preparing search index...

    Type Alias TomTomMapParams

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

    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

    • Optionalattribution?: AttributionOptions

      Your own credits in the map's attribution, as AttributionOptions describes.

    • 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']
      }
    • OptionaltransformRequest?: MapRequestTransform

      Holds or rewrites each request the map makes, after the SDK's own transform. Use it to wait for your proxy session before the map fetches anything, or to point tile URLs at a cache of your own.

      It stays in place when TomTomMap.setLanguage or TomTomMap.setGeopoliticalView changes the requests the SDK builds. MapRequestTransform describes what it gets and returns.

      • It runs for every request MapLibre makes, every tile included, so keep it fast. The Landmarks3D plugin fetches its models with fetch, so they don't pass through it.
      • With an apiKey, the URL carries it as key=. Keep that URL out of your logs.
      • When it throws or its promise rejects, that request fails.
      new TomTomMap({
      transformRequest: async (request) => {
      await ensureSession();
      return request;
      },
      mapLibre: { container: 'map' }
      });
    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
    }
    };