SDK JS
    Preparing search index...

    Class SunControlWidget

    An embeddable, framework-agnostic MapLibre time-of-day control (a maplibregl.IControl).

    Renders a panel with a scrubber whose track shows the day's golden-hour / twilight color bands, a date picker, Sunrise / Golden / Noon / Sunset presets, an optional sun-path arc, a live altitude/azimuth readout, a play-through-the-day animation, and a shadows toggle. Time is modeled as local mean solar time at the displayed longitude, so it reads correctly anywhere without a timezone database.

    On each change it pushes the new instant to the SunControlWidgetOptions.system (or calls SunControlWidgetOptions.onChange) and dispatches a DOM CustomEvent('sunchange', { detail: SunState, bubbles: true }) on its root element, so any framework can bind without coupling to this class.

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

    await prepareMapLibre(maplibregl); // v6: wires the worker module ยท v5: no-op
    const map = new maplibregl.Map({ container: 'map', style, pitch: 60 });

    const atmo = setTimeOfDay({ map, location: 'map-center', layers: [cityLayer] });
    map.addControl(new SunControlWidget({ system: atmo, showSunPath: true }), 'top-right');

    // UI-only mode: apply the lighting yourself, no Atmosphere instance.
    map.addControl(
      new SunControlWidget({
        location: [-73.99, 40.75],
        onChange: (sun) => console.log(sun.altitudeDeg, sun.azimuthDeg),
      }),
    );

    SunControlWidgetOptions for the configuration fields.

    Implements

    • IControl
    Index

    Constructors

    constructor

    Methods

    getDefaultPosition onAdd onRemove

    Constructors

    Methods

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

      Returns ControlPosition

      The MapLibre ControlPosition 'top-right'.

    • MapLibre IControl hook: build the DOM, inject the (ref-counted) stylesheet, wire the map listeners, and push the initial sun state. Called by map.addControl(...).

      Parameters

      • map: Map$1

        The MapLibre map this control is being added to.

      Returns HTMLElement

      The control's root HTMLElement for MapLibre to place; also the element the sunchange CustomEvent is dispatched on.

    • MapLibre IControl hook: unsubscribe from the system, disconnect the resize observer and map listeners, remove the root element, and release this instance's stylesheet reference. Called by map.removeControl(...).

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods