SDK JS
    Preparing search index...

    Class LayerSettingsWidget

    An embeddable, framework-agnostic MapLibre layer settings panel (a maplibregl.IControl).

    One widget, many layer types. It does not know what class it was handed: each section probes the layer for the CAPABILITY it drives (typeof layer.setColorMode === 'function') and for the DATA that makes the control meaningful (getClassifications().length, hasEdges(), sublayerStates().length), and renders only what genuinely exists. A knob the layer does not have is not drawn; a knob that exists but cannot act yet is drawn inert with the reason in its tooltip. Nothing is invented.

    Because every data probe is false at mount — a layer has no classes, no attribute fields and no sublayer tree until it streams — the widget re-probes on a poll (default 500 ms) and on the map's idle, inserting late sections at their registry position. A section is never removed once built, so a class list that shrinks as tiles evict does not make the panel flicker.

    On each change it dispatches a DOM CustomEvent('layersettingschange', { detail: LayerSettingChange, bubbles: true }) on its root, so any framework can bind without coupling to this class.

    import * as maplibregl from 'maplibre-gl';
    import { I3sPointCloudLayer, LayerSettingsWidget, prepareMapLibre } from '@bitruvius/sdk-maplibre';

    await prepareMapLibre(maplibregl);
    const map = new maplibregl.Map({ container: 'map', style, pitch: 55 });
    const cloud = new I3sPointCloudLayer({ id: 'lidar', url });
    map.addLayer(cloud);

    map.addControl(new LayerSettingsWidget({ layer: cloud }), 'top-left');

    // Several layers of different types, one panel, a picker in the header.
    const w = new LayerSettingsWidget({ layers: [cloud, buildings, splat] });
    map.addControl(w, 'top-left');
    document.querySelector('#gear')!.addEventListener('click', () => w.open(buildings));

    LayerSettingsWidgetOptions for the configuration fields.

    Implements

    • IControl
    Index

    Constructors

    constructor

    Methods

    close getDefaultPosition onAdd onRemove open refresh setCollapsed

    Constructors

    Methods

    • Collapse the panel to the ⚙ button, or expand it again.

      Returns void

    • MapLibre IControl hook: the default corner when added without an explicit position.

      Returns ControlPosition

      The MapLibre ControlPosition 'top-right'.

    • MapLibre IControl hook: build the DOM, inject the (ref-counted) stylesheet, run the first probe pass and start the re-probe poll. Called by map.addControl(...).

      Parameters

      • map: Map$1

        The map this control is being added to.

      Returns HTMLElement

      The control's root HTMLElement; also the element layersettingschange fires on.

    • MapLibre IControl hook: run every section's teardown, stop the poll, drop the map listener, remove the root and release this instance's stylesheet reference.

      Returns void

    • Point the panel at a layer: tear down the current sections, re-probe, and expand.

      Parameters

      • layer: object | null

        The layer to open. null clears the panel. A layer not passed in the options is adopted (and added to the header picker).

      Returns void

    • Re-run every unbuilt section's probe, then every built section's refresh callbacks. Called on the poll and on the map's idle; call it directly when you know data has landed and want to set pollMs: 0.

      Returns void

    • Collapse to the ⚙ button (true) or expand (false).

      Parameters

      • collapsed: boolean

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods