@sjvair/monitor-map 3.0.0 → 3.0.1

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

@@ -0,0 +1,212 @@
+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
+	]
+];
+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);
+}
+function c(t) {
+	let n = t.features?.[0];
+	if (n) return e(a, { feature: n }, t.lngLat);
+}
+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.js

@@ -0,0 +1,64 @@
+import { monitorsManager as e } from "./monitors.svelte.js";
+import { mapManager as t } from "../map/map.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";
+function d(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`);
+	}
+}
+var f = class extends o {
+	get iconSize() {
+		return 24;
+	}
+	constructor() {
+		super(), s.effect_root(() => {
+			s.user_effect(() => {
+				if (e.levels) {
+					let r = [...e.levels, {
+						name: "default",
+						color: u
+					}];
+					for (let e of ["inside", "outside"]) for (let [i, a] of Object.entries(c)) for (let o of r) {
+						let r = [
+							this.idPrefix,
+							e,
+							o.name,
+							i
+						].filter(Boolean).join("-"), s = n(this.transformSvg(a(o.color, l, e === "inside" ? "#000000" : void 0)));
+						if (this.icons.has(r)) {
+							let e = this.icons.get(r);
+							e.image.src !== s && (e.image.src = s, t.map?.hasImage(r) && this.updateImage(e, t.map));
+							continue;
+						} else {
+							let e = new Image();
+							e.src = s, e.width = this.iconSize, e.height = this.iconSize, this.register(r, e);
+						}
+					}
+				}
+			});
+		});
+	}
+}, p = class extends f {
+	get idPrefix() {
+		return "";
+	}
+	transformSvg(e) {
+		return e;
+	}
+};
+//#endregion
+export { f as MonitorShapeIconManager, p as MonitorsIconManager, d as getIconId };

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

@@ -0,0 +1,264 @@
+import { monitorsManager as e } from "./monitors.svelte.js";
+import { mapManager as t } from "../map/map.svelte.js";
+import { clickManager as n } from "../map/integrations/click-manager.js";
+import { MapIconLayerIntegration as r } from "../map/integrations/map-geojson-integration.svelte.js";
+import { MonitorsIconManager as i, getIconId as a } from "./monitors-icon-manager.svelte.js";
+import { TooltipManager as o } from "../map/integrations/tooltip.svelte.js";
+import { MapDisplayOption as s } from "../map/integrations/map-display-option.svelte.js";
+import { getCurrentLevel as c, getOrder as l } from "./monitor-utils.js";
+import { MonitorsClusterRenderer as u, monitorTooltip as d } from "./monitors-cluster-renderer.js";
+import * as f from "svelte/internal/client";
+import { untrack as p } from "svelte";
+//#region src/lib/monitors/monitors-map-integration.svelte.ts
+var m = {
+	monitor(e) {
+		return [
+			"==",
+			["get", "type"],
+			e
+		];
+	},
+	purpleair() {
+		return [
+			"all",
+			[
+				"==",
+				["get", "type"],
+				"purpleair"
+			],
+			[
+				"==",
+				["get", "is_sjvair"],
+				!1
+			]
+		];
+	},
+	sjvPurpleair() {
+		return [
+			"all",
+			[
+				"==",
+				["get", "type"],
+				"purpleair"
+			],
+			[
+				"==",
+				["get", "is_sjvair"],
+				!0
+			]
+		];
+	}
+}, h = new class extends r {
+	referenceId = "monitors";
+	#e = f.state(!0);
+	get enabled() {
+		return f.get(this.#e);
+	}
+	set enabled(e) {
+		f.set(this.#e, e, !0);
+	}
+	#t = f.state(!0);
+	get clustered() {
+		return f.get(this.#t);
+	}
+	set clustered(e) {
+		f.set(this.#t, e, !0);
+	}
+	icons = new i();
+	tooltipManager = new o();
+	renderer = new u(this);
+	displayOptions = {
+		purpleair: new s("PurpleAir", !0),
+		sjvair: new s("SJVAir non-FEM", !0),
+		aqview: new s("AQview", !0),
+		bam1022: new s("SJVAir FEM", !0),
+		airnow: new s("AirNow", !0),
+		inactive: new s("Inactive", !1),
+		inside: new s("Inside", !1)
+	};
+	onMonitorClick = null;
+	#n = f.state(null);
+	get selectedMonitorId() {
+		return f.get(this.#n);
+	}
+	set selectedMonitorId(e) {
+		f.set(this.#n, e, !0);
+	}
+	handleMonitorClick = (e) => {
+		if (!this.onMonitorClick) return;
+		let n = [...e].sort((e, t) => (t.properties?.order ?? 0) - (e.properties?.order ?? 0))[0];
+		if (!n?.properties?.id || (this.selectedMonitorId = n.properties.id, this.onMonitorClick(this.selectedMonitorId), n.geometry.type !== "Point")) return;
+		let r = n.geometry.coordinates;
+		t.map?.easeTo({
+			center: r,
+			zoom: Math.max(t.map.getZoom(), 12)
+		});
+	};
+	#r = f.derived(() => {
+		if (!e.meta || !e.latest || !e.pollutant) return [];
+		let t = e.meta.entryType(e.pollutant).asIter.levels;
+		return Array.from(e.latest.values().map((e) => {
+			let n = {
+				type: "Feature",
+				properties: {
+					icon: "outside-default-square",
+					id: e.id,
+					is_active: e.is_active,
+					is_sjvair: e.is_sjvair,
+					location: e.location,
+					name: e.name,
+					order: l(e),
+					type: e.type,
+					value: e.latest.value
+				},
+				geometry: e.position
+			};
+			if (t) {
+				let r = c(e.latest.value, t);
+				r && (n.properties.icon = a(e, r));
+			}
+			return n;
+		}));
+	});
+	get features() {
+		return f.get(this.#r);
+	}
+	set features(e) {
+		f.set(this.#r, e);
+	}
+	#i = f.derived(() => {
+		let e = ["any"], t = ["any", [
+			"==",
+			["get", "location"],
+			"outside"
+		]], n = ["any", [
+			"==",
+			["get", "is_active"],
+			!0
+		]];
+		return this.displayOptions.purpleair.value && e.push(m.purpleair()), this.displayOptions.aqview.value && e.push(m.monitor("aqview")), this.displayOptions.bam1022.value && e.push(m.monitor("bam1022")), this.displayOptions.airnow.value && e.push(m.monitor("airnow")), this.displayOptions.sjvair.value && e.push(m.sjvPurpleair(), m.monitor("airgradient")), this.displayOptions.inside.value && t.push([
+			"==",
+			["get", "location"],
+			"inside"
+		]), this.displayOptions.inactive.value && n.push([
+			"==",
+			["get", "is_active"],
+			!1
+		]), [
+			"all",
+			e,
+			t,
+			n
+		];
+	});
+	get filters() {
+		return f.get(this.#i);
+	}
+	set filters(e) {
+		f.set(this.#i, e);
+	}
+	#a = f.derived(() => {
+		let e = this.displayOptions, t = {};
+		for (let n of this.features) {
+			let r = n.properties;
+			if (!r.is_active && !e.inactive.value || r.location === "inside" && !e.inside.value || !({
+				purpleair: r.is_sjvair ? e.sjvair.value : e.purpleair.value,
+				airgradient: e.sjvair.value,
+				aqview: e.aqview.value,
+				bam1022: e.bam1022.value,
+				airnow: e.airnow.value
+			}[r.type] ?? !0)) continue;
+			let i = r.type === "purpleair" && r.is_sjvair ? "airgradient" : r.type, a = t[i] ?? [];
+			a.push(n), t[i] = a;
+		}
+		return t;
+	});
+	get featuresByType() {
+		return f.get(this.#a);
+	}
+	set featuresByType(e) {
+		f.set(this.#a, e);
+	}
+	#o = f.derived(() => !e.meta || !e.pollutant ? [] : e.meta.entryType(e.pollutant).asIter.levels ?? []);
+	get clusterIconThresholds() {
+		return f.get(this.#o);
+	}
+	set clusterIconThresholds(e) {
+		f.set(this.#o, e);
+	}
+	get mapLayer() {
+		return {
+			id: this.referenceId,
+			type: "symbol",
+			source: this.referenceId,
+			filter: this.filters,
+			layout: {
+				"symbol-sort-key": [
+					"coalesce",
+					["get", "order"],
+					0
+				],
+				"icon-allow-overlap": !0,
+				"icon-ignore-placement": !0,
+				"icon-image": ["get", "icon"],
+				"icon-size": 1
+			},
+			paint: {}
+		};
+	}
+	get mapSource() {
+		return {
+			type: "geojson",
+			promoteId: "id",
+			data: {
+				type: "FeatureCollection",
+				features: this.features
+			}
+		};
+	}
+	constructor() {
+		super(), f.effect_root(() => {
+			f.user_effect(() => {
+				let e = this.filters;
+				t.map && (this.clustered ? this.renderer.syncFilter() : t.map.getLayer(this.referenceId) && t.map.setFilter(this.referenceId, e));
+			}), f.user_effect(() => {
+				let e = this.features;
+				!t.map || this.clustered || t.setDataSource(this.referenceId, e);
+			}), f.user_effect(() => {
+				this.featuresByType, !(!t.map || !this.clustered) && this.renderer.syncFeatures();
+			}), f.user_effect(() => {
+				let e = this.clusterIconThresholds;
+				!t.map || !this.clustered || !e.length || this.renderer.syncThresholds();
+			}), f.user_effect(() => {
+				this.clustered;
+				let e = Object.keys(this.featuresByType).length > 0;
+				!p(() => t.map) || !e || p(() => this.apply());
+			}), f.user_effect(() => {
+				this.selectedMonitorId, t.map && p(() => this.applySelectedState());
+			});
+		});
+	}
+	apply() {
+		t.map && (this.tooltipManager.has(this.referenceId) || this.tooltipManager.register(this.referenceId, d), this.clustered ? (t.map.getLayer(this.referenceId) && t.map.removeLayer(this.referenceId), t.map.getSource(this.referenceId) && t.map.removeSource(this.referenceId), n.unregister([this.referenceId]), this.tooltipManager.disable(), this.renderer.remove(), this.icons.loadIcons().then(() => {
+			this.renderer.apply(this.handleMonitorClick), this.tooltipManager.enable(), this.applySelectedState();
+		})) : (this.tooltipManager.disable(), this.renderer.remove(), this.tooltipManager.enable(), n.unregister([this.referenceId]), super.apply(), this.icons.loadIcons().then(() => {
+			n.register([this.referenceId], this.handleMonitorClick), this.applySelectedState();
+		})));
+	}
+	remove() {
+		n.unregister([this.referenceId]), this.renderer.remove(), super.remove();
+	}
+	applySelectedState() {
+		if (!t.map) return;
+		let e = this.clustered ? this.renderer.unclusteredLayerIds : [this.referenceId], n = this.selectedMonitorId ? [
+			"match",
+			["get", "id"],
+			this.selectedMonitorId,
+			1.3,
+			1
+		] : 1;
+		for (let r of e) t.map.getLayer(r) && t.map.setLayoutProperty(r, "icon-size", n);
+	}
+}();
+//#endregion
+export { h as monitorsMapIntegration };

package/dist/lib/monitors/monitors.svelte.js

@@ -0,0 +1,68 @@
+import { route as e } from "../src/router.js";
+import * as t from "svelte/internal/client";
+import { getMonitors as n, getMonitorsLatest as r, getMonitorsMeta as i } from "@sjvair/sdk";
+import { XMap as a } from "@tstk/builtin-extensions";
+import { Interval as o } from "@tstk/utils";
+//#region src/lib/monitors/monitors.svelte.ts
+var s = class {
+	autoUpdate = new o(async () => await this.update(), 120 * 1e3);
+	#e = t.state(!1);
+	get initialized() {
+		return t.get(this.#e);
+	}
+	set initialized(e) {
+		t.set(this.#e, e, !0);
+	}
+	#t = t.state(null);
+	get latest() {
+		return t.get(this.#t);
+	}
+	set latest(e) {
+		t.set(this.#t, e, !0);
+	}
+	#n = t.state(null);
+	get list() {
+		return t.get(this.#n);
+	}
+	set list(e) {
+		t.set(this.#n, e, !0);
+	}
+	#r = t.state(null);
+	get meta() {
+		return t.get(this.#r);
+	}
+	set meta(e) {
+		t.set(this.#r, e, !0);
+	}
+	#i = t.state(null);
+	get pollutant() {
+		return t.get(this.#i);
+	}
+	set pollutant(e) {
+		t.set(this.#i, e, !0);
+	}
+	#a = t.derived(() => this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
+	get levels() {
+		return t.get(this.#a);
+	}
+	set levels(e) {
+		t.set(this.#a, e);
+	}
+	async init() {
+		if (this.initialized) return;
+		[this.list, this.meta] = await Promise.all([n(), i()]);
+		let t = e.search.pollutant;
+		this.pollutant = t === "pm25" || t === "o3" ? t : this.meta.default_pollutant, this.latest = await c(this.pollutant), this.autoUpdate.start(), this.initialized = !0;
+	}
+	async update() {
+		this.initialized && ([this.list, this.latest] = await Promise.all([n(), c(this.pollutant || this.meta?.default_pollutant || "pm25")]));
+	}
+};
+async function c(e) {
+	let t = await r(e), n = new a();
+	for (let e of t) n.set(e.id, e);
+	return n;
+}
+var l = new s();
+//#endregion
+export { l as monitorsManager };