@sjvair/monitor-map 4.3.0 → 5.0.0-beta.0

package/dist/lib/map/integrations/map-geojson-integration.svelte.js

@@ -1,60 +0,0 @@
-import { MapLayerIntegration } from "./map-layer-integration.svelte";
-import { mapManager } from "../map-manager.svelte.js";
-export class MapGeoJSONIntegration extends MapLayerIntegration {
-    remove() {
-        this.removeLayerAndSource();
-    }
-    /**
-     * Removes only this integration's own layer and source. Non-virtual on purpose: `apply()`
-     * paths call it to clear stale map state before re-adding, without triggering a subclass's
-     * `remove()` override (which also tears down tooltips/click handlers that apply just set up).
-     */
-    removeLayerAndSource() {
-        if (mapManager.map?.getLayer(this.referenceId)) {
-            mapManager.map.removeLayer(this.referenceId);
-        }
-        if (mapManager.map?.getSource(this.referenceId)) {
-            mapManager.map.removeSource(this.referenceId);
-        }
-    }
-}
-export class MapIconLayerIntegration extends MapGeoJSONIntegration {
-    generation = 0;
-    /**
-     * Drops every callback still waiting on icons. `apply()` and `remove()` call it, so a
-     * subclass overriding `apply()` without calling `super.apply()` first must call it itself.
-     */
-    supersedePending() {
-        this.generation++;
-    }
-    /**
-     * Runs `run` once the icons have loaded, unless an `apply()` or `remove()` has happened
-     * since (the state it was scheduled for is gone) or a basemap change is in flight (the
-     * refresh on "style.load" re-applies).
-     */
-    whenIconsLoad(run) {
-        const generation = this.generation;
-        this.icons
-            .loadIcons()
-            .then(() => {
-            if (generation !== this.generation || mapManager.styleLoading)
-                return;
-            run();
-        })
-            .catch(console.error);
-    }
-    apply() {
-        if (!mapManager.map)
-            return;
-        this.supersedePending();
-        this.whenIconsLoad(() => {
-            this.removeLayerAndSource();
-            mapManager.map?.addSource(this.referenceId, this.mapSource);
-            super.apply();
-        });
-    }
-    remove() {
-        this.supersedePending();
-        super.remove();
-    }
-}

package/dist/lib/map/integrations/map-icon-manager.d.ts

@@ -1,15 +0,0 @@
-import type { Map as MaptilerMap } from "@maptiler/sdk";
-import type { MapImageIcon } from "./types";
-import { SvelteMap } from "svelte/reactivity";
-export declare class MapIconManager {
-    protected icons: SvelteMap<string, MapImageIcon>;
-    constructor(iconMap?: SvelteMap<string, MapImageIcon>);
-    get iter(): MapIterator<[string, MapImageIcon]>;
-    get(id: string): MapImageIcon | undefined;
-    has(id: string): boolean;
-    loadIcons(): Promise<void>;
-    register(id: string, icon: HTMLImageElement): void;
-    protected loadImage(icon: MapImageIcon, map: MaptilerMap): Promise<void>;
-    protected updateImage(icon: MapImageIcon, map: MaptilerMap): Promise<void>;
-    private applyImage;
-}

package/dist/lib/map/integrations/map-icon-manager.js

@@ -1,52 +0,0 @@
-import { mapManager } from "../map-manager.svelte.js";
-import { SvelteMap } from "svelte/reactivity";
-export class MapIconManager {
-    icons = new SvelteMap();
-    constructor(iconMap) {
-        if (iconMap) {
-            this.icons = iconMap;
-        }
-    }
-    get iter() {
-        return this.icons.entries();
-    }
-    get(id) {
-        return this.icons.get(id);
-    }
-    has(id) {
-        return this.icons.has(id);
-    }
-    async loadIcons() {
-        if (!mapManager.map)
-            return;
-        await Promise.all(this.icons.values().map((icon) => this.loadImage(icon, mapManager.map)));
-    }
-    register(id, icon) {
-        const imageIcon = { id, image: icon };
-        this.icons.set(id, imageIcon);
-    }
-    loadImage(icon, map) {
-        return this.applyImage("add", icon, map);
-    }
-    updateImage(icon, map) {
-        return this.applyImage("update", icon, map);
-    }
-    applyImage(action, icon, map) {
-        const apply = () => action === "add" ? map.addImage(icon.id, icon.image) : map.updateImage(icon.id, icon.image);
-        if (!icon.image.complete) {
-            return new Promise((resolve, reject) => {
-                icon.image.onload = () => {
-                    apply();
-                    resolve();
-                };
-                icon.image.onerror = (err) => {
-                    reject(new Error(`Failed to load image ${icon.id}: ${err}`, { cause: err }));
-                };
-            });
-        }
-        else {
-            apply();
-            return Promise.resolve();
-        }
-    }
-}

package/dist/lib/map/integrations/map-integration.svelte.d.ts

@@ -1,6 +0,0 @@
-export declare abstract class MapIntegration {
-    abstract referenceId: string;
-    abstract enabled: boolean;
-    abstract apply(): void;
-    remove?(): void;
-}

package/dist/lib/map/integrations/map-integration.svelte.js

@@ -1,2 +0,0 @@
-export class MapIntegration {
-}

package/dist/lib/map/integrations/map-layer-integration.svelte.d.ts

@@ -1,11 +0,0 @@
-import type { Map as MaptilerMap } from "@maptiler/sdk";
-import { MapIntegration } from "./map-integration.svelte";
-export declare abstract class MapLayerIntegration extends MapIntegration {
-    abstract referenceId: string;
-    abstract mapLayer: Parameters<MaptilerMap["addLayer"]>[0];
-    abstract enabled: boolean;
-    beforeLayer?: string;
-    constructor();
-    apply(): void;
-    remove(): void;
-}

package/dist/lib/map/integrations/map-layer-integration.svelte.js

@@ -1,40 +0,0 @@
-import { untrack } from "svelte";
-import { mapManager } from "../map-manager.svelte.js";
-import { MapIntegration } from "./map-integration.svelte";
-export class MapLayerIntegration extends MapIntegration {
-    beforeLayer;
-    constructor() {
-        super();
-        // Each integration manages its own lifecycle. Tracking both mapManager.map and
-        // this.enabled means apply/remove fire automatically on map load and on enabled
-        // changes. untrack on the call itself prevents reactive reads inside apply/remove
-        // from leaking back into this effect's dependency graph. While a new basemap style is
-        // loading nothing is applied or removed: the refresh on "style.load" does both.
-        $effect.root(() => {
-            $effect(() => {
-                const enabled = this.enabled;
-                if (!mapManager.map || mapManager.styleLoading)
-                    return;
-                if (enabled) {
-                    untrack(() => this.apply());
-                }
-                else {
-                    untrack(() => this.remove());
-                }
-            });
-        });
-    }
-    apply() {
-        if (!mapManager.map)
-            return;
-        if (!mapManager.map.getLayer(this.referenceId)) {
-            mapManager.map.addLayer(this.mapLayer, this.beforeLayer);
-        }
-        mapManager.map.setLayoutProperty(this.referenceId, "visibility", this.enabled ? "visible" : "none");
-    }
-    remove() {
-        if (mapManager.map?.getLayer(this.referenceId)) {
-            mapManager.map.removeLayer(this.referenceId);
-        }
-    }
-}

package/dist/lib/map/integrations/tooltip.svelte.d.ts

@@ -1,36 +0,0 @@
-import type { MapLayerEventType, Popup } from "@maptiler/sdk";
-export type TooltipBuilder = (evt: MapLayerEventType["mousemove"] & object) => Popup | void;
-export declare class TooltipManager {
-    static activeHandle: TooltipHandle | null;
-    /**
-     * Host-controlled master switch. When false, enable() is a no-op
-     * regardless of how many times or when internal code (e.g. a map
-     * integration's apply()) calls it -- unlike isEnabled below, this is
-     * checked fresh on every enable() call, so it can't be raced by an
-     * apply() invocation that fires before a host sets this to false.
-     */
-    enabled: boolean;
-    private isEnabled;
-    private _tooltips;
-    get tooltips(): MapIterator<TooltipHandle>;
-    enable(layerId?: string): void;
-    disable(layerId?: string): void;
-    get(layerId: string): TooltipHandle | undefined;
-    has(layerId: string): boolean;
-    register(layerId: string, builder: TooltipBuilder, priority?: number): TooltipHandle;
-    with(layerId: string | Array<string>, cb: (tooltip: TooltipHandle) => void): void;
-    private forEachHandle;
-}
-declare class TooltipHandle {
-    layerId: string;
-    priority: number;
-    tooltip: Popup | null;
-    private activeFeatureId;
-    private isEnabled;
-    clearTooltip: () => void;
-    private setTooltip;
-    constructor(layerId: string, builder: TooltipBuilder, priority?: number);
-    enable(): void;
-    disable(): void;
-}
-export {};

package/dist/lib/map/integrations/tooltip.svelte.js

@@ -1,131 +0,0 @@
-import { mapManager } from "../map-manager.svelte.js";
-import { XMap } from "@tstk/builtin-extensions";
-function handleZoom() {
-    TooltipManager.activeHandle?.clearTooltip();
-}
-function setCursorPointer() {
-    mapManager.map.getCanvas().style.cursor = "pointer";
-}
-function setCursorDefault() {
-    mapManager.map.getCanvas().style.cursor = "";
-}
-export class TooltipManager {
-    static activeHandle = null;
-    /**
-     * Host-controlled master switch. When false, enable() is a no-op
-     * regardless of how many times or when internal code (e.g. a map
-     * integration's apply()) calls it -- unlike isEnabled below, this is
-     * checked fresh on every enable() call, so it can't be raced by an
-     * apply() invocation that fires before a host sets this to false.
-     */
-    enabled = true;
-    isEnabled = false;
-    _tooltips = new XMap();
-    get tooltips() {
-        return this._tooltips.values();
-    }
-    enable(layerId) {
-        if (!this.enabled || !mapManager.map || this.isEnabled)
-            return;
-        mapManager.map.on("zoom", handleZoom);
-        this.forEachHandle(layerId, (h) => h.enable());
-        this.isEnabled = true;
-    }
-    disable(layerId) {
-        if (!mapManager.map || !this.isEnabled)
-            return;
-        mapManager.map.off("zoom", handleZoom);
-        this.forEachHandle(layerId, (h) => h.disable());
-        this.isEnabled = false;
-    }
-    get(layerId) {
-        return this._tooltips.get(layerId);
-    }
-    has(layerId) {
-        return this._tooltips.has(layerId);
-    }
-    register(layerId, builder, priority = 0) {
-        const tooltipHandle = new TooltipHandle(layerId, builder, priority);
-        this._tooltips.set(layerId, tooltipHandle);
-        return tooltipHandle;
-    }
-    with(layerId, cb) {
-        const ids = Array.isArray(layerId) ? layerId : [layerId];
-        for (const id of ids) {
-            const tooltip = this._tooltips.get(id);
-            if (tooltip)
-                cb(tooltip);
-        }
-    }
-    forEachHandle(layerId, cb) {
-        if (layerId !== undefined && this._tooltips.has(layerId)) {
-            cb(this._tooltips.get(layerId));
-        }
-        else {
-            for (const h of this.tooltips)
-                cb(h);
-        }
-    }
-}
-class TooltipHandle {
-    layerId;
-    priority;
-    tooltip = null;
-    activeFeatureId = undefined;
-    isEnabled = false;
-    clearTooltip = () => {
-        if (TooltipManager.activeHandle !== this)
-            return;
-        this.tooltip?.remove();
-        this.tooltip = null;
-        TooltipManager.activeHandle = null;
-        this.activeFeatureId = undefined;
-    };
-    setTooltip;
-    constructor(layerId, builder, priority = 0) {
-        this.layerId = layerId;
-        this.priority = priority;
-        this.setTooltip = (evt) => {
-            if (!mapManager.map || !evt.features)
-                return;
-            const featureId = evt.features[0]?.id;
-            const isOwner = TooltipManager.activeHandle === this;
-            const sameFeature = featureId === this.activeFeatureId;
-            if (isOwner && this.tooltip && sameFeature) {
-                this.tooltip.setLngLat(evt.lngLat);
-                return;
-            }
-            const activeHandle = TooltipManager.activeHandle;
-            if (activeHandle !== null && activeHandle !== this && activeHandle.priority >= this.priority)
-                return;
-            activeHandle?.clearTooltip();
-            this.activeFeatureId = undefined;
-            const tooltip = builder(evt);
-            if (tooltip) {
-                this.tooltip = tooltip;
-                TooltipManager.activeHandle = this;
-                this.activeFeatureId = featureId;
-                tooltip.addTo(mapManager.map);
-            }
-        };
-    }
-    enable() {
-        if (!mapManager.map || this.isEnabled)
-            return;
-        mapManager.map.on("mousemove", this.layerId, setCursorPointer);
-        mapManager.map.on("mouseleave", this.layerId, setCursorDefault);
-        mapManager.map.on("mousemove", this.layerId, this.setTooltip);
-        mapManager.map.on("mouseleave", this.layerId, this.clearTooltip);
-        this.isEnabled = true;
-    }
-    disable() {
-        if (!mapManager.map || !this.isEnabled)
-            return;
-        this.clearTooltip();
-        mapManager.map.off("mousemove", this.layerId, setCursorPointer);
-        mapManager.map.off("mouseleave", this.layerId, setCursorDefault);
-        mapManager.map.off("mousemove", this.layerId, this.setTooltip);
-        mapManager.map.off("mouseleave", this.layerId, this.clearTooltip);
-        this.isEnabled = false;
-    }
-}

