@sjvair/monitor-map 3.0.3 → 3.0.5

package/dist/lib/monitors/monitors-cluster-renderer.js

@@ -1,212 +1,221 @@
-import { mountPopup as e } from "../map/utils.js";
-import { mapManager as t } from "../map/map.svelte.js";
-import { clickManager as n } from "../map/integrations/click-manager.js";
-import { getTypeShape as r } from "./monitor-utils.js";
-import i from "./components/MonitorTooltip.js";
-import a from "./components/MonitorClusterTooltip.js";
-//#region src/lib/monitors/monitors-cluster-renderer.ts
-var o = [
-	"/",
-	["get", "sumValues"],
-	[
-		"max",
-		["get", "point_count"],
-		1
-	]
+import { mapManager } from "../map/map.svelte.ts";
+import { mountPopup } from "../map/utils.ts";
+import { clickManager } from "../map/integrations/click-manager.ts";
+import { getTypeShape } from "./monitor-utils.ts";
+import MonitorTooltip from "./components/MonitorTooltip.svelte";
+import MonitorClusterTooltip from "./components/MonitorClusterTooltip.svelte";
+const AVG_EXPR = [
+    "/",
+    ["get", "sumValues"],
+    ["max", ["get", "point_count"], 1]
 ];
-function s(t) {
-	let n = t.features?.sort((e, t) => t.properties.order - e.properties.order)[0];
-	if (n) return e(i, { feature: n }, t.lngLat);
+export function monitorTooltip(evt) {
+    const features = evt.features;
+    const feature = features?.sort((a, b) => b.properties.order - a.properties.order)[0];
+    if (!feature)
+        return;
+    return mountPopup(MonitorTooltip, { feature }, evt.lngLat);
 }
-function c(t) {
-	let n = t.features?.[0];
-	if (n) return e(a, { feature: n }, t.lngLat);
+function clusterTooltip(evt) {
+    const feature = evt.features?.[0];
+    if (!feature)
+        return;
+    return mountPopup(MonitorClusterTooltip, { feature }, evt.lngLat);
+}
+export class MonitorsClusterRenderer {
+    ctx;
+    _clusterTypes = [];
+    constructor(ctx) {
+        this.ctx = ctx;
+    }
+    apply(monitorClickHandler) {
+        if (!mapManager.map)
+            return;
+        const sortedEntries = Object.entries(this.ctx.featuresByType).sort(([, a], [, b]) => {
+            const maxOrder = (fs) => fs.reduce((m, f) => Math.max(m, f.properties.order), 0);
+            return maxOrder(a) - maxOrder(b);
+        });
+        for (const [[type, features], index] of sortedEntries.map((e, i) => [e, i])) {
+            const sourceId = `${this.ctx.referenceId}-${type}`;
+            mapManager.map.addSource(sourceId, {
+                type: "geojson",
+                promoteId: "id",
+                data: { type: "FeatureCollection", features },
+                cluster: true,
+                clusterRadius: 40,
+                clusterMaxZoom: 9,
+                clusterProperties: {
+                    sumValues: ["+", ["to-number", ["get", "value"]], 0]
+                }
+            });
+            this.monitorTypeIconsLayer(sourceId, AVG_EXPR, getTypeShape(type));
+            this.clusterCountLayer(sourceId, AVG_EXPR);
+            this.unclusteredLayer(sourceId);
+            const { icon, unclustered } = this.clusterLayerIds(sourceId);
+            if (!this.ctx.tooltipManager.has(icon)) {
+                this.ctx.tooltipManager.register(icon, clusterTooltip, index);
+            }
+            if (!this.ctx.tooltipManager.has(unclustered)) {
+                this.ctx.tooltipManager.register(unclustered, monitorTooltip, index);
+            }
+            clickManager.register([unclustered], monitorClickHandler);
+            clickManager.register([icon], this.makeClusterClickHandler(sourceId));
+            this._clusterTypes.push(type);
+        }
+    }
+    remove() {
+        if (!mapManager.map)
+            return;
+        for (const type of this._clusterTypes) {
+            const sourceId = `${this.ctx.referenceId}-${type}`;
+            const layers = this.clusterLayerIds(sourceId);
+            clickManager.unregister([layers.unclustered]);
+            clickManager.unregister([layers.icon]);
+            for (const layerId of Object.values(layers)) {
+                if (mapManager.map.getLayer(layerId)) {
+                    mapManager.map.removeLayer(layerId);
+                }
+            }
+            if (mapManager.map.getSource(sourceId)) {
+                mapManager.map.removeSource(sourceId);
+            }
+        }
+        this._clusterTypes = [];
+    }
+    get unclusteredLayerIds() {
+        return this._clusterTypes.map((type) => `${this.ctx.referenceId}-${type}-unclustered`);
+    }
+    syncFeatures() {
+        if (!mapManager.map)
+            return;
+        for (const type of this._clusterTypes) {
+            const sourceId = `${this.ctx.referenceId}-${type}`;
+            mapManager.setDataSource(sourceId, this.ctx.featuresByType[type] ?? []);
+        }
+    }
+    syncFilter() {
+        if (!mapManager.map)
+            return;
+        for (const type of this._clusterTypes) {
+            const sourceId = `${this.ctx.referenceId}-${type}`;
+            const { unclustered } = this.clusterLayerIds(sourceId);
+            if (mapManager.map.getLayer(unclustered)) {
+                mapManager.map.setFilter(unclustered, [
+                    "all",
+                    this.ctx.filters,
+                    ["!", ["has", "point_count"]]
+                ]);
+            }
+        }
+    }
+    syncThresholds() {
+        if (!mapManager.map)
+            return;
+        for (const type of this._clusterTypes) {
+            const sourceId = `${this.ctx.referenceId}-${type}`;
+            const { icon, average } = this.clusterLayerIds(sourceId);
+            if (mapManager.map.getLayer(icon)) {
+                mapManager.map.setLayoutProperty(icon, "icon-image", this.buildClusterIconExpression(AVG_EXPR, getTypeShape(type)));
+            }
+            if (mapManager.map.getLayer(average)) {
+                mapManager.map.setPaintProperty(average, "text-color", this.clusterTextColorExpr(AVG_EXPR));
+            }
+        }
+    }
+    makeClusterClickHandler(sourceId) {
+        return async (features) => {
+            try {
+                const feature = features[0];
+                if (!feature?.properties?.cluster_id)
+                    return;
+                const source = mapManager.map?.getSource(sourceId);
+                if (!source)
+                    return;
+                const zoom = await source.getClusterExpansionZoom(feature.properties.cluster_id);
+                const coords = feature.geometry.coordinates;
+                mapManager.map?.easeTo({ center: coords, zoom });
+            }
+            catch (err) {
+                console.error("ClickManager: cluster expansion zoom failed", err);
+            }
+        };
+    }
+    clusterLayerIds(sourceId) {
+        return {
+            icon: `${sourceId}-cluster-icon`,
+            average: `${sourceId}-cluster-average`,
+            unclustered: `${sourceId}-unclustered`
+        };
+    }
+    get clusterTextColorThreshold() {
+        // Use the max of the 3rd level (unhealthy_sensitive) so text flips to white at unhealthy+
+        return this.ctx.clusterIconThresholds[2]?.range[1] ?? 150.5;
+    }
+    clusterTextColorExpr(avgExpr) {
+        return ["case", ["<=", avgExpr, this.clusterTextColorThreshold], "#000000", "#FFFFFF"];
+    }
+    buildClusterIconExpression(avgExpr, shape) {
+        const thresholds = this.ctx.clusterIconThresholds;
+        if (!thresholds.length)
+            return `outside-default-${shape}`;
+        const expr = ["case"];
+        for (const level of thresholds.slice(0, -1)) {
+            expr.push(["<=", avgExpr, level.range[1]], `outside-${level.name}-${shape}`);
+        }
+        expr.push(`outside-${thresholds.at(-1).name}-${shape}`);
+        return expr;
+    }
+    monitorTypeIconsLayer(sourceId, avgExpr, shape) {
+        const { icon } = this.clusterLayerIds(sourceId);
+        mapManager.map?.addLayer({
+            id: icon,
+            type: "symbol",
+            source: sourceId,
+            filter: ["has", "point_count"],
+            layout: {
+                "icon-image": this.buildClusterIconExpression(avgExpr, shape),
+                "icon-size": ["step", ["get", "point_count"], 1.3, 10, 1.6, 25, 2.0],
+                "icon-ignore-placement": true,
+                "icon-allow-overlap": true
+            },
+            paint: {
+                "icon-opacity": 0.8
+            }
+        }, this.ctx.beforeLayer);
+    }
+    clusterCountLayer(sourceId, avgExpr) {
+        const { average } = this.clusterLayerIds(sourceId);
+        mapManager.map?.addLayer({
+            id: average,
+            type: "symbol",
+            source: sourceId,
+            filter: ["has", "point_count"],
+            layout: {
+                "text-field": ["to-string", ["round", avgExpr]],
+                "text-size": 12,
+                "text-ignore-placement": true,
+                "text-allow-overlap": true
+            },
+            paint: {
+                "text-color": this.clusterTextColorExpr(avgExpr)
+            }
+        }, this.ctx.beforeLayer);
+    }
+    unclusteredLayer(sourceId) {
+        const { unclustered } = this.clusterLayerIds(sourceId);
+        mapManager.map?.addLayer({
+            id: unclustered,
+            type: "symbol",
+            source: sourceId,
+            filter: ["all", this.ctx.filters, ["!", ["has", "point_count"]]],
+            layout: {
+                "symbol-sort-key": ["coalesce", ["get", "order"], 0],
+                "icon-allow-overlap": true,
+                "icon-ignore-placement": true,
+                "icon-image": ["get", "icon"],
+                "icon-size": 1
+            },
+            paint: {}
+        }, this.ctx.beforeLayer);
+    }
 }
-var l = class {
-	ctx;
-	_clusterTypes = [];
-	constructor(e) {
-		this.ctx = e;
-	}
-	apply(e) {
-		if (!t.map) return;
-		let i = Object.entries(this.ctx.featuresByType).sort(([, e], [, t]) => {
-			let n = (e) => e.reduce((e, t) => Math.max(e, t.properties.order), 0);
-			return n(e) - n(t);
-		});
-		for (let [[a, l], u] of i.map((e, t) => [e, t])) {
-			let i = `${this.ctx.referenceId}-${a}`;
-			t.map.addSource(i, {
-				type: "geojson",
-				promoteId: "id",
-				data: {
-					type: "FeatureCollection",
-					features: l
-				},
-				cluster: !0,
-				clusterRadius: 40,
-				clusterMaxZoom: 9,
-				clusterProperties: { sumValues: [
-					"+",
-					["to-number", ["get", "value"]],
-					0
-				] }
-			}), this.monitorTypeIconsLayer(i, o, r(a)), this.clusterCountLayer(i, o), this.unclusteredLayer(i);
-			let { icon: d, unclustered: f } = this.clusterLayerIds(i);
-			this.ctx.tooltipManager.has(d) || this.ctx.tooltipManager.register(d, c, u), this.ctx.tooltipManager.has(f) || this.ctx.tooltipManager.register(f, s, u), n.register([f], e), n.register([d], this.makeClusterClickHandler(i)), this._clusterTypes.push(a);
-		}
-	}
-	remove() {
-		if (t.map) {
-			for (let e of this._clusterTypes) {
-				let r = `${this.ctx.referenceId}-${e}`, i = this.clusterLayerIds(r);
-				n.unregister([i.unclustered]), n.unregister([i.icon]);
-				for (let e of Object.values(i)) t.map.getLayer(e) && t.map.removeLayer(e);
-				t.map.getSource(r) && t.map.removeSource(r);
-			}
-			this._clusterTypes = [];
-		}
-	}
-	get unclusteredLayerIds() {
-		return this._clusterTypes.map((e) => `${this.ctx.referenceId}-${e}-unclustered`);
-	}
-	syncFeatures() {
-		if (t.map) for (let e of this._clusterTypes) {
-			let n = `${this.ctx.referenceId}-${e}`;
-			t.setDataSource(n, this.ctx.featuresByType[e] ?? []);
-		}
-	}
-	syncFilter() {
-		if (t.map) for (let e of this._clusterTypes) {
-			let n = `${this.ctx.referenceId}-${e}`, { unclustered: r } = this.clusterLayerIds(n);
-			t.map.getLayer(r) && t.map.setFilter(r, [
-				"all",
-				this.ctx.filters,
-				["!", ["has", "point_count"]]
-			]);
-		}
-	}
-	syncThresholds() {
-		if (t.map) for (let e of this._clusterTypes) {
-			let n = `${this.ctx.referenceId}-${e}`, { icon: i, average: a } = this.clusterLayerIds(n);
-			t.map.getLayer(i) && t.map.setLayoutProperty(i, "icon-image", this.buildClusterIconExpression(o, r(e))), t.map.getLayer(a) && t.map.setPaintProperty(a, "text-color", this.clusterTextColorExpr(o));
-		}
-	}
-	makeClusterClickHandler(e) {
-		return async (n) => {
-			try {
-				let r = n[0];
-				if (!r?.properties?.cluster_id) return;
-				let i = t.map?.getSource(e);
-				if (!i) return;
-				let a = await i.getClusterExpansionZoom(r.properties.cluster_id), o = r.geometry.coordinates;
-				t.map?.easeTo({
-					center: o,
-					zoom: a
-				});
-			} catch (e) {
-				console.error("ClickManager: cluster expansion zoom failed", e);
-			}
-		};
-	}
-	clusterLayerIds(e) {
-		return {
-			icon: `${e}-cluster-icon`,
-			average: `${e}-cluster-average`,
-			unclustered: `${e}-unclustered`
-		};
-	}
-	get clusterTextColorThreshold() {
-		return this.ctx.clusterIconThresholds[2]?.range[1] ?? 150.5;
-	}
-	clusterTextColorExpr(e) {
-		return [
-			"case",
-			[
-				"<=",
-				e,
-				this.clusterTextColorThreshold
-			],
-			"#000000",
-			"#FFFFFF"
-		];
-	}
-	buildClusterIconExpression(e, t) {
-		let n = this.ctx.clusterIconThresholds;
-		if (!n.length) return `outside-default-${t}`;
-		let r = ["case"];
-		for (let i of n.slice(0, -1)) r.push([
-			"<=",
-			e,
-			i.range[1]
-		], `outside-${i.name}-${t}`);
-		return r.push(`outside-${n.at(-1).name}-${t}`), r;
-	}
-	monitorTypeIconsLayer(e, n, r) {
-		let { icon: i } = this.clusterLayerIds(e);
-		t.map?.addLayer({
-			id: i,
-			type: "symbol",
-			source: e,
-			filter: ["has", "point_count"],
-			layout: {
-				"icon-image": this.buildClusterIconExpression(n, r),
-				"icon-size": [
-					"step",
-					["get", "point_count"],
-					1.3,
-					10,
-					1.6,
-					25,
-					2
-				],
-				"icon-ignore-placement": !0,
-				"icon-allow-overlap": !0
-			},
-			paint: { "icon-opacity": .8 }
-		}, this.ctx.beforeLayer);
-	}
-	clusterCountLayer(e, n) {
-		let { average: r } = this.clusterLayerIds(e);
-		t.map?.addLayer({
-			id: r,
-			type: "symbol",
-			source: e,
-			filter: ["has", "point_count"],
-			layout: {
-				"text-field": ["to-string", ["round", n]],
-				"text-size": 12,
-				"text-ignore-placement": !0,
-				"text-allow-overlap": !0
-			},
-			paint: { "text-color": this.clusterTextColorExpr(n) }
-		}, this.ctx.beforeLayer);
-	}
-	unclusteredLayer(e) {
-		let { unclustered: n } = this.clusterLayerIds(e);
-		t.map?.addLayer({
-			id: n,
-			type: "symbol",
-			source: e,
-			filter: [
-				"all",
-				this.ctx.filters,
-				["!", ["has", "point_count"]]
-			],
-			layout: {
-				"symbol-sort-key": [
-					"coalesce",
-					["get", "order"],
-					0
-				],
-				"icon-allow-overlap": !0,
-				"icon-ignore-placement": !0,
-				"icon-image": ["get", "icon"],
-				"icon-size": 1
-			},
-			paint: {}
-		}, this.ctx.beforeLayer);
-	}
-};
-//#endregion
-export { l as MonitorsClusterRenderer, s as monitorTooltip };

package/dist/lib/monitors/monitors-icon-manager.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { MonitorData, SJVAirEntryLevel } from "@sjvair/sdk";
+import { MapIconManager } from "../map/integrations/map-icon-manager.ts";
+export declare function getIconId<T extends MonitorData>(monitor: T, level: SJVAirEntryLevel): string;
+export declare abstract class MonitorShapeIconManager extends MapIconManager {
+    protected abstract get idPrefix(): string;
+    protected abstract transformSvg(svg: string): string;
+    protected get iconSize(): number;
+    constructor();
+}
+export declare class MonitorsIconManager extends MonitorShapeIconManager {
+    protected get idPrefix(): string;
+    protected transformSvg(svg: string): string;
+}

package/dist/lib/monitors/monitors-icon-manager.svelte.js

@@ -1,71 +1,76 @@
-import { mapManager as e } from "../map/map.svelte.js";
-import { monitorsManager as t } from "./monitors.svelte.js";
-import { asDataURI as n, circle as r, square as i, triangle as a } from "../map/icons.js";
-import { MapIconManager as o } from "../map/integrations/map-icon-manager.js";
-import * as s from "svelte/internal/client";
-//#region src/lib/monitors/monitors-icon-manager.svelte.ts
-var c = {
-	circle: r,
-	square: i,
-	triangle: a
-}, l = 2, u = "#969696", d = "#48c78e";
-function f(e, t) {
-	let n = `${e.location}-${e.is_active ? t.name : "default"}`;
-	switch (e.type) {
-		case "airgradient": return `${n}-circle`;
-		case "airnow":
-		case "aqview":
-		case "bam1022": return `${n}-triangle`;
-		case "purpleair": return `${n}-${e.is_sjvair ? "circle" : "square"}`;
-		default: throw Error(`Map icon for ${e.device} has not been set`);
-	}
+import { asDataURI, circle, square, triangle } from "../map/icons.ts";
+import { MapIconManager } from "../map/integrations/map-icon-manager.ts";
+import { mapManager } from "../map/map.svelte.ts";
+import { monitorsManager } from "./monitors.svelte.ts";
+const MONITOR_ICONS = { circle, square, triangle };
+const MONITOR_ICON_BORDER_WIDTH = 2;
+const MONITOR_ICON_DEFAULT_COLOR = "#969696"; // light gray
+const MONITOR_ICON_DISPLAY_COLOR = "#48c78e"; // light gray
+export function getIconId(monitor, level) {
+    const id = `${monitor.location}-${monitor.is_active ? level.name : "default"}`;
+    switch (monitor.type) {
+        case "airgradient":
+            return `${id}-circle`;
+        case "airnow":
+        case "aqview":
+        case "bam1022":
+            return `${id}-triangle`;
+        case "purpleair":
+            return `${id}-${monitor.is_sjvair ? "circle" : "square"}`;
+        default:
+            throw new Error(`Map icon for ${monitor.device} has not been set`);
+    }
+}
+export class MonitorShapeIconManager extends MapIconManager {
+    get iconSize() {
+        return 24;
+    }
+    constructor() {
+        super();
+        $effect.root(() => {
+            $effect(() => {
+                if (monitorsManager.levels) {
+                    const iconLevels = [
+                        ...monitorsManager.levels,
+                        { name: "default", color: MONITOR_ICON_DEFAULT_COLOR },
+                        { name: "display", color: MONITOR_ICON_DISPLAY_COLOR }
+                    ];
+                    for (const location of ["inside", "outside"]) {
+                        for (const [shapeName, shape] of Object.entries(MONITOR_ICONS)) {
+                            for (const level of iconLevels) {
+                                const parts = [this.idPrefix, location, level.name, shapeName].filter(Boolean);
+                                const id = parts.join("-");
+                                const src = asDataURI(this.transformSvg(shape(level.color, MONITOR_ICON_BORDER_WIDTH, location === "inside" ? "#000000" : undefined)));
+                                if (this.icons.has(id)) {
+                                    const icon = this.icons.get(id);
+                                    if (icon.image.src !== src) {
+                                        icon.image.src = src;
+                                        if (mapManager.map?.hasImage(id)) {
+                                            this.updateImage(icon, mapManager.map);
+                                        }
+                                    }
+                                    continue;
+                                }
+                                else {
+                                    const icon = new Image();
+                                    icon.src = src;
+                                    icon.width = this.iconSize;
+                                    icon.height = this.iconSize;
+                                    this.register(id, icon);
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        });
+    }
+}
+export class MonitorsIconManager extends MonitorShapeIconManager {
+    get idPrefix() {
+        return "";
+    }
+    transformSvg(svg) {
+        return svg;
+    }
 }
-var p = class extends o {
-	get iconSize() {
-		return 24;
-	}
-	constructor() {
-		super(), s.effect_root(() => {
-			s.user_effect(() => {
-				if (t.levels) {
-					let r = [
-						...t.levels,
-						{
-							name: "default",
-							color: u
-						},
-						{
-							name: "display",
-							color: d
-						}
-					];
-					for (let t of ["inside", "outside"]) for (let [i, a] of Object.entries(c)) for (let o of r) {
-						let r = [
-							this.idPrefix,
-							t,
-							o.name,
-							i
-						].filter(Boolean).join("-"), s = n(this.transformSvg(a(o.color, l, t === "inside" ? "#000000" : void 0)));
-						if (this.icons.has(r)) {
-							let t = this.icons.get(r);
-							t.image.src !== s && (t.image.src = s, e.map?.hasImage(r) && this.updateImage(t, e.map));
-							continue;
-						} else {
-							let e = new Image();
-							e.src = s, e.width = this.iconSize, e.height = this.iconSize, this.register(r, e);
-						}
-					}
-				}
-			});
-		});
-	}
-}, m = class extends p {
-	get idPrefix() {
-		return "";
-	}
-	transformSvg(e) {
-		return e;
-	}
-};
-//#endregion
-export { p as MonitorShapeIconManager, m as MonitorsIconManager, f as getIconId };

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

@@ -0,0 +1,40 @@
+import { type FilterSpecification, type Map as MaptilerMap } from "@maptiler/sdk";
+import type { SJVAirEntryLevel } from "@sjvair/sdk";
+import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte.ts";
+import { MonitorsIconManager } from "./monitors-icon-manager.svelte.ts";
+import { TooltipManager } from "../map/integrations/tooltip.svelte.ts";
+import { MapDisplayOption } from "../map/integrations/map-display-option.svelte.ts";
+import type { MonitorMapFeature, MonitorMarkerProperties } from "./types.ts";
+declare class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProperties> {
+    referenceId: string;
+    enabled: boolean;
+    clustered: boolean;
+    icons: MonitorsIconManager;
+    tooltipManager: TooltipManager;
+    private renderer;
+    displayOptions: {
+        purpleair: MapDisplayOption;
+        sjvair: MapDisplayOption;
+        aqview: MapDisplayOption;
+        bam1022: MapDisplayOption;
+        airnow: MapDisplayOption;
+        inactive: MapDisplayOption;
+        inside: MapDisplayOption;
+    };
+    /** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
+    onMonitorClick: ((id: string) => void) | null;
+    selectedMonitorId: string | null;
+    private handleMonitorClick;
+    features: Array<MonitorMapFeature>;
+    filters: FilterSpecification;
+    featuresByType: Record<string, MonitorMapFeature[]>;
+    clusterIconThresholds: Array<SJVAirEntryLevel>;
+    get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0];
+    get mapSource(): Parameters<MaptilerMap["addSource"]>[1];
+    constructor();
+    apply(): void;
+    remove(): void;
+    private applySelectedState;
+}
+export declare const monitorsMapIntegration: MonitorsMapIntegration;
+export type { MonitorsMapIntegration };