@deepfuture/dui-map 1.1.0

package/controls/map-controls.js

@@ -0,0 +1,344 @@
+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;
+};
+var __setFunctionName = (this && this.__setFunctionName) || function (f, name, prefix) {
+    if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : "";
+    return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name });
+};
+import { css, html, LitElement, nothing } from "lit";
+import { property, state } 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 { mapControlsThemeStyles } from "../theme/map-theme.js";
+import { mapContext } from "../map/map-context.js";
+/** Fired when the user's geolocation is found. */
+export const locateEvent = customEvent("dui-map-locate", { bubbles: true, composed: true });
+/** Structural styles only. */
+const styles = css `
+  :host {
+    display: block;
+    position: absolute;
+    z-index: 10;
+  }
+
+  :host([position="top-left"]) { top: var(--space-2, 8px); left: var(--space-2, 8px); }
+  :host([position="top-right"]) { top: var(--space-2, 8px); right: var(--space-2, 8px); }
+  :host([position="bottom-left"]) { bottom: var(--space-2, 8px); left: var(--space-2, 8px); }
+  :host,
+  :host([position=""]),
+  :host([position="bottom-right"]) { bottom: var(--space-8, 32px); right: var(--space-2, 8px); }
+
+  [part="root"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1_5, 6px);
+  }
+
+  [part="group"] {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  [part="control-button"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    font: inherit;
+    color: inherit;
+  }
+
+  [part="control-button"]:disabled {
+    pointer-events: none;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* Compass SVG */
+  .compass-svg {
+    width: 20px;
+    height: 20px;
+    transition: transform 200ms;
+    transform-style: preserve-3d;
+  }
+
+  /* Icon SVGs */
+  .icon-svg {
+    width: 16px;
+    height: 16px;
+  }
+`;
+/**
+ * `<dui-map-controls>` — Zoom, compass, locate, and fullscreen controls.
+ *
+ * @csspart root - The outer controls wrapper.
+ * @csspart group - A control group container.
+ * @csspart control-button - Individual control buttons.
+ * @fires dui-map-locate - Fired with user coordinates when located.
+ */
+let DuiMapControls = (() => {
+    let _classSuper = LitElement;
+    let _position_decorators;
+    let _position_initializers = [];
+    let _position_extraInitializers = [];
+    let _showZoom_decorators;
+    let _showZoom_initializers = [];
+    let _showZoom_extraInitializers = [];
+    let _showCompass_decorators;
+    let _showCompass_initializers = [];
+    let _showCompass_extraInitializers = [];
+    let _showLocate_decorators;
+    let _showLocate_initializers = [];
+    let _showLocate_extraInitializers = [];
+    let _showFullscreen_decorators;
+    let _showFullscreen_initializers = [];
+    let _showFullscreen_extraInitializers = [];
+    let __mapCtx_decorators;
+    let __mapCtx_initializers = [];
+    let __mapCtx_extraInitializers = [];
+    let _private_waitingForLocation_decorators;
+    let _private_waitingForLocation_initializers = [];
+    let _private_waitingForLocation_extraInitializers = [];
+    let _private_waitingForLocation_descriptor;
+    return class DuiMapControls extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _position_decorators = [property({ reflect: true })];
+            _showZoom_decorators = [property({ type: Boolean, attribute: "show-zoom" })];
+            _showCompass_decorators = [property({ type: Boolean, attribute: "show-compass" })];
+            _showLocate_decorators = [property({ type: Boolean, attribute: "show-locate" })];
+            _showFullscreen_decorators = [property({ type: Boolean, attribute: "show-fullscreen" })];
+            __mapCtx_decorators = [consume({ context: mapContext, subscribe: true })];
+            _private_waitingForLocation_decorators = [state()];
+            __esDecorate(this, null, _position_decorators, { kind: "accessor", name: "position", static: false, private: false, access: { has: obj => "position" in obj, get: obj => obj.position, set: (obj, value) => { obj.position = value; } }, metadata: _metadata }, _position_initializers, _position_extraInitializers);
+            __esDecorate(this, null, _showZoom_decorators, { kind: "accessor", name: "showZoom", static: false, private: false, access: { has: obj => "showZoom" in obj, get: obj => obj.showZoom, set: (obj, value) => { obj.showZoom = value; } }, metadata: _metadata }, _showZoom_initializers, _showZoom_extraInitializers);
+            __esDecorate(this, null, _showCompass_decorators, { kind: "accessor", name: "showCompass", static: false, private: false, access: { has: obj => "showCompass" in obj, get: obj => obj.showCompass, set: (obj, value) => { obj.showCompass = value; } }, metadata: _metadata }, _showCompass_initializers, _showCompass_extraInitializers);
+            __esDecorate(this, null, _showLocate_decorators, { kind: "accessor", name: "showLocate", static: false, private: false, access: { has: obj => "showLocate" in obj, get: obj => obj.showLocate, set: (obj, value) => { obj.showLocate = value; } }, metadata: _metadata }, _showLocate_initializers, _showLocate_extraInitializers);
+            __esDecorate(this, null, _showFullscreen_decorators, { kind: "accessor", name: "showFullscreen", static: false, private: false, access: { has: obj => "showFullscreen" in obj, get: obj => obj.showFullscreen, set: (obj, value) => { obj.showFullscreen = value; } }, metadata: _metadata }, _showFullscreen_initializers, _showFullscreen_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);
+            __esDecorate(this, _private_waitingForLocation_descriptor = { get: __setFunctionName(function () { return this.#waitingForLocation_accessor_storage; }, "#waitingForLocation", "get"), set: __setFunctionName(function (value) { this.#waitingForLocation_accessor_storage = value; }, "#waitingForLocation", "set") }, _private_waitingForLocation_decorators, { kind: "accessor", name: "#waitingForLocation", static: false, private: true, access: { has: obj => #waitingForLocation in obj, get: obj => obj.#waitingForLocation, set: (obj, value) => { obj.#waitingForLocation = value; } }, metadata: _metadata }, _private_waitingForLocation_initializers, _private_waitingForLocation_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static tagName = "dui-map-controls";
+        static styles = [base, styles, mapControlsThemeStyles];
+        #position_accessor_storage = __runInitializers(this, _position_initializers, "bottom-right");
+        /** Position on the map. */
+        get position() { return this.#position_accessor_storage; }
+        set position(value) { this.#position_accessor_storage = value; }
+        #showZoom_accessor_storage = (__runInitializers(this, _position_extraInitializers), __runInitializers(this, _showZoom_initializers, true));
+        /** Show zoom in/out buttons. */
+        get showZoom() { return this.#showZoom_accessor_storage; }
+        set showZoom(value) { this.#showZoom_accessor_storage = value; }
+        #showCompass_accessor_storage = (__runInitializers(this, _showZoom_extraInitializers), __runInitializers(this, _showCompass_initializers, false));
+        /** Show compass button to reset bearing. */
+        get showCompass() { return this.#showCompass_accessor_storage; }
+        set showCompass(value) { this.#showCompass_accessor_storage = value; }
+        #showLocate_accessor_storage = (__runInitializers(this, _showCompass_extraInitializers), __runInitializers(this, _showLocate_initializers, false));
+        /** Show locate button to find user's location. */
+        get showLocate() { return this.#showLocate_accessor_storage; }
+        set showLocate(value) { this.#showLocate_accessor_storage = value; }
+        #showFullscreen_accessor_storage = (__runInitializers(this, _showLocate_extraInitializers), __runInitializers(this, _showFullscreen_initializers, false));
+        /** Show fullscreen toggle button. */
+        get showFullscreen() { return this.#showFullscreen_accessor_storage; }
+        set showFullscreen(value) { this.#showFullscreen_accessor_storage = value; }
+        #_mapCtx_accessor_storage = (__runInitializers(this, _showFullscreen_extraInitializers), __runInitializers(this, __mapCtx_initializers, void 0));
+        get _mapCtx() { return this.#_mapCtx_accessor_storage; }
+        set _mapCtx(value) { this.#_mapCtx_accessor_storage = value; }
+        #waitingForLocation_accessor_storage = (__runInitializers(this, __mapCtx_extraInitializers), __runInitializers(this, _private_waitingForLocation_initializers, false));
+        get #waitingForLocation() { return _private_waitingForLocation_descriptor.get.call(this); }
+        set #waitingForLocation(value) { return _private_waitingForLocation_descriptor.set.call(this, value); }
+        #compassEl = (__runInitializers(this, _private_waitingForLocation_extraInitializers), null);
+        #rotateHandler = null;
+        #pitchHandler = null;
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.#removeCompassListeners();
+        }
+        updated() {
+            if (this.showCompass && this._mapCtx?.map) {
+                this.#setupCompassListeners();
+            }
+        }
+        #setupCompassListeners() {
+            this.#removeCompassListeners();
+            const map = this._mapCtx?.map;
+            if (!map)
+                return;
+            this.#compassEl = this.shadowRoot.querySelector(".compass-svg");
+            if (!this.#compassEl)
+                return;
+            const update = () => {
+                if (!this.#compassEl)
+                    return;
+                const bearing = map.getBearing();
+                const pitch = map.getPitch();
+                this.#compassEl.style.transform = `rotateX(${pitch}deg) rotateZ(${-bearing}deg)`;
+            };
+            this.#rotateHandler = update;
+            this.#pitchHandler = update;
+            map.on("rotate", this.#rotateHandler);
+            map.on("pitch", this.#pitchHandler);
+            update();
+        }
+        #removeCompassListeners() {
+            const map = this._mapCtx?.map;
+            if (!map)
+                return;
+            if (this.#rotateHandler)
+                map.off("rotate", this.#rotateHandler);
+            if (this.#pitchHandler)
+                map.off("pitch", this.#pitchHandler);
+            this.#rotateHandler = null;
+            this.#pitchHandler = null;
+        }
+        #handleZoomIn = () => {
+            this._mapCtx?.map?.zoomTo(this._mapCtx.map.getZoom() + 1, { duration: 300 });
+        };
+        #handleZoomOut = () => {
+            this._mapCtx?.map?.zoomTo(this._mapCtx.map.getZoom() - 1, { duration: 300 });
+        };
+        #handleResetBearing = () => {
+            this._mapCtx?.map?.resetNorthPitch({ duration: 300 });
+        };
+        #handleLocate = () => {
+            this.#waitingForLocation = true;
+            if ("geolocation" in navigator) {
+                navigator.geolocation.getCurrentPosition((pos) => {
+                    const coords = {
+                        longitude: pos.coords.longitude,
+                        latitude: pos.coords.latitude,
+                    };
+                    this._mapCtx?.map?.flyTo({
+                        center: [coords.longitude, coords.latitude],
+                        zoom: 14,
+                        duration: 1500,
+                    });
+                    this.dispatchEvent(locateEvent(coords));
+                    this.#waitingForLocation = false;
+                }, (error) => {
+                    console.error("Error getting location:", error);
+                    this.#waitingForLocation = false;
+                });
+            }
+        };
+        #handleFullscreen = () => {
+            const map = this._mapCtx?.map;
+            if (!map)
+                return;
+            const container = map.getContainer();
+            if (document.fullscreenElement) {
+                document.exitFullscreen();
+            }
+            else {
+                container.requestFullscreen();
+            }
+        };
+        // SVG icon templates
+        #plusIcon() {
+            return html `<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>`;
+        }
+        #minusIcon() {
+            return html `<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="5" y1="12" x2="19" y2="12"/></svg>`;
+        }
+        #locateIcon() {
+            return html `<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="2" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="22" y2="12"/><line x1="12" y1="2" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="22"/><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="3"/></svg>`;
+        }
+        #maximizeIcon() {
+            return html `<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>`;
+        }
+        #spinnerIcon() {
+            return html `<svg class="icon-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" style="animation: spin 1s linear infinite"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>`;
+        }
+        #compassIcon() {
+            return html `
+      <svg class="compass-svg" viewBox="0 0 24 24">
+        <path d="M12 2L16 12H12V2Z" fill="var(--map-compass-north, #ef4444)" />
+        <path d="M12 2L8 12H12V2Z" fill="var(--map-compass-north-light, #fca5a5)" />
+        <path d="M12 22L16 12H12V22Z" fill="var(--map-compass-south, currentColor)" opacity="0.6" />
+        <path d="M12 22L8 12H12V22Z" fill="var(--map-compass-south, currentColor)" opacity="0.3" />
+      </svg>
+    `;
+        }
+        render() {
+            return html `
+      <div part="root">
+        ${this.showZoom ? html `
+          <div part="group">
+            <button part="control-button" aria-label="Zoom in" @click=${this.#handleZoomIn}>
+              ${this.#plusIcon()}
+            </button>
+            <button part="control-button" aria-label="Zoom out" @click=${this.#handleZoomOut}>
+              ${this.#minusIcon()}
+            </button>
+          </div>
+        ` : nothing}
+
+        ${this.showCompass ? html `
+          <div part="group">
+            <button part="control-button" aria-label="Reset bearing to north" @click=${this.#handleResetBearing}>
+              ${this.#compassIcon()}
+            </button>
+          </div>
+        ` : nothing}
+
+        ${this.showLocate ? html `
+          <div part="group">
+            <button part="control-button" aria-label="Find my location" ?disabled=${this.#waitingForLocation} @click=${this.#handleLocate}>
+              ${this.#waitingForLocation ? this.#spinnerIcon() : this.#locateIcon()}
+            </button>
+          </div>
+        ` : nothing}
+
+        ${this.showFullscreen ? html `
+          <div part="group">
+            <button part="control-button" aria-label="Toggle fullscreen" @click=${this.#handleFullscreen}>
+              ${this.#maximizeIcon()}
+            </button>
+          </div>
+        ` : nothing}
+      </div>
+    `;
+        }
+    };
+})();
+export { DuiMapControls };
+customElements.define(DuiMapControls.tagName, DuiMapControls);

package/heatmap/index.d.ts

@@ -0,0 +1,2 @@
+import { DuiMapHeatmap } from "./map-heatmap.js";
+export { DuiMapHeatmap };

package/heatmap/index.js

@@ -0,0 +1,2 @@
+import { DuiMapHeatmap } from "./map-heatmap.js";
+export { DuiMapHeatmap };

package/heatmap/map-heatmap.d.ts

@@ -0,0 +1,39 @@
+import { LitElement, type PropertyValues, type TemplateResult } from "lit";
+import { type MapContext } from "../map/map-context.js";
+/**
+ * `<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.
+ */
+export declare class DuiMapHeatmap extends LitElement {
+    #private;
+    static tagName: "dui-map-heatmap";
+    static styles: import("lit").CSSResult[];
+    /** GeoJSON data URL or inline FeatureCollection. */
+    accessor data: string | GeoJSON.FeatureCollection<GeoJSON.Point>;
+    /** Heatmap kernel radius in pixels. */
+    accessor radius: number;
+    /** Global intensity multiplier. */
+    accessor intensity: number;
+    /** Heatmap layer opacity (0–1). */
+    accessor opacity: number;
+    /** GeoJSON property name to use as point weight. Empty = equal weight. */
+    accessor weight: string;
+    /** Maximum zoom at which the heatmap is visible. Above this, show individual points. */
+    accessor maxZoom: number;
+    /** Whether to show individual points when zoomed past maxZoom. */
+    accessor showPoints: boolean;
+    /** Color for individual points (shown above maxZoom). */
+    accessor pointColor: string;
+    /** Array of CSS colors for the heatmap gradient from cool→hot. */
+    accessor colorRamp: string[];
+    /** Unique ID for source/layer. Auto-generated if not set. */
+    accessor heatmapId: string;
+    accessor _mapCtx: MapContext;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
+    render(): TemplateResult;
+}