@sjvair/monitor-map 3.6.3 → 4.0.0

package/src/lib/monitors/monitor-groups.ts

@@ -0,0 +1,20 @@
+/** Monitor display-option keys shown under each Monitors menu group, in display order. */
+export const REFERENCE_GRADE_TYPES = ["airnow", "aqlite", "aqview", "bam1022"] as const;
+export const LOW_COST_TYPES = ["airgradient", "purpleair", "vozbox"] as const;
+
+export type MonitorGroupType =
+	(typeof REFERENCE_GRADE_TYPES)[number] | (typeof LOW_COST_TYPES)[number];
+
+/** The slice of MonitorsMeta needed to know which pollutants a monitor type reports. */
+export interface MonitorTypeMeta {
+	monitors: Record<string, { entries: Record<string, unknown> } | undefined>;
+}
+
+export function typeSupportsPollutant(
+	meta: MonitorTypeMeta | null,
+	type: string,
+	pollutant: string | null
+): boolean {
+	const deviceMeta = meta?.monitors[type];
+	return !!deviceMeta && !!pollutant && pollutant in deviceMeta.entries;
+}

package/src/lib/monitors/monitor-utils.ts

@@ -40,18 +40,14 @@ export function getOrder(monitor: MonitorData): number {
 
 export function getTypeShape(type: string): string {
 	switch (type) {
-		case "airgradient":
-			return "circle";
-
 		case "airnow":
 		case "aqview":
 		case "bam1022":
 		case "aqlite":
 			return "triangle";
 
+		case "airgradient":
 		case "purpleair":
-			return "square";
-
 		case "vozbox":
 			return "circle";
 

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

@@ -13,23 +13,17 @@ export function getIconId<T extends MonitorData>(monitor: T, level: SJVAirEntryL
 	const id = `${monitor.location}-${monitor.is_active ? level.name : "default"}`;
 
 	switch (monitor.type) {
-		case "airgradient":
-			return `${id}-circle`;
-
 		case "airnow":
 		case "aqview":
 		case "bam1022":
+		case "aqlite":
 			return `${id}-triangle`;
 
+		case "airgradient":
 		case "purpleair":
-			return `${id}-${monitor.is_sjvair ? "circle" : "square"}`;
-
 		case "vozbox":
 			return `${id}-circle`;
 
-		case "aqlite":
-			return `${id}-triangle`;
-
 		default:
 			throw new Error(`Map icon for ${monitor.device} has not been set`);
 	}

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

@@ -20,12 +20,6 @@ import type { MonitorMapFeature, MonitorMarkerProperties, MonitorsDataSource } f
 const filters = {
 	monitor(deviceType: MonitorType): ExpressionSpecification {
 		return ["==", ["get", "type"], deviceType];
-	},
-	purpleair(): ExpressionSpecification {
-		return ["all", ["==", ["get", "type"], "purpleair"], ["==", ["get", "is_sjvair"], false]];
-	},
-	sjvPurpleair(): ExpressionSpecification {
-		return ["all", ["==", ["get", "type"], "purpleair"], ["==", ["get", "is_sjvair"], true]];
 	}
 };
 
@@ -39,13 +33,17 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 	private renderer: MonitorsClusterRenderer = new MonitorsClusterRenderer(this);
 
 	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")),
-		vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
 		aqlite: new MapDisplayOption("AQLite", true, this.icons.get("outside-display-triangle")),
+		aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
+		bam1022: new MapDisplayOption("SJVAir", true, this.icons.get("outside-display-triangle")),
+		airgradient: new MapDisplayOption(
+			"AirGradient",
+			true,
+			this.icons.get("outside-display-circle")
+		),
+		purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-circle")),
+		vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
 		inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-square")),
 		inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-square"))
 	}));
@@ -115,14 +113,13 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 		];
 		const statusFilters: ExpressionSpecification = ["any", ["==", ["get", "is_active"], true]];
 
-		if (this.displayOptions.purpleair.value) monitorFilters.push(filters.purpleair());
+		if (this.displayOptions.airnow.value) monitorFilters.push(filters.monitor("airnow"));
+		if (this.displayOptions.aqlite.value) monitorFilters.push(filters.monitor("aqlite"));
 		if (this.displayOptions.aqview.value) monitorFilters.push(filters.monitor("aqview"));
 		if (this.displayOptions.bam1022.value) monitorFilters.push(filters.monitor("bam1022"));
-		if (this.displayOptions.airnow.value) monitorFilters.push(filters.monitor("airnow"));
+		if (this.displayOptions.airgradient.value) monitorFilters.push(filters.monitor("airgradient"));
+		if (this.displayOptions.purpleair.value) monitorFilters.push(filters.monitor("purpleair"));
 		if (this.displayOptions.vozbox.value) monitorFilters.push(filters.monitor("vozbox"));
-		if (this.displayOptions.aqlite.value) monitorFilters.push(filters.monitor("aqlite"));
-		if (this.displayOptions.sjvair.value)
-			monitorFilters.push(filters.sjvPurpleair(), filters.monitor("airgradient"));
 		if (this.displayOptions.inside.value)
 			locationFilters.push(["==", ["get", "location"], "inside"]);
 		if (this.displayOptions.inactive.value) statusFilters.push(["==", ["get", "is_active"], false]);
@@ -131,8 +128,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 	});
 
 	// Groups features by monitor type for per-type cluster sources, applying display option
-	// filters so cluster aggregates only include visible monitors. sjvair purpleair is remapped
-	// to "airgradient" since they share the same shape (circle).
+	// filters so cluster aggregates only include visible monitors.
 	featuresByType: Record<string, MonitorMapFeature[]> = $derived.by(() => {
 		const opts = this.displayOptions;
 		const byType: Record<string, MonitorMapFeature[]> = {};
@@ -144,20 +140,19 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			if (p.location === "inside" && !opts.inside.value) continue;
 
 			const typeVisible: Partial<Record<MonitorType, boolean>> = {
-				purpleair: p.is_sjvair ? opts.sjvair.value : opts.purpleair.value,
-				airgradient: opts.sjvair.value,
+				airnow: opts.airnow.value,
+				aqlite: opts.aqlite.value,
 				aqview: opts.aqview.value,
 				bam1022: opts.bam1022.value,
-				airnow: opts.airnow.value,
-				vozbox: opts.vozbox.value,
-				aqlite: opts.aqlite.value
+				airgradient: opts.airgradient.value,
+				purpleair: opts.purpleair.value,
+				vozbox: opts.vozbox.value
 			};
 			if (!(typeVisible[p.type] ?? true)) continue;
 
-			const key = p.type === "purpleair" && p.is_sjvair ? "airgradient" : p.type;
-			const arr = byType[key] ?? [];
+			const arr = byType[p.type] ?? [];
 			arr.push(feat);
-			byType[key] = arr;
+			byType[p.type] = arr;
 		}
 		return byType;
 	});
