TomTom Maps for JavaScript
    Preparing search index...

    Class AbstractMapModule<SOURCES_WITH_LAYERS, CFG>Abstract

    Base class for all Maps SDK map modules.

    Map modules built on it display and manage various types of data on a TomTom map. It handles the module lifecycle, including initialization, configuration updates and automatic restoration after map style changes.

    All map modules extend it, so they behave consistently across the SDK. It manages the module's sources, layers and configuration, and restores the module's state after a map style change when needed.

    No module extends this class directly. Each one extends the subclass that says who owns the sources and layers it controls, and therefore how its instances behave:

    • AbstractDataOwnedMapModule - The module adds and owns its own sources, layers and images, suffixed per instance. It supports several instances, each built with create(map, config?).
    • AbstractStyleOwnedMapModule - The module controls sources and layers that the map style already provides, under fixed global IDs. It is a shared controller that you get with get(map, config?).

    Both factories wait for the map's style before they build the module. After a style load fails, module creation and the module calls that wait for the map reject with the style's TomTomMapError, until a TomTomMap.setStyle loads a style. A module built before the failure restores itself then.

    class CustomModule extends AbstractDataOwnedMapModule<MySourcesWithLayers, MyConfig> {
    constructor(tomtomMap: TomTomMap, config?: MyConfig) {
    super(tomtomMap, config);
    }
    // Implement abstract methods...
    }

    Type Parameters

    • SOURCES_WITH_LAYERS extends SourcesWithLayers

      The type defining the sources and layers used by this module

    • CFG extends MapModuleCommonConfig | undefined = undefined

      The configuration type for this module, or undefined if no configuration is needed. When defined, it must extend MapModuleCommonConfig.

    Hierarchy (View Summary)

    Index
    • Builds this module on a Maps SDK map.

      Type Parameters

      • SOURCES_WITH_LAYERS extends SourcesWithLayers

        The type defining the sources and layers used by this module

      • CFG extends MapModuleCommonConfig | undefined = undefined

        The configuration type for this module, or undefined if no configuration is needed. When defined, it must extend MapModuleCommonConfig.

      Parameters

      • tomtomMap: TomTomMap

        The map. If it isn't initialized yet, the module initializes itself once it is.

      • Optionalconfig: CFG

        Optional configuration that the module initializes with as soon as the map is ready.

      Returns AbstractMapModule<SOURCES_WITH_LAYERS, CFG>

    • 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: CFG | 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<CFG> | 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
    • 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
    • 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