@sjvair/monitor-map 3.6.3 → 4.0.0

package/dist/lib/options/menus/SettingsMenu.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { ContrastIcon, MapIcon, NetworkIcon, RotateCcwIcon, SettingsIcon } from "@lucide/svelte";
+	import OptionsMenu from "../OptionsMenu.svelte";
+	import CheckboxRow from "../rows/CheckboxRow.svelte";
+	import RadioRow from "../rows/RadioRow.svelte";
+	import { resetMapOptions } from "../reset-map-options";
+	import { MAP_STYLE_OPTIONS } from "../../map/utils";
+	import { mapStyleState } from "../../map/map-style-state.svelte.js";
+	import { monitorsMapIntegration } from "../../monitors/monitors-map-integration.svelte";
+	import { evStationsMapIntegration } from "../../ev-stations/ev-stations-map-integration.svelte";
+</script>
+
+<OptionsMenu id="settings" label="Settings" iconOnly alignRight>
+	{#snippet icon()}
+		<SettingsIcon size={20} color="#696969" />
+	{/snippet}
+	<CheckboxRow
+		label="Marker Clusters"
+		bind:checked={
+			() => monitorsMapIntegration.clustered && evStationsMapIntegration.clustered,
+			(value) => {
+				monitorsMapIntegration.clustered = value;
+				evStationsMapIntegration.clustered = value;
+			}
+		}
+	>
+		{#snippet icon()}
+			<NetworkIcon size={18} color="#1e90ff" />
+		{/snippet}
+	</CheckboxRow>
+	<hr class="my-1 border-gray-200" />
+	<div class="px-3 py-1.5 text-sm">
+		<label for="monitor-map-basemap" class="mb-1 flex items-center gap-2 font-semibold">
+			<MapIcon size={18} color="#708090" />
+			Basemap
+		</label>
+		<select
+			id="monitor-map-basemap"
+			class="w-full rounded-md border border-gray-300 bg-white p-1.5"
+			bind:value={
+				() => mapStyleState.referenceStyle, (style) => mapStyleState.selectReferenceStyle(style)
+			}
+		>
+			{#each MAP_STYLE_OPTIONS as style (style.getId())}
+				<option value={style}>{style.getName()}</option>
+			{/each}
+		</select>
+	</div>
+	<hr class="my-1 border-gray-200" />
+	<p class="flex items-center gap-2 px-3 pt-1.5 text-sm font-semibold">
+		<ContrastIcon size={18} color="#708090" />
+		Theme
+	</p>
+	{#each mapStyleState.referenceStyle.getVariants() as variant (variant.getId())}
+		<RadioRow
+			name="monitor-map-theme"
+			label={variant.getName()}
+			checked={variant === mapStyleState.variant}
+			onselect={() => mapStyleState.selectVariant(variant)}
+		/>
+	{/each}
+	<hr class="my-1 border-gray-200" />
+	<div class="px-3 py-1.5">
+		<button
+			type="button"
+			class="flex w-full items-center justify-center gap-2 rounded-md border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-100"
+			onclick={resetMapOptions}
+		>
+			<RotateCcwIcon size={16} />
+			Reset Map Options
+		</button>
+	</div>
+</OptionsMenu>

package/dist/lib/{hms/components/HMSFireLegend.svelte.d.ts → options/menus/SettingsMenu.svelte.d.ts}

@@ -11,8 +11,8 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const HMSFireLegend: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+declare const SettingsMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type HMSFireLegend = InstanceType<typeof HMSFireLegend>;
-export default HMSFireLegend;
+type SettingsMenu = InstanceType<typeof SettingsMenu>;
+export default SettingsMenu;

package/dist/lib/options/options-state.svelte.d.ts

@@ -0,0 +1,12 @@
+/** Which menus are opened by click: at most one on the toolbar, any number in the panel. */
+export declare class OptionsMenusState {
+    private open;
+    isOpen(id: string): boolean;
+    toggle(id: string): void;
+    /** Hovering another toolbar trigger closes any dropdown left open by a click. */
+    closeOthers(id: string): void;
+    close(id: string): void;
+    closeAll(): void;
+}
+export declare function provideOptionsMenus(): OptionsMenusState;
+export declare function useOptionsMenus(): OptionsMenusState;

package/dist/lib/options/options-state.svelte.js

@@ -0,0 +1,42 @@
+import { getContext, setContext } from "svelte";
+import { SvelteSet } from "svelte/reactivity";
+import { isWideLayout } from "./layout";
+const OPTIONS_MENUS_KEY = Symbol("monitor-map-options-menus");
+/** Which menus are opened by click: at most one on the toolbar, any number in the panel. */
+export class OptionsMenusState {
+    open = new SvelteSet();
+    isOpen(id) {
+        return this.open.has(id);
+    }
+    toggle(id) {
+        if (this.open.has(id)) {
+            this.open.delete(id);
+            return;
+        }
+        if (isWideLayout())
+            this.open.clear();
+        this.open.add(id);
+    }
+    /** Hovering another toolbar trigger closes any dropdown left open by a click. */
+    closeOthers(id) {
+        for (const other of [...this.open]) {
+            if (other !== id)
+                this.open.delete(other);
+        }
+    }
+    close(id) {
+        this.open.delete(id);
+    }
+    closeAll() {
+        this.open.clear();
+    }
+}
+export function provideOptionsMenus() {
+    return setContext(OPTIONS_MENUS_KEY, new OptionsMenusState());
+}
+export function useOptionsMenus() {
+    const menus = getContext(OPTIONS_MENUS_KEY);
+    if (!menus)
+        throw new Error("OptionsMenu must be rendered inside OptionsBar");
+    return menus;
+}

package/dist/lib/options/pollutant-param.d.ts

@@ -0,0 +1,17 @@
+import type { MonitorsPollutant } from "../monitors/types";
+/**
+ * What the Pollutant menu shows. "none" is not a monitorsManager.pollutant value — it means
+ * the monitors integration is disabled while the manager keeps its last real pollutant.
+ */
+export type PollutantSelection = MonitorsPollutant | "none";
+export interface PollutantTargets {
+    manager: {
+        pollutant: MonitorsPollutant | null;
+    };
+    integration: {
+        enabled: boolean;
+    };
+}
+export declare function parsePollutantParam(value: unknown): PollutantSelection | null;
+export declare function currentSelection(pollutant: MonitorsPollutant | null, monitorsEnabled: boolean): PollutantSelection | null;
+export declare function applyPollutantSelection(selection: PollutantSelection, targets: PollutantTargets): void;

package/dist/lib/options/pollutant-param.js

@@ -0,0 +1,14 @@
+export function parsePollutantParam(value) {
+    return value === "pm25" || value === "o3" || value === "none" ? value : null;
+}
+export function currentSelection(pollutant, monitorsEnabled) {
+    return monitorsEnabled ? pollutant : "none";
+}
+export function applyPollutantSelection(selection, targets) {
+    if (selection === "none") {
+        targets.integration.enabled = false;
+        return;
+    }
+    targets.manager.pollutant = selection;
+    targets.integration.enabled = true;
+}

package/dist/lib/options/reset-map-options.d.ts

@@ -0,0 +1,2 @@
+/** "Reset Map Options": restores every map option to its default. */
+export declare function resetMapOptions(): void;

package/dist/lib/options/reset-map-options.js

@@ -0,0 +1,24 @@
+import { monitorsManager } from "../monitors/monitors.svelte";
+import { monitorsMapIntegration } from "../monitors/monitors-map-integration.svelte";
+import { collocationSitesMapIntegration } from "../collocation-sites/collocations-map-integration.svelte";
+import { hmsFireMapIntegration } from "../hms/hms-fire-map-integration.svelte";
+import { hmsSmokeMapIntegration } from "../hms/hms-smoke-map-integration.svelte";
+import { evStationsMapIntegration } from "../ev-stations/ev-stations-map-integration.svelte";
+import { windMapIntegration } from "../wind/wind.svelte";
+import { mapStyleState } from "../map/map-style-state.svelte.js";
+import { applyMapOptionDefaults } from "./map-option-defaults";
+/** "Reset Map Options": restores every map option to its default. */
+export function resetMapOptions() {
+    applyMapOptionDefaults({
+        manager: monitorsManager,
+        integration: monitorsMapIntegration,
+        collocationSites: collocationSitesMapIntegration,
+        hmsFire: hmsFireMapIntegration,
+        hmsSmoke: hmsSmokeMapIntegration,
+        evStations: evStationsMapIntegration,
+        wind: windMapIntegration,
+        // The basemap reset may start loading a new style; integrations skip the style while
+        // mapManager.styleLoading is set and the refresh on "style.load" re-applies them.
+        mapStyle: mapStyleState
+    }, monitorsManager.meta?.default_pollutant ?? null);
+}

package/dist/lib/options/rows/CheckboxRow.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { Attachment } from "svelte/attachments";
+	import { ChevronDownIcon } from "@lucide/svelte";
+
+	interface Props {
+		label: string;
+		checked: boolean;
+		icon?: Snippet;
+		indeterminate?: boolean;
+		disabled?: boolean;
+		/** When set, shows a chevron reflecting whether this row's children are expanded */
+		expanded?: boolean;
+	}
+
+	let {
+		label,
+		checked = $bindable(),
+		icon,
+		indeterminate = false,
+		disabled = false,
+		expanded
+	}: Props = $props();
+
+	// indeterminate is a DOM property with no HTML attribute; re-runs when the prop changes.
+	const syncIndeterminate: Attachment<HTMLInputElement> = (input) => {
+		input.indeterminate = indeterminate;
+	};
+</script>
+
+<label
+	class="flex cursor-pointer items-center gap-2 px-3 py-1.5 text-sm whitespace-nowrap select-none hover:bg-gray-100 has-disabled:cursor-not-allowed has-disabled:opacity-50"
+>
+	<input
+		type="checkbox"
+		class="accent-brand size-4 shrink-0"
+		bind:checked
+		{disabled}
+		{@attach syncIndeterminate}
+	/>
+	{#if icon}
+		<span class="flex size-5 shrink-0 items-center justify-center">{@render icon()}</span>
+	{/if}
+	<span class="flex-1">{label}</span>
+	{#if expanded !== undefined}
+		<ChevronDownIcon
+			size={16}
+			class="ml-3 shrink-0 text-gray-500 transition-transform {expanded ? '' : '-rotate-90'}"
+		/>
+	{/if}
+</label>

package/dist/lib/options/rows/CheckboxRow.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+interface Props {
+    label: string;
+    checked: boolean;
+    icon?: Snippet;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    /** When set, shows a chevron reflecting whether this row's children are expanded */
+    expanded?: boolean;
+}
+declare const CheckboxRow: import("svelte").Component<Props, {}, "checked">;
+type CheckboxRow = ReturnType<typeof CheckboxRow>;
+export default CheckboxRow;

package/dist/lib/options/rows/GroupRow.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import CheckboxRow from "./CheckboxRow.svelte";
+	import SubmenuRow from "./SubmenuRow.svelte";
+	import { groupState, setGroup } from "../group-state";
+
+	interface GroupOption {
+		key: string;
+		label: string;
+		option: { value: boolean };
+	}
+
+	interface Props {
+		label: string;
+		/** Only the rows currently visible; hidden rows are never touched by select-all */
+		options: Array<GroupOption>;
+		icon?: Snippet;
+	}
+
+	let { label, options, icon }: Props = $props();
+
+	const status = $derived(groupState(options.map((child) => child.option.value)));
+</script>
+
+{#if status !== "empty"}
+	<SubmenuRow
+		{label}
+		{icon}
+		indeterminate={status === "indeterminate"}
+		bind:checked={
+			() => status === "checked",
+			(value) =>
+				setGroup(
+					options.map((child) => child.option),
+					value
+				)
+		}
+	>
+		{#each options as child (child.key)}
+			<CheckboxRow label={child.label} bind:checked={child.option.value} />
+		{/each}
+	</SubmenuRow>
+{/if}

package/dist/lib/options/rows/GroupRow.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+interface GroupOption {
+    key: string;
+    label: string;
+    option: {
+        value: boolean;
+    };
+}
+interface Props {
+    label: string;
+    /** Only the rows currently visible; hidden rows are never touched by select-all */
+    options: Array<GroupOption>;
+    icon?: Snippet;
+}
+declare const GroupRow: import("svelte").Component<Props, {}, "">;
+type GroupRow = ReturnType<typeof GroupRow>;
+export default GroupRow;

package/dist/lib/options/rows/MarkerIcon.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import type { MapImageIcon } from "../../map/integrations/types";
+
+	let { icon, class: className = "w-4" }: { icon: MapImageIcon | undefined; class?: string } =
+		$props();
+</script>
+
+{#if icon}
+	<img src={icon.image.src} alt="" class={className} />
+{/if}

package/dist/lib/options/rows/MarkerIcon.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { MapImageIcon } from "../../map/integrations/types";
+type $$ComponentProps = {
+    icon: MapImageIcon | undefined;
+    class?: string;
+};
+declare const MarkerIcon: import("svelte").Component<$$ComponentProps, {}, "">;
+type MarkerIcon = ReturnType<typeof MarkerIcon>;
+export default MarkerIcon;

package/dist/lib/options/rows/RadioRow.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		name: string;
+		label: string;
+		checked: boolean;
+		onselect: () => void;
+		unit?: string;
+		help?: string;
+		icon?: Snippet;
+	}
+
+	let { name, label, checked, onselect, unit, help, icon }: Props = $props();
+</script>
+
+<label
+	class="flex cursor-pointer flex-col gap-0.5 px-3 py-1.5 text-sm select-none hover:bg-gray-100"
+>
+	<span class="flex items-center gap-2 whitespace-nowrap">
+		<input type="radio" class="accent-brand size-4 shrink-0" {name} {checked} onchange={onselect} />
+		{#if icon}
+			<span class="flex size-5 shrink-0 items-center justify-center">{@render icon()}</span>
+		{/if}
+		<span>
+			{label}
+			{#if unit}<span class="text-xs text-gray-500">({unit})</span>{/if}
+		</span>
+	</span>
+	{#if help}
+		<span class="pl-6 text-xs whitespace-normal text-gray-500">{help}</span>
+	{/if}
+</label>

package/dist/lib/options/rows/RadioRow.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+interface Props {
+    name: string;
+    label: string;
+    checked: boolean;
+    onselect: () => void;
+    unit?: string;
+    help?: string;
+    icon?: Snippet;
+}
+declare const RadioRow: import("svelte").Component<Props, {}, "">;
+type RadioRow = ReturnType<typeof RadioRow>;
+export default RadioRow;

package/dist/lib/options/rows/SubmenuRow.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import CheckboxRow from "./CheckboxRow.svelte";
+
+	interface Props {
+		label: string;
+		checked: boolean;
+		indeterminate?: boolean;
+		icon?: Snippet;
+		children: Snippet;
+	}
+
+	let { label, checked = $bindable(), indeterminate = false, icon, children }: Props = $props();
+
+	// Children show only while the parent is (partly) on, as in the demo.
+	const expanded = $derived(checked || indeterminate);
+</script>
+
+<CheckboxRow {label} {icon} {indeterminate} {expanded} bind:checked />
+{#if expanded}
+	<div class="ml-5 border-l border-gray-200">{@render children()}</div>
+{/if}

package/dist/lib/options/rows/SubmenuRow.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+interface Props {
+    label: string;
+    checked: boolean;
+    indeterminate?: boolean;
+    icon?: Snippet;
+    children: Snippet;
+}
+declare const SubmenuRow: import("svelte").Component<Props, {}, "checked">;
+type SubmenuRow = ReturnType<typeof SubmenuRow>;
+export default SubmenuRow;

package/dist/lib/search/Search.svelte

@@ -111,19 +111,19 @@
 
 <div
 	class={[
-		"flex flex-col overflow-hidden bg-white shadow-md transition-all duration-300 select-none",
-		collapsed ? "h-12 w-12 rounded-full" : "w-90 rounded-3xl",
-		!collapsed && results.length ? "max-h-90" : "max-h-12"
+		"flex flex-col overflow-hidden bg-white shadow transition-all duration-300 select-none",
+		collapsed ? "h-10 w-10 rounded-md" : "w-[min(22.5rem,calc(100vw-5.5rem))] rounded-lg",
+		!collapsed && results.length ? "max-h-90" : "max-h-10"
 	]}
 	use:clickOutside
 >
-	<div class="flex h-12 w-full shrink-0 items-center">
+	<div class="flex h-10 w-full shrink-0 items-center">
 		<button
-			class="bg-brand flex h-12 w-12 shrink-0 items-center justify-center rounded-full border-4 border-white"
+			class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md text-gray-700"
 			onclick={openSearch}
 			aria-label="Open search"
 		>
-			<SearchIcon size="24" color="#FFFFFF" />
+			<SearchIcon size="20" />
 		</button>
 		<div class="flex h-full w-full items-center overflow-hidden">
 			<input

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "3.6.3",
+	"version": "4.0.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/SJVAir/monitor-map"
@@ -15,7 +15,8 @@
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
 		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint ."
+		"lint": "prettier --check . && eslint .",
+		"test": "vitest run"
 	},
 	"type": "module",
 	"svelte": "./dist/lib/index.js",
@@ -65,7 +66,8 @@
 		"tw-animate-css": "^1.4.0",
 		"typescript": "^6.0.3",
 		"typescript-eslint": "^8.70.0",
-		"vite": "^8.3.0"
+		"vite": "^8.3.0",
+		"vitest": "^5.0.3"
 	},
 	"dependencies": {
 		"@lucide/svelte": "^1.46.0",

package/src/lib/MonitorMapLayout.svelte

@@ -1,10 +1,25 @@
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { onDestroy, untrack } from "svelte";
+	import { searchParams } from "sv-router";
 	import MapShell from "$lib/map/MapShell.svelte";
-	import MonitorsDisplayOptions from "$lib/monitors/components/MonitorsDisplayOptions.svelte";
-	import MapLayersDisplayOptions from "$lib/components/MapLayersDisplayOptions.svelte";
-	import MapStyleDisplayOptions from "$lib/map/MapStyleDisplayOptions.svelte";
+	import OptionsGroup from "$lib/options/OptionsGroup.svelte";
+	import PollutantMenu from "$lib/options/menus/PollutantMenu.svelte";
+	import MonitorsMenu from "$lib/options/menus/MonitorsMenu.svelte";
+	import LayersMenu from "$lib/options/menus/LayersMenu.svelte";
+	import OverlaysMenu from "$lib/options/menus/OverlaysMenu.svelte";
+	import SettingsMenu from "$lib/options/menus/SettingsMenu.svelte";
+	import {
+		applyPollutantSelection,
+		currentSelection,
+		parsePollutantParam
+	} from "$lib/options/pollutant-param";
+	import Legend from "$lib/legend/Legend.svelte";
+	import {
+		fireSmokeLegendSections,
+		pollutantLegendSection,
+		type LegendSection
+	} from "$lib/legend/legend-data";
 	import { monitorsManager } from "$lib/monitors/monitors.svelte";
 	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
 	import { windMapIntegration } from "$lib/wind/wind.svelte";
@@ -12,14 +27,12 @@
 	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";
 	import { hmsManager } from "$lib/hms/hms.svelte";
 	import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte";
-	import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte";
-	import MapLegend from "$lib/MapLegend.svelte";
+	import { FIRE_LEGEND_CATEGORIES } from "$lib/hms/hms-fire-icon-manager";
+	import { hmsSmokeMapIntegration, SMOKE_LEGEND } from "$lib/hms/hms-smoke-map-integration.svelte";
 	import Search from "$lib/search/Search.svelte";
-	import { searchParams } from "sv-router";
 	import { useMonitorMapRouter } from "./router-context";
 
 	interface Props {
@@ -40,6 +53,14 @@
 		evStationsMapIntegration
 	];
 
+	const pollutantTargets = { manager: monitorsManager, integration: monitorsMapIntegration };
+
+	// "?pollutant=none" must disable monitors before the effects below first run, so the
+	// state->URL effect never sees enabled monitors and overwrites the param.
+	if (parsePollutantParam(route.search.pollutant) === "none") {
+		monitorsMapIntegration.enabled = false;
+	}
+
 	monitorsManager.init(route.search.pollutant);
 	collocationSitesManager.init();
 	hmsManager.init();
@@ -49,30 +70,30 @@
 
 	let panelOpen = $derived(route.pathname.startsWith(`${basePath}/monitor/`));
 
-	// Keep monitorsManager.pollutant and the "pollutant" URL param in sync, both directions.
-	// init() only seeds pollutant on the manager's first-ever initialization; this effect is what
-	// applies a later "?pollutant=" change (e.g. navigating in from elsewhere) to an already-running manager.
+	// Keep the Pollutant menu's selection (pm25 / o3 / none) and the "pollutant" URL param in
+	// sync, both directions. init() only seeds the pollutant on the manager's first-ever
+	// initialization; this effect applies a later "?pollutant=" change (e.g. navigating in from
+	// elsewhere) to an already-running map.
 	$effect(() => {
-		const urlPollutant = route.search.pollutant;
-		// Read monitorsManager.pollutant via untrack: this effect must only react to the URL
-		// changing (e.g. navigating in from elsewhere), not to monitorsManager.pollutant itself.
-		// Tracking it here would make a UI-driven pollutant change (e.g. the display-options
-		// toggle) re-trigger this effect before the manager->URL effect below can sync the URL,
-		// so this effect would see the still-stale URL and immediately revert the user's change.
-		if (
-			monitorsManager.initialized &&
-			(urlPollutant === "pm25" || urlPollutant === "o3") &&
-			untrack(() => monitorsManager.pollutant) !== urlPollutant
-		) {
-			monitorsManager.pollutant = urlPollutant;
-		}
+		const selection = parsePollutantParam(route.search.pollutant);
+		if (!monitorsManager.initialized || !selection) return;
+		// Read current state via untrack: this effect must only react to the URL changing. Tracking
+		// state here would make a UI-driven change re-trigger this effect before the effect below
+		// syncs the URL, so it would see the stale URL and revert the user's change.
+		untrack(() => {
+			if (
+				currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled) !== selection
+			) {
+				applyPollutantSelection(selection, pollutantTargets);
+			}
+		});
 	});
 
-	// ...and the reverse: reflect UI-driven pollutant changes (e.g. the display-options toggle) back to the URL.
+	// ...and the reverse: reflect UI-driven changes back to the URL.
 	$effect(() => {
-		const pollutant = monitorsManager.pollutant;
-		if (pollutant && searchParams.get("pollutant") !== pollutant) {
-			searchParams.set("pollutant", pollutant);
+		const selection = currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled);
+		if (selection && searchParams.get("pollutant") !== selection) {
+			searchParams.set("pollutant", selection);
 		}
 	});
 
@@ -82,6 +103,18 @@
 		monitorsMapIntegration.selectedMonitorId = null;
 	});
 
+	const legendSections: Array<LegendSection> = $derived.by(() => {
+		const sections: Array<LegendSection> = [];
+		if (monitorsMapIntegration.enabled && monitorsManager.pollutant && monitorsManager.levels) {
+			const pollutant = pollutantLegendSection(monitorsManager.pollutant, monitorsManager.levels);
+			if (pollutant) sections.push(pollutant);
+		}
+		if (hmsFireMapIntegration.enabled && hmsSmokeMapIntegration.enabled) {
+			sections.push(...fireSmokeLegendSections(FIRE_LEGEND_CATEGORIES, SMOKE_LEGEND));
+		}
+		return sections;
+	});
+
 	onDestroy(() => {
 		monitorsManager.autoUpdate.stop();
 	});
@@ -95,17 +128,22 @@
 	{basePath}
 >
 	{#snippet menu()}
-		<MonitorsDisplayOptions />
-		<EvStationsDisplayOptions />
-		<MapLayersDisplayOptions />
-		<MapStyleDisplayOptions />
+		<OptionsGroup>
+			<PollutantMenu />
+			<MonitorsMenu />
+		</OptionsGroup>
+		<OptionsGroup>
+			<LayersMenu />
+			<OverlaysMenu />
+			<SettingsMenu />
+		</OptionsGroup>
+	{/snippet}
+	{#snippet search()}
+		<Search />
 	{/snippet}
 	{#snippet overlays()}
-		<div class="pointer-events-none absolute bottom-0 left-0 z-10">
-			<MapLegend />
-		</div>
-		<div class="absolute top-4 left-20 z-10">
-			<Search />
+		<div class="pointer-events-none absolute bottom-4 left-4 z-10">
+			<Legend sections={legendSections} />
 		</div>
 	{/snippet}
 	{@render children()}