@sjvair/monitor-map 3.0.1 → 3.0.3

package/src/lib/MonitorDetailPanel.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import type { SJVAirEntryLevel } from "@sjvair/sdk";
+	import DataBox from "$lib/components/DataBox.svelte";
+	import MonitorWidgetModal from "$lib/monitors/components/MonitorWidgetModal.svelte";
+	import MonitorSubscriptionManager from "$lib/monitors/components/MonitorSubscriptionManager.svelte";
+	import DataChart from "$lib/data-chart/DataChart.svelte";
+	import { monitorsManager } from "$lib";
+	import { useMonitorMapRouter } from "./router-context";
+	import { fetchTempByCoords } from "$lib/weather.ts";
+	import { Colors, valueToColor } from "$lib/colors";
+	import { getCurrentLevel } from "$lib/monitors/monitor-utils.ts";
+
+	type TempDataBox = Pick<ComponentProps<typeof DataBox>, "color" | "value">;
+
+	interface BadgeOpts {
+		bgClass?: string;
+		iconColorClass?: string;
+		labelColorClass?: string;
+		href?: string;
+	}
+	const { route, navigate, basePath } = useMonitorMapRouter();
+
+	const monitor = $derived(monitorsManager.latest?.get(route.params.id ?? ""));
+	let tempData: TempDataBox | undefined = $state();
+	const entryData: ComponentProps<typeof DataBox> | undefined = $derived.by(() => {
+		if (!monitor || !monitorsManager.meta) return;
+
+		const entryType = monitorsManager.meta.entryType(monitor.latest.entry_type);
+		const level: SJVAirEntryLevel | undefined = getCurrentLevel(
+			monitor.latest.value,
+			entryType.asIter.levels!
+		);
+
+		const updateDuration = monitorsManager.meta.monitorType(monitor.type).expected_interval;
+
+		return {
+			color: level?.color ?? "",
+			header: entryType.label,
+			subheading: `(${updateDuration} avg)`,
+			value: Math.round(parseInt(monitor.latest.value, 10)).toString()
+		};
+	});
+
+	const tempColors = [
+		{ min: -Infinity, color: Colors.blue },
+		{ min: 65, color: Colors.green },
+		{ min: 78, color: Colors.yellow },
+		{ min: 95, color: Colors.red }
+	];
+
+	$effect(() => {
+		if (monitor && monitor.position) {
+			fetchTempByCoords(monitor.position.coordinates).then((temperature) => {
+				tempData = {
+					value: `${temperature}°F`,
+					color: valueToColor(temperature, tempColors)
+				};
+			});
+		}
+	});
+</script>
+
+{#snippet badge(icon: string, label: string, opts: BadgeOpts = {})}
+	<span
+		class="flex items-center justify-center gap-1 rounded-sm border px-1 py-0.5
+    {opts.bgClass ?? 'bg-neutral-100'}"
+	>
+		<span class={["svg-icon", icon, opts.iconColorClass ?? "bg-black/70"]}></span>
+		{#if opts.href}
+			<a class="text-link text-xs" href={opts.href} target="_blank" translate="no">{label}</a>
+		{:else}
+			<span
+				class={["text-xs whitespace-nowrap", opts.labelColorClass ?? "text-black/70"]}
+				translate="no">{label}</span
+			>
+		{/if}
+	</span>
+{/snippet}
+
+<div class="flex h-full w-full flex-col overflow-y-auto bg-white">
+	<div
+		class="flex flex-col items-center justify-center gap-8 border-b border-gray-200 p-4 shadow-lg"
+	>
+		<button
+			class="cursor-pointer self-end rounded border border-gray-300 px-2 py-1 text-sm hover:bg-gray-50"
+			onclick={() => navigate(`${basePath}/`)}
+		>
+			✕ Close
+		</button>
+		{#if monitor}
+			<h2 class="text-center text-3xl font-semibold">{monitor.name}</h2>
+			<div class="flex flex-wrap items-center justify-center gap-4">
+				{#if monitor.is_sjvair}
+					{@render badge("lungs", "SJVAir", {
+						bgClass: "bg-aqua-haze",
+						iconColorClass: "bg-sky-600",
+						labelColorClass: "text-sky-600"
+					})}
+				{/if}
+
+				{@render badge("rss-feed", monitor.data_source.name, { href: monitor.data_source.url })}
+				{@render badge("router", monitor.device)}
+				{@render badge("location-on", monitor.county)}
+				{@render badge("location-searching", monitor.location)}
+			</div>
+		{/if}
+	</div>
+
+	<div class="flex flex-col items-center gap-12 overflow-y-auto p-5 pt-10">
+		{#if monitor}
+			<div class="flex w-full justify-around">
+				{#if tempData}
+					<DataBox color={tempData.color} header="Temperature" value={tempData.value} />
+				{/if}
+				{#if entryData}
+					<DataBox
+						color={entryData.color}
+						header={entryData.header}
+						subheading={entryData.subheading}
+						value={entryData.value}
+					/>
+				{/if}
+			</div>
+
+			<MonitorWidgetModal monitorId={monitor.id} />
+			<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+			{#if (globalThis as any).USER?.is_authenticated}
+				<MonitorSubscriptionManager monitorId={monitor.id} />
+			{/if}
+
+			<div class="w-full">
+				<DataChart {monitor} />
+			</div>
+
+			<div class="w-full">
+				<h3 class="font-semibold">Data Provided Courtesy Of:</h3>
+				<ul>
+					{#each monitor.data_providers as provider, idx (idx)}
+						<li>
+							{#if provider.url}
+								<a class="text-link" href={provider.url} target="_blank">{provider.name}</a>
+							{:else}
+								<span>{provider.name}</span>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	</div>
+</div>

package/src/lib/MonitorMapLayout.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { onDestroy } from "svelte";
+	import LoadScreen, { disable as disableLoadScreen } from "$lib/LoadScreen.svelte";
+	import Map from "$lib/map/Map.svelte";
+	import Menu from "$lib/map/Menu.svelte";
+	import MonitorsDisplayOptions from "$lib/monitors/components/MonitorsDisplayOptions.svelte";
+	import MapLayersDisplayOptions from "$lib/components/MapLayersDisplayOptions.svelte";
+	import MapStyleDisplayOptions from "$lib/map/MapStyleDisplayOptions.svelte";
+	import { mapManager } from "$lib/map/map.svelte";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte";
+	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte.ts";
+	import { windMapIntegration } from "$lib/wind/wind.svelte";
+	import { baseLayerSeperator } from "$lib/map/integrations/base-layer-seperator";
+	import type { SomeMapIntegration } from "$lib/map/integrations/types";
+	import { collocationSitesManager } from "$lib/collocation-sites/collocations.svelte";
+	import { collocationSitesMapIntegration } from "$lib/collocation-sites/collocations-map-integration.svelte";
+	import EvStationsDisplayOptions from "$lib/ev-stations/components/EvStationsDisplayOptions.svelte";
+	import { evStationsMapIntegration } from "$lib/ev-stations/ev-stations-map-integration.svelte.ts";
+	import { hmsManager } from "$lib/hms/hms.svelte.ts";
+	import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte.ts";
+	import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte.ts";
+	import MapLegend from "$lib/MapLegend.svelte";
+	import Search from "$lib/search/Search.svelte";
+	import { useMonitorMapRouter } from "./router-context";
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	const { route, navigate, basePath } = useMonitorMapRouter();
+
+	const TRANSITION_MS = 300;
+
+	const integrations: Array<SomeMapIntegration> = [
+		baseLayerSeperator,
+		collocationSitesMapIntegration,
+		windMapIntegration,
+		hmsSmokeMapIntegration,
+		hmsFireMapIntegration,
+		monitorsMapIntegration,
+		evStationsMapIntegration
+	];
+
+	monitorsManager.init(route.search.pollutant);
+	collocationSitesManager.init();
+	hmsManager.init();
+	monitorsMapIntegration.onMonitorClick = (id: string) => {
+		navigate(`${basePath}/monitor/:id`, { params: { id } }).catch(console.error);
+	};
+
+	let panelOpen = $derived(route.pathname.startsWith(`${basePath}/monitor/`));
+
+	$effect(() => {
+		if (mapManager.map && monitorsManager.initialized) {
+			mapManager.map.once("idle", () => disableLoadScreen());
+		}
+	});
+
+	$effect(() => {
+		if (panelOpen) {
+			// Container width snapped to open; resize after layout settles
+			requestAnimationFrame(() => mapManager.map?.resize());
+		} else {
+			// Container width snaps back after the transform transition ends
+			setTimeout(() => mapManager.map?.resize(), TRANSITION_MS);
+		}
+	});
+
+	// Clear selected icon scale when the detail panel closes
+	$effect(() => {
+		if (panelOpen) return;
+		monitorsMapIntegration.selectedMonitorId = null;
+	});
+
+	onDestroy(() => {
+		monitorsManager.autoUpdate.stop();
+	});
+
+	/**
+	 * HACK: Fix for escaping sv-router and allowing navigation to other pages,
+	 * as well as navigating back
+	 */
+	const rootPath = basePath || "/";
+	const knownRoutes = [`${basePath}/monitor/`];
+
+	window.addEventListener("pageshow", (e) => {
+		if (e.persisted) window.location.reload();
+	});
+
+	document.addEventListener(
+		"click",
+		(e) => {
+			const anchor = e
+				.composedPath()
+				.find((el) => el instanceof HTMLAnchorElement) as HTMLAnchorElement;
+			if (!anchor) return;
+			const { pathname } = new URL(anchor.href);
+			const isKnown = pathname === rootPath || knownRoutes.some((r) => pathname.startsWith(r));
+			if (!isKnown) {
+				e.stopImmediatePropagation();
+				window.location.href = anchor.href;
+			}
+		},
+		{ capture: true }
+	);
+</script>
+
+<div class="shell" class:panel-open={panelOpen}>
+	<LoadScreen />
+	<div class="relative flex-1 overflow-hidden">
+		<Map {integrations} />
+		<div class="z-10 absolute bottom-0 left-0 pointer-events-none">
+			<MapLegend />
+		</div>
+		<div class="absolute top-4 left-4 z-10">
+			<div class="absolute z-10">
+				<Menu>
+					<MonitorsDisplayOptions />
+					<EvStationsDisplayOptions />
+					<MapLayersDisplayOptions />
+					<MapStyleDisplayOptions />
+				</Menu>
+			</div>
+			<div class="absolute left-16">
+				<Search />
+			</div>
+		</div>
+	</div>
+	<div class="panel-container">
+		<div class="panel-content">
+			{@render children()}
+		</div>
+	</div>
+</div>
+
+<style>
+	.shell {
+		display: flex;
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.panel-container {
+		flex-shrink: 0;
+		overflow: hidden;
+		width: 0;
+	}
+
+	.shell.panel-open .panel-container {
+		width: 33.333vw;
+	}
+
+	.panel-content {
+		width: 33.333vw;
+		height: 100%;
+		transform: translateX(100%);
+		transition: transform 300ms ease-in-out;
+	}
+
+	.shell.panel-open .panel-content {
+		transform: translateX(0);
+	}
+
+	@media (max-width: 768px) {
+		.shell {
+			flex-direction: column;
+		}
+
+		.panel-container {
+			width: 100vw;
+			height: 0;
+		}
+
+		.shell.panel-open .panel-container {
+			width: 100vw;
+			height: 50vh;
+		}
+
+		.panel-content {
+			width: 100vw;
+			height: 50vh;
+			transform: translateY(100%);
+		}
+
+		.shell.panel-open .panel-content {
+			transform: translateY(0);
+		}
+	}
+</style>

package/src/lib/components/MapLayersDisplayOptions.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { WindIcon, CrosshairIcon, WavesVerticalIcon } from "@lucide/svelte";
 	import DisplayOption from "$lib/components/DisplayOption.svelte";
 	import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
 	import { windMapIntegration } from "$lib/wind/wind.svelte";
@@ -6,20 +7,36 @@
 	import { monitorsManager } from "$lib/monitors/monitors.svelte";
 	import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte";
 	import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte";
+
+	const fireIcon = hmsFireMapIntegration.icons.get("hms-fire-xxl");
 </script>
 
 <DisplayOption>
 	<p class="text-lg font-bold whitespace-nowrap underline">Map Layers</p>
-	<ToggleSwitch id="wind" label="Wind" bind:value={windMapIntegration.enabled}></ToggleSwitch>
+	<div class="flex gap-1 items-center">
+		<WindIcon size="16" />
+		<ToggleSwitch id="wind" label="Wind" bind:value={windMapIntegration.enabled}></ToggleSwitch>
+	</div>
 	{#if monitorsManager.pollutant === "pm25"}
-		<ToggleSwitch
-			id="collocation-sites"
-			label="Collocation Sites"
-			bind:value={collocationSitesMapIntegration.enabled}
-		></ToggleSwitch>
+		<div class="flex gap-1 items-center">
+			<CrosshairIcon size="16" color="#4A5FC6" />
+			<ToggleSwitch
+				id="collocation-sites"
+				label="Collocation Sites"
+				bind:value={collocationSitesMapIntegration.enabled}
+			></ToggleSwitch>
+		</div>
 	{/if}
-	<ToggleSwitch id="hms-fire" label="HMS Fire" bind:value={hmsFireMapIntegration.enabled}
-	></ToggleSwitch>
-	<ToggleSwitch id="hms-smoke" label="HMS Smoke" bind:value={hmsSmokeMapIntegration.enabled}
-	></ToggleSwitch>
+	<div class="flex gap-1 items-center">
+		{#if fireIcon}
+			<img class="w-4" src={fireIcon.image.src} alt={fireIcon.image.alt} />
+		{/if}
+		<ToggleSwitch id="hms-fire" label="HMS Fire" bind:value={hmsFireMapIntegration.enabled}
+		></ToggleSwitch>
+	</div>
+	<div class="flex gap-1 items-center">
+		<WavesVerticalIcon size="16" />
+		<ToggleSwitch id="hms-smoke" label="HMS Smoke" bind:value={hmsSmokeMapIntegration.enabled}
+		></ToggleSwitch>
+	</div>
 </DisplayOption>

package/src/lib/ev-stations/components/EvStationsDisplayOptions.svelte

@@ -2,6 +2,8 @@
 	import DisplayOption from "$lib/components/DisplayOption.svelte";
 	import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
 	import { evStationsMapIntegration } from "../ev-stations-map-integration.svelte";
+
+	const { displayOptions } = evStationsMapIntegration;
 </script>
 
 <DisplayOption>
@@ -15,20 +17,30 @@
 			/>
 		</div>
 	</div>
-	<label for="ev-lvl2" class="cursor-pointer select-none whitespace-nowrap">
+	<label for="ev-lvl2" class="flex gap-1 cursor-pointer select-none whitespace-nowrap">
 		<input
 			type="checkbox"
 			id="ev-lvl2"
 			bind:checked={evStationsMapIntegration.displayOptions.lvl2.value}
 		/>
+		<img
+			class="w-5"
+			src={displayOptions.lvl2.icon!.image.src}
+			alt={displayOptions.lvl2.icon!.image.alt}
+		/>
 		Level 2
 	</label>
-	<label for="ev-lvl3" class="cursor-pointer select-none whitespace-nowrap">
+	<label for="ev-lvl3" class="flex gap-1 cursor-pointer select-none whitespace-nowrap">
 		<input
 			type="checkbox"
 			id="ev-lvl3"
 			bind:checked={evStationsMapIntegration.displayOptions.lvl3.value}
 		/>
+		<img
+			class="w-5"
+			src={displayOptions.lvl3.icon!.image.src}
+			alt={displayOptions.lvl3.icon!.image.alt}
+		/>
 		Level 3
 	</label>
 </DisplayOption>

package/src/lib/ev-stations/ev-stations-map-integration.svelte.ts

@@ -34,10 +34,10 @@ class EvStationsMapIntegration
 	private renderer: EvStationsClusterRenderer = new EvStationsClusterRenderer(this);
 	private currentPopup: Popup | null = null;
 
-	displayOptions = {
-		lvl2: new MapDisplayOption("Level 2", false),
-		lvl3: new MapDisplayOption("Level 3", false)
-	};
+	displayOptions = $derived.by(() => ({
+		lvl2: new MapDisplayOption("Level 2", false, this.icons.get("ev-station-lvl2")!),
+		lvl3: new MapDisplayOption("Level 3", false, this.icons.get("ev-station-lvl3")!)
+	}));
 
 	features: Array<EvStationMapFeature> = $derived.by(() => {
 		const result: EvStationMapFeature[] = [];

package/src/lib/hms/components/HMSFireLegend.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { hmsFireMapIntegration } from "../hms-fire-map-integration.svelte.ts";
+
+	const levels = ["<10", "10-49", "50-149", "150-349", "≥350"];
+</script>
+
+{#if hmsFireMapIntegration.enabled && hmsFireMapIntegration.features.length > 0}
+	<div class="flex flex-col bg-white rounded shadow w-fit p-1">
+		<p class="text-center whitespace-nowrap font-semibold">Fire Points</p>
+		<div class="flex flex-col">
+			{#each hmsFireMapIntegration.icons.iter as [_id, icon], idx (idx)}
+				<div class="flex gap-1 items-center">
+					<div class="size-9 flex justify-center items-center">
+						<img src={icon.image.src} alt={icon.image.alt} />
+					</div>
+					<span>{levels[idx]} MW</span>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}

package/src/lib/index.ts

@@ -1,3 +1,37 @@
+/**
+ * Usage in a host app:
+ *
+ * ```ts
+ * // router.ts
+ * import { createRouter } from "sv-router";
+ * import { monitorMapRoutes } from "@sjvair/monitor-map";
+ *
+ * export const { route, navigate, p, isActive, Router } = createRouter({
+ *   "/my-map": monitorMapRoutes
+ *   // ...the host app's own routes
+ * });
+ * ```
+ *
+ * ```svelte
+ * <!-- app root -->
+ * <script>
+ *   import { provideMonitorMapRouter } from "@sjvair/monitor-map";
+ *   import { route, navigate, p, isActive, Router } from "./router";
+ *
+ *   provideMonitorMapRouter({ route, navigate, p, isActive, basePath: "/my-map" });
+ * </script>
+ *
+ * <Router />
+ * ```
+ */
+export { monitorMapRoutes } from "./routes";
+export {
+	ROUTER_KEY,
+	provideMonitorMapRouter,
+	useMonitorMapRouter,
+	type MonitorMapRouterApi
+} from "./router-context";
+
 // State managers
 export { monitorsManager } from "./monitors/monitors.svelte";
 export type { MonitorsManager } from "./monitors/monitors.svelte";

package/src/lib/map/Map.svelte

@@ -6,6 +6,7 @@
 
 	const { integrations }: { integrations: Array<SomeMapIntegration> } = $props();
 
+	// svelte-ignore state_referenced_locally (we only need the initial reference)
 	integrationsManager.register(...integrations);
 </script>
 

package/src/lib/map/Menu.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Attachment } from "svelte/attachments";
+	import { SlidersHorizontalIcon } from "@lucide/svelte";
 
 	let { children } = $props();
 	let isOpen: boolean = $state(false);
@@ -37,20 +38,16 @@
 	data-trigger
 	class:rounded-full={!isOpen}
 	class:delay-100={!isOpen}
-	class="absolute top-0 left-0 flex items-center justify-center overflow-hidden rounded bg-white p-1 shadow transition-all duration-0 select-none"
+	class="relative top-0 left-0 flex items-center justify-center overflow-hidden rounded bg-white p-1 shadow transition-all duration-0 select-none"
 >
 	<button
 		class:w-0={isOpen}
 		class:h-0={isOpen}
 		class:opacity-0={isOpen}
-		class="relative size-8 transition-all"
+		class="relative size-10 transition-all flex justify-center items-center"
 		aria-label="Display Options"
 	>
-		<enhanced:img
-			src="$lib/assets/icons/adjustment-horizontal.svg"
-			alt="SJVAir Icon"
-			class="size-8"
-		/>
+		<SlidersHorizontalIcon size="24" />
 	</button>
 	<div
 		class:h-55={isOpen}

package/src/lib/map/integrations/map-display-option.svelte.ts

@@ -1,8 +1,12 @@
+import { MapImageIcon } from "./types";
+
 export class MapDisplayOption {
+	icon?: MapImageIcon;
 	label: string;
 	value: boolean;
 
-	constructor(label: string, value: boolean) {
+	constructor(label: string, value: boolean, icon?: MapImageIcon) {
+		this.icon = icon;
 		this.label = label;
 		this.value = $state(value);
 	}

package/src/lib/map/integrations/map-icon-manager.ts

@@ -1,17 +1,21 @@
 import type { Map as MaptilerMap } from "@maptiler/sdk";
-import { XMap } from "@tstk/builtin-extensions";
 import { mapManager } from "../map.svelte.ts";
 import type { MapImageIcon } from "./types";
+import { SvelteMap } from "svelte/reactivity";
 
 export class MapIconManager {
-	protected icons: XMap<string, MapImageIcon> = new XMap();
+	protected icons: SvelteMap<string, MapImageIcon> = new SvelteMap();
 
-	constructor(iconMap?: XMap<string, MapImageIcon>) {
+	constructor(iconMap?: SvelteMap<string, MapImageIcon>) {
 		if (iconMap) {
 			this.icons = iconMap;
 		}
 	}
 
+	get iter(): MapIterator<[string, MapImageIcon]> {
+		return this.icons.entries();
+	}
+
 	get(id: string): MapImageIcon | undefined {
 		return this.icons.get(id);
 	}

package/src/lib/monitors/components/MonitorsDisplayOptions.svelte

@@ -68,8 +68,11 @@
 
 	{#each monitorDisplayOptions as [id, option] (option.label)}
 		{@const inputId = `${id}-monitor-display-option`}
-		<label for={inputId} class="cursor-pointer whitespace-nowrap select-none">
+		<label for={inputId} class="flex gap-1 cursor-pointer whitespace-nowrap select-none">
 			<input type="checkbox" id={inputId} name={option.label} bind:checked={option.value} />
+			{#if option.icon}
+				<img class="w-3" src={option.icon.image.src} alt={option.icon.image.alt} />
+			{/if}
 			{option.label}
 		</label>
 	{/each}

package/src/lib/monitors/monitors-icon-manager.svelte.ts

@@ -7,6 +7,7 @@ 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<T extends MonitorData>(monitor: T, level: SJVAirEntryLevel): string {
 	const id = `${monitor.location}-${monitor.is_active ? level.name : "default"}`;
@@ -43,7 +44,8 @@ export abstract class MonitorShapeIconManager extends MapIconManager {
 				if (monitorsManager.levels) {
 					const iconLevels = [
 						...monitorsManager.levels,
-						{ name: "default", color: MONITOR_ICON_DEFAULT_COLOR }
+						{ name: "default", color: MONITOR_ICON_DEFAULT_COLOR },
+						{ name: "display", color: MONITOR_ICON_DISPLAY_COLOR }
 					];
 
 					for (const location of ["inside", "outside"]) {

package/src/lib/monitors/monitors-map-integration.svelte.ts

@@ -38,15 +38,15 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 	tooltipManager: TooltipManager = new TooltipManager();
 	private renderer: MonitorsClusterRenderer = new MonitorsClusterRenderer(this);
 
-	displayOptions = {
-		purpleair: new MapDisplayOption("PurpleAir", true),
-		sjvair: new MapDisplayOption("SJVAir non-FEM", true),
-		aqview: new MapDisplayOption("AQview", true),
-		bam1022: new MapDisplayOption("SJVAir FEM", true),
-		airnow: new MapDisplayOption("AirNow", true),
-		inactive: new MapDisplayOption("Inactive", false),
-		inside: new MapDisplayOption("Inside", false)
-	};
+	displayOptions = $derived.by(() => ({
+		purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-square")),
+		sjvair: new MapDisplayOption("SJVAir non-FEM", true, this.icons.get("outside-display-circle")),
+		aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
+		bam1022: new MapDisplayOption("SJVAir FEM", true, this.icons.get("outside-display-triangle")),
+		airnow: new MapDisplayOption("AirNow", true, this.icons.get("outside-display-triangle")),
+		inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-square")),
+		inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-square"))
+	}));
 
 	/** Set by the app to handle navigation when a monitor is clicked. Receives the monitor ID. */
 	onMonitorClick: ((id: string) => void) | null = null;

package/src/lib/monitors/monitors.svelte.ts

@@ -7,7 +7,6 @@ import {
 	type MonitorsMeta,
 	type SJVAirEntryLevel
 } from "@sjvair/sdk";
-import { route } from "../../router.ts";
 import { XMap } from "@tstk/builtin-extensions";
 import { Interval } from "@tstk/utils";
 
@@ -26,12 +25,11 @@ class MonitorsManager {
 		this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null
 	);
 
-	async init(): Promise<void> {
+	async init(urlPollutant?: string | number | boolean): Promise<void> {
 		if (this.initialized) return;
 
 		[this.list, this.meta] = await Promise.all([getMonitors(), getMonitorsMeta()]);
 
-		const urlPollutant = route.search.pollutant;
 		this.pollutant =
 			urlPollutant === "pm25" || urlPollutant === "o3" ? urlPollutant : this.meta.default_pollutant;
 		this.latest = await getMonitorsLatestMap(this.pollutant);