package/dist/lib/map/integrations/types.d.ts

@@ -1,14 +0,0 @@
-import type { MapLayerEventType, Map as MaptilerMap, Popup } from "@maptiler/sdk";
-import type { MapIntegration } from "./map-integration.svelte";
-import type { MapGeoJSONIntegration, MapIconLayerIntegration } from "./map-geojson-integration.svelte";
-export type TooltipPopup = <T extends TooltipController>(mapCtrl: T) => (evt: MapLayerEventType["mousemove"] & object) => void;
-export type SomeMapIntegration = MapIntegration | MapGeoJSONIntegration<Record<string, unknown>> | MapIconLayerIntegration<Record<string, unknown>>;
-interface TooltipController {
-    tooltip: Popup | null;
-    map?: MaptilerMap;
-}
-export interface MapImageIcon {
-    id: string;
-    image: HTMLImageElement;
-}
-export {};

package/dist/lib/map/integrations/types.js

@@ -1 +0,0 @@
-export {};

package/dist/lib/map/map-manager.svelte.d.ts

@@ -1,20 +0,0 @@
-import { MapStyleVariant, Map as MaptilerMap } from "@maptiler/sdk";
-import type { Attachment } from "svelte/attachments";
-import type { Feature, GeoJsonProperties, Geometry } from "geojson";
-export declare const DefaultMapStyle: MapStyleVariant;
-declare class MapManager {
-    map: MaptilerMap | null;
-    /**
-     * True between `setStyle()` and the new style's "style.load". Plain (non-reactive) on purpose:
-     * integrations skip touching the style while it's set, and the `integrationsManager.refresh()`
-     * that runs on "style.load" applies/removes every integration afterwards.
-     */
-    styleLoading: boolean;
-    setDataSource(sourceId: string, features: Array<Feature<Geometry, GeoJsonProperties>>): void;
-    refreshMap(): void;
-    removeExcludedLayers(): void;
-    removeMap(): void;
-}
-export declare const mapManager: MapManager;
-export type { MapManager };
-export declare const initializeMap: Attachment<HTMLDivElement>;

package/dist/lib/map/map-manager.svelte.js

@@ -1,63 +0,0 @@
-import { MapStyle, config as MaptilerConfig, Map as MaptilerMap } from "@maptiler/sdk";
-import { isGeoJSONSource } from "./utils";
-MaptilerConfig.apiKey = import.meta.env.VITE_MAPTILER_KEY;
-export const DefaultMapStyle = MapStyle.STREETS_V4.DEFAULT;
-const excludeLayers = ["Sport", "Tourism", "Culture", "Shopping", "Food", "Transport"];
-class MapManager {
-    map = $state(null);
-    /**
-     * True between `setStyle()` and the new style's "style.load". Plain (non-reactive) on purpose:
-     * integrations skip touching the style while it's set, and the `integrationsManager.refresh()`
-     * that runs on "style.load" applies/removes every integration afterwards.
-     */
-    styleLoading = false;
-    setDataSource(sourceId, features) {
-        const source = mapManager.map?.getSource(sourceId);
-        if (isGeoJSONSource(source)) {
-            source.setData({
-                type: "FeatureCollection",
-                features
-            });
-        }
-    }
-    refreshMap() {
-        if (mapManager.map) {
-            this.removeExcludedLayers();
-        }
-    }
-    removeExcludedLayers() {
-        for (const toExclude of excludeLayers) {
-            if (mapManager.map?.getLayer(toExclude)) {
-                mapManager.map.removeLayer(toExclude);
-            }
-        }
-    }
-    removeMap() {
-        return mapManager.map?.remove();
-    }
-}
-export const mapManager = new MapManager();
-export const initializeMap = (container) => {
-    const map = new MaptilerMap({
-        container: container,
-        center: [-119.7987626619462, 36.76272050981146],
-        zoom: 7,
-        style: DefaultMapStyle,
-        projection: "globe",
-        space: {
-            preset: "milkyway"
-        }
-    });
-    // "load" fires once the style and initial viewport tiles have loaded --
-    // in practice this can hang indefinitely (observed: never fires, even
-    // after 20+s, despite the style/tiles being independently fetchable) for
-    // reasons that don't affect "idle", which fires once the map has
-    // finished rendering after becoming idle. MapShell's own effect no
-    // longer waits for a *second* idle event to hide the load screen (see
-    // its comment), so listening for "idle" here doesn't reintroduce the
-    // hang that change was fixing.
-    map.once("idle", () => {
-        mapManager.map = map;
-    });
-    return () => map.remove();
-};

package/dist/lib/map/map-style-state.svelte.d.ts

@@ -1,23 +0,0 @@
-import type { MapStyleVariant, ReferenceMapStyle } from "@maptiler/sdk";
-/** Basemap + theme selection, shared so the Settings menu and Reset Map Options agree. */
-declare class MapStyleState {
-    referenceStyle: ReferenceMapStyle;
-    variant: MapStyleVariant;
-    private applied;
-    private loaded;
-    private stopWaiting;
-    selectReferenceStyle(style: ReferenceMapStyle): void;
-    selectVariant(variant: MapStyleVariant): void;
-    reset(): void;
-    private apply;
-    private load;
-    /**
-     * A style that fails to load leaves the map with no style at all, so go back to the last one
-     * that loaded and make the selection say so. When that one fails too (e.g. offline) there is
-     * nothing to draw on: `styleLoading` stays set, since integrations cannot add layers to a
-     * missing style, and the next selection starts a fresh attempt.
-     */
-    private recover;
-}
-export declare const mapStyleState: MapStyleState;
-export type { MapStyleState };

package/dist/lib/map/map-style-state.svelte.js

@@ -1,86 +0,0 @@
-import { DefaultMapStyle, mapManager } from "./map-manager.svelte.js";
-import { integrationsManager } from "./integrations/integrations-manager";
-import { variantForStyle } from "./basemap";
-/** Basemap + theme selection, shared so the Settings menu and Reset Map Options agree. */
-class MapStyleState {
-    referenceStyle = $state.raw(DefaultMapStyle.getReferenceStyle());
-    variant = $state.raw(DefaultMapStyle);
-    // The variant last handed to setStyle (loaded or still loading); null once a load has failed
-    // with nothing left to fall back to, so that any later selection is tried again.
-    applied = DefaultMapStyle;
-    // The variant the map last finished loading, which a failed change falls back to.
-    loaded = DefaultMapStyle;
-    stopWaiting = null;
-    selectReferenceStyle(style) {
-        this.referenceStyle = style;
-        this.selectVariant(variantForStyle(style, this.variant));
-    }
-    selectVariant(variant) {
-        this.variant = variant;
-        this.apply();
-    }
-    reset() {
-        this.referenceStyle = DefaultMapStyle.getReferenceStyle();
-        this.selectVariant(DefaultMapStyle);
-    }
-    apply() {
-        if (!mapManager.map || this.variant === this.applied)
-            return;
-        this.load(this.variant);
-    }
-    load(variant) {
-        const map = mapManager.map;
-        if (!map)
-            return;
-        // A newer change supersedes one still in flight.
-        this.stopWaiting?.();
-        this.applied = variant;
-        // setStyle wipes every custom source/layer; re-add enabled integrations once it loads.
-        const onLoad = () => {
-            this.stopWaiting?.();
-            this.loaded = variant;
-            mapManager.styleLoading = false;
-            integrationsManager.refresh();
-        };
-        // "error" also fires for tiles, sprites and glyphs; only the style document failing means
-        // the change failed.
-        const onError = (event) => {
-            if (!isRequestFor(event.error, variant.getExpandedStyleURL()))
-                return;
-            this.stopWaiting?.();
-            this.recover(variant);
-        };
-        this.stopWaiting = () => {
-            map.off("style.load", onLoad);
-            map.off("error", onError);
-            this.stopWaiting = null;
-        };
-        map.on("style.load", onLoad);
-        map.on("error", onError);
-        mapManager.styleLoading = true;
-        map.setStyle(variant);
-    }
-    /**
-     * A style that fails to load leaves the map with no style at all, so go back to the last one
-     * that loaded and make the selection say so. When that one fails too (e.g. offline) there is
-     * nothing to draw on: `styleLoading` stays set, since integrations cannot add layers to a
-     * missing style, and the next selection starts a fresh attempt.
-     */
-    recover(failed) {
-        if (failed === this.loaded) {
-            this.applied = null;
-            return;
-        }
-        this.variant = this.loaded;
-        this.referenceStyle = this.loaded.getReferenceStyle();
-        this.load(this.loaded);
-    }
-}
-/** Whether a map "error" event's error is a failed request for `url`, ignoring the query. */
-function isRequestFor(error, url) {
-    const failed = error?.url;
-    if (typeof failed !== "string")
-        return false;
-    return failed.split("?")[0] === url.split("?")[0];
-}
-export const mapStyleState = new MapStyleState();

package/dist/lib/map/utils.d.ts

@@ -1,7 +0,0 @@
-import type { Component } from "svelte";
-import { Popup } from "@maptiler/sdk";
-import type { ReferenceMapStyle, GeoJSONSource, LngLat } from "@maptiler/sdk";
-export declare const MAP_STYLE_OPTIONS: ReferenceMapStyle[];
-export declare function isGeoJSONSource(source: unknown): source is GeoJSONSource;
-export declare function mountPopup<P extends Record<string, unknown>>(component: Component<P>, props: P, lngLat: LngLat, closeButton?: boolean): Popup;
-export declare function mountClickPopup<P extends Record<string, unknown>>(component: Component<P>, props: P, lngLat: LngLat): Popup;

package/dist/lib/map/utils.js

@@ -1,36 +0,0 @@
-import { mount, unmount } from "svelte";
-import { MapStyle, Popup } from "@maptiler/sdk";
-export const MAP_STYLE_OPTIONS = (() => {
-    const latest = new Map();
-    for (const style of Object.values(MapStyle)) {
-        const id = style.getId();
-        const match = id.match(/^(.+?)_V(\d+)$/i);
-        const baseName = match ? match[1] : id;
-        const version = match ? parseInt(match[2], 10) : 0;
-        const existing = latest.get(baseName);
-        if (!existing || version > existing.version) {
-            latest.set(baseName, { version, style });
-        }
-    }
-    return Array.from(latest.values())
-        .map((e) => e.style)
-        .sort((a, b) => a.getName().localeCompare(b.getName()));
-})();
-export function isGeoJSONSource(source) {
-    return (typeof source === "object" &&
-        source !== null &&
-        "type" in source &&
-        source.type === "geojson");
-}
-export function mountPopup(component, props, lngLat, closeButton = false) {
-    const container = document.createElement("div");
-    const instance = mount(component, { target: container, props });
-    const popup = new Popup({ closeButton, closeOnClick: false, maxWidth: "none" })
-        .setLngLat(lngLat)
-        .setDOMContent(container);
-    popup.on("close", () => unmount(instance));
-    return popup;
-}
-export function mountClickPopup(component, props, lngLat) {
-    return mountPopup(component, props, lngLat, true);
-}