@sjvair/monitor-map 3.0.1 → 3.0.2

package/dist/lib/LoadScreen.js

@@ -18,13 +18,13 @@ function a(n) {
 	};
 	var a = e.comment(), o = e.first_child(a), s = (n) => {
 		var a = i(), o = e.child(a), s = e.child(o), c = e.child(s);
-		e.set_attribute(c, "srcset", "/sjvair-icon2.avif 229w, /sjvair-icon.avif 458w");
+		e.set_attribute(c, "srcset", "/sjvair-icon.avif 229w, /sjvair-icon2.avif 458w");
 		var l = e.sibling(c);
 		e.set_attribute(l, "srcset", "/sjvair-icon.webp 229w, /sjvair-icon2.webp 458w");
 		var u = e.sibling(l);
-		e.set_attribute(u, "srcset", "/sjvair-icon2.png 229w, /sjvair-icon.png 458w");
+		e.set_attribute(u, "srcset", "/sjvair-icon.png 229w, /sjvair-icon2.png 458w");
 		var d = e.sibling(u);
-		e.set_attribute(d, "src", "/sjvair-icon.png");
+		e.set_attribute(d, "src", "/sjvair-icon2.png");
 		let f;
 		e.reset(s);
 		var p = e.sibling(s, 2), m = e.child(p);
@@ -40,7 +40,7 @@ function a(n) {
 		var y = e.sibling(p, 2), b = e.child(y);
 		e.set_attribute(b, "srcset", "/sjvair-air.avif 235w, /sjvair-air2.avif 469w");
 		var x = e.sibling(b);
-		e.set_attribute(x, "srcset", "/sjvair-air2.webp 235w, /sjvair-air.webp 469w");
+		e.set_attribute(x, "srcset", "/sjvair-air.webp 235w, /sjvair-air2.webp 469w");
 		var S = e.sibling(x);
 		e.set_attribute(S, "srcset", "/sjvair-air.png 235w, /sjvair-air2.png 469w");
 		var C = e.sibling(S);

package/dist/lib/components/MapLayersDisplayOptions.js

@@ -8,64 +8,71 @@ import { hmsSmokeMapIntegration as o } from "../hms/hms-smoke-map-integration.sv
 import * as s from "svelte/internal/client";
 import "svelte/internal/disclose-version";
 import "svelte/internal/flags/legacy";
+import { CrosshairIcon as c, FlameIcon as l, WavesVerticalIcon as u, WindIcon as d } from "@lucide/svelte";
 //#region src/lib/components/MapLayersDisplayOptions.svelte
-var c = s.reactive_import(() => n), l = s.reactive_import(() => t), u = s.reactive_import(() => a), d = s.reactive_import(() => o), f = s.from_html("<p class=\"text-lg font-bold whitespace-nowrap underline\">Map Layers</p> <!> <!> <!> <!>", 1);
-function p(t, n) {
+var f = s.reactive_import(() => n), p = s.reactive_import(() => t), m = s.reactive_import(() => a), h = s.reactive_import(() => o), g = s.from_html("<div class=\"flex gap-1 items-center\"><!> <!></div>"), _ = s.from_html("<p class=\"text-lg font-bold whitespace-nowrap underline\">Map Layers</p> <div class=\"flex gap-1 items-center\"><!> <!></div> <!> <div class=\"flex gap-1 items-center\"><!> <!></div> <div class=\"flex gap-1 items-center\"><!> <!></div>", 1);
+function v(t, n) {
 	s.push(n, !1), s.init(), r(t, {
 		children: (t, n) => {
-			var r = f(), a = s.sibling(s.first_child(r), 2);
-			i(a, {
+			var r = _(), a = s.sibling(s.first_child(r), 2), o = s.child(a);
+			d(o, { size: "16" }), i(s.sibling(o, 2), {
 				id: "wind",
 				label: "Wind",
 				get value() {
-					return c().enabled;
+					return f().enabled;
 				},
 				set value(e) {
-					c(c().enabled = e);
+					f(f().enabled = e);
 				},
 				$$legacy: !0
-			});
-			var o = s.sibling(a, 2), p = (e) => {
-				i(e, {
+			}), s.reset(a);
+			var v = s.sibling(a, 2), y = (e) => {
+				var t = g(), n = s.child(t);
+				c(n, {
+					size: "16",
+					color: "#4A5FC6"
+				}), i(s.sibling(n, 2), {
 					id: "collocation-sites",
 					label: "Collocation Sites",
 					get value() {
-						return l().enabled;
+						return p().enabled;
 					},
 					set value(e) {
-						l(l().enabled = e);
+						p(p().enabled = e);
 					},
 					$$legacy: !0
-				});
+				}), s.reset(t), s.append(e, t);
 			};
-			s.if(o, (t) => {
-				e.pollutant === "pm25" && t(p);
+			s.if(v, (t) => {
+				e.pollutant === "pm25" && t(y);
 			});
-			var m = s.sibling(o, 2);
-			i(m, {
+			var b = s.sibling(v, 2), x = s.child(b);
+			l(x, { size: "16" }), i(s.sibling(x, 2), {
 				id: "hms-fire",
 				label: "HMS Fire",
 				get value() {
-					return u().enabled;
+					return m().enabled;
 				},
 				set value(e) {
-					u(u().enabled = e);
+					m(m().enabled = e);
 				},
 				$$legacy: !0
-			}), i(s.sibling(m, 2), {
+			}), s.reset(b);
+			var S = s.sibling(b, 2), C = s.child(S);
+			u(C, { size: "16" }), i(s.sibling(C, 2), {
 				id: "hms-smoke",
 				label: "HMS Smoke",
 				get value() {
-					return d().enabled;
+					return h().enabled;
 				},
 				set value(e) {
-					d(d().enabled = e);
+					h(h().enabled = e);
 				},
 				$$legacy: !0
-			}), s.append(t, r);
+			}), s.reset(S), s.append(t, r);
 		},
 		$$slots: { default: !0 }
 	}), s.pop();
 }
 //#endregion
-export { p as default };
+export { v as default };

package/dist/lib/hms/hms.svelte.js

@@ -1,8 +1,8 @@
 import * as e from "svelte/internal/client";
-import { featureCollection as t, point as n } from "@turf/helpers";
-import { getHMSFire as r, getHMSSmoke as i } from "@sjvair/sdk/hms";
-import a from "@turf/clusters-dbscan";
-import { SvelteMap as o } from "svelte/reactivity";
+import { SvelteMap as t } from "svelte/reactivity";
+import { featureCollection as n, point as r } from "@turf/helpers";
+import { getHMSFire as i, getHMSSmoke as a } from "@sjvair/sdk/hms";
+import o from "@turf/clusters-dbscan";
 //#region src/lib/hms/hms.svelte.ts
 var s = 2, c = 1, l = class {
 	#e = e.state();
@@ -30,11 +30,11 @@ var s = 2, c = 1, l = class {
 		await Promise.allSettled([this.loadSmoke(), this.loadFire()]);
 	}
 	async loadSmoke() {
-		this.smoke = await i();
+		this.smoke = await a();
 	}
 	async loadFire() {
 		try {
-			let e = u((await r()).filter((e) => e.frp !== null));
+			let e = u((await i()).filter((e) => e.frp !== null));
 			this.fire = e, this.fireGroups = d(e);
 		} catch (e) {
 			console.error("HMS fire load failed:", e);
@@ -51,22 +51,22 @@ function u(e) {
 }
 function d(e) {
 	if (!e.length) return [];
-	let r = a(t(e.map((e) => n(e.geometry.coordinates, {
+	let i = o(n(e.map((e) => r(e.geometry.coordinates, {
 		fireId: e.id,
 		frp: e.frp
 	}))), s, {
 		minPoints: c,
 		units: "kilometers"
-	}), i = new o();
-	for (let e of r.features) {
-		let t = e.properties, n = t.dbscan === "noise" ? `noise-${t.fireId}` : `cluster-${t.cluster}`, [r, a] = e.geometry.coordinates, o = i.get(n) ?? {
+	}), a = new t();
+	for (let e of i.features) {
+		let t = e.properties, n = t.dbscan === "noise" ? `noise-${t.fireId}` : `cluster-${t.cluster}`, [r, i] = e.geometry.coordinates, o = a.get(n) ?? {
 			frps: [],
 			lngs: [],
 			lats: []
 		};
-		o.frps.push(t.frp), o.lngs.push(r), o.lats.push(a), i.set(n, o);
+		o.frps.push(t.frp), o.lngs.push(r), o.lats.push(i), a.set(n, o);
 	}
-	return Array.from(i.entries()).map(([e, { frps: t, lngs: n, lats: r }]) => ({
+	return Array.from(a.entries()).map(([e, { frps: t, lngs: n, lats: r }]) => ({
 		id: `hms-fire-group-${e}`,
 		coordinates: [n.reduce((e, t) => e + t, 0) / n.length, r.reduce((e, t) => e + t, 0) / r.length],
 		avgFrp: t.reduce((e, t) => e + t, 0) / t.length,

package/dist/lib/map/integrations/map-display-option.svelte.js

@@ -8,9 +8,10 @@ var t = class {
 	set value(t) {
 		e.set(this.#e, t, !0);
 	}
+	icon;
 	label;
-	constructor(t, n) {
-		this.label = t, this.#e = e.state(e.proxy(n));
+	constructor(t, n, r) {
+		this.icon = r, this.label = t, this.#e = e.state(e.proxy(n));
 	}
 };
 //#endregion

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

@@ -1,5 +1,5 @@
 import { mapManager as e } from "../map.svelte.js";
-import { XMap as t } from "@tstk/builtin-extensions";
+import { SvelteMap as t } from "svelte/reactivity";
 //#region src/lib/map/integrations/map-icon-manager.ts
 var n = class {
 	icons = new t();

package/dist/lib/monitors/components/MonitorsDisplayOptions.js

@@ -6,22 +6,22 @@ import i from "../../components/ToggleSwitch.js";
 import * as a from "svelte/internal/client";
 import "svelte/internal/disclose-version";
 //#region src/lib/monitors/components/MonitorsDisplayOptions.svelte
-var o = a.from_html("<label class=\"cursor-pointer whitespace-nowrap select-none\"><input type=\"checkbox\"/> </label>"), s = a.from_html("<p class=\"text-lg font-bold underline\">Air Monitors</p> <div class=\"mb-2 w-full text-xs\"><div class=\"w-fit\"><!></div> <!></div> <!>", 1);
-function c(c, l) {
-	a.push(l, !0);
-	let u = [{
+var o = a.from_html("<img class=\"w-3\"/>"), s = a.from_html("<label class=\"flex gap-1 cursor-pointer whitespace-nowrap select-none\"><input type=\"checkbox\"/> <!> </label>"), c = a.from_html("<p class=\"text-lg font-bold underline\">Air Monitors</p> <div class=\"mb-2 w-full text-xs\"><div class=\"w-fit\"><!></div> <!></div> <!>", 1);
+function l(l, u) {
+	a.push(u, !0);
+	let d = [{
 		label: "PM 2.5",
 		value: "pm25"
 	}, {
 		label: "Ozone",
 		value: "o3"
-	}], d = a.derived(() => e.pollutant && e.pollutant === "pm25" ? Object.entries(t.displayOptions) : Object.entries(t.displayOptions).filter(([t, n]) => t === "inactive" || e.meta?.asIter.monitors.some((t) => t.label === n.label && e.pollutant && e.pollutant in t.entries)));
+	}], f = a.derived(() => e.pollutant && e.pollutant === "pm25" ? Object.entries(t.displayOptions) : Object.entries(t.displayOptions).filter(([t, n]) => t === "inactive" || e.meta?.asIter.monitors.some((t) => t.label === n.label && e.pollutant && e.pollutant in t.entries)));
 	a.user_effect(() => {
 		e.list = [], e.latest = null, e.update();
-	}), n(c, {
-		children: (n, c) => {
-			var l = s(), f = a.sibling(a.first_child(l), 2), p = a.child(f);
-			i(a.child(p), {
+	}), n(l, {
+		children: (n, l) => {
+			var u = c(), p = a.sibling(a.first_child(u), 2), m = a.child(p);
+			i(a.child(m), {
 				id: "monitor-clusters",
 				label: "Marker Clusters",
 				get value() {
@@ -30,12 +30,12 @@ function c(c, l) {
 				set value(e) {
 					t.clustered = e;
 				}
-			}), a.reset(p);
-			var m = a.sibling(p, 2), h = (t) => {
+			}), a.reset(m);
+			var h = a.sibling(m, 2), g = (t) => {
 				r(t, {
 					segmentLabel: "Pollutant:",
 					get options() {
-						return u;
+						return d;
 					},
 					get group() {
 						return e.pollutant;
@@ -45,23 +45,32 @@ function c(c, l) {
 					}
 				});
 			};
-			a.if(m, (t) => {
-				e.pollutant && t(h);
-			}), a.reset(f);
-			var g = a.sibling(f, 2);
-			a.each(g, 17, () => a.get(d), ([e, t]) => t.label, (e, t) => {
+			a.if(h, (t) => {
+				e.pollutant && t(g);
+			}), a.reset(p);
+			var _ = a.sibling(p, 2);
+			a.each(_, 17, () => a.get(f), ([e, t]) => t.label, (e, t) => {
 				var n = a.derived(() => a.to_array(a.get(t), 2));
-				let r = () => a.get(n)[0], i = () => a.get(n)[1], s = a.derived(() => `${r()}-monitor-display-option`);
-				var c = o(), l = a.child(c);
-				a.remove_input_defaults(l);
-				var u = a.sibling(l);
-				a.reset(c), a.template_effect(() => {
-					a.set_attribute(c, "for", a.get(s)), a.set_attribute(l, "id", a.get(s)), a.set_attribute(l, "name", i().label), a.set_text(u, ` ${i().label ?? ""}`);
-				}), a.bind_checked(l, () => i().value, (e) => i().value = e), a.append(e, c);
-			}), a.append(n, l);
+				let r = () => a.get(n)[0], i = () => a.get(n)[1], c = a.derived(() => `${r()}-monitor-display-option`);
+				var l = s(), u = a.child(l);
+				a.remove_input_defaults(u);
+				var d = a.sibling(u, 2), f = (e) => {
+					var t = o();
+					a.template_effect(() => {
+						a.set_attribute(t, "src", i().icon.image.src), a.set_attribute(t, "alt", i().icon.image.alt);
+					}), a.append(e, t);
+				};
+				a.if(d, (e) => {
+					i().icon && e(f);
+				});
+				var p = a.sibling(d);
+				a.reset(l), a.template_effect(() => {
+					a.set_attribute(l, "for", a.get(c)), a.set_attribute(u, "id", a.get(c)), a.set_attribute(u, "name", i().label), a.set_text(p, ` ${i().label ?? ""}`);
+				}), a.bind_checked(u, () => i().value, (e) => i().value = e), a.append(e, l);
+			}), a.append(n, u);
 		},
 		$$slots: { default: !0 }
 	}), a.pop();
 }
 //#endregion
-export { c as default };
+export { l as default };

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

@@ -8,8 +8,8 @@ var c = {
 	circle: r,
 	square: i,
 	triangle: a
-}, l = 2, u = "#969696";
-function d(e, t) {
+}, 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`;
@@ -20,7 +20,7 @@ function d(e, t) {
 		default: throw Error(`Map icon for ${e.device} has not been set`);
 	}
 }
-var f = class extends o {
+var p = class extends o {
 	get iconSize() {
 		return 24;
 	}
@@ -28,10 +28,17 @@ var f = class extends o {
 		super(), s.effect_root(() => {
 			s.user_effect(() => {
 				if (e.levels) {
-					let r = [...e.levels, {
-						name: "default",
-						color: u
-					}];
+					let r = [
+						...e.levels,
+						{
+							name: "default",
+							color: u
+						},
+						{
+							name: "display",
+							color: d
+						}
+					];
 					for (let e of ["inside", "outside"]) for (let [i, a] of Object.entries(c)) for (let o of r) {
 						let r = [
 							this.idPrefix,
@@ -52,7 +59,7 @@ var f = class extends o {
 			});
 		});
 	}
-}, p = class extends f {
+}, m = class extends p {
 	get idPrefix() {
 		return "";
 	}
@@ -61,4 +68,4 @@ var f = class extends o {
 	}
 };
 //#endregion
-export { f as MonitorShapeIconManager, p as MonitorsIconManager, d as getIconId };
+export { p as MonitorShapeIconManager, m as MonitorsIconManager, f as getIconId };

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

@@ -67,22 +67,28 @@ var m = {
 	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)
-	};
+	#n = f.derived(() => ({
+		purpleair: new s("PurpleAir", !0, this.icons.get("outside-display-square")),
+		sjvair: new s("SJVAir non-FEM", !0, this.icons.get("outside-display-circle")),
+		aqview: new s("AQview", !0, this.icons.get("outside-display-triangle")),
+		bam1022: new s("SJVAir FEM", !0, this.icons.get("outside-display-triangle")),
+		airnow: new s("AirNow", !0, this.icons.get("outside-display-triangle")),
+		inactive: new s("Inactive", !1, this.icons.get("outside-default-square")),
+		inside: new s("Inside", !1, this.icons.get("inside-display-square"))
+	}));
+	get displayOptions() {
+		return f.get(this.#n);
+	}
+	set displayOptions(e) {
+		f.set(this.#n, e);
+	}
 	onMonitorClick = null;
-	#n = f.state(null);
+	#r = f.state(null);
 	get selectedMonitorId() {
-		return f.get(this.#n);
+		return f.get(this.#r);
 	}
 	set selectedMonitorId(e) {
-		f.set(this.#n, e, !0);
+		f.set(this.#r, e, !0);
 	}
 	handleMonitorClick = (e) => {
 		if (!this.onMonitorClick) return;
@@ -94,7 +100,7 @@ var m = {
 			zoom: Math.max(t.map.getZoom(), 12)
 		});
 	};
-	#r = f.derived(() => {
+	#i = 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) => {
@@ -121,12 +127,12 @@ var m = {
 		}));
 	});
 	get features() {
-		return f.get(this.#r);
+		return f.get(this.#i);
 	}
 	set features(e) {
-		f.set(this.#r, e);
+		f.set(this.#i, e);
 	}
-	#i = f.derived(() => {
+	#a = f.derived(() => {
 		let e = ["any"], t = ["any", [
 			"==",
 			["get", "location"],
@@ -152,12 +158,12 @@ var m = {
 		];
 	});
 	get filters() {
-		return f.get(this.#i);
+		return f.get(this.#a);
 	}
 	set filters(e) {
-		f.set(this.#i, e);
+		f.set(this.#a, e);
 	}
-	#a = f.derived(() => {
+	#o = f.derived(() => {
 		let e = this.displayOptions, t = {};
 		for (let n of this.features) {
 			let r = n.properties;
@@ -174,17 +180,17 @@ var m = {
 		return t;
 	});
 	get featuresByType() {
-		return f.get(this.#a);
+		return f.get(this.#o);
 	}
 	set featuresByType(e) {
-		f.set(this.#a, e);
+		f.set(this.#o, e);
 	}
-	#o = f.derived(() => !e.meta || !e.pollutant ? [] : e.meta.entryType(e.pollutant).asIter.levels ?? []);
+	#s = f.derived(() => !e.meta || !e.pollutant ? [] : e.meta.entryType(e.pollutant).asIter.levels ?? []);
 	get clusterIconThresholds() {
-		return f.get(this.#o);
+		return f.get(this.#s);
 	}
 	set clusterIconThresholds(e) {
-		f.set(this.#o, e);
+		f.set(this.#s, e);
 	}
 	get mapLayer() {
 		return {