@deepfuture/dui-map 1.1.0

package/route/map-route.js

@@ -0,0 +1,245 @@
+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 route line is clicked. */
+export const routeClickEvent = customEvent("dui-route-click", { bubbles: true, composed: true });
+const styles = css `
+  :host {
+    display: contents;
+  }
+`;
+/**
+ * `<dui-map-route>` — GeoJSON LineString route layer on the map.
+ *
+ * @fires dui-route-click - Fired when the route line is clicked.
+ */
+let DuiMapRoute = (() => {
+    let _classSuper = LitElement;
+    let _routeId_decorators;
+    let _routeId_initializers = [];
+    let _routeId_extraInitializers = [];
+    let _coordinates_decorators;
+    let _coordinates_initializers = [];
+    let _coordinates_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    let _width_decorators;
+    let _width_initializers = [];
+    let _width_extraInitializers = [];
+    let _opacity_decorators;
+    let _opacity_initializers = [];
+    let _opacity_extraInitializers = [];
+    let _dashArray_decorators;
+    let _dashArray_initializers = [];
+    let _dashArray_extraInitializers = [];
+    let _interactive_decorators;
+    let _interactive_initializers = [];
+    let _interactive_extraInitializers = [];
+    let __mapCtx_decorators;
+    let __mapCtx_initializers = [];
+    let __mapCtx_extraInitializers = [];
+    return class DuiMapRoute extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _routeId_decorators = [property({ attribute: "route-id" })];
+            _coordinates_decorators = [property({ type: Array })];
+            _color_decorators = [property()];
+            _width_decorators = [property({ type: Number })];
+            _opacity_decorators = [property({ type: Number })];
+            _dashArray_decorators = [property({ type: Array, attribute: "dash-array" })];
+            _interactive_decorators = [property({ type: Boolean })];
+            __mapCtx_decorators = [consume({ context: mapContext, subscribe: true })];
+            __esDecorate(this, null, _routeId_decorators, { kind: "accessor", name: "routeId", static: false, private: false, access: { has: obj => "routeId" in obj, get: obj => obj.routeId, set: (obj, value) => { obj.routeId = value; } }, metadata: _metadata }, _routeId_initializers, _routeId_extraInitializers);
+            __esDecorate(this, null, _coordinates_decorators, { kind: "accessor", name: "coordinates", static: false, private: false, access: { has: obj => "coordinates" in obj, get: obj => obj.coordinates, set: (obj, value) => { obj.coordinates = value; } }, metadata: _metadata }, _coordinates_initializers, _coordinates_extraInitializers);
+            __esDecorate(this, null, _color_decorators, { kind: "accessor", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+            __esDecorate(this, null, _width_decorators, { kind: "accessor", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_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, _dashArray_decorators, { kind: "accessor", name: "dashArray", static: false, private: false, access: { has: obj => "dashArray" in obj, get: obj => obj.dashArray, set: (obj, value) => { obj.dashArray = value; } }, metadata: _metadata }, _dashArray_initializers, _dashArray_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-route";
+        static styles = [base, styles];
+        #routeId_accessor_storage = __runInitializers(this, _routeId_initializers, `route-${Math.random().toString(36).slice(2, 9)}`);
+        /** Unique identifier for the route. Auto-generated if not set. */
+        get routeId() { return this.#routeId_accessor_storage; }
+        set routeId(value) { this.#routeId_accessor_storage = value; }
+        #coordinates_accessor_storage = (__runInitializers(this, _routeId_extraInitializers), __runInitializers(this, _coordinates_initializers, []));
+        /** Array of `[longitude, latitude]` coordinate pairs defining the route. */
+        get coordinates() { return this.#coordinates_accessor_storage; }
+        set coordinates(value) { this.#coordinates_accessor_storage = value; }
+        #color_accessor_storage = (__runInitializers(this, _coordinates_extraInitializers), __runInitializers(this, _color_initializers, "#4285F4"));
+        /** Line color as CSS color value. */
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
+        #width_accessor_storage = (__runInitializers(this, _color_extraInitializers), __runInitializers(this, _width_initializers, 3));
+        /** Line width in pixels. */
+        get width() { return this.#width_accessor_storage; }
+        set width(value) { this.#width_accessor_storage = value; }
+        #opacity_accessor_storage = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _opacity_initializers, 0.8));
+        /** Line opacity from 0 to 1. */
+        get opacity() { return this.#opacity_accessor_storage; }
+        set opacity(value) { this.#opacity_accessor_storage = value; }
+        #dashArray_accessor_storage = (__runInitializers(this, _opacity_extraInitializers), __runInitializers(this, _dashArray_initializers, undefined));
+        /** Dash pattern `[dash, gap]` for dashed lines. */
+        get dashArray() { return this.#dashArray_accessor_storage; }
+        set dashArray(value) { this.#dashArray_accessor_storage = value; }
+        #interactive_accessor_storage = (__runInitializers(this, _dashArray_extraInitializers), __runInitializers(this, _interactive_initializers, true));
+        /** Whether the route is interactive (pointer cursor on hover). */
+        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), "");
+        #layerId = "";
+        #layerAdded = false;
+        connectedCallback() {
+            super.connectedCallback();
+            this.#sourceId = `route-source-${this.routeId}`;
+            this.#layerId = `route-layer-${this.routeId}`;
+        }
+        disconnectedCallback() {
+            super.disconnectedCallback();
+            this.#removeLayers();
+        }
+        updated(changed) {
+            const map = this._mapCtx?.map;
+            const isLoaded = this._mapCtx?.isLoaded;
+            if (!map || !isLoaded)
+                return;
+            // Add source and layer on first load
+            if (!this.#layerAdded) {
+                this.#addLayers(map);
+            }
+            // Update coordinates
+            if (changed.has("coordinates") && this.coordinates.length >= 2) {
+                const source = map.getSource(this.#sourceId);
+                if (source) {
+                    source.setData({
+                        type: "Feature",
+                        properties: {},
+                        geometry: { type: "LineString", coordinates: this.coordinates },
+                    });
+                }
+            }
+            // Update paint properties
+            if (changed.has("color") || changed.has("width") || changed.has("opacity") || changed.has("dashArray")) {
+                if (map.getLayer(this.#layerId)) {
+                    map.setPaintProperty(this.#layerId, "line-color", this.color);
+                    map.setPaintProperty(this.#layerId, "line-width", this.width);
+                    map.setPaintProperty(this.#layerId, "line-opacity", this.opacity);
+                    if (this.dashArray) {
+                        map.setPaintProperty(this.#layerId, "line-dasharray", this.dashArray);
+                    }
+                }
+            }
+        }
+        #addLayers(map) {
+            if (map.getSource(this.#sourceId))
+                return;
+            map.addSource(this.#sourceId, {
+                type: "geojson",
+                data: {
+                    type: "Feature",
+                    properties: {},
+                    geometry: { type: "LineString", coordinates: [] },
+                },
+            });
+            map.addLayer({
+                id: this.#layerId,
+                type: "line",
+                source: this.#sourceId,
+                layout: { "line-join": "round", "line-cap": "round" },
+                paint: {
+                    "line-color": this.color,
+                    "line-width": this.width,
+                    "line-opacity": this.opacity,
+                    ...(this.dashArray ? { "line-dasharray": this.dashArray } : {}),
+                },
+            });
+            if (this.interactive) {
+                map.on("click", this.#layerId, () => {
+                    this.dispatchEvent(routeClickEvent());
+                });
+                map.on("mouseenter", this.#layerId, () => {
+                    map.getCanvas().style.cursor = "pointer";
+                });
+                map.on("mouseleave", this.#layerId, () => {
+                    map.getCanvas().style.cursor = "";
+                });
+            }
+            this.#layerAdded = true;
+            // Set initial coordinates if available
+            if (this.coordinates.length >= 2) {
+                const source = map.getSource(this.#sourceId);
+                if (source) {
+                    source.setData({
+                        type: "Feature",
+                        properties: {},
+                        geometry: { type: "LineString", coordinates: this.coordinates },
+                    });
+                }
+            }
+        }
+        #removeLayers() {
+            const map = this._mapCtx?.map;
+            if (!map)
+                return;
+            try {
+                if (map.getLayer(this.#layerId))
+                    map.removeLayer(this.#layerId);
+                if (map.getSource(this.#sourceId))
+                    map.removeSource(this.#sourceId);
+            }
+            catch {
+                // Map may already be destroyed
+            }
+            this.#layerAdded = false;
+        }
+        render() {
+            return html ``;
+        }
+    };
+})();
+export { DuiMapRoute };
+customElements.define(DuiMapRoute.tagName, DuiMapRoute);

package/theme/map-theme.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Default theme styles for DUI map components.
+ *
+ * Uses DUI design tokens for consistency with the rest of the component library.
+ * These styles provide aesthetic treatment — the structural CSS lives in each component.
+ *
+ * IMPORTANT: MapLibre renders popups, tooltips, markers, and attribution
+ * inside the `dui-map` shadow root. All chrome for those elements must be
+ * in the `dui-map` theme entry, not in the sub-component entries.
+ */
+import { type CSSResult } from "lit";
+declare const mapThemeStyles: CSSResult;
+declare const mapControlsThemeStyles: CSSResult;
+export { mapThemeStyles, mapControlsThemeStyles };
+/** @deprecated Tag name → themed CSS map. Use direct imports instead. */
+export declare const mapStyles: Map<string, CSSResult>;

package/theme/map-theme.js

@@ -0,0 +1,233 @@
+/**
+ * Default theme styles for DUI map components.
+ *
+ * Uses DUI design tokens for consistency with the rest of the component library.
+ * These styles provide aesthetic treatment — the structural CSS lives in each component.
+ *
+ * IMPORTANT: MapLibre renders popups, tooltips, markers, and attribution
+ * inside the `dui-map` shadow root. All chrome for those elements must be
+ * in the `dui-map` theme entry, not in the sub-component entries.
+ */
+import { css } from "lit";
+// ---------------------------------------------------------------------------
+// dui-map — main theme (includes all MapLibre-rendered DOM)
+// ---------------------------------------------------------------------------
+const mapThemeStyles = css `
+  /* --- Loader overlay --------------------------------------------------- */
+  [part="loader"] {
+    background: oklch(from var(--background) l c h / 0.5);
+    backdrop-filter: blur(2px);
+  }
+
+  .loader-dot {
+    background: oklch(from var(--foreground) l c h / 0.6);
+  }
+
+  /* --- Attribution ------------------------------------------------------- */
+  .maplibregl-ctrl-attrib {
+    font-family: var(--font-sans);
+    font-size: var(--text-2xs);
+    color: oklch(from var(--foreground) l c h / 0.5);
+    background: oklch(from var(--background) l c h / 0.65);
+    backdrop-filter: blur(4px);
+    border-radius: var(--radius-sm) 0 0 0;
+  }
+
+  .maplibregl-ctrl-attrib a {
+    color: oklch(from var(--foreground) l c h / 0.6);
+  }
+
+  .maplibregl-ctrl-attrib a:hover {
+    color: var(--foreground);
+  }
+
+  .maplibregl-ctrl-attrib-button {
+    background-color: oklch(from var(--background) l c h / 0.65);
+    backdrop-filter: blur(4px);
+  }
+
+  /* --- Default marker dot ----------------------------------------------- */
+  .dui-default-marker {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    border: 2px solid white;
+    background: var(--accent, #3b82f6);
+    box-shadow: var(--shadow-sm);
+    transition: transform var(--duration-faster) var(--ease-out-3),
+                box-shadow var(--duration-faster) var(--ease-out-3);
+  }
+
+  .dui-default-marker:hover {
+    transform: scale(1.15);
+    box-shadow: var(--shadow-md);
+  }
+
+  /* --- Marker label ------------------------------------------------------ */
+  .dui-marker-label {
+    font-family: var(--font-sans);
+    font-size: var(--text-2xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--text-1);
+    text-shadow:
+      0 0 3px var(--background),
+      0 0 3px var(--background),
+      0 0 3px var(--background);
+  }
+
+  /* --- Popup chrome (shared reset) -------------------------------------- */
+  .maplibregl-popup.dui-popup .maplibregl-popup-content,
+  .maplibregl-popup.dui-tooltip .maplibregl-popup-content {
+    /* Reset MapLibre defaults */
+    padding: 0;
+    background: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  /* --- Popup (click-to-open, popover-like) ------------------------------ */
+  .maplibregl-popup.dui-popup .maplibregl-popup-content > div {
+    font-family: var(--font-sans);
+    font-size: var(--text-sm);
+    line-height: var(--line-height-normal);
+    color: var(--text-1);
+    background: var(--surface-3);
+    border: var(--border-width-thin) solid var(--border);
+    border-radius: var(--radius-md);
+    padding: var(--space-2) var(--space-3);
+    box-shadow: var(--shadow-md);
+  }
+
+  .maplibregl-popup.dui-popup .maplibregl-popup-tip {
+    border-top-color: var(--surface-3);
+    border-bottom-color: var(--surface-3);
+    border-left-color: var(--surface-3);
+    border-right-color: var(--surface-3);
+  }
+
+  /* Only the anchor direction's tip is visible; the rest are transparent.
+     MapLibre sets the visible side via its anchor classes. Override just
+     the transparent reset to use the surface color. The solid side inherits. */
+  .maplibregl-popup.dui-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip {
+    border-bottom-color: var(--surface-3);
+  }
+  .maplibregl-popup.dui-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
+    border-top-color: var(--surface-3);
+  }
+  .maplibregl-popup.dui-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+    border-right-color: var(--surface-3);
+  }
+  .maplibregl-popup.dui-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+    border-left-color: var(--surface-3);
+  }
+  .maplibregl-popup.dui-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip {
+    border-bottom-color: var(--surface-3);
+  }
+  .maplibregl-popup.dui-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
+    border-bottom-color: var(--surface-3);
+  }
+  .maplibregl-popup.dui-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip {
+    border-top-color: var(--surface-3);
+  }
+  .maplibregl-popup.dui-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+    border-top-color: var(--surface-3);
+  }
+
+  /* --- Tooltip (hover, inverted) ---------------------------------------- */
+  .maplibregl-popup.dui-tooltip .maplibregl-popup-content > div {
+    font-family: var(--font-sans);
+    font-size: var(--text-xs);
+    line-height: var(--line-height-snug);
+    color: var(--background);
+    background: color-mix(
+      in oklch,
+      var(--foreground) 90%,
+      oklch(0 0 0 / 0)
+    );
+    backdrop-filter: blur(4px);
+    border-radius: var(--radius-sm);
+    padding: var(--space-0_5) var(--space-1_5);
+    box-shadow: var(--shadow-sm);
+    max-width: var(--space-80);
+  }
+
+  .maplibregl-popup.dui-tooltip .maplibregl-popup-tip {
+    display: none;
+  }
+
+  /* --- Popup close button ------------------------------------------------ */
+  .maplibregl-popup-close-button {
+    font-family: var(--font-sans);
+    color: var(--text-1);
+    opacity: 0.5;
+    transition: opacity var(--duration-faster) var(--ease-out-3);
+    padding: var(--space-0_5) var(--space-1);
+  }
+
+  .maplibregl-popup-close-button:hover {
+    background: oklch(from var(--foreground) l c h / 0.06);
+    opacity: 1;
+  }
+`;
+// ---------------------------------------------------------------------------
+// dui-map-controls — themed control buttons
+// ---------------------------------------------------------------------------
+const mapControlsThemeStyles = css `
+  [part="group"] {
+    border: var(--border-width-thin) solid var(--border);
+    background: var(--background);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+  }
+
+  [part="group"] > [part="control-button"]:not(:last-child) {
+    border-bottom: var(--border-width-thin) solid var(--border);
+  }
+
+  [part="control-button"] {
+    color: var(--text-1);
+    transition: background var(--duration-faster) var(--ease-out-3);
+  }
+
+  [part="control-button"]:hover:not(:disabled) {
+    background: oklch(from var(--foreground) l c h / 0.06);
+  }
+
+  [part="control-button"]:active:not(:disabled) {
+    background: oklch(from var(--foreground) l c h / 0.1);
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+`;
+// ---------------------------------------------------------------------------
+// Sub-component entries (empty — all chrome lives in the dui-map entry above)
+// ---------------------------------------------------------------------------
+const mapMarkerThemeStyles = css ``;
+const mapMarkerContentThemeStyles = css ``;
+const mapMarkerPopupThemeStyles = css ``;
+const mapMarkerTooltipThemeStyles = css ``;
+const mapMarkerLabelThemeStyles = css ``;
+const mapPopupThemeStyles = css ``;
+const mapRouteThemeStyles = css ``;
+const mapRegionThemeStyles = css ``;
+const mapClusterLayerThemeStyles = css ``;
+const mapHeatmapThemeStyles = css ``;
+export { mapThemeStyles, mapControlsThemeStyles };
+/** @deprecated Tag name → themed CSS map. Use direct imports instead. */
+export const mapStyles = new Map([
+    ["dui-map", mapThemeStyles],
+    ["dui-map-controls", mapControlsThemeStyles],
+    ["dui-map-marker", mapMarkerThemeStyles],
+    ["dui-map-marker-content", mapMarkerContentThemeStyles],
+    ["dui-map-marker-popup", mapMarkerPopupThemeStyles],
+    ["dui-map-marker-tooltip", mapMarkerTooltipThemeStyles],
+    ["dui-map-marker-label", mapMarkerLabelThemeStyles],
+    ["dui-map-popup", mapPopupThemeStyles],
+    ["dui-map-route", mapRouteThemeStyles],
+    ["dui-map-region", mapRegionThemeStyles],
+    ["dui-map-cluster-layer", mapClusterLayerThemeStyles],
+    ["dui-map-heatmap", mapHeatmapThemeStyles],
+]);