@deepfuture/dui-map 1.1.0

package/heatmap/map-heatmap.js

@@ -0,0 +1,330 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { css, LitElement, html } from "lit";
+import { property } from "lit/decorators.js";
+import { consume } from "@lit/context";
+import { base } from "@deepfuture/dui-primitives/core/base";
+import { mapContext } from "../map/map-context.js";
+const DEFAULT_COLOR_RAMP = [
+    "rgba(0,0,255,0)",
+    "#00f",
+    "#0ff",
+    "#0f0",
+    "#ff0",
+    "#f00",
+];
+const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-map-heatmap>` — Heatmap density visualization on the map.
+ *
+ * Accepts a GeoJSON FeatureCollection (or URL string) and renders a heatmap layer
+ * with configurable radius, intensity, color ramp, and optional individual points
+ * at high zoom levels.
+ */
+let DuiMapHeatmap = (() => {
+    let _classSuper = LitElement;
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _radius_decorators;
+    let _radius_initializers = [];
+    let _radius_extraInitializers = [];
+    let _intensity_decorators;
+    let _intensity_initializers = [];
+    let _intensity_extraInitializers = [];
+    let _opacity_decorators;
+    let _opacity_initializers = [];
+    let _opacity_extraInitializers = [];
+    let _weight_decorators;
+    let _weight_initializers = [];
+    let _weight_extraInitializers = [];
+    let _maxZoom_decorators;
+    let _maxZoom_initializers = [];
+    let _maxZoom_extraInitializers = [];
+    let _showPoints_decorators;
+    let _showPoints_initializers = [];
+    let _showPoints_extraInitializers = [];
+    let _pointColor_decorators;
+    let _pointColor_initializers = [];
+    let _pointColor_extraInitializers = [];
+    let _colorRamp_decorators;
+    let _colorRamp_initializers = [];
+    let _colorRamp_extraInitializers = [];
+    let _heatmapId_decorators;
+    let _heatmapId_initializers = [];
+    let _heatmapId_extraInitializers = [];
+    let __mapCtx_decorators;
+    let __mapCtx_initializers = [];
+    let __mapCtx_extraInitializers = [];
+    return class DuiMapHeatmap extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _data_decorators = [property({ type: String })];
+            _radius_decorators = [property({ type: Number })];
+            _intensity_decorators = [property({ type: Number })];
+            _opacity_decorators = [property({ type: Number })];
+            _weight_decorators = [property()];
+            _maxZoom_decorators = [property({ type: Number, attribute: "max-zoom" })];
+            _showPoints_decorators = [property({ type: Boolean, attribute: "show-points" })];
+            _pointColor_decorators = [property({ attribute: "point-color" })];
+            _colorRamp_decorators = [property({ type: Array, attribute: "color-ramp" })];
+            _heatmapId_decorators = [property({ attribute: "heatmap-id" })];
+            __mapCtx_decorators = [consume({ context: mapContext, subscribe: true })];
+            __esDecorate(this, null, _data_decorators, { kind: "accessor", name: "data", static: false, private: false, access: { has: obj => "data" in obj, get: obj => obj.data, set: (obj, value) => { obj.data = value; } }, metadata: _metadata }, _data_initializers, _data_extraInitializers);
+            __esDecorate(this, null, _radius_decorators, { kind: "accessor", name: "radius", static: false, private: false, access: { has: obj => "radius" in obj, get: obj => obj.radius, set: (obj, value) => { obj.radius = value; } }, metadata: _metadata }, _radius_initializers, _radius_extraInitializers);
+            __esDecorate(this, null, _intensity_decorators, { kind: "accessor", name: "intensity", static: false, private: false, access: { has: obj => "intensity" in obj, get: obj => obj.intensity, set: (obj, value) => { obj.intensity = value; } }, metadata: _metadata }, _intensity_initializers, _intensity_extraInitializers);
+            __esDecorate(this, null, _opacity_decorators, { kind: "accessor", name: "opacity", static: false, private: false, access: { has: obj => "opacity" in obj, get: obj => obj.opacity, set: (obj, value) => { obj.opacity = value; } }, metadata: _metadata }, _opacity_initializers, _opacity_extraInitializers);
+            __esDecorate(this, null, _weight_decorators, { kind: "accessor", name: "weight", static: false, private: false, access: { has: obj => "weight" in obj, get: obj => obj.weight, set: (obj, value) => { obj.weight = value; } }, metadata: _metadata }, _weight_initializers, _weight_extraInitializers);
+            __esDecorate(this, null, _maxZoom_decorators, { kind: "accessor", name: "maxZoom", static: false, private: false, access: { has: obj => "maxZoom" in obj, get: obj => obj.maxZoom, set: (obj, value) => { obj.maxZoom = value; } }, metadata: _metadata }, _maxZoom_initializers, _maxZoom_extraInitializers);
+            __esDecorate(this, null, _showPoints_decorators, { kind: "accessor", name: "showPoints", static: false, private: false, access: { has: obj => "showPoints" in obj, get: obj => obj.showPoints, set: (obj, value) => { obj.showPoints = value; } }, metadata: _metadata }, _showPoints_initializers, _showPoints_extraInitializers);
+            __esDecorate(this, null, _pointColor_decorators, { kind: "accessor", name: "pointColor", static: false, private: false, access: { has: obj => "pointColor" in obj, get: obj => obj.pointColor, set: (obj, value) => { obj.pointColor = value; } }, metadata: _metadata }, _pointColor_initializers, _pointColor_extraInitializers);
+            __esDecorate(this, null, _colorRamp_decorators, { kind: "accessor", name: "colorRamp", static: false, private: false, access: { has: obj => "colorRamp" in obj, get: obj => obj.colorRamp, set: (obj, value) => { obj.colorRamp = value; } }, metadata: _metadata }, _colorRamp_initializers, _colorRamp_extraInitializers);
+            __esDecorate(this, null, _heatmapId_decorators, { kind: "accessor", name: "heatmapId", static: false, private: false, access: { has: obj => "heatmapId" in obj, get: obj => obj.heatmapId, set: (obj, value) => { obj.heatmapId = value; } }, metadata: _metadata }, _heatmapId_initializers, _heatmapId_extraInitializers);
+            __esDecorate(this, null, __mapCtx_decorators, { kind: "accessor", name: "_mapCtx", static: false, private: false, access: { has: obj => "_mapCtx" in obj, get: obj => obj._mapCtx, set: (obj, value) => { obj._mapCtx = value; } }, metadata: _metadata }, __mapCtx_initializers, __mapCtx_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-map-heatmap";
+        static styles = [base, styles];
+        #data_accessor_storage = __runInitializers(this, _data_initializers, "");
+        /** GeoJSON data URL or inline FeatureCollection. */
+        get data() { return this.#data_accessor_storage; }
+        set data(value) { this.#data_accessor_storage = value; }
+        #radius_accessor_storage = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _radius_initializers, 20));
+        /** Heatmap kernel radius in pixels. */
+        get radius() { return this.#radius_accessor_storage; }
+        set radius(value) { this.#radius_accessor_storage = value; }
+        #intensity_accessor_storage = (__runInitializers(this, _radius_extraInitializers), __runInitializers(this, _intensity_initializers, 1));
+        /** Global intensity multiplier. */
+        get intensity() { return this.#intensity_accessor_storage; }
+        set intensity(value) { this.#intensity_accessor_storage = value; }
+        #opacity_accessor_storage = (__runInitializers(this, _intensity_extraInitializers), __runInitializers(this, _opacity_initializers, 0.8));
+        /** Heatmap layer opacity (0–1). */
+        get opacity() { return this.#opacity_accessor_storage; }
+        set opacity(value) { this.#opacity_accessor_storage = value; }
+        #weight_accessor_storage = (__runInitializers(this, _opacity_extraInitializers), __runInitializers(this, _weight_initializers, ""));
+        /** GeoJSON property name to use as point weight. Empty = equal weight. */
+        get weight() { return this.#weight_accessor_storage; }
+        set weight(value) { this.#weight_accessor_storage = value; }
+        #maxZoom_accessor_storage = (__runInitializers(this, _weight_extraInitializers), __runInitializers(this, _maxZoom_initializers, 9));
+        /** Maximum zoom at which the heatmap is visible. Above this, show individual points. */
+        get maxZoom() { return this.#maxZoom_accessor_storage; }
+        set maxZoom(value) { this.#maxZoom_accessor_storage = value; }
+        #showPoints_accessor_storage = (__runInitializers(this, _maxZoom_extraInitializers), __runInitializers(this, _showPoints_initializers, true));
+        /** Whether to show individual points when zoomed past maxZoom. */
+        get showPoints() { return this.#showPoints_accessor_storage; }
+        set showPoints(value) { this.#showPoints_accessor_storage = value; }
+        #pointColor_accessor_storage = (__runInitializers(this, _showPoints_extraInitializers), __runInitializers(this, _pointColor_initializers, "#3b82f6"));
+        /** Color for individual points (shown above maxZoom). */
+        get pointColor() { return this.#pointColor_accessor_storage; }
+        set pointColor(value) { this.#pointColor_accessor_storage = value; }
+        #colorRamp_accessor_storage = (__runInitializers(this, _pointColor_extraInitializers), __runInitializers(this, _colorRamp_initializers, DEFAULT_COLOR_RAMP));
+        /** Array of CSS colors for the heatmap gradient from cool→hot. */
+        get colorRamp() { return this.#colorRamp_accessor_storage; }
+        set colorRamp(value) { this.#colorRamp_accessor_storage = value; }
+        #heatmapId_accessor_storage = (__runInitializers(this, _colorRamp_extraInitializers), __runInitializers(this, _heatmapId_initializers, `heatmap-${Math.random().toString(36).slice(2, 9)}`));
+        /** Unique ID for source/layer. Auto-generated if not set. */
+        get heatmapId() { return this.#heatmapId_accessor_storage; }
+        set heatmapId(value) { this.#heatmapId_accessor_storage = value; }
+        #_mapCtx_accessor_storage = (__runInitializers(this, _heatmapId_extraInitializers), __runInitializers(this, __mapCtx_initializers, void 0));
+        get _mapCtx() { return this.#_mapCtx_accessor_storage; }
+        set _mapCtx(value) { this.#_mapCtx_accessor_storage = value; }
+        #sourceId = (__runInitializers(this, __mapCtx_extraInitializers), "");
+        #heatmapLayerId = "";
+        #pointLayerId = "";
+        #layersAdded = false;
+        connectedCallback() {
+            super.connectedCallback();
+            this.#sourceId = `heatmap-source-${this.heatmapId}`;
+            this.#heatmapLayerId = `heatmap-layer-${this.heatmapId}`;
+            this.#pointLayerId = `heatmap-points-${this.heatmapId}`;
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.#removeLayers();
+        }
+        updated(changed) {
+            const map = this._mapCtx?.map;
+            const isLoaded = this._mapCtx?.isLoaded;
+            if (!map || !isLoaded)
+                return;
+            if (!this.#layersAdded) {
+                this.#addLayers(map);
+            }
+            // Update source data when data changes (for non-URL data)
+            if (changed.has("data") && typeof this.data !== "string") {
+                const source = map.getSource(this.#sourceId);
+                if (source) {
+                    source.setData(this.data);
+                }
+            }
+            // Update heatmap paint properties
+            if (changed.has("radius") || changed.has("maxZoom")) {
+                if (map.getLayer(this.#heatmapLayerId)) {
+                    map.setPaintProperty(this.#heatmapLayerId, "heatmap-radius", [
+                        "interpolate", ["linear"], ["zoom"],
+                        0, 2,
+                        this.maxZoom, this.radius,
+                    ]);
+                }
+            }
+            if (changed.has("intensity") || changed.has("maxZoom")) {
+                if (map.getLayer(this.#heatmapLayerId)) {
+                    map.setPaintProperty(this.#heatmapLayerId, "heatmap-intensity", [
+                        "interpolate", ["linear"], ["zoom"],
+                        0, 1,
+                        this.maxZoom, this.intensity,
+                    ]);
+                }
+            }
+            if (changed.has("opacity") || changed.has("maxZoom")) {
+                if (map.getLayer(this.#heatmapLayerId)) {
+                    map.setPaintProperty(this.#heatmapLayerId, "heatmap-opacity", [
+                        "interpolate", ["linear"], ["zoom"],
+                        7, this.opacity,
+                        this.maxZoom, 0,
+                    ]);
+                }
+            }
+            if (changed.has("colorRamp")) {
+                if (map.getLayer(this.#heatmapLayerId)) {
+                    map.setPaintProperty(this.#heatmapLayerId, "heatmap-color", this.#buildColorRamp());
+                }
+            }
+            if (changed.has("pointColor")) {
+                if (map.getLayer(this.#pointLayerId)) {
+                    map.setPaintProperty(this.#pointLayerId, "circle-color", this.pointColor);
+                }
+            }
+        }
+        #buildColorRamp() {
+            const ramp = this.colorRamp;
+            const expr = ["interpolate", ["linear"], ["heatmap-density"]];
+            for (let i = 0; i < ramp.length; i++) {
+                expr.push(i / (ramp.length - 1));
+                expr.push(ramp[i]);
+            }
+            return expr;
+        }
+        #addLayers(map) {
+            if (map.getSource(this.#sourceId))
+                return;
+            map.addSource(this.#sourceId, {
+                type: "geojson",
+                data: this.data,
+            });
+            // Heatmap weight expression
+            const heatmapWeight = this.weight
+                ? ["interpolate", ["linear"], ["get", this.weight], 0, 0, 6, 1]
+                : 1;
+            // Heatmap layer
+            map.addLayer({
+                id: this.#heatmapLayerId,
+                type: "heatmap",
+                source: this.#sourceId,
+                maxzoom: this.maxZoom,
+                paint: {
+                    "heatmap-weight": heatmapWeight,
+                    "heatmap-intensity": [
+                        "interpolate", ["linear"], ["zoom"],
+                        0, 1,
+                        this.maxZoom, this.intensity,
+                    ],
+                    "heatmap-color": this.#buildColorRamp(),
+                    "heatmap-radius": [
+                        "interpolate", ["linear"], ["zoom"],
+                        0, 2,
+                        this.maxZoom, this.radius,
+                    ],
+                    "heatmap-opacity": [
+                        "interpolate", ["linear"], ["zoom"],
+                        7, this.opacity,
+                        this.maxZoom, 0,
+                    ],
+                },
+            });
+            // Individual points layer (visible above maxZoom)
+            if (this.showPoints) {
+                map.addLayer({
+                    id: this.#pointLayerId,
+                    type: "circle",
+                    source: this.#sourceId,
+                    minzoom: this.maxZoom,
+                    paint: {
+                        "circle-radius": [
+                            "interpolate", ["linear"], ["zoom"],
+                            this.maxZoom, 2,
+                            22, 8,
+                        ],
+                        "circle-color": this.pointColor,
+                        "circle-stroke-width": 1,
+                        "circle-stroke-color": "#fff",
+                        "circle-opacity": [
+                            "interpolate", ["linear"], ["zoom"],
+                            this.maxZoom, 0,
+                            this.maxZoom + 1, 1,
+                        ],
+                    },
+                });
+            }
+            this.#layersAdded = true;
+        }
+        #removeLayers() {
+            const map = this._mapCtx?.map;
+            if (!map)
+                return;
+            try {
+                if (map.getLayer(this.#pointLayerId))
+                    map.removeLayer(this.#pointLayerId);
+                if (map.getLayer(this.#heatmapLayerId))
+                    map.removeLayer(this.#heatmapLayerId);
+                if (map.getSource(this.#sourceId))
+                    map.removeSource(this.#sourceId);
+            }
+            catch {
+                // Map may already be destroyed
+            }
+            this.#layersAdded = false;
+        }
+        render() {
+            return html ``;
+        }
+    };
+})();
+export { DuiMapHeatmap };
+customElements.define(DuiMapHeatmap.tagName, DuiMapHeatmap);

package/index.d.ts

@@ -0,0 +1,10 @@
+export { DuiMap, viewportChangeEvent, mapLoadEvent, mapClickEvent, mapDblClickEvent, mapContextMenuEvent, mapContext, } from "./map/index.js";
+export type { MapContext, MapViewport, MapClickDetail } from "./map/index.js";
+export { DuiMapMarker, DuiMapMarkerContent, DuiMapMarkerPopup, DuiMapMarkerTooltip, DuiMapMarkerLabel, dragStartEvent, dragEvent, dragEndEvent, markerContext, } from "./marker/index.js";
+export type { MarkerContext, LngLat } from "./marker/index.js";
+export { DuiMapControls, locateEvent } from "./controls/index.js";
+export { DuiMapPopup, popupCloseEvent } from "./popup/index.js";
+export { DuiMapRoute, routeClickEvent } from "./route/index.js";
+export { DuiMapRegion, regionClickEvent } from "./region/index.js";
+export { DuiMapClusterLayer, pointClickEvent, clusterClickEvent } from "./cluster-layer/index.js";
+export { DuiMapHeatmap } from "./heatmap/index.js";

package/index.js

@@ -0,0 +1,9 @@
+// --- Components (self-registering) ---
+export { DuiMap, viewportChangeEvent, mapLoadEvent, mapClickEvent, mapDblClickEvent, mapContextMenuEvent, mapContext, } from "./map/index.js";
+export { DuiMapMarker, DuiMapMarkerContent, DuiMapMarkerPopup, DuiMapMarkerTooltip, DuiMapMarkerLabel, dragStartEvent, dragEvent, dragEndEvent, markerContext, } from "./marker/index.js";
+export { DuiMapControls, locateEvent } from "./controls/index.js";
+export { DuiMapPopup, popupCloseEvent } from "./popup/index.js";
+export { DuiMapRoute, routeClickEvent } from "./route/index.js";
+export { DuiMapRegion, regionClickEvent } from "./region/index.js";
+export { DuiMapClusterLayer, pointClickEvent, clusterClickEvent } from "./cluster-layer/index.js";
+export { DuiMapHeatmap } from "./heatmap/index.js";

package/map/index.d.ts

@@ -0,0 +1,5 @@
+import { DuiMap, viewportChangeEvent, mapLoadEvent, mapClickEvent, mapDblClickEvent, mapContextMenuEvent } from "./map.js";
+export { DuiMap, viewportChangeEvent, mapLoadEvent, mapClickEvent, mapDblClickEvent, mapContextMenuEvent, };
+export { mapContext } from "./map-context.js";
+export type { MapContext } from "./map-context.js";
+export type { MapViewport, MapClickDetail } from "./map.js";

package/map/index.js

@@ -0,0 +1,3 @@
+import { DuiMap, viewportChangeEvent, mapLoadEvent, mapClickEvent, mapDblClickEvent, mapContextMenuEvent, } from "./map.js";
+export { DuiMap, viewportChangeEvent, mapLoadEvent, mapClickEvent, mapDblClickEvent, mapContextMenuEvent, };
+export { mapContext } from "./map-context.js";

package/map/map-context.d.ts

@@ -0,0 +1,8 @@
+import type MapLibreGL from "maplibre-gl";
+export type MapContext = {
+    readonly map: MapLibreGL.Map | null;
+    readonly isLoaded: boolean;
+};
+export declare const mapContext: {
+    __context__: MapContext;
+};

package/map/map-context.js

@@ -0,0 +1,2 @@
+import { createContext } from "@lit/context";
+export const mapContext = createContext(Symbol("dui-map"));

package/map/map.d.ts

@@ -0,0 +1,120 @@
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+import MapLibreGL from "maplibre-gl";
+import { type MapContext } from "./map-context.js";
+/** Fired when the map viewport changes (pan, zoom, rotate, pitch). */
+export declare const viewportChangeEvent: (detail: MapViewport) => CustomEvent<MapViewport>;
+/** Fired when the map finishes initial load. */
+export declare const mapLoadEvent: (detail: void) => CustomEvent<void>;
+export type MapClickDetail = {
+    lngLat: {
+        lng: number;
+        lat: number;
+    };
+    point: {
+        x: number;
+        y: number;
+    };
+};
+/** Fired on single click on the map canvas. */
+export declare const mapClickEvent: (detail: MapClickDetail) => CustomEvent<MapClickDetail>;
+/** Fired on double-click on the map canvas. */
+export declare const mapDblClickEvent: (detail: MapClickDetail) => CustomEvent<MapClickDetail>;
+/** Fired on right-click / long-press on the map canvas. */
+export declare const mapContextMenuEvent: (detail: MapClickDetail) => CustomEvent<MapClickDetail>;
+export type MapViewport = {
+    center: [number, number];
+    zoom: number;
+    bearing: number;
+    pitch: number;
+};
+/**
+ * `<dui-map>` — Root map component wrapping MapLibre GL JS.
+ *
+ * Initializes a MapLibre map inside its shadow DOM with CSS properly adopted.
+ * Provides map context to child components via Lit Context.
+ * Auto-detects light/dark theme from `data-theme` attribute on `<html>`.
+ *
+ * @slot - Map overlay content (controls, markers, popups, routes, etc.)
+ * @csspart container - The map container div.
+ * @csspart loader - The loading indicator overlay.
+ * @fires dui-map-viewport-change - Fired on pan/zoom/rotate/pitch. Detail: MapViewport
+ * @fires dui-map-load - Fired when map finishes loading.
+ * @fires dui-map-click - Fired on single click. Detail: MapClickDetail
+ * @fires dui-map-dblclick - Fired on double-click. Detail: MapClickDetail
+ * @fires dui-map-contextmenu - Fired on right-click / long-press. Detail: MapClickDetail
+ */
+export declare class DuiMap extends LitElement {
+    #private;
+    static tagName: "dui-map";
+    static styles: import("lit").CSSResult[];
+    /**
+     * Center coordinates as `[longitude, latitude]`.
+     * Accepts a JSON array string or is set programmatically.
+     */
+    accessor center: [number, number];
+    /** Zoom level (0–22). */
+    accessor zoom: number;
+    /** Bearing (rotation) in degrees. */
+    accessor bearing: number;
+    /** Pitch (tilt) in degrees. */
+    accessor pitch: number;
+    /** Force a specific theme. When unset, auto-detects from document. */
+    accessor theme: "light" | "dark" | undefined;
+    /** Custom style URL for light theme. */
+    accessor styleLight: string | undefined;
+    /** Custom style URL for dark theme. */
+    accessor styleDark: string | undefined;
+    /** Show loading overlay. */
+    accessor loading: boolean;
+    /** Disable world copies (repeating map). */
+    accessor noWorldCopies: boolean;
+    /** Whether the viewport is controlled externally. */
+    accessor controlled: boolean;
+    /** Minimum zoom level (0–22). */
+    accessor minZoom: number;
+    /** Maximum zoom level (0–22). */
+    accessor maxZoom: number;
+    /** SW and NE corners constraining the viewable area. */
+    accessor maxBounds: [[number, number], [number, number]] | undefined;
+    /** SW and NE corners as [[swLng, swLat], [neLng, neLat]]. Flies to fit when set. */
+    accessor bounds: [[number, number], [number, number]] | undefined;
+    /** Padding in pixels applied to fitBounds calls. */
+    accessor boundsPadding: number;
+    accessor _ctx: MapContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    updated(changed: PropertyValues): void;
+    /** Get the raw MapLibre GL instance. */
+    getMapInstance(): MapLibreGL.Map | null;
+    /** Animate to a position with a parabolic flight path. */
+    flyTo(options: {
+        center?: [number, number];
+        zoom?: number;
+        bearing?: number;
+        pitch?: number;
+        duration?: number;
+        curve?: number;
+    }): void;
+    /** Animate to a position with a linear ease. */
+    easeTo(options: {
+        center?: [number, number];
+        zoom?: number;
+        bearing?: number;
+        pitch?: number;
+        duration?: number;
+    }): void;
+    /** Fly to fit the given bounds. */
+    fitBounds(bounds: [[number, number], [number, number]], options?: {
+        padding?: number;
+        maxZoom?: number;
+        duration?: number;
+    }): void;
+    /** Compute a bounding box from all child dui-map-marker elements and fly to fit them. */
+    fitToMarkers(options?: {
+        padding?: number;
+        maxZoom?: number;
+        duration?: number;
+    }): void;
+    render(): TemplateResult;
+}