TomTom Maps SDK for JavaScript
This is the documentation of version 1.0.0-rc.1. Go to the latest version, 1.0.0-rc.5.
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[];
        style?: GeometryFillStyle;
    }
    Index
    color? opacity? palette? 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. 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.

    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