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

    Class BaseMapModule

    The module that controls the standard map layers and their visibility.

    It manages the base map style's fundamental layers, including background, water, land, roads, buildings, labels, and other vector tile layers.

    This module owns whether each base-map layer group is shown, and the road parts within them (roads.arrows.visible, roads.exitNumbers.visible, …), which never show in a group it hides. StylingFoundationsModule knobs set how the base map looks. See Who owns what. baseMapKnobCatalogue lists every setting of its configuration.

    It manages these layers:

    • Background and land cover
    • Water bodies and coastlines
    • Country and administrative borders
    • Buildings, 2D and 3D
    • Road lines, labels, and shields
    • Place labels at various zoom levels
    • House numbers

    It doesn't include:

    Use it to:

    • Toggle the base map's visibility.
    • Show only specific layer groups, such as roads only.
    • Create custom map appearances by hiding certain elements.
    • Build overlay maps with selective base layers.

    Basic usage:

    // Get module with default configuration
    const baseMap = await BaseMapModule.get(map);

    // Toggle visibility
    baseMap.setVisible(false); // Hide all base layers
    baseMap.setVisible(true); // Show all base layers

    // Check current state
    if (baseMap.isVisible()) {
    console.log('Base map is visible');
    }

    Working with layer groups:

    const baseMap = await BaseMapModule.get(map);

    // Hide buildings and place labels
    baseMap.setVisible(false, {
    layerGroups: {
    show: 'only',
    values: ['buildings2D', 'buildings3D', 'allPlaceLabels']
    }
    });

    // Show water and land, leaving the other groups as they are
    baseMap.setVisible(true, {
    layerGroups: {
    show: 'only',
    values: ['water', 'land']
    }
    });

    Event handling:

    const baseMap = await BaseMapModule.get(map);

    // Listen for clicks on base map features
    baseMap.events.on('click', (feature, lngLat) => {
    console.log('Clicked base map feature:', feature);
    });

    // Remove event listeners
    baseMap.events.off('click');

    Hierarchy (View Summary)

    Index
    • get events(): BaseMapEvents

      The unified events interface of this module, for both user interactions and module lifecycle events.

      User interaction events are click, contextmenu, hover and long-hover:

      const unsub = baseMap.events.on('click', (feature, lngLat) => {
      console.log('Clicked on:', feature.properties);
      });
      baseMap.events.off('hover'); // remove by type

      The lifecycle event is config-change:

      const unsub = baseMap.events.on('config-change', (config) => {
      console.log('Config changed:', config);
      });
      unsub(); // remove by returned function

      Returns BaseMapEvents

    • get sourceAndLayerIDs(): Record<keyof SOURCES_WITH_LAYERS, SourceWithLayerIDs>

      The MapLibre source and layer IDs of all sources this module creates and manages.

      Returns Record<keyof SOURCES_WITH_LAYERS, SourceWithLayerIDs>

      A record mapping each source name to its MapLibre source ID and an array of the IDs of that source's layers.

      Use these IDs to:

      • Directly manipulate layers using MapLibre's native API
      • Identify which layers on the map belong to this module
      • Set layer ordering or positioning relative to other layers
      • Access source or layer properties through MapLibre methods
      const ids = myModule.sourceAndLayerIDs;
      console.log(ids);
      // {
      // mySource: {
      // sourceID: 'my-source-id',
      // layerIDs: ['layer-1', 'layer-2']
      // }
      // }

      // Use with MapLibre API
      ids.mySource.layerIDs.forEach(layerId => {
      map.mapLibreMap.setLayoutProperty(layerId, 'visibility', 'visible');
      });
    • Applies a configuration to this module.

      The module updates its behaviour and appearance to match. It stores the configuration and reapplies it automatically when the map style changes.

      Parameters

      • config: BaseMapModuleConfig | undefined

        The configuration to apply. Pass undefined to reset it to the default values.

      Returns void

      The given configuration replaces the current one rather than being merged into it. To change one part of it, use updateConfig.

      Use it for settings your code writes. It takes every setting, typed, including the ones no knob covers (layer specs, callbacks, MapLibre expressions), and checks no value at run time. For settings held as data, from a control, storage or a language model, use setKnobs.

      // Apply a new configuration
      myModule.applyConfig({ visible: true, color: '#E63312' });

      // Reset to default configuration
      myModule.applyConfig(undefined);
      • resetConfig for a convenience method to reset configuration
      • getConfig to retrieve the current configuration
    • Returns a shallow copy of the current module configuration, or undefined if none is applied.

      Returns NonNullable<BaseMapModuleConfig> | undefined

      A shallow copy of the current configuration, or undefined. It is a copy so that you can't modify the internal state by accident.

      Only the top-level properties are copied. Nested objects and arrays still reference the original configuration. This is enough for most use cases, but keep it in mind with complex configurations.

      // Apply a configuration
      myModule.applyConfig({ visible: true, color: '#E63312' });

      // Later, retrieve the current configuration
      const currentConfig = myModule.getConfig();
      console.log(currentConfig); // { visible: true, color: '#E63312' }

      // When no config is applied
      myModule.resetConfig();
      console.log(myModule.getConfig()); // undefined
    • Returns the managed layer ids of a single base-map layer group.

      Parameters

      • group:
            | "roadShields"
            | "ferries"
            | "land"
            | "water"
            | "buildings2D"
            | "roads"
            | "railways"
            | "borders"
            | "buildings3D"
            | "natureLabels"
            | "roadLabels"
            | "houseNumbers"
            | "smallerTownLabels"
            | "stateLabels"
            | "cityLabels"
            | "allPlaceLabels"
            | "capitalLabels"
            | "countryLabels"

        The layer group to look up.

      Returns string[]

      The group's layer ids in style draw order, or an empty array if there are none. Each call returns a fresh array that is safe to mutate.

      baseMap.getLayerIds('buildings3D'); // ['3D - Building', …]
      
    • Returns the base-map layer ids this module manages in the current style, grouped by BaseMapLayerGroupName.

      Returns Record<BaseMapLayerGroupName, string[]>

      A record with an entry for every layer group, an empty array when the style has no layers for it. Layer ids keep their style draw order within each group. Groups overlap by design, so a layer id can appear under several, like a city label in both cityLabels and allPlaceLabels.

      It is computed lazily on first access and cached until the module reinitializes, as after a style change, so it always reflects the current style. The returned record and its arrays are copies, so mutating them doesn't affect the module or a later call.

      const layers = baseMap.getLayers();
      console.log(layers.water); // ['Water - Fill', 'Water - Line', …]
      console.log(layers.roads); // road line + surface-area layer ids
    • Whether the base map, or the layer groups asked about, is set to be shown.

      Parameters

      • Optionaloptions: { layerGroups?: BaseMapLayerGroups }

        Optional settings for fine-grained control.

        • OptionallayerGroups?: BaseMapLayerGroups

          Layer groups to ask about instead of all layers.

      Returns boolean

      true if at least one of the layers asked about is set to show, false if all are set to hide.

      It reads the settings, not the map: visible, then the groups over it, in the order setVisible writes them. The last that reaches a layer wins.

      A layer none of them reaches answers with what the style draws, which is how a per-group control reflects the state the style starts in.

      if (baseMap.isVisible()) {
      console.log('Base map is rendered');
      } else {
      console.log('Base map is hidden');
      }

      Ask about one group:

      // buildings3D ships hidden in most styles
      const shown = baseMap.isVisible({ layerGroups: { show: 'only', values: ['buildings3D'] } });
    • Resets this module's configuration to its default values.

      It clears any applied configuration and restores the module to its initial state, the same as calling applyConfig(undefined).

      Returns void

      The module then behaves as if no configuration was ever applied. Any custom settings, styling or behaviour changes are replaced with default values.

      // Apply some configuration
      myModule.applyConfig({ visible: true, color: '#E63312' });

      // Later, reset to defaults
      myModule.resetConfig();
      • applyConfig to apply a new configuration
      • getConfig to retrieve the current configuration before resetting
    • Sets the visibility of base map layers.

      Parameters

      • visible: boolean

        true to show layers, false to hide them.

      • Optionaloptions: { layerGroups?: BaseMapLayerGroups }

        Optional settings for fine-grained control.

      Returns void

      • Without options.layerGroups: Affects all base map layers
      • With options.layerGroups showing only its values: Affects only those layer groups
      • Showing all-except them: Affects every layer outside those groups, which stay as they were
      • Changes apply immediately if the map is ready

      Every call is kept in the configuration's groups or visible, so a style change restores all of them. The road parts, such as roads.arrows.visible, stay set.

      The available groups are the BaseMapLayerGroupName values.

      Show/hide all layers:

      baseMap.setVisible(false); // Hide everything
      baseMap.setVisible(true); // Show everything

      Control specific groups:

      // Hide only buildings
      baseMap.setVisible(false, {
      layerGroups: {
      show: 'only',
      values: ['buildings2D', 'buildings3D']
      }
      });

      // Show everything except place labels
      baseMap.setVisible(true, {
      layerGroups: {
      show: 'all-except',
      values: ['allPlaceLabels']
      }
      });

      Toggle visibility:

      const isVisible = baseMap.isVisible();
      baseMap.setVisible(!isVisible); // Toggle
    • Changes part of the configuration and keeps the rest.

      The given properties are laid over the current configuration one level deep, so a nested object you pass replaces the one that was there. The result is applied with applyConfig. This works the same on every module, whatever its applyConfig does with a whole configuration.

      Parameters

      • partial: Partial<NonNullable<CFG>>

        The properties to change.

      Returns void

      Use it for settings your code writes, as applyConfig: typed, and not checked at run time. To change nested values and keep the ones beside them, or to set values held as data, use setKnobs, which reaches each by its path and checks it.

      routing.applyConfig({ displayUnits: { distance: { type: 'imperial_us' } }, color: '#0a3653' });
      routing.updateConfig({ color: '#c2185b' }); // displayUnits stays imperial

      applyConfig to apply a whole configuration

    • Asynchronously retrieves a BaseMapModule instance for the given map.

      This is the recommended way to create a BaseMapModule. It ensures the map is fully loaded before initializing the module.

      Parameters

      • tomtomMap: TomTomMap

        The TomTomMap instance to attach this module to.

      • Optionalconfig: BaseMapModuleConfig

        Optional configuration for module initialization.

      Returns Promise<BaseMapModule>

      A promise that resolves to the initialized BaseMapModule.

      BaseMapModule controls the base-map source and layers the map style already provides, under fixed global IDs, so every map has exactly one. A second get() returns the same instance, and a config you pass to it replaces the one it holds, as applyConfig does. To work with part of the map, name the layer groups per call, with setVisible(false, { layerGroups }) for visibility and events.where({ layerGroups }) for events.

      On initialization, it validates that the required sources exist in the map style and applies the initial configuration, if provided. BaseMapModuleConfig lists its options.

      Error if the base map source is not found in the style

      Default initialization:

      const baseMap = await BaseMapModule.get(map);
      

      With configuration:

      const baseMap = await BaseMapModule.get(map, {
      visible: true,
      groups: { buildings3D: { visible: false }, houseNumbers: { visible: false } },
      roads: { arrows: { visible: false }, exitNumbers: { visible: false } }
      });