TomTom Maps for JavaScript
    Preparing search index...

    Type Alias GeometriesModuleConfig

    GeometriesModuleConfig: MapModuleCommonConfig & {
        beforeLayerConfig?: GeometryBeforeLayerConfig;
        colorConfig?: GeometryColorConfig;
        lineConfig?: GeometryLineConfig;
        textConfig?: GeometryTextConfig;
    }

    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.

    • OptionaltextConfig?: GeometryTextConfig

      Text label configuration.

      Controls labels displayed at geometry center points.

    // 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²']
      }
    };

    Settings

    Member Visibility