@@ -200,12 +195,20 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 		this.icons = new MonitorsIconManager(dataSource);
 
 		$effect.root(() => {
+			// Every effect below early-returns while disabled (Pollutant = None) so a data refresh
+			// can't re-add the layer. `enabled` is read untracked: the base class's own effect
+			// already applies/removes on enabled changes, and tracking it here would apply twice.
+			// The guard comes after each effect's tracked reads so its dependencies are always
+			// collected; returning before reading anything would leave the effect permanently dead.
+
 			// Push filter changes to the active layer(s) imperatively
 			$effect(() => {
 				const filter = this.filters;
+				const clustered = this.clustered;
 				if (!mapManager.map) return;
+				if (!untrack(() => this.enabled)) return;
 
-				if (this.clustered) {
+				if (clustered) {
 					this.renderer.syncFilter();
 				} else {
 					if (mapManager.map.getLayer(this.referenceId)) {
@@ -218,6 +221,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			$effect(() => {
 				const features = this.features;
 				if (!mapManager.map || this.clustered) return;
+				if (!untrack(() => this.enabled)) return;
 				mapManager.setDataSource(this.referenceId, features);
 			});
 
@@ -225,6 +229,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			$effect(() => {
 				void this.featuresByType;
 				if (!mapManager.map || !this.clustered) return;
+				if (!untrack(() => this.enabled)) return;
 				this.renderer.syncFeatures();
 			});
 
@@ -232,6 +237,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			$effect(() => {
 				const thresholds = this.clusterIconThresholds;
 				if (!mapManager.map || !this.clustered || !thresholds.length) return;
+				if (!untrack(() => this.enabled)) return;
 				this.renderer.syncThresholds();
 			});
 
@@ -242,6 +248,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 				void this.clustered;
 				const hasFeatures = Object.keys(this.featuresByType).length > 0;
 				if (!untrack(() => mapManager.map) || !hasFeatures) return;
+				if (!untrack(() => this.enabled)) return;
 				untrack(() => this.apply());
 			});
 
@@ -268,6 +275,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			this.tooltipManager.disable();
 			this.renderer.remove();
 			this.icons.loadIcons().then(() => {
+				if (mapManager.styleLoading) return;
 				this.renderer.apply(this.handleMonitorClick);
 				this.tooltipManager.enable();
 				this.applySelectedState();
@@ -279,6 +287,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 			clickManager.unregister([this.referenceId]);
 			super.apply();
 			this.icons.loadIcons().then(() => {
+				if (mapManager.styleLoading) return;
 				clickManager.register([this.referenceId], this.handleMonitorClick);
 				this.applySelectedState();
 			});
@@ -286,6 +295,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMarkerProper
 	}
 
 	remove() {
+		this.tooltipManager.disable();
 		clickManager.unregister([this.referenceId]);
 		this.renderer.remove();
 		super.remove();

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

@@ -9,6 +9,7 @@ import {
 } from "@sjvair/sdk";
 import { XMap } from "@tstk/builtin-extensions";
 import { Interval } from "@tstk/utils";
+import { untrack } from "svelte";
 import type { MonitorsDataSource } from "./types";
 
 class MonitorsManager implements MonitorsDataSource {
@@ -26,6 +27,27 @@ class MonitorsManager implements MonitorsDataSource {
 		this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null
 	);
 
+	constructor() {
+		// Refetch monitors when the pollutant changes after the initial load, wherever the change
+		// comes from (Pollutant menu, URL sync, a host's own UI). Clearing first blanks the markers
+		// instead of briefly coloring them with the previous pollutant's readings.
+		let fetchedPollutant: string | null = null;
+		$effect.root(() => {
+			$effect(() => {
+				const pollutant = this.pollutant;
+				if (!this.initialized) return;
+				if (fetchedPollutant !== null && fetchedPollutant !== pollutant) {
+					untrack(() => {
+						this.list = [];
+						this.latest = null;
+						this.update();
+					});
+				}
+				fetchedPollutant = pollutant;
+			});
+		});
+	}
+
 	async init(urlPollutant?: string | number | boolean): Promise<void> {
 		if (this.initialized) return;
 

package/src/lib/options/OptionsBar.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { Attachment } from "svelte/attachments";
+	import { MenuIcon, XIcon } from "@lucide/svelte";
+	import { provideOptionsMenus } from "./options-state.svelte.js";
+	import { isWideLayout, WIDE_LAYOUT_QUERY } from "./layout";
+
+	interface Props {
+		/** OptionsGroup / OptionsMenu content */
+		children?: Snippet;
+		/** Rendered last in the toolbar (wide) or beside the menu button (narrow) */
+		search?: Snippet;
+	}
+
+	let { children, search }: Props = $props();
+
+	const menus = provideOptionsMenus();
+	const panelId = "monitor-map-options-panel";
+	let panelOpen = $state(false);
+
+	// Toolbar only: clicks outside close any click-opened dropdown; clicks inside never do.
+	const closeOnOutsideClick: Attachment<HTMLElement> = (node) => {
+		function handler(e: MouseEvent) {
+			if (isWideLayout() && !node.contains(e.target as Node)) menus.closeAll();
+		}
+		document.addEventListener("click", handler);
+		return () => document.removeEventListener("click", handler);
+	};
+
+	// Open menus mean different things in the toolbar (dropdowns) and the panel (expanded
+	// sections), so crossing the breakpoint (e.g. rotating a phone) starts from a closed state.
+	$effect(() => {
+		const query = window.matchMedia(WIDE_LAYOUT_QUERY);
+		function onchange() {
+			menus.closeAll();
+			panelOpen = false;
+		}
+		query.addEventListener("change", onchange);
+		return () => query.removeEventListener("change", onchange);
+	});
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.key !== "Escape") return;
+		panelOpen = false;
+		if (isWideLayout()) menus.closeAll();
+	}
+</script>
+
+<svelte:window {onkeydown} />
+
+<!-- Covers the map area so the narrow panel can fill it; passes pointer events through. -->
+<div class="pointer-events-none absolute inset-0 z-10">
+	<div
+		{@attach closeOnOutsideClick}
+		class="md:absolute md:top-4 md:right-16 md:left-4 md:flex md:flex-wrap md:items-start md:gap-2"
+	>
+		<div
+			class="pointer-events-auto flex items-start gap-2 max-md:absolute max-md:top-4 max-md:left-4 md:contents"
+		>
+			<button
+				type="button"
+				class="flex size-10 shrink-0 items-center justify-center rounded-md bg-white shadow md:hidden"
+				aria-label="Open map options"
+				aria-expanded={panelOpen}
+				aria-controls={panelId}
+				onclick={() => (panelOpen = true)}
+			>
+				<MenuIcon size={22} />
+			</button>
+			{#if search}
+				<div class="md:order-last">{@render search()}</div>
+			{/if}
+		</div>
+		<div
+			id={panelId}
+			class={[
+				"pointer-events-auto md:contents",
+				"max-md:absolute max-md:inset-0 max-md:z-20 max-md:flex max-md:flex-col max-md:gap-2 max-md:overflow-y-auto max-md:bg-white max-md:p-4 max-md:transition-[translate,visibility] max-md:duration-200",
+				!panelOpen && "max-md:invisible max-md:-translate-x-full"
+			]}
+		>
+			<div class="mb-2 flex items-center justify-between md:hidden">
+				<p class="text-lg font-semibold">Map Options</p>
+				<button
+					type="button"
+					class="flex size-9 items-center justify-center rounded-md hover:bg-gray-100"
+					aria-label="Close map options"
+					onclick={() => (panelOpen = false)}
+				>
+					<XIcon size={20} />
+				</button>
+			</div>
+			{@render children?.()}
+		</div>
+	</div>
+</div>

package/src/lib/options/OptionsGroup.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let { children }: { children: Snippet } = $props();
+</script>
+
+<!-- Joined button cluster on the toolbar; a plain stack of sections in the panel. -->
+<div
+	class="flex flex-col gap-2 md:flex-row md:gap-0 md:divide-x md:divide-gray-200 md:rounded-md md:bg-white md:shadow"
+>
+	{@render children()}
+</div>

package/src/lib/options/OptionsMenu.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { ChevronDownIcon } from "@lucide/svelte";
+	import { useOptionsMenus } from "./options-state.svelte.js";
+	import { isWideLayout } from "./layout";
+
+	interface Props {
+		id: string;
+		label: string;
+		icon: Snippet;
+		children: Snippet;
+		disabled?: boolean;
+		/** Anchor the toolbar dropdown to the trigger's right edge */
+		alignRight?: boolean;
+		/** Show only the icon on the toolbar; the panel section still shows the label */
+		iconOnly?: boolean;
+	}
+
+	let {
+		id,
+		label,
+		icon,
+		children,
+		disabled = false,
+		alignRight = false,
+		iconOnly = false
+	}: Props = $props();
+
+	const menus = useOptionsMenus();
+	const contentId = $derived(`monitor-map-options-${id}`);
+	const open = $derived(menus.isOpen(id) && !disabled);
+</script>
+
+<div
+	role="presentation"
+	class="group/menu relative md:first:[&>button]:rounded-l-md md:last:[&>button]:rounded-r-md"
+	onmouseenter={() => {
+		if (isWideLayout()) menus.closeOthers(id);
+	}}
+>
+	<button
+		type="button"
+		{disabled}
+		aria-expanded={open}
+		aria-controls={contentId}
+		aria-label={iconOnly ? label : undefined}
+		class="flex h-10 w-full items-center gap-2 px-3 text-sm font-medium whitespace-nowrap select-none disabled:cursor-not-allowed max-md:rounded-md max-md:border max-md:border-gray-200 max-md:bg-white md:w-auto md:hover:bg-gray-100 md:disabled:hover:bg-transparent"
+		onclick={() => menus.toggle(id)}
+	>
+		<span class={["flex size-5 items-center justify-center", disabled && "opacity-50"]}>
+			{@render icon()}
+		</span>
+		<span class={[disabled && "opacity-50", iconOnly && "md:hidden"]}>{label}</span>
+		<span class={["ml-auto", disabled && "opacity-50", iconOnly && "md:hidden"]}>
+			<ChevronDownIcon size={16} />
+		</span>
+	</button>
+	<div
+		id={contentId}
+		class={[
+			"max-md:pt-1 md:absolute md:top-full md:z-20 md:min-w-64 md:pt-1",
+			alignRight ? "md:right-0" : "md:left-0",
+			open ? "block" : "hidden",
+			!disabled && "md:group-hover/menu:block md:group-has-[:focus-visible]/menu:block"
+		]}
+	>
+		<div class="py-1 md:max-h-[69vh] md:overflow-y-auto md:rounded-md md:bg-white md:shadow-lg">
+			{@render children()}
+		</div>
+	</div>
+</div>

package/src/lib/options/group-state.ts

@@ -0,0 +1,16 @@
+export type GroupState = "checked" | "unchecked" | "indeterminate" | "empty";
+
+/** Select-all state of a group, computed only from its currently visible rows. */
+export function groupState(values: ReadonlyArray<boolean>): GroupState {
+	if (values.length === 0) return "empty";
+	const checkedCount = values.filter(Boolean).length;
+	if (checkedCount === 0) return "unchecked";
+	return checkedCount === values.length ? "checked" : "indeterminate";
+}
+
+/** Applies a select-all toggle to the given (visible) rows only. */
+export function setGroup(options: ReadonlyArray<{ value: boolean }>, value: boolean): void {
+	for (const option of options) {
+		option.value = value;
+	}
+}

package/src/lib/options/layout.ts

@@ -0,0 +1,10 @@
+/**
+ * Tailwind's default `md` breakpoint (48rem). Layout itself is pure CSS (`md:` / `max-md:`);
+ * this is only read at event time for the few behaviors that differ between the toolbar and
+ * the options panel.
+ */
+export const WIDE_LAYOUT_QUERY = "(min-width: 48rem)";
+
+export function isWideLayout(): boolean {
+	return window.matchMedia(WIDE_LAYOUT_QUERY).matches;
+}

package/src/lib/options/map-option-defaults.ts

@@ -0,0 +1,71 @@
+import type { MonitorsPollutant } from "$lib/monitors/types";
+import { applyPollutantSelection, type PollutantTargets } from "./pollutant-param";
+
+/**
+ * Defaults restored by "Reset Map Options". Keep in sync with the constructor defaults in each
+ * integration (monitors/EV display options, `enabled`, `clustered`) so a reset matches a fresh load.
+ */
+export const MAP_OPTION_DEFAULTS = {
+	monitorTypes: {
+		airnow: true,
+		aqlite: true,
+		aqview: true,
+		bam1022: true,
+		airgradient: true,
+		purpleair: true,
+		vozbox: true,
+		inactive: false,
+		inside: false
+	},
+	clustered: true,
+	collocationSites: false,
+	fireAndSmoke: true,
+	evStations: false,
+	evLevels: { lvl2: true, lvl3: true },
+	wind: false
+} as const;
+
+type Toggle = { enabled: boolean };
+type Option = { value: boolean };
+
+export interface MapOptionTargets extends PollutantTargets {
+	integration: PollutantTargets["integration"] & {
+		clustered: boolean;
+		displayOptions: Record<string, Option>;
+	};
+	collocationSites: Toggle;
+	hmsFire: Toggle;
+	hmsSmoke: Toggle;
+	evStations: Toggle & { clustered: boolean; displayOptions: { lvl2: Option; lvl3: Option } };
+	wind: Toggle;
+	mapStyle: { reset(): void };
+}
+
+export function applyMapOptionDefaults(
+	targets: MapOptionTargets,
+	defaultPollutant: MonitorsPollutant | null
+): void {
+	if (defaultPollutant) {
+		applyPollutantSelection(defaultPollutant, targets);
+	} else {
+		targets.integration.enabled = true;
+	}
+
+	for (const [key, value] of Object.entries(MAP_OPTION_DEFAULTS.monitorTypes)) {
+		const option = targets.integration.displayOptions[key];
+		if (option) option.value = value;
+	}
+	targets.integration.clustered = MAP_OPTION_DEFAULTS.clustered;
+
+	targets.collocationSites.enabled = MAP_OPTION_DEFAULTS.collocationSites;
+	targets.hmsFire.enabled = MAP_OPTION_DEFAULTS.fireAndSmoke;
+	targets.hmsSmoke.enabled = MAP_OPTION_DEFAULTS.fireAndSmoke;
+
+	targets.evStations.enabled = MAP_OPTION_DEFAULTS.evStations;
+	targets.evStations.clustered = MAP_OPTION_DEFAULTS.clustered;
+	targets.evStations.displayOptions.lvl2.value = MAP_OPTION_DEFAULTS.evLevels.lvl2;
+	targets.evStations.displayOptions.lvl3.value = MAP_OPTION_DEFAULTS.evLevels.lvl3;
+
+	targets.wind.enabled = MAP_OPTION_DEFAULTS.wind;
+	targets.mapStyle.reset();
+}

package/src/lib/options/menus/LayersMenu.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { FlameIcon, LayersIcon, EvChargerIcon } from "@lucide/svelte";
+	import OptionsMenu from "../OptionsMenu.svelte";
+	import CheckboxRow from "../rows/CheckboxRow.svelte";
+	import SubmenuRow from "../rows/SubmenuRow.svelte";
+	import MarkerIcon from "../rows/MarkerIcon.svelte";
+	import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte";
+	import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte";
+	import { evStationsMapIntegration } from "$lib/ev-stations/ev-stations-map-integration.svelte";
+
+	const levels = $derived(evStationsMapIntegration.displayOptions);
+</script>
+
+<OptionsMenu id="layers" label="Layers">
+	{#snippet icon()}
+		<LayersIcon size={20} color="#708090" />
+	{/snippet}
+	<CheckboxRow
+		label="Fire & Smoke"
+		bind:checked={
+			() => hmsFireMapIntegration.enabled && hmsSmokeMapIntegration.enabled,
+			(value) => {
+				hmsFireMapIntegration.enabled = value;
+				hmsSmokeMapIntegration.enabled = value;
+			}
+		}
+	>
+		{#snippet icon()}
+			<FlameIcon size={18} color="#ff4500" />
+		{/snippet}
+	</CheckboxRow>
+	<SubmenuRow label="EV Chargers" bind:checked={evStationsMapIntegration.enabled}>
+		{#snippet icon()}
+			<EvChargerIcon size={18} color="#708090" />
+		{/snippet}
+		<CheckboxRow label="Level 2" bind:checked={evStationsMapIntegration.displayOptions.lvl2.value}>
+			{#snippet icon()}
+				<MarkerIcon icon={levels.lvl2.icon} class="w-5" />
+			{/snippet}
+		</CheckboxRow>
+		<CheckboxRow label="Level 3" bind:checked={evStationsMapIntegration.displayOptions.lvl3.value}>
+			{#snippet icon()}
+				<MarkerIcon icon={levels.lvl3.icon} class="w-5" />
+			{/snippet}
+		</CheckboxRow>
+	</SubmenuRow>
+</OptionsMenu>

package/src/lib/options/menus/MonitorsMenu.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { CrosshairIcon, RadioTowerIcon } from "@lucide/svelte";
+	import OptionsMenu from "../OptionsMenu.svelte";
+	import CheckboxRow from "../rows/CheckboxRow.svelte";
+	import GroupRow from "../rows/GroupRow.svelte";
+	import MarkerIcon from "../rows/MarkerIcon.svelte";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte";
+	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
+	import { collocationSitesMapIntegration } from "$lib/collocation-sites/collocations-map-integration.svelte";
+	import {
+		LOW_COST_TYPES,
+		REFERENCE_GRADE_TYPES,
+		typeSupportsPollutant,
+		type MonitorGroupType
+	} from "$lib/monitors/monitor-groups";
+
+	// Rows for types that don't report the current pollutant are hidden (meta-driven).
+	function visibleRows(types: ReadonlyArray<MonitorGroupType>) {
+		const displayOptions = monitorsMapIntegration.displayOptions;
+		return types
+			.filter((type) =>
+				typeSupportsPollutant(monitorsManager.meta, type, monitorsManager.pollutant)
+			)
+			.map((type) => ({
+				key: type,
+				label: displayOptions[type].label,
+				option: displayOptions[type]
+			}));
+	}
+
+	const referenceGrade = $derived(visibleRows(REFERENCE_GRADE_TYPES));
+	const lowCost = $derived(visibleRows(LOW_COST_TYPES));
+	const icons = monitorsMapIntegration.icons;
+</script>
+
+<OptionsMenu id="monitors" label="Monitors" disabled={!monitorsMapIntegration.enabled}>
+	{#snippet icon()}
+		<RadioTowerIcon size={20} color="#4682b4" />
+	{/snippet}
+	<GroupRow label="Reference-grade" options={referenceGrade}>
+		{#snippet icon()}
+			<MarkerIcon icon={icons.get("outside-display-triangle")} />
+		{/snippet}
+	</GroupRow>
+	<GroupRow label="Low-cost sensors" options={lowCost}>
+		{#snippet icon()}
+			<MarkerIcon icon={icons.get("outside-display-circle")} />
+		{/snippet}
+	</GroupRow>
+	<hr class="my-1 border-gray-200" />
+	<CheckboxRow label="Inactive" bind:checked={monitorsMapIntegration.displayOptions.inactive.value}>
+		{#snippet icon()}
+			<MarkerIcon icon={monitorsMapIntegration.displayOptions.inactive.icon} />
+		{/snippet}
+	</CheckboxRow>
+	<CheckboxRow label="Inside" bind:checked={monitorsMapIntegration.displayOptions.inside.value}>
+		{#snippet icon()}
+			<MarkerIcon icon={monitorsMapIntegration.displayOptions.inside.icon} />
+		{/snippet}
+	</CheckboxRow>
+	{#if monitorsManager.pollutant === "pm25"}
+		<CheckboxRow label="Collocation Sites" bind:checked={collocationSitesMapIntegration.enabled}>
+			{#snippet icon()}
+				<CrosshairIcon size={16} color="#4A5FC6" />
+			{/snippet}
+		</CheckboxRow>
+	{/if}
+</OptionsMenu>