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

    Class ReachableRangesModule

    Reachable Ranges Module: the areas reachable from one or more origins within a budget of time, distance, fuel or charge, as calculateReachableRanges returns them, drawn as bands.

    What it does for you:

    • Titles each range from its budget ('30 min', '10 km', '20 % remaining') and labels its border
    • Ranks the ranges of each origin, innermost first, and colours them by rank
    • Draws them in any order given: a smaller range always sits on top of the larger ones around it
    • With fillStyle: 'inverted', dims the world outside the largest range of every origin and draws a ring outside each smaller one

    Colours: the bands ramp from the map's accent (innermost) toward its land colour (outermost), both read from TomTomMap.mapColors and followed as they change — so a theme set with StylingModule.setMapColors, e.g. from the map-theme plugin's deriveMapColors, recolours the bands too. palette sets your own instead.

    Multiple Instances: the module owns the sources and layers it adds, suffixed per instance, so several can share a map.

    import { calculateReachableRanges } from '@tomtom-org/maps-sdk/services';
    import { ReachableRangesModule } from '@tomtom-org/maps-sdk/map';

    const ranges = await ReachableRangesModule.create(map);
    await ranges.show(
        await calculateReachableRanges(
            [10, 20, 30].map((value) => ({ origin: [4.9, 52.37], budget: { type: 'timeMinutes', value } })),
        ),
    );

    ranges.applyConfig({ fillStyle: 'inverted' });

    Reachable Ranges Guide

    Hierarchy (View Summary)

    Index
    defaultColor events lightDark sourceAndLayerIDs
    applyConfig cleanEventState cleanEventStates clear getConfig getEventStates getShown isVisible putEventState resetConfig setVisible show updateConfig waitUntilModuleReady create
    • get defaultColor(): string

      The map's colour for what carries no color under a config without a top-level color: the accent when a theme has set one, otherwise a colour that follows the active light/dark theme.

      Returns string

    • get events(): GeometriesEvents<CFG>

      Gets the events interface for handling user interactions with the polygons.

      Returns GeometriesEvents<CFG>

      The module's events, with on / off for handlers and where for scoping.

      Supported Events:

      • click: User clicks on a polygon
      • contextmenu: User right-clicks on a polygon
      • hover: Mouse enters a polygon
      • long-hover: Mouse hovers over a polygon for extended time
      module.events.on('click', (feature, lngLat) => {
        console.log('Clicked:', feature.properties);
        console.log('Location:', lngLat);
      });

      // Only the polygons, not their labels
      module.events.geometry.on('hover', (feature) => showTooltip(feature.properties.title));
    • get lightDark(): LightDark

      Current light/dark map theme, re-read on every layer/data build so style switches repaint.

      Returns LightDark

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

      Gets the source and layer identifiers for all sources managed by this module.

      This property provides access to the MapLibre source and layer IDs that were created and are managed by this module. These IDs can be used to interact directly with MapLibre's API or to identify which layers belong to this module.

      Returns Record<keyof SOURCES_WITH_LAYERS, SourceWithLayerIDs>

      A record mapping each source name to its corresponding source ID and layer IDs. Each entry contains the MapLibre source identifier and an array of layer identifiers associated with that source.

      The returned IDs are useful when you need 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
      const map = myModule.mapLibreMap;
      ids.mySource.layerIDs.forEach(layerId => {
        map.setLayoutProperty(layerId, 'visibility', 'visible');
      });

    • Applies a configuration to this module.

      This method updates the module's behavior and appearance based on the provided configuration. The configuration is stored internally and will be automatically reapplied if the map style changes.

      Parameters

      • config: ReachableRangesModuleConfig | undefined

        The configuration object to apply to the module. Pass undefined to reset the configuration to default values.

      Returns void

      When a configuration is applied, the module updates its visual representation and behavior accordingly. The configuration persists across map style changes, ensuring consistent module behavior even when the map's base style is modified.

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

      // Apply a new configuration
      myModule.applyConfig({ visible: true, opacity: 0.8 });

      // Reset to default configuration
      myModule.applyConfig(undefined);
      • resetConfig for a convenience method to reset configuration
      • getConfig to retrieve the current configuration

    • Removes everything the module shows.

      Returns Promise<void>

      • Clears both the polygons and their labels
      • Does not reset styling configuration
      • Module remains initialized and ready for new data
      await module.clear();
      await module.show(newData);

    • Retrieves a copy of the current module configuration.

      This method returns a shallow copy of the configuration object that is currently applied to the module. If no configuration has been applied, it returns undefined.

      Returns NonNullable<ReachableRangesModuleConfig> | undefined

      A shallow copy of the current configuration object, or undefined if no configuration is currently applied. The returned object is a copy to prevent unintended modifications to the internal state.

      The returned configuration object is a shallow copy, which means that while the top-level properties are copied, any nested objects or arrays are still referenced from the original configuration. This is sufficient for most use cases but should be kept in mind when dealing with complex configurations.

      // Apply a configuration
      myModule.applyConfig({ visible: true, opacity: 0.8 });

      // Later, retrieve the current configuration
      const currentConfig = myModule.getConfig();
      console.log(currentConfig); // { visible: true, opacity: 0.8 }

      // When no config is applied
      myModule.resetConfig();
      console.log(myModule.getConfig()); // undefined

    • Returns the ids of the shown features that have an event state, by state.

      Returns EventStateIds

      The read side of putEventState and cleanEventStates: it reflects those and the states user interactions put. The ids are those getShown() and the event handlers hand back, so each can go straight back into putEventState.

      // Keep a list in sync with the selected feature
      const { click: [selectedID] = [] } = module.getEventStates();

      // Is this feature hovered?
      const hovered = module.getEventStates().hover?.includes(feature.id) ?? false;

    • Whether the module is set to be shown: its visible setting, true unless set. A shown module with nothing shown draws nothing; getShown() returns what is shown.

      Returns boolean

    • Puts an event state on one of the shown features, as a user interaction would.

      Parameters

      Returns void

      The state is what the module's own layers draw (place pins and entry points, route outlines, geometries, details-module incidents, area-analytics cells), what layers of yours read with ['get', 'eventState'], and what getEventStates returns. It lasts as long as the shown feature does: through setVisible, style and configuration changes, not through a new show, a clear or a setStyle with resetState.

      // Select a feature from a list, as a click would
      module.putEventState({ id: feature.id, state: 'click' });

      // Hover a second one without taking the hover off the first
      module.putEventState({ index: 2, state: 'hover', mode: 'add' });

    • Resets the configuration of this module to its default values.

      This is a convenience method that clears any previously applied configuration and restores the module to its initial state. This is equivalent to calling applyConfig(undefined).

      Returns void

      After calling this method, the module will behave as if no configuration was ever applied. Any custom settings, styling, or behavior modifications will be removed and replaced with default values.

      // Apply some configuration
      myModule.applyConfig({ visible: true, opacity: 0.5 });

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

    • Shows or hides everything the module draws.

      Parameters

      • visible: boolean

      Returns void

      Stored as visible in the configuration. Showing and clearing data never change it: a hidden module keeps its data, through style changes too, and draws it again on setVisible(true).

      Showing leaves hidden what the configuration turns off: a route section type that is off, the layers a place marker type does not use.

      module.setVisible(false);
      await module.show(data); // stays hidden
      module.setVisible(true);

    • Displays reachable ranges, replacing the ones shown.

      Parameters

      • ranges: PolygonFeatures

        The ranges, as calculateReachableRanges returns them: any number of budgets, from any number of origins, in any order. Each range's budget titles it and its origin groups it with the others from the same place.

      Returns Promise<void>

      // Two origins, three budgets each, in one call
      const origins = [[4.9, 52.37], [4.48, 51.92]];
      await ranges.show(
          await calculateReachableRanges(
              origins.flatMap((origin) =>
                  [5, 10, 15].map((value) => ({ origin, budget: { type: 'distanceKM', value } })),
              ),
          ),
      );

    • 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 nested object that was there — and the result is applied with applyConfig. This is the same on every module, whatever its applyConfig does with a whole configuration.

      Parameters

      • partial: Partial<NonNullable<CFG>>

        The properties to change.

      Returns void

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

      applyConfig to apply a whole configuration

    Settings
    Member Visibility

    On This Page
    Accessors
    Methods