TomTom Maps for JavaScript
    Preparing search index...

    Class TerrainModule

    The terrain relief module, with hillshade shading and the 3D surface, both drawn from the elevation data of the map style.

    This module owns the hillshade (whether it is shown, and its shading method, light direction, strength, zoom range and colours) and whether and how high the surface is raised. See Who owns what. terrainKnobCatalogue lists every setting of its configuration.

    • Hillshade shades slopes on the flat map, so the relief reads at any pitch.
    • Elevation raises the map surface in 3D, which a pitched camera shows. Combined with the hillshade, a slope stays readable where the camera flattens it.

    get() adds the elevation style part when the style lacks it, and the module restores both after every style change. The 3D surface reads its own copy of the elevation source, TERRAIN_SOURCE_ID.

    const terrain = await TerrainModule.get(map, {
    hillshade: { visible: true, method: 'multidirectional' },
    elevation: { visible: true, exaggeration: 1.3 },
    });
    setKnob(terrain, terrainKnobCatalogue, 'elevation.exaggeration', 2);
    terrain.setElevationVisible(false); // flat again, still shaded

    Hierarchy (View Summary)

    Index
    • The lifecycle events of this module. The hillshade is a raster layer with no features to interact with, so it has no user interaction events. config-change fires after every change.

      Returns ModuleEvents<TerrainModuleConfig>

      const unsubscribe = terrain.events.on('config-change', (config) => console.log(config));
      
    • 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: TerrainModuleConfig | 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<TerrainModuleConfig> | 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
    • Whether the map surface is set to be raised in 3D.

      Returns boolean

      The elevation.visible setting or, while nothing has set it, whether the map's own terrain raises it.

    • Whether the hillshade shading is set to be shown.

      Returns boolean

      The hillshade.visible setting, or false while nothing has set it, since the hillshade is hidden until shown.

    • 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
    • Raises the map surface in 3D, or flattens it, keeping the configured exaggeration.

      Parameters

      • visible: boolean

      Returns void

    • Shows or hides the hillshade shading.

      Parameters

      • visible: boolean

      Returns void

    • 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

    • Retrieves the terrain module of the given map, adding the elevation style part first when the style lacks it.

      Parameters

      • map: TomTomMap
      • Optionalconfig: TerrainModuleConfig

        Without it on the first call, the hillshade is hidden and the surface stays as the map draws it. A later call without it leaves the instance's config as it is.

      Returns Promise<TerrainModule>

      Each map has one instance. A second get() returns the same instance, and a config passed to it replaces the one it holds, as applyConfig does.

      Error if the elevation source cannot be added to the style.