@deepfuture/dui-map 1.1.0

package/popup/map-popup.js

@@ -0,0 +1,184 @@
+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 { customEvent } from "@deepfuture/dui-primitives/core/event";
+import MapLibreGL from "maplibre-gl";
+import { mapContext } from "../map/map-context.js";
+/** Fired when the popup is closed. */
+export const popupCloseEvent = customEvent("dui-map-popup-close", { bubbles: true, composed: true });
+const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-map-popup>` — Standalone popup at coordinates on the map.
+ *
+ * @slot - Popup content.
+ * @csspart popup - The popup content wrapper.
+ * @fires dui-map-popup-close - Fired when the popup is closed.
+ */
+let DuiMapPopup = (() => {
+    let _classSuper = LitElement;
+    let _longitude_decorators;
+    let _longitude_initializers = [];
+    let _longitude_extraInitializers = [];
+    let _latitude_decorators;
+    let _latitude_initializers = [];
+    let _latitude_extraInitializers = [];
+    let _popupOffset_decorators;
+    let _popupOffset_initializers = [];
+    let _popupOffset_extraInitializers = [];
+    let _closeButton_decorators;
+    let _closeButton_initializers = [];
+    let _closeButton_extraInitializers = [];
+    let __mapCtx_decorators;
+    let __mapCtx_initializers = [];
+    let __mapCtx_extraInitializers = [];
+    return class DuiMapPopup extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _longitude_decorators = [property({ type: Number })];
+            _latitude_decorators = [property({ type: Number })];
+            _popupOffset_decorators = [property({ type: Number, attribute: "popup-offset" })];
+            _closeButton_decorators = [property({ type: Boolean, attribute: "close-button" })];
+            __mapCtx_decorators = [consume({ context: mapContext, subscribe: true })];
+            __esDecorate(this, null, _longitude_decorators, { kind: "accessor", name: "longitude", static: false, private: false, access: { has: obj => "longitude" in obj, get: obj => obj.longitude, set: (obj, value) => { obj.longitude = value; } }, metadata: _metadata }, _longitude_initializers, _longitude_extraInitializers);
+            __esDecorate(this, null, _latitude_decorators, { kind: "accessor", name: "latitude", static: false, private: false, access: { has: obj => "latitude" in obj, get: obj => obj.latitude, set: (obj, value) => { obj.latitude = value; } }, metadata: _metadata }, _latitude_initializers, _latitude_extraInitializers);
+            __esDecorate(this, null, _popupOffset_decorators, { kind: "accessor", name: "popupOffset", static: false, private: false, access: { has: obj => "popupOffset" in obj, get: obj => obj.popupOffset, set: (obj, value) => { obj.popupOffset = value; } }, metadata: _metadata }, _popupOffset_initializers, _popupOffset_extraInitializers);
+            __esDecorate(this, null, _closeButton_decorators, { kind: "accessor", name: "closeButton", static: false, private: false, access: { has: obj => "closeButton" in obj, get: obj => obj.closeButton, set: (obj, value) => { obj.closeButton = value; } }, metadata: _metadata }, _closeButton_initializers, _closeButton_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-popup";
+        static styles = [base, styles];
+        #longitude_accessor_storage = __runInitializers(this, _longitude_initializers, 0);
+        /** Longitude coordinate for popup position. */
+        get longitude() { return this.#longitude_accessor_storage; }
+        set longitude(value) { this.#longitude_accessor_storage = value; }
+        #latitude_accessor_storage = (__runInitializers(this, _longitude_extraInitializers), __runInitializers(this, _latitude_initializers, 0));
+        /** Latitude coordinate for popup position. */
+        get latitude() { return this.#latitude_accessor_storage; }
+        set latitude(value) { this.#latitude_accessor_storage = value; }
+        #popupOffset_accessor_storage = (__runInitializers(this, _latitude_extraInitializers), __runInitializers(this, _popupOffset_initializers, 16));
+        /** Popup offset from the anchor in pixels. */
+        get popupOffset() { return this.#popupOffset_accessor_storage; }
+        set popupOffset(value) { this.#popupOffset_accessor_storage = value; }
+        #closeButton_accessor_storage = (__runInitializers(this, _popupOffset_extraInitializers), __runInitializers(this, _closeButton_initializers, false));
+        /** Show a close button. */
+        get closeButton() { return this.#closeButton_accessor_storage; }
+        set closeButton(value) { this.#closeButton_accessor_storage = value; }
+        #_mapCtx_accessor_storage = (__runInitializers(this, _closeButton_extraInitializers), __runInitializers(this, __mapCtx_initializers, void 0));
+        get _mapCtx() { return this.#_mapCtx_accessor_storage; }
+        set _mapCtx(value) { this.#_mapCtx_accessor_storage = value; }
+        #popup = (__runInitializers(this, __mapCtx_extraInitializers), null);
+        #container = document.createElement("div");
+        #addedToMap = false;
+        connectedCallback() {
+            super.connectedCallback();
+            this.#popup = new MapLibreGL.Popup({
+                offset: this.popupOffset,
+                closeButton: false,
+                className: "dui-popup",
+            })
+                .setMaxWidth("none")
+                .setLngLat([this.longitude, this.latitude]);
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.#popup?.remove();
+            this.#popup = null;
+            this.#addedToMap = false;
+        }
+        updated() {
+            const map = this._mapCtx?.map;
+            if (!map || !this.#popup)
+                return;
+            if (!this.#addedToMap) {
+                this.#popup.on("close", () => {
+                    this.dispatchEvent(popupCloseEvent());
+                });
+                this.#popup.setDOMContent(this.#container);
+                this.#popup.addTo(map);
+                this.#addedToMap = true;
+            }
+            // Update position
+            if (this.#popup.isOpen()) {
+                const ll = this.#popup.getLngLat();
+                if (ll.lng !== this.longitude || ll.lat !== this.latitude) {
+                    this.#popup.setLngLat([this.longitude, this.latitude]);
+                }
+                // Update offset
+                if (this.#popup.options?.offset !== this.popupOffset) {
+                    this.#popup.setOffset(this.popupOffset);
+                }
+            }
+            this.#renderIntoPortal();
+        }
+        #handleClose = () => {
+            this.#popup?.remove();
+        };
+        #renderIntoPortal() {
+            const slot = this.shadowRoot.querySelector("slot");
+            if (!slot)
+                return;
+            const assigned = slot.assignedNodes({ flatten: true });
+            this.#container.innerHTML = "";
+            const wrapper = document.createElement("div");
+            wrapper.setAttribute("part", "popup");
+            if (this.closeButton) {
+                const btn = document.createElement("button");
+                btn.setAttribute("aria-label", "Close popup");
+                btn.type = "button";
+                btn.innerHTML = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+                btn.style.cssText = "position:absolute;top:4px;right:4px;z-index:10;background:none;border:none;cursor:pointer;padding:2px;opacity:0.7;color:inherit;";
+                btn.addEventListener("click", this.#handleClose);
+                wrapper.appendChild(btn);
+            }
+            for (const node of assigned) {
+                wrapper.appendChild(node.cloneNode(true));
+            }
+            this.#container.appendChild(wrapper);
+        }
+        render() {
+            return html `<slot style="display:none" @slotchange=${this.#renderIntoPortal}></slot>`;
+        }
+    };
+})();
+export { DuiMapPopup };
+customElements.define(DuiMapPopup.tagName, DuiMapPopup);

package/region/index.d.ts

@@ -0,0 +1,2 @@
+import { DuiMapRegion, regionClickEvent } from "./map-region.js";
+export { DuiMapRegion, regionClickEvent };

package/region/index.js

@@ -0,0 +1,2 @@
+import { DuiMapRegion, regionClickEvent } from "./map-region.js";
+export { DuiMapRegion, regionClickEvent };

package/region/map-region.d.ts

@@ -0,0 +1,41 @@
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+import { type MapContext } from "../map/map-context.js";
+/** Fired when the region is clicked. */
+export declare const regionClickEvent: (detail: void) => CustomEvent<void>;
+/**
+ * `<dui-map-region>` — GeoJSON polygon fill layer on the map.
+ *
+ * Renders filled polygon or multi-polygon regions with an optional border stroke.
+ * Accepts inline GeoJSON data or a URL to fetch from.
+ *
+ * @fires dui-region-click - Fired when the region is clicked.
+ */
+export declare class DuiMapRegion extends LitElement {
+    #private;
+    static tagName: "dui-map-region";
+    static styles: import("lit").CSSResult[];
+    /** Unique identifier. Auto-generated if not set. */
+    accessor regionId: string;
+    /**
+     * GeoJSON data — a URL string, a `Feature`, or a `FeatureCollection`
+     * containing Polygon or MultiPolygon geometries.
+     */
+    accessor data: string | GeoJSON.Feature | GeoJSON.FeatureCollection;
+    /** Fill color. */
+    accessor fillColor: string;
+    /** Fill opacity (0–1). */
+    accessor fillOpacity: number;
+    /** Border stroke color. */
+    accessor strokeColor: string;
+    /** Border stroke width in pixels. Set to 0 to hide the border. */
+    accessor strokeWidth: number;
+    /** Border stroke opacity (0–1). */
+    accessor strokeOpacity: number;
+    /** Whether the region is interactive (pointer cursor + click events). */
+    accessor interactive: boolean;
+    accessor _mapCtx: MapContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}

package/region/map-region.js

@@ -0,0 +1,276 @@
+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 { customEvent } from "@deepfuture/dui-primitives/core/event";
+import { mapContext } from "../map/map-context.js";
+/** Fired when the region is clicked. */
+export const regionClickEvent = customEvent("dui-region-click", { bubbles: true, composed: true });
+const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-map-region>` — GeoJSON polygon fill layer on the map.
+ *
+ * Renders filled polygon or multi-polygon regions with an optional border stroke.
+ * Accepts inline GeoJSON data or a URL to fetch from.
+ *
+ * @fires dui-region-click - Fired when the region is clicked.
+ */
+let DuiMapRegion = (() => {
+    let _classSuper = LitElement;
+    let _regionId_decorators;
+    let _regionId_initializers = [];
+    let _regionId_extraInitializers = [];
+    let _data_decorators;
+    let _data_initializers = [];
+    let _data_extraInitializers = [];
+    let _fillColor_decorators;
+    let _fillColor_initializers = [];
+    let _fillColor_extraInitializers = [];
+    let _fillOpacity_decorators;
+    let _fillOpacity_initializers = [];
+    let _fillOpacity_extraInitializers = [];
+    let _strokeColor_decorators;
+    let _strokeColor_initializers = [];
+    let _strokeColor_extraInitializers = [];
+    let _strokeWidth_decorators;
+    let _strokeWidth_initializers = [];
+    let _strokeWidth_extraInitializers = [];
+    let _strokeOpacity_decorators;
+    let _strokeOpacity_initializers = [];
+    let _strokeOpacity_extraInitializers = [];
+    let _interactive_decorators;
+    let _interactive_initializers = [];
+    let _interactive_extraInitializers = [];
+    let __mapCtx_decorators;
+    let __mapCtx_initializers = [];
+    let __mapCtx_extraInitializers = [];
+    return class DuiMapRegion extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _regionId_decorators = [property({ attribute: "region-id" })];
+            _data_decorators = [property({
+                    converter: {
+                        fromAttribute(value) {
+                            if (!value)
+                                return "";
+                            try {
+                                return JSON.parse(value);
+                            }
+                            catch {
+                                return value;
+                            }
+                        },
+                        toAttribute(value) {
+                            return typeof value === "string" ? value : JSON.stringify(value);
+                        },
+                    },
+                })];
+            _fillColor_decorators = [property({ attribute: "fill-color" })];
+            _fillOpacity_decorators = [property({ type: Number, attribute: "fill-opacity" })];
+            _strokeColor_decorators = [property({ attribute: "stroke-color" })];
+            _strokeWidth_decorators = [property({ type: Number, attribute: "stroke-width" })];
+            _strokeOpacity_decorators = [property({ type: Number, attribute: "stroke-opacity" })];
+            _interactive_decorators = [property({ type: Boolean })];
+            __mapCtx_decorators = [consume({ context: mapContext, subscribe: true })];
+            __esDecorate(this, null, _regionId_decorators, { kind: "accessor", name: "regionId", static: false, private: false, access: { has: obj => "regionId" in obj, get: obj => obj.regionId, set: (obj, value) => { obj.regionId = value; } }, metadata: _metadata }, _regionId_initializers, _regionId_extraInitializers);
+            __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, _fillColor_decorators, { kind: "accessor", name: "fillColor", static: false, private: false, access: { has: obj => "fillColor" in obj, get: obj => obj.fillColor, set: (obj, value) => { obj.fillColor = value; } }, metadata: _metadata }, _fillColor_initializers, _fillColor_extraInitializers);
+            __esDecorate(this, null, _fillOpacity_decorators, { kind: "accessor", name: "fillOpacity", static: false, private: false, access: { has: obj => "fillOpacity" in obj, get: obj => obj.fillOpacity, set: (obj, value) => { obj.fillOpacity = value; } }, metadata: _metadata }, _fillOpacity_initializers, _fillOpacity_extraInitializers);
+            __esDecorate(this, null, _strokeColor_decorators, { kind: "accessor", name: "strokeColor", static: false, private: false, access: { has: obj => "strokeColor" in obj, get: obj => obj.strokeColor, set: (obj, value) => { obj.strokeColor = value; } }, metadata: _metadata }, _strokeColor_initializers, _strokeColor_extraInitializers);
+            __esDecorate(this, null, _strokeWidth_decorators, { kind: "accessor", name: "strokeWidth", static: false, private: false, access: { has: obj => "strokeWidth" in obj, get: obj => obj.strokeWidth, set: (obj, value) => { obj.strokeWidth = value; } }, metadata: _metadata }, _strokeWidth_initializers, _strokeWidth_extraInitializers);
+            __esDecorate(this, null, _strokeOpacity_decorators, { kind: "accessor", name: "strokeOpacity", static: false, private: false, access: { has: obj => "strokeOpacity" in obj, get: obj => obj.strokeOpacity, set: (obj, value) => { obj.strokeOpacity = value; } }, metadata: _metadata }, _strokeOpacity_initializers, _strokeOpacity_extraInitializers);
+            __esDecorate(this, null, _interactive_decorators, { kind: "accessor", name: "interactive", static: false, private: false, access: { has: obj => "interactive" in obj, get: obj => obj.interactive, set: (obj, value) => { obj.interactive = value; } }, metadata: _metadata }, _interactive_initializers, _interactive_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-region";
+        static styles = [base, styles];
+        #regionId_accessor_storage = __runInitializers(this, _regionId_initializers, `region-${Math.random().toString(36).slice(2, 9)}`);
+        /** Unique identifier. Auto-generated if not set. */
+        get regionId() { return this.#regionId_accessor_storage; }
+        set regionId(value) { this.#regionId_accessor_storage = value; }
+        #data_accessor_storage = (__runInitializers(this, _regionId_extraInitializers), __runInitializers(this, _data_initializers, ""));
+        /**
+         * GeoJSON data — a URL string, a `Feature`, or a `FeatureCollection`
+         * containing Polygon or MultiPolygon geometries.
+         */
+        get data() { return this.#data_accessor_storage; }
+        set data(value) { this.#data_accessor_storage = value; }
+        #fillColor_accessor_storage = (__runInitializers(this, _data_extraInitializers), __runInitializers(this, _fillColor_initializers, "rgba(59, 130, 246, 0.3)"));
+        /** Fill color. */
+        get fillColor() { return this.#fillColor_accessor_storage; }
+        set fillColor(value) { this.#fillColor_accessor_storage = value; }
+        #fillOpacity_accessor_storage = (__runInitializers(this, _fillColor_extraInitializers), __runInitializers(this, _fillOpacity_initializers, 1));
+        /** Fill opacity (0–1). */
+        get fillOpacity() { return this.#fillOpacity_accessor_storage; }
+        set fillOpacity(value) { this.#fillOpacity_accessor_storage = value; }
+        #strokeColor_accessor_storage = (__runInitializers(this, _fillOpacity_extraInitializers), __runInitializers(this, _strokeColor_initializers, "#3b82f6"));
+        /** Border stroke color. */
+        get strokeColor() { return this.#strokeColor_accessor_storage; }
+        set strokeColor(value) { this.#strokeColor_accessor_storage = value; }
+        #strokeWidth_accessor_storage = (__runInitializers(this, _strokeColor_extraInitializers), __runInitializers(this, _strokeWidth_initializers, 2));
+        /** Border stroke width in pixels. Set to 0 to hide the border. */
+        get strokeWidth() { return this.#strokeWidth_accessor_storage; }
+        set strokeWidth(value) { this.#strokeWidth_accessor_storage = value; }
+        #strokeOpacity_accessor_storage = (__runInitializers(this, _strokeWidth_extraInitializers), __runInitializers(this, _strokeOpacity_initializers, 1));
+        /** Border stroke opacity (0–1). */
+        get strokeOpacity() { return this.#strokeOpacity_accessor_storage; }
+        set strokeOpacity(value) { this.#strokeOpacity_accessor_storage = value; }
+        #interactive_accessor_storage = (__runInitializers(this, _strokeOpacity_extraInitializers), __runInitializers(this, _interactive_initializers, true));
+        /** Whether the region is interactive (pointer cursor + click events). */
+        get interactive() { return this.#interactive_accessor_storage; }
+        set interactive(value) { this.#interactive_accessor_storage = value; }
+        #_mapCtx_accessor_storage = (__runInitializers(this, _interactive_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), "");
+        #fillLayerId = "";
+        #strokeLayerId = "";
+        #layersAdded = false;
+        connectedCallback() {
+            super.connectedCallback();
+            this.#sourceId = `region-source-${this.regionId}`;
+            this.#fillLayerId = `region-fill-${this.regionId}`;
+            this.#strokeLayerId = `region-stroke-${this.regionId}`;
+        }
+        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 data (inline GeoJSON or URL string)
+            if (changed.has("data") && this.data) {
+                const source = map.getSource(this.#sourceId);
+                if (source) {
+                    source.setData(this.data);
+                }
+            }
+            // Update paint properties
+            if (changed.has("fillColor") || changed.has("fillOpacity")) {
+                if (map.getLayer(this.#fillLayerId)) {
+                    map.setPaintProperty(this.#fillLayerId, "fill-color", this.fillColor);
+                    map.setPaintProperty(this.#fillLayerId, "fill-opacity", this.fillOpacity);
+                }
+            }
+            if (changed.has("strokeColor") || changed.has("strokeWidth") || changed.has("strokeOpacity")) {
+                if (map.getLayer(this.#strokeLayerId)) {
+                    map.setPaintProperty(this.#strokeLayerId, "line-color", this.strokeColor);
+                    map.setPaintProperty(this.#strokeLayerId, "line-width", this.strokeWidth);
+                    map.setPaintProperty(this.#strokeLayerId, "line-opacity", this.strokeOpacity);
+                }
+            }
+        }
+        #addLayers(map) {
+            if (map.getSource(this.#sourceId))
+                return;
+            // Determine initial data — URL string vs inline GeoJSON
+            const initialData = this.data || { type: "FeatureCollection", features: [] };
+            map.addSource(this.#sourceId, {
+                type: "geojson",
+                data: initialData,
+            });
+            // Fill layer
+            map.addLayer({
+                id: this.#fillLayerId,
+                type: "fill",
+                source: this.#sourceId,
+                paint: {
+                    "fill-color": this.fillColor,
+                    "fill-opacity": this.fillOpacity,
+                },
+            });
+            // Stroke layer
+            if (this.strokeWidth > 0) {
+                map.addLayer({
+                    id: this.#strokeLayerId,
+                    type: "line",
+                    source: this.#sourceId,
+                    paint: {
+                        "line-color": this.strokeColor,
+                        "line-width": this.strokeWidth,
+                        "line-opacity": this.strokeOpacity,
+                    },
+                });
+            }
+            if (this.interactive) {
+                map.on("click", this.#fillLayerId, () => {
+                    this.dispatchEvent(regionClickEvent());
+                });
+                map.on("mouseenter", this.#fillLayerId, () => {
+                    map.getCanvas().style.cursor = "pointer";
+                });
+                map.on("mouseleave", this.#fillLayerId, () => {
+                    map.getCanvas().style.cursor = "";
+                });
+            }
+            this.#layersAdded = true;
+        }
+        #removeLayers() {
+            const map = this._mapCtx?.map;
+            if (!map)
+                return;
+            try {
+                if (map.getLayer(this.#strokeLayerId))
+                    map.removeLayer(this.#strokeLayerId);
+                if (map.getLayer(this.#fillLayerId))
+                    map.removeLayer(this.#fillLayerId);
+                if (map.getSource(this.#sourceId))
+                    map.removeSource(this.#sourceId);
+            }
+            catch {
+                // Map may already be destroyed
+            }
+            this.#layersAdded = false;
+        }
+        render() {
+            return html ``;
+        }
+    };
+})();
+export { DuiMapRegion };
+customElements.define(DuiMapRegion.tagName, DuiMapRegion);

package/route/index.d.ts

@@ -0,0 +1,2 @@
+import { DuiMapRoute, routeClickEvent } from "./map-route.js";
+export { DuiMapRoute, routeClickEvent };

package/route/index.js

@@ -0,0 +1,2 @@
+import { DuiMapRoute, routeClickEvent } from "./map-route.js";
+export { DuiMapRoute, routeClickEvent };

package/route/map-route.d.ts

@@ -0,0 +1,33 @@
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+import { type MapContext } from "../map/map-context.js";
+/** Fired when the route line is clicked. */
+export declare const routeClickEvent: (detail: void) => CustomEvent<void>;
+/**
+ * `<dui-map-route>` — GeoJSON LineString route layer on the map.
+ *
+ * @fires dui-route-click - Fired when the route line is clicked.
+ */
+export declare class DuiMapRoute extends LitElement {
+    #private;
+    static tagName: "dui-map-route";
+    static styles: import("lit").CSSResult[];
+    /** Unique identifier for the route. Auto-generated if not set. */
+    accessor routeId: string;
+    /** Array of `[longitude, latitude]` coordinate pairs defining the route. */
+    accessor coordinates: [number, number][];
+    /** Line color as CSS color value. */
+    accessor color: string;
+    /** Line width in pixels. */
+    accessor width: number;
+    /** Line opacity from 0 to 1. */
+    accessor opacity: number;
+    /** Dash pattern `[dash, gap]` for dashed lines. */
+    accessor dashArray: [number, number] | undefined;
+    /** Whether the route is interactive (pointer cursor on hover). */
+    accessor interactive: boolean;
+    accessor _mapCtx: MapContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}