TomTom Maps for JavaScript
    Preparing search index...

    Type Alias GeometriesModuleConfig

    GeometriesModuleConfig: MapModuleCommonConfig & {
        beforeLayerConfig?: GeometryBeforeLayerConfig;
        colorConfig?: GeometryColorConfig;
        lineConfig?: GeometryLineConfig;
        lineLabelConfig?: GeometryLineLabelConfig;
        textConfig?: GeometryTextConfig;
        theme?: GeometryTheme;
        transformFeaturesForDisplay?: (input: PolygonFeatures) => PolygonFeatures;
    }

    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. Use 'top' to place above all layers, or specify a layer ID to place below that layer.

      // On top of everything
      beforeLayerConfig: 'top'

      // Below map labels
      beforeLayerConfig: 'lowestLabel'

      // Below POI layer
      beforeLayerConfig: 'POI'
    • OptionalcolorConfig?: GeometryColorConfig

      Fill color and opacity configuration.

      Controls the interior color and transparency of polygon geometries.

    • OptionallineConfig?: GeometryLineConfig

      Border/outline configuration.

      Controls the outline appearance of polygon geometries.

    • OptionallineLabelConfig?: GeometryLineLabelConfig

      Line label configuration.

      When set, labels are placed along the polygon border lines.

    • OptionaltextConfig?: GeometryTextConfig

      Text label configuration.

      Controls labels displayed at geometry center points.

    • Optionaltheme?: GeometryTheme

      Visual theme applied to all features shown by this module.

      • 'filled' — Colored fill with thin border (default)
      • 'outline' — Transparent fill with thick colored border
      • 'inverted' — Colors the area outside the polygon (donut geometry)

      Individual features can override this by setting theme in their properties.

      // Show the "rest of the world" outside a country
      const module = await GeometriesModule.get(map, {
      theme: 'inverted',
      colorConfig: { fillColor: 'black', fillOpacity: 0.5 }
      });
      module.show(countryGeometry);
    • 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.

      Used internally by reachableRangeGeometryConfig to generate budget labels (e.g. '30 min') from feature properties. For most use cases, the standard config fields (colorConfig, textConfig, theme) suffice.

      // 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 },
      })),
      }),
      };
    // Basic styling
    const config: GeometriesModuleConfig = {
    colorConfig: {
    fillColor: '#FF5733',
    fillOpacity: 0.3
    },
    lineConfig: {
    lineColor: '#C70039',
    lineWidth: 2
    }
    };

    // With labels and positioning
    const advancedConfig: GeometriesModuleConfig = {
    colorConfig: {
    fillColor: 'blue',
    fillOpacity: 0.25
    },
    lineConfig: {
    lineColor: 'darkblue',
    lineWidth: 3
    },
    textConfig: {
    textField: ['get', 'name']
    },
    beforeLayerConfig: 'lowestLabel' // Below map labels
    };

    // Data-driven styling
    const dynamicConfig: GeometriesModuleConfig = {
    colorConfig: {
    fillColor: ['match', ['get', 'category'], 'park', '#4CAF50', 'water', '#2196F3', '#9E9E9E'],
    fillOpacity: 0.4
    },
    lineConfig: {
    lineColor: '#000000',
    lineWidth: ['case', ['get', 'highlighted'], 4, 2]
    },
    textConfig: {
    textField: ['concat', ['get', 'name'], '\n', ['get', 'area'], ' km²']
    }
    };