TomTom Maps SDK for JavaScript
TomTom Maps for JavaScript
    Preparing search index...

    Type Alias GeometryFillConfig

    Fill configuration for geometry styling, with the interior colour and opacity.

    // Solid color with opacity
    const fill: GeometryFillConfig = { color: '#FF5733', opacity: 0.3 };

    // One colour per feature, in turn, from your own palette
    const fill: GeometryFillConfig = { palette: ['#1d3f8a', '#e63312', '#f5d000'], opacity: 0.25 };

    // Data-driven color based on properties
    const fill: GeometryFillConfig = {
      color: ['match', ['get', 'type'], 'residential', '#FFEB3B', 'commercial', '#2196F3', '#E0E0E0'],
      opacity: 0.4,
    };
    type GeometryFillConfig = {
        color?: string | ExpressionSpecification;
        opacity?: DataDrivenPropertyValueSpecification<number>;
        palette?: string[];
        paletteMode?: GeometryPaletteMode;
        style?: GeometryFillStyle;
    }
    Index
    color? opacity? palette? paletteMode? style?
    color?: string | ExpressionSpecification

    The fill colour, as a CSS colour string ('#FF5733') or a MapLibre expression for data-driven styling, like ['get', 'color'].

    Overrides palette and the top-level GeometriesModuleConfig.color, for the fill and the border. The latter lists the full order.

    opacity?: DataDrivenPropertyValueSpecification<number>

    Fill opacity, 0 (transparent) to 1 (opaque). Also accepts a MapLibre expression.

    0.15
    palette?: string[]

    CSS colours the features are filled with, one per feature in turn, starting over after the last, or blended from the first to the last with paletteMode 'ramp'. An empty list counts as unset.

    Overrides the top-level GeometriesModuleConfig.color, for the fill and the border. The latter lists the full order. To follow a map theme, pass its colours, such as [colors.accent, colors.vegetation, colors.water] from the map-theme plugin's deriveMapColors.

    paletteMode?: GeometryPaletteMode

    How palette colours the features, in the order shown: each the next colour in turn, or a step of an even blend from its first colour to its last.

    // Five districts shaded from yellow to purple
    const fill: GeometryFillConfig = { palette: ['#f5d000', '#6a1b9a'], paletteMode: 'ramp' };

    'cycle'
    style?: GeometryFillStyle

    How every feature shown by this module is filled.

    • 'filled' — Coloured fill with thin border (default)
    • 'outline' — Transparent fill with thick coloured border
    • 'inverted' — Colours the area outside the polygon (donut geometry)

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

    // Show the "rest of the world" outside a country
    const module = await GeometriesModule.create(map, {
        fill: { style: 'inverted', color: 'black', opacity: 0.5 }
    });
    module.show(countryGeometry);

    Settings
    Member Visibility

    On This Page
    Properties