@sjvair/monitor-map 3.0.1 → 3.0.3

package/dist/lib/map/utils.js

@@ -1,30 +1,33 @@
-import { MapStyle as e, Popup as t } from "@maptiler/sdk";
-import { mount as n, unmount as r } from "svelte";
+import { mount as e, unmount as t } from "svelte";
+import { MapStyle as n, Popup as r } from "@maptiler/sdk";
 //#region src/lib/map/utils.ts
 var i = (() => {
-	let t = /* @__PURE__ */ new Map();
-	for (let n of Object.values(e)) {
-		let e = n.getId(), r = e.match(/^(.+?)_V(\d+)$/i), i = r ? r[1] : e, a = r ? parseInt(r[2], 10) : 0, o = t.get(i);
-		(!o || a > o.version) && t.set(i, {
+	let e = /* @__PURE__ */ new Map();
+	for (let t of Object.values(n)) {
+		let n = t.getId(), r = n.match(/^(.+?)_V(\d+)$/i), i = r ? r[1] : n, a = r ? parseInt(r[2], 10) : 0, o = e.get(i);
+		(!o || a > o.version) && e.set(i, {
 			version: a,
-			style: n
+			style: t
 		});
 	}
-	return Array.from(t.values()).map((e) => e.style).sort((e, t) => e.getName().localeCompare(t.getName()));
+	return Array.from(e.values()).map((e) => e.style).sort((e, t) => e.getName().localeCompare(t.getName()));
 })();
 function a(e) {
 	return typeof e == "object" && !!e && "type" in e && e.type === "geojson";
 }
-function o(e, i, a, o = !1) {
-	let s = document.createElement("div"), c = n(e, {
+function o(n, i, a, o = !1) {
+	let s = document.createElement("div"), c = e(n, {
 		target: s,
 		props: i
-	}), l = new t({
+	}), l = new r({
 		closeButton: o,
 		closeOnClick: !1,
 		maxWidth: "none"
 	}).setLngLat(a).setDOMContent(s);
-	return l.on("close", () => r(c)), l;
+	return l.on("close", () => t(c)), l;
+}
+function s(e, t, n) {
+	return o(e, t, n, !0);
 }
 //#endregion
-export { i as MAP_STYLE_OPTIONS, a as isGeoJSONSource, o as mountPopup };
+export { i as MAP_STYLE_OPTIONS, a as isGeoJSONSource, s as mountClickPopup, o as mountPopup };

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

@@ -1,9 +1,9 @@
-import { monitorsManager as e } from "../monitors.svelte.js";
-import { mapManager as t } from "../../map/map.svelte.js";
+import { mapManager as e } from "../../map/map.svelte.js";
+import { monitorsManager as t } from "../monitors.svelte.js";
 import { getCurrentLevel as n } from "../monitor-utils.js";
 import r from "../../components/DataBox.js";
-import * as i from "svelte/internal/client";
 import "svelte/internal/disclose-version";
+import * as i from "svelte/internal/client";
 import "@maptiler/sdk";
 import { area as a } from "@turf/area";
 import { convertArea as o } from "@turf/helpers";
@@ -13,7 +13,7 @@ function l(l, u) {
 	i.push(u, !0);
 	let d = i.state(void 0);
 	i.user_effect(() => {
-		let r = t.map.getSource(u.feature.source), s = e.latest, c = e.meta;
+		let r = e.map.getSource(u.feature.source), s = t.latest, c = t.meta;
 		r.getClusterLeaves(u.feature.properties.cluster_id, u.feature.properties.point_count, 0).then((e) => {
 			if (!e.length || !c || !s) return;
 			let t = e.map((e) => s?.get(e.properties.id)), r = t[0];

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

@@ -0,0 +1,35 @@
+import { monitorsManager as e } from "../monitors.svelte.js";
+import "svelte/internal/disclose-version";
+import * as t from "svelte/internal/client";
+//#region src/lib/monitors/components/MonitorMarkersLegend.svelte
+var n = t.from_html("<div class=\"w-1/5 shrink-0 h-[0.5em] border-l border-black last:relative last:right-px\"><span> </span></div>"), r = t.from_html("<div class=\"min-w-50 flex flex-col bg-white rounded shadow py-[0.5em] px-[1.5em]\"><p class=\"text-center whitespace-nowrap font-semibold\"> </p> <div class=\"map-legend-bar inline-block h-[1.5em] svelte-6hvosy\">&nbsp;</div> <div class=\"flex mb-[1.5em]\"><div class=\"w-1/5 shrink-0 h-[0.5em] border-l border-black\"><span class=\"relative top-[0.5em] right-[0.3em]\">0</span></div> <!></div></div>"), i = {
+	hash: "svelte-6hvosy",
+	code: ".map-legend-bar.svelte-6hvosy {background:linear-gradient(\n			90deg,\n			#00e400 0%,\n			#ffff00 20%,\n			#ff7e00 40%,\n			#ff0000 60%,\n			#8f3f97 80%,\n			#7e0023 100%\n		);}"
+};
+function a(a, o) {
+	t.push(o, !0), t.append_styles(a, i);
+	let s = t.derived(() => e.pollutant === "pm25" ? "PM 2.5" : "Ozone"), c = t.derived(() => e.pollutant === "pm25" ? [
+		12,
+		35,
+		55,
+		150,
+		250
+	] : [
+		55,
+		71,
+		86,
+		106,
+		201
+	]);
+	var l = r(), u = t.child(l), d = t.child(u);
+	t.reset(u);
+	var f = t.sibling(u, 4), p = t.sibling(t.child(f), 2);
+	t.each(p, 17, () => t.get(c), t.index, (e, r, i) => {
+		var a = n(), o = t.child(a);
+		t.set_class(o, 1, `relative top-[0.5em] ${i >= 3 ? "right-[0.8em]" : "right-[0.5em]"}`);
+		var s = t.child(o, !0);
+		t.reset(o), t.reset(a), t.template_effect(() => t.set_text(s, t.get(r))), t.append(e, a);
+	}), t.reset(f), t.reset(l), t.template_effect(() => t.set_text(d, `${t.get(s) ?? ""} Concentration`)), t.append(a, l), t.pop();
+}
+//#endregion
+export { a as default };

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

@@ -1,6 +1,6 @@
 import { monitorsManager as e } from "../monitors.svelte.js";
-import * as t from "svelte/internal/client";
 import "svelte/internal/disclose-version";
+import * as t from "svelte/internal/client";
 import { BellCheckIcon as n, BellOffIcon as r, ChevronDownIcon as i } from "@lucide/svelte";
 import { getSubscriptions as a, subscribe as o, unsubscribe as s } from "@sjvair/sdk/account";
 //#region src/lib/monitors/components/MonitorSubscriptionManager.svelte

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

@@ -1,8 +1,8 @@
 import { monitorsManager as e } from "../monitors.svelte.js";
 import { getCurrentLevel as t } from "../monitor-utils.js";
 import n from "../../components/DataBox.js";
-import * as r from "svelte/internal/client";
 import "svelte/internal/disclose-version";
+import * as r from "svelte/internal/client";
 import { format as i, formatDistanceToNow as a } from "date-fns";
 //#region src/lib/monitors/components/MonitorTooltip.svelte
 var o = r.from_html("<div class=\"flex gap-2\"><!> <div class=\"flex flex-col\"><p> </p> <h1 class=\"text-lg font-bold underline\"> </h1> <div class=\"mt-auto\"><p class=\"text-base leading-none\">Last updated</p> <p class=\"text-base leading-none\"> </p></div></div></div>");

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

@@ -1,6 +1,6 @@
 import { portal as e } from "../../actions.js";
-import * as t from "svelte/internal/client";
 import "svelte/internal/disclose-version";
+import * as t from "svelte/internal/client";
 import { SquareX as n } from "@lucide/svelte";
 import { origin as r } from "@sjvair/sdk/http";
 //#region src/lib/monitors/components/MonitorWidgetModal.svelte

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

@@ -1,67 +1,76 @@
-import { monitorsManager as e } from "../monitors.svelte.js";
-import { monitorsMapIntegration as t } from "../monitors-map-integration.svelte.js";
-import n from "../../components/DisplayOption.js";
-import r from "../../components/SegmentedControl.js";
-import i from "../../components/ToggleSwitch.js";
-import * as a from "svelte/internal/client";
+import e from "../../components/DisplayOption.js";
+import t from "../../components/SegmentedControl.js";
+import n from "../../components/ToggleSwitch.js";
+import { monitorsManager as r } from "../monitors.svelte.js";
+import { monitorsMapIntegration as i } from "../monitors-map-integration.svelte.js";
 import "svelte/internal/disclose-version";
+import * as a from "svelte/internal/client";
 //#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(() => r.pollutant && r.pollutant === "pm25" ? Object.entries(i.displayOptions) : Object.entries(i.displayOptions).filter(([e, t]) => e === "inactive" || r.meta?.asIter.monitors.some((e) => e.label === t.label && r.pollutant && r.pollutant in e.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), {
+		r.list = [], r.latest = null, r.update();
+	}), e(l, {
+		children: (e, l) => {
+			var u = c(), p = a.sibling(a.first_child(u), 2), m = a.child(p);
+			n(a.child(m), {
 				id: "monitor-clusters",
 				label: "Marker Clusters",
 				get value() {
-					return t.clustered;
+					return i.clustered;
 				},
 				set value(e) {
-					t.clustered = e;
+					i.clustered = e;
 				}
-			}), a.reset(p);
-			var m = a.sibling(p, 2), h = (t) => {
-				r(t, {
+			}), a.reset(m);
+			var h = a.sibling(m, 2), g = (e) => {
+				t(e, {
 					segmentLabel: "Pollutant:",
 					get options() {
-						return u;
+						return d;
 					},
 					get group() {
-						return e.pollutant;
+						return r.pollutant;
 					},
-					set group(t) {
-						e.pollutant = t;
+					set group(e) {
+						r.pollutant = e;
 					}
 				});
 			};
-			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, (e) => {
+				r.pollutant && e(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(e, u);
 		},
 		$$slots: { default: !0 }
 	}), a.pop();
 }
 //#endregion
-export { c as default };
+export { l as default };

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

@@ -1,5 +1,5 @@
-import { monitorsManager as e } from "./monitors.svelte.js";
-import { mapManager as t } from "../map/map.svelte.js";
+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";
@@ -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,28 +20,35 @@ 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;
 	}
 	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) {
+				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,
-							e,
+							t,
 							o.name,
 							i
-						].filter(Boolean).join("-"), s = n(this.transformSvg(a(o.color, l, e === "inside" ? "#000000" : void 0)));
+						].filter(Boolean).join("-"), s = n(this.transformSvg(a(o.color, l, t === "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));
+							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();
@@ -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

@@ -1,5 +1,5 @@
-import { monitorsManager as e } from "./monitors.svelte.js";
-import { mapManager as t } from "../map/map.svelte.js";
+import { mapManager as e } from "../map/map.svelte.js";
+import { monitorsManager as t } from "./monitors.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";
@@ -67,66 +67,72 @@ 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) => {
+	handleMonitorClick = (t) => {
 		if (!this.onMonitorClick) return;
-		let n = [...e].sort((e, t) => (t.properties?.order ?? 0) - (e.properties?.order ?? 0))[0];
+		let n = [...t].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({
+		e.map?.easeTo({
 			center: r,
-			zoom: Math.max(t.map.getZoom(), 12)
+			zoom: Math.max(e.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) => {
+	#i = f.derived(() => {
+		if (!t.meta || !t.latest || !t.pollutant) return [];
+		let e = t.meta.entryType(t.pollutant).asIter.levels;
+		return Array.from(t.latest.values().map((t) => {
 			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
+					id: t.id,
+					is_active: t.is_active,
+					is_sjvair: t.is_sjvair,
+					location: t.location,
+					name: t.name,
+					order: l(t),
+					type: t.type,
+					value: t.latest.value
 				},
-				geometry: e.position
+				geometry: t.position
 			};
-			if (t) {
-				let r = c(e.latest.value, t);
-				r && (n.properties.icon = a(e, r));
+			if (e) {
+				let r = c(t.latest.value, e);
+				r && (n.properties.icon = a(t, r));
 			}
 			return n;
 		}));
 	});
 	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(() => !t.meta || !t.pollutant ? [] : t.meta.entryType(t.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 {
@@ -219,27 +225,27 @@ var m = {
 	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));
+				let t = this.filters;
+				e.map && (this.clustered ? this.renderer.syncFilter() : e.map.getLayer(this.referenceId) && e.map.setFilter(this.referenceId, t));
 			}), f.user_effect(() => {
-				let e = this.features;
-				!t.map || this.clustered || t.setDataSource(this.referenceId, e);
+				let t = this.features;
+				!e.map || this.clustered || e.setDataSource(this.referenceId, t);
 			}), f.user_effect(() => {
-				this.featuresByType, !(!t.map || !this.clustered) && this.renderer.syncFeatures();
+				this.featuresByType, !(!e.map || !this.clustered) && this.renderer.syncFeatures();
 			}), f.user_effect(() => {
-				let e = this.clusterIconThresholds;
-				!t.map || !this.clustered || !e.length || this.renderer.syncThresholds();
+				let t = this.clusterIconThresholds;
+				!e.map || !this.clustered || !t.length || this.renderer.syncThresholds();
 			}), f.user_effect(() => {
 				this.clustered;
-				let e = Object.keys(this.featuresByType).length > 0;
-				!p(() => t.map) || !e || p(() => this.apply());
+				let t = Object.keys(this.featuresByType).length > 0;
+				!p(() => e.map) || !t || p(() => this.apply());
 			}), f.user_effect(() => {
-				this.selectedMonitorId, t.map && p(() => this.applySelectedState());
+				this.selectedMonitorId, e.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(() => {
+		e.map && (this.tooltipManager.has(this.referenceId) || this.tooltipManager.register(this.referenceId, d), this.clustered ? (e.map.getLayer(this.referenceId) && e.map.removeLayer(this.referenceId), e.map.getSource(this.referenceId) && e.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();
@@ -249,15 +255,15 @@ var m = {
 		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 ? [
+		if (!e.map) return;
+		let t = 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);
+		for (let r of t) e.map.getLayer(r) && e.map.setLayoutProperty(r, "icon-size", n);
 	}
 }();
 //#endregion