TomTom Maps for JavaScript
    Preparing search index...

    Type Alias PlaceLayersConfig

    PlaceLayersConfig: {
        main?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>;
        selected?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>;
    } & HasAdditionalLayersConfig

    Configuration for custom place layer styling with MapLibre specifications.

    Type Declaration

    • Optionalmain?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Main place marker layer specification.

      Controls the visual appearance of all place markers on the map. This layer renders places that are not in a highlighted/selected state.

    • Optionalselected?: Partial<ToBeAddedLayerSpecTemplate<SymbolLayerSpecification>>

      Selected place marker layer specification.

      Controls the visual appearance of places when they are highlighted or selected (e.g., on hover or click events). This layer is rendered on top of the main layer to ensure selected places are always visible.

      This layer reacts to 'hover' and 'click' event states.

    Provides fine-grained control over place marker layers, allowing customization of both the main place markers and highlighted/selected place markers.

    The layer IDs are derived from the PlacesModule instance prefix plus the key suffix:

    • main: The primary layer for displaying all places
    • selected: The layer for displaying highlighted/clicked places (rendered on top)

    All fields are optional. When a field is not provided, the default styling will be used.

    const config: PlacesModuleConfig = {
    layers: {
    main: {
    layout: {
    'icon-size': 1.2,
    'text-size': 14
    },
    paint: {
    'text-color': '#333'
    }
    },
    selected: {
    layout: {
    'icon-size': 1.5,
    'text-allow-overlap': true
    },
    paint: {
    'text-color': '#3f9cd9'
    }
    }
    }
    };