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

    Type Alias GeometriesModuleConfig

    GeometriesModuleConfig: MapModuleCommonConfig & {
        beforeLayerConfig?: GeometryBeforeLayerConfig;
        color?: string;
        fill?: GeometryFillConfig;
        highlight?: GeometryHighlightConfig;
        label?: GeometryLabelConfig;
        layers?: GeometryLayersConfig;
        line?: GeometryLineConfig;
        lineLabel?: GeometryLineLabelConfig;
        transformFeaturesForDisplay?: (input: PolygonFeatures) => PolygonFeatures;
        visible?: boolean;
    }

    Configuration options for the GeometriesModule.

    Controls the visual appearance and positioning of polygon geometries displayed on the map.

    Type Declaration

    • OptionalbeforeLayerConfig?: GeometryBeforeLayerConfig

      Layer positioning configuration.

      Controls where geometry layers appear in the map's layer stack. 'top' places them above every layer but the module's own titles, a MapStyleLayerID below that style layer, and a { all, fill, line } record each part on its own.

      // On top of everything
      beforeLayerConfig: 'top'

      // Below map labels
      beforeLayerConfig: 'lowestLabel'

      // Fill below the road network, border below labels
      beforeLayerConfig: { fill: 'lowestRoadLine', line: 'lowestLabel' }
    • Optionalcolor?: string

      Base colour of the fill and the border, as a CSS colour string.

      Precedence, highest first:

      • Fill: a feature's own color property, fill.color, fill.palette, this field.
      • Border: line.color, a feature's own color property, fill.color, fill.palette, this field.
      • Then, for both, the map's accent when a theme sets one (TomTomMap.mapColors), otherwise a theme-adaptive default: '#0A3653' on light map styles and '#5FA8D8' on dark.

      With fill.style: 'outline' the border ends its chain on a neutral grey instead of the accent or the default.

    • Optionalfill?: GeometryFillConfig

      The interior colour and opacity of polygon geometries.

    • Optionalhighlight?: GeometryHighlightConfig

      How a hovered or clicked geometry is drawn.

    • Optionallabel?: GeometryLabelConfig

      The label at each geometry's center: its text and styling.

    • Optionallayers?: GeometryLayersConfig

      MapLibre overrides for the fill, border and label layers.

    • Optionalline?: GeometryLineConfig

      The border, or outline, appearance of polygon geometries.

    • OptionallineLabel?: GeometryLineLabelConfig

      Labels along the polygon border lines, drawn only when this is set ({} for the defaults).

    • OptionaltransformFeaturesForDisplay?: (input: PolygonFeatures) => PolygonFeatures

      Transform applied to features before rendering.

      Receives the value passed to GeometriesModule.show and returns features ready for display. Useful for deriving labels or other display properties from domain data.

      For most use cases the standard config fields (fill, label, line) suffice. Reachable ranges have their own module, ReachableRangesModule, which titles and colours each band.

      // Derive title from a custom property
      const config: GeometriesModuleConfig = {
      transformFeaturesForDisplay: (fc) => ({
      ...fc,
      features: fc.features.map((f) => ({
      ...f,
      properties: { ...f.properties, title: f.properties?.customLabel },
      })),
      }),
      };
    • Optionalvisible?: boolean

      Whether the module draws its fills, borders, center labels and border labels.

      show() and clear() never change it. A hidden module keeps its data until GeometriesModule.setVisible shows it again. A layer hidden through its layers entry's layout.visibility stays hidden while the module is shown.

      true
      
    // Basic styling
    const config: GeometriesModuleConfig = {
    fill: { color: '#FF5733', opacity: 0.3 },
    line: { color: '#C70039', width: 2 },
    };

    // One colour for fill and border
    const brandConfig: GeometriesModuleConfig = { color: '#E63312' };

    // With labels and positioning
    const advancedConfig: GeometriesModuleConfig = {
    fill: { color: 'blue', opacity: 0.25 },
    line: { color: 'darkblue', width: 3 },
    label: {
    title: ['get', 'name']
    },
    beforeLayerConfig: 'lowestLabel' // Below map labels
    };

    // Data-driven styling
    const dynamicConfig: GeometriesModuleConfig = {
    fill: {
    color: ['match', ['get', 'category'], 'park', '#4CAF50', 'water', '#2196F3', '#9E9E9E'],
    opacity: 0.4
    },
    line: {
    color: '#000000', width: ['case', ['get', 'highlighted'], 4, 2],
    },
    label: {
    title: ['concat', ['get', 'name'], '\n', ['get', 'area'], ' km²']
    }
    };

    GeometriesModuleSerializableConfig for the part that survives JSON.