SDK JS
    Preparing search index...

    Class MeasurementWidget

    An embeddable, framework-agnostic MapLibre 3D measurement control (a maplibregl.IControl) with three modes:

    • Distance — click a polyline (double-click / Enter to finish; Esc cancels). Each vertex lands EXACTLY on the clicked 3D surface point ("point-shot") when MeasurementWidgetOptions.pickLayers is provided, else on the terrain/basemap. Reads out total 3D (slope) length, total horizontal length, and elevation change, plus a per-segment table.
    • Area — click a polygon; reads out geodesic area + perimeter.
    • Height — two clicks (base point, then top point); reads out the vertical difference (primary), plus the horizontal offset and direct 3D distance.

    Vertices placed before a terrain DEM tile streamed are re-sampled automatically on the map's next 'idle'. On every change the widget dispatches a DOM CustomEvent('measurechange', { detail: MeasurementResult, bubbles: true }).

    import { MeasurementWidget } from '@bitruvius/sdk-maplibre';
    map.addControl(new MeasurementWidget({ pickLayers: [buildings] }), 'top-right');

    MeasurementWidgetOptions for the configuration fields.

    Implements

    • IControl
    Index

    Constructors

    constructor

    Methods

    getDefaultPosition getSnapRadius onAdd onRemove setBulkDensity setCollapsed setMode setShowFillMap setSnapRadius setUnits setVolumeUnit

    Constructors

    Methods

    • Default control position.

      Returns ControlPosition

    • The current mesh snap radius in CSS px.

      Returns number

    • MapLibre IControl hook — builds the DOM and wires the draw controller.

      Parameters

      • map: Map$1

      Returns HTMLElement

    • MapLibre IControl hook — full teardown.

      Returns void

    • Set the bulk density (t/m³) used for the tonnes Volume unit.

      Parameters

      • tPerM3: number

      Returns void

    • Fold the panel to its round FAB (or expand it back). Safe before map.addControl — the state is remembered and applied when the DOM is built.

      Parameters

      • collapsed: boolean

      Returns void

    • Switch the active measurement mode (starts a fresh shape).

      Parameters

      Returns void

    • Toggle the Volume fill map (heatmap + contours) on/off.

      Parameters

      • on: boolean

      Returns void

    • Set the mesh snap radius (CSS px) live — 0 = exact point-shot (see the option's doc).

      Parameters

      • px: number

      Returns void

    • Switch the unit system for all readouts.

      Parameters

      Returns void

    • Switch the Volume readout's unit (independent of the metric/imperial length toggle).

      Parameters

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods