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

    Class CustomGeoJSONModule<TSources>

    The module that displays customer-owned GeoJSON data with TomTom SDK support.

    It wraps one or more MapLibre GeoJSON sources with caller-supplied layer specs, and adds the usual TomTom SDK lifecycle behaviour. This covers style-change restoration, config-change and shown-features events, and per-source user interaction events (click, hover, long-hover, contextmenu).

    Unlike opinionated modules such as PlacesModule or GeometriesModule, this module makes no assumptions about how data is rendered. You pass raw MapLibre layer specs (circle, heatmap, fill, line, symbol, …).

    Because you supply the sources and layers, the module has no built-in defaults. resetConfig(), like applyConfig(undefined), returns to the configuration passed to create, and getConfig() never becomes undefined. A clean style switch (resetState: true) likewise re-adds the sources empty, with that configuration. customGeoJSONKnobCatalogue lists the settings of its configuration that a knob holds.

    Single source, default generic:

    const module = await CustomGeoJSONModule.create(map, {
        sources: {
            points: {
                layers: [{ type: 'circle', paint: { 'circle-radius': 4, 'circle-color': '#0a3653' } }],
            },
        },
    });

    await module.show(myFeatureCollection, 'points');
    module.events.points.on('click', (feature, lngLat) => console.log(feature, lngLat));

    Multiple sources with typed payloads:

    type Sources = {
        heatmap: FeatureCollection<Point>;
        buildings: FeatureCollection<Polygon, { name: string }>;
    };

    const module = await CustomGeoJSONModule.create<Sources>(map, {
        sources: {
            heatmap: { layers: [{ type: 'heatmap', paint: { 'heatmap-radius': 12 } }] },
            buildings: { layers: [{ type: 'fill', paint: { 'fill-color': '#5a5' } }] },
        },
    });

    await module.show(heatmapData, 'heatmap');
    await module.show(buildingData, 'buildings');

    Same data, multiple renderings — call show once without a source name:

    type Buildings = FeatureCollection<Point, { Name: string }>;

    const module = await CustomGeoJSONModule.create<{ heatmap: Buildings; markers: Buildings }>(map, {
        sources: {
            heatmap: { layers: heatmapLayers },
            markers: { layers: markerLayers },
        },
    });

    await module.show(buildingData); // applied to both sources

    Type Parameters

    Hierarchy (View Summary)

    Index
    events sourceAndLayerIDs
    applyConfig clear clearEventState clearEventStates getConfig getEventStates getShown isVisible resetConfig setEventState setVisible show updateConfig waitUntilModuleReady create

    • The events of every source, with one named scope per source in CustomGeoJSONModuleConfig.sources.

      events itself carries the user events of all sources and the lifecycle events, config-change and shown-features, which names the source written. Each events.<sourceName> is a UserEventsWithStates with the user events and event states of that source.

      Returns CustomGeoJSONEvents<TSources>

      module.events.buildings.on('click', (feature, lngLat) => { ... });
      module.events.on('shown-features', ({ sourceName, data }) => { ... });
      module.events.on('config-change', (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
      const map = myModule.mapLibreMap;
      ids.mySource.layerIDs.forEach(layerId => {
        map.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

      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

    • Clears data from the given source, or from all sources when no name is supplied.

      Parameters

      Returns Promise<void>

    • Returns a shallow copy of the current module configuration, or undefined if none is applied.

      Returns NonNullable<CustomGeoJSONModuleConfig<TSources>> | 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 ids of the shown features that have an event state, by state.

      Returns EventStateIds

      The read side of setEventState and clearEventStates, reflecting 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 setEventState.

      // 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.properties.id) ?? false;

    • Returns the feature collection currently shown on each source.

      A source that was never shown, or was cleared, returns the empty feature collection that GeoJSONSourceWithLayers keeps as initial state.

      Returns { [K in string | number | symbol]: TSources[K] }

    • 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

    • 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

    • 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, but not a new show, a clear or a setStyle with resetState.

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

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

    • 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 the given GeoJSON data on the named source, or on every source when no name is supplied.

      Replaces any previously shown data. The source's layers draw while it holds features and the module is visible (CustomGeoJSONModuleConfig.visible).

      Every feature is shown with matching id and properties.id. An id on either is copied to the other, and id wins when both are set and differ. A feature with neither takes its index.

      Type Parameters

      • K extends string | number | symbol

      Parameters

      • data: TSources[K]

        The GeoJSON feature collection to display.

      • OptionalsourceName: K

        The source name, which must match a key of CustomGeoJSONModuleConfig.sources. If omitted, data is shown on every source, which suits sources sharing the same FeatureCollection shape.

      Returns Promise<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

    Settings
    Member Visibility

    On This Page
    Accessors
    Methods