@sjvair/monitor-map 4.3.0 → 5.0.0-beta.0

package/src/lib/index.ts

@@ -15,9 +15,11 @@
  * ```svelte
  * <!-- app root -->
  * <script>
- *   import { provideMonitorMapRouter } from "@sjvair/monitor-map";
+ *   import { configureMonitorMap, provideMonitorMapRouter } from "@sjvair/monitor-map";
  *   import { route, navigate, p, isActive, Router } from "./router";
  *
+ *   // Once at startup, before the map or the EV layer is used. The library reads no keys itself.
+ *   configureMonitorMap({ maptilerKey, nrelKey });
  *   provideMonitorMapRouter({ route, navigate, p, isActive, basePath: "/my-map" });
  * </script>
  *
@@ -25,111 +27,18 @@
  * ```
  *
  * A host that must stay light at startup imports from the subpath entries instead:
- * `provideMonitorMapRouter`/`monitorsManager` from "@sjvair/monitor-map/core" (no map), and
+ * `configureMonitorMap`/`provideMonitorMapRouter`/`monitorsManager` from
+ * "@sjvair/monitor-map/core" (no map), and
  * `monitorMapRoutes` from "@sjvair/monitor-map/routes" (same tree, lazy layout and routes).
  * `monitorMapRoutes` from this entry stays eager.
  */
 export { monitorMapRoutes } from "./routes";
+export { configureMonitorMap, monitorMapConfig, type MonitorMapConfig } from "./config.svelte.js";
 export {
 	ROUTER_KEY,
 	provideMonitorMapRouter,
 	useMonitorMapRouter,
 	type MonitorMapRouterApi
 } from "./router-context";
-
-// State managers
-export { monitorsManager } from "./monitors/monitors.svelte";
-export type { MonitorsManager, MonitorsInitOptions } from "./monitors/monitors.svelte";
-export { collocationSitesManager } from "./collocation-sites/collocations.svelte";
-export type { CollocationSitesManager } from "./collocation-sites/collocations.svelte";
-export { evStationsManager } from "./ev-stations/ev-stations.svelte";
-export type { EvStationsManager } from "./ev-stations/ev-stations.svelte";
-export { hmsManager } from "./hms/hms.svelte";
-export type { HMSManager } from "./hms/hms.svelte";
-export { mapManager, DefaultMapStyle, initializeMap } from "./map/map-manager.svelte.js";
-export type { MapManager } from "./map/map-manager.svelte.js";
-
-// Map integrations
-export {
-	monitorsMapIntegration,
-	MonitorsMapIntegration
-} from "./monitors/monitors-map-integration.svelte";
-export { collocationSitesMapIntegration } from "./collocation-sites/collocations-map-integration.svelte";
-export { evStationsMapIntegration } from "./ev-stations/ev-stations-map-integration.svelte";
-export { windMapIntegration } from "./wind/wind.svelte";
-export { baseLayerSeperator } from "./map/integrations/base-layer-seperator";
-export { hmsFireMapIntegration } from "./hms/hms-fire-map-integration.svelte";
-export { hmsSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte";
-
-// Components
-export { default as Map } from "./map/Map.svelte";
-export { default as MapShell, type MapShellProps } from "./map/MapShell.svelte";
-export {
-	default as LoadScreen,
-	loadScreenState,
-	enable as enableLoadScreen,
-	disable as disableLoadScreen
-} from "./LoadScreen.svelte";
-export type { LoadScreenState } from "./LoadScreen.svelte";
-
-// Options toolbar / panel (compose these inside MapShell's `menu` snippet)
-export { default as OptionsBar } from "./options/OptionsBar.svelte";
-export { default as OptionsGroup } from "./options/OptionsGroup.svelte";
-export { default as OptionsMenu } from "./options/OptionsMenu.svelte";
-export { default as CheckboxRow } from "./options/rows/CheckboxRow.svelte";
-export { default as RadioRow } from "./options/rows/RadioRow.svelte";
-export { default as SubmenuRow } from "./options/rows/SubmenuRow.svelte";
-export { default as GroupRow } from "./options/rows/GroupRow.svelte";
-export { default as MarkerIcon } from "./options/rows/MarkerIcon.svelte";
-export { default as PollutantMenu } from "./options/menus/PollutantMenu.svelte";
-export { default as MonitorsMenu } from "./options/menus/MonitorsMenu.svelte";
-export { default as LayersMenu } from "./options/menus/LayersMenu.svelte";
-export { default as OverlaysMenu } from "./options/menus/OverlaysMenu.svelte";
-export { default as SettingsMenu } from "./options/menus/SettingsMenu.svelte";
-export { resetMapOptions } from "./options/reset-map-options";
-export { mapStyleState } from "./map/map-style-state.svelte.js";
-export type { MapStyleState } from "./map/map-style-state.svelte.js";
-
-// Legend
-export { default as Legend } from "./legend/Legend.svelte";
-export { default as LegendBar } from "./legend/LegendBar.svelte";
-export {
-	pollutantLegendSection,
-	fireSmokeLegendSections,
-	type LegendSection,
-	type LegendBarData,
-	type LegendCategory
-} from "./legend/legend-data";
-export { FIRE_LEGEND_CATEGORIES } from "./hms/hms-fire-icon-manager";
-export { SMOKE_LEGEND } from "./hms/hms-smoke-map-integration.svelte";
-
-// Integration base classes (extend these to add custom map features)
-export { MapIntegration } from "./map/integrations/map-integration.svelte";
-export { MapLayerIntegration } from "./map/integrations/map-layer-integration.svelte";
-export { MapIconLayerIntegration as MapGeoJSONIntegration } from "./map/integrations/map-geojson-integration.svelte";
-
-// Types
-export type { SomeMapIntegration } from "./map/integrations/types";
-export type { WindMapIntegration } from "./wind/wind.svelte";
-export type { EvStationsMapIntegration } from "./ev-stations/ev-stations-map-integration.svelte";
-export type { HMSFireMapIntegration } from "./hms/hms-fire-map-integration.svelte";
-export type { HMSSmokeMapIntegration } from "./hms/hms-smoke-map-integration.svelte";
-export type { HMSFireGroup } from "./hms/hms.svelte";
-export type {
-	MonitorMapFeature,
-	MonitorMarkerProperties,
-	MonitorClusterMapFeature,
-	MonitorClusterMarkerProperties,
-	MonitorsDataSource,
-	MonitorsPollutant
-} from "./monitors/types";
-export type {
-	CollocationSiteMapFeature,
-	CollocationSiteMarkerProperties
-} from "./collocation-sites/types";
-export type {
-	EvStation,
-	EvStationMarkerProperties,
-	EvStationMapFeature,
-	EvStationClusterMapFeature
-} from "./ev-stations/types";
+export { monitorsManager } from "./monitors/monitors.svelte.js";
+export type { MonitorsManager, MonitorsInitOptions } from "./monitors/monitors.svelte.js";

package/src/lib/legend/Legend.svelte

@@ -1,15 +1,25 @@
 <script lang="ts">
 	import { ChevronDownIcon, InfoIcon } from "@lucide/svelte";
-	import LegendBar from "./LegendBar.svelte";
-	import type { LegendSection } from "./legend-data";
+	import { Legend, legendSection, type MapContext } from "@sjvair/map-sdk";
 
-	let { sections }: { sections: Array<LegendSection> } = $props();
+	let { map }: { map: MapContext } = $props();
 
 	// Independent of which sections are active, so toggling a layer doesn't reset it.
 	let collapsed = $state(false);
+
+	// What map-sdk's Legend would list: a scale with levels, or a status line for a plugin that is
+	// loading or failing. The card is hidden while there is none.
+	const hasSections = $derived(
+		map.plugins.some((plugin) => {
+			const data = plugin.legend?.();
+			if (!data) return false;
+			if ("status" in data) return data.status.state !== "ready";
+			return legendSection(data, map.format) !== null;
+		})
+	);
 </script>
 
-{#if sections.length}
+{#if hasSections}
 	<div class="pointer-events-auto w-84 max-w-[calc(100vw-2rem)] rounded-md bg-white shadow">
 		<button
 			type="button"
@@ -21,20 +31,9 @@
 			<span class="flex-1 text-left">Legend</span>
 			<ChevronDownIcon size={18} class="transition-transform {collapsed ? '-rotate-90' : ''}" />
 		</button>
-		{#if !collapsed}
-			<div class="flex flex-col gap-3 border-t border-gray-200 px-4 py-3">
-				{#each sections as section (section.id)}
-					<div>
-						<p class="mb-2 text-center text-sm font-semibold">
-							{section.title}
-							{#if section.unit}
-								<span class="text-xs font-normal text-gray-500">({section.unit})</span>
-							{/if}
-						</p>
-						<LegendBar bar={section.bar} />
-					</div>
-				{/each}
-			</div>
-		{/if}
+		<!-- Kept mounted (hidden) when collapsed so the legend doesn't re-read the theme on expand. -->
+		<div class="border-t border-gray-200 px-4 py-3 {collapsed ? 'hidden' : ''}">
+			<Legend {map} order="top-first" framed={false} />
+		</div>
 	</div>
 {/if}

package/src/lib/levels.ts

@@ -0,0 +1,24 @@
+import { levelFor, NO_LEVEL, type Level, type Scale } from "@sjvair/map-sdk/data";
+
+/** The color for a reading no level covers, as map-sdk draws an inactive monitor. */
+export const NEUTRAL_LEVEL_COLOR = "#969696";
+
+/** The scale level a reading falls in, or null when there is no scale or no level covers it. */
+export function readingLevel(
+	value: string | number | null | undefined,
+	scale: Scale | null
+): Level | null {
+	if (!scale) return null;
+	const level = levelFor(value, scale);
+	return level === NO_LEVEL ? null : level;
+}
+
+/** A reading as the panel shows it: cut off to a whole number, or "–" when not a number. */
+export function readingDisplay(value: string | number | null | undefined): string {
+	// Number("") and Number(null) are 0, not a reading.
+	if (value === null || value === undefined || (typeof value === "string" && !value.trim())) {
+		return "–";
+	}
+	const number = Math.trunc(Number(value));
+	return Number.isFinite(number) ? number.toString() : "–";
+}

package/src/lib/map/MapShell.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
-	import type { SomeMapIntegration } from "$lib/map/integrations/types";
+	import type { MapContext } from "@sjvair/map-sdk";
 
 	export interface MapShellProps {
-		/** Map integrations to register, e.g. [monitorsMapIntegration] */
-		integrations: Array<SomeMapIntegration>;
+		/** The map to show, from `createMap()` (the monitor map uses `createLiveMap()`). */
+		map: MapContext;
 		/**
 		 * True once the caller's own data managers have finished their initial
-		 * load. The shell hides the load screen once the map is idle AND this
+		 * load. The shell hides the load screen once the map is ready AND this
 		 * is true.
 		 */
 		ready: boolean;
@@ -56,13 +56,12 @@
 
 <script lang="ts">
 	import LoadScreen, { disable as disableLoadScreen } from "$lib/LoadScreen.svelte";
-	import Map from "$lib/map/Map.svelte";
+	import { MapView } from "@sjvair/map-sdk";
 	import OptionsBar from "$lib/options/OptionsBar.svelte";
-	import { mapManager } from "$lib/map/map-manager.svelte.js";
 	import { useMonitorMapRouter } from "$lib/router-context";
 
 	let {
-		integrations,
+		map,
 		ready,
 		loadError,
 		panelOpen,
@@ -76,28 +75,14 @@
 	}: MapShellProps = $props();
 
 	const basePath = providedBasePath ?? (routerEscapeHatch ? useMonitorMapRouter().basePath : "");
-	const TRANSITION_MS = 300;
 
 	$effect(() => {
-		// mapManager.map is only ever assigned once its own initial "load" has
-		// already fired (see initializeMap in map-manager.svelte.ts), so by the time this
-		// effect sees a non-null map, it's already safe to reveal — waiting for a
-		// further "idle" event here is unreliable since one may never fire again.
-		if (mapManager.map && ready) {
+		// `map.ready` is map-sdk's signal that the style loaded and the map went idle.
+		if (map.ready && ready) {
 			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);
-		}
-	});
-
 	/**
 	 * HACK: Fix for escaping sv-router and allowing navigation to other pages,
 	 * as well as navigating back
@@ -131,7 +116,15 @@
 <div class="relative flex h-full w-full flex-col md:flex-row">
 	<LoadScreen error={loadError} />
 	<div class="relative flex-1 overflow-hidden">
-		<Map {integrations} />
+		<MapView
+			{map}
+			label="Air quality monitor map"
+			controls="engine"
+			featureList={{ position: "top-right", reveal: "focus" }}
+			selectionBar={false}
+			tooltip="pointer"
+			class="h-full w-full"
+		/>
 		{@render overlays?.()}
 		{#if menu || search}
 			<OptionsBar {search}>{@render menu?.()}</OptionsBar>

package/src/lib/map/basemaps.ts

@@ -0,0 +1,76 @@
+import { MapStyle } from "@maptiler/sdk";
+import type { ReferenceMapStyle } from "@maptiler/sdk";
+import type { BasemapConfig } from "@sjvair/map-sdk";
+
+/** Every MapTiler style at its highest `_V<n>` version, sorted by name. */
+const BASEMAP_STYLES: ReferenceMapStyle[] = (() => {
+	const latest = new Map<string, { version: number; style: ReferenceMapStyle }>();
+	for (const style of Object.values(MapStyle) as ReferenceMapStyle[]) {
+		const id = style.getId();
+		const match = id.match(/^(.+?)_V(\d+)$/i);
+		const baseName = match ? match[1] : id;
+		const version = match ? parseInt(match[2], 10) : 0;
+		const existing = latest.get(baseName);
+		if (!existing || version > existing.version) {
+			latest.set(baseName, { version, style });
+		}
+	}
+	return Array.from(latest.values())
+		.map((e) => e.style)
+		.sort((a, b) => a.getName().localeCompare(b.getName()));
+})();
+
+/** The basemap the map opens on, and Reset selects: Streets v4's default variant. */
+export function defaultBasemapId(): string {
+	return MapStyle.STREETS_V4.getDefaultVariant().getId();
+}
+
+/**
+ * The monitor map's basemaps: every MapTiler style's variants (style URLs, so map-sdk's fallback
+ * can match a failed style by URL), opening on Streets v4, with no layers removed.
+ */
+export function monitorMapBasemaps(): BasemapConfig {
+	const seen = new Set<string>();
+	const styles: BasemapConfig["styles"] = [];
+	for (const style of BASEMAP_STYLES) {
+		for (const variant of style.getVariants()) {
+			const id = variant.getId();
+			if (seen.has(id)) continue;
+			seen.add(id);
+			styles.push({ id, style: variant.getExpandedStyleURL() });
+		}
+	}
+	return { styles, defaultId: defaultBasemapId(), excludedLayers: [] };
+}
+
+export interface BasemapChoice {
+	name: string;
+	variants: Array<{ id: string; type: string; name: string }>;
+}
+
+/** The Basemap select's options (one per style name) and each one's Theme radios. */
+export function basemapChoices(): BasemapChoice[] {
+	return BASEMAP_STYLES.map((style) => ({
+		name: style.getName(),
+		variants: style
+			.getVariants()
+			.map((variant) => ({ id: variant.getId(), type: variant.getType(), name: variant.getName() }))
+	}));
+}
+
+/** The choice that has a variant with this id. */
+export function choiceForId(id: string): BasemapChoice | undefined {
+	return basemapChoices().find((choice) => choice.variants.some((v) => v.id === id));
+}
+
+/**
+ * The variant to show after switching to the basemap named `toBaseName`: the same variant type
+ * (e.g. "DARK") as `currentId` when the new basemap offers it, otherwise its default.
+ */
+export function switchBasemap(currentId: string, toBaseName: string): string {
+	const target = BASEMAP_STYLES.find((style) => style.getName() === toBaseName);
+	if (!target) return currentId;
+	const type = choiceForId(currentId)?.variants.find((v) => v.id === currentId)?.type;
+	if (type && target.hasVariant(type)) return target.getVariant(type).getId();
+	return target.getDefaultVariant().getId();
+}

package/src/lib/map/live-map.svelte.ts

@@ -0,0 +1,24 @@
+import { createMap, type MapContext } from "@sjvair/map-sdk";
+import { monitorMapBasemaps } from "./basemaps";
+import { monitorMapConfig } from "../config.svelte.js";
+
+/** The San Joaquin Valley view the map opens on. */
+const INITIAL_VIEW = {
+	center: [-119.7987626619462, 36.76272050981146] as [number, number],
+	zoom: 7,
+	bearing: 0,
+	pitch: 0
+};
+
+/** The monitor map's map context: a globe over space on Streets v4, with every basemap to choose. */
+export function createLiveMap(): MapContext {
+	return createMap({
+		config: {
+			maptilerKey: monitorMapConfig().maptilerKey,
+			initialView: INITIAL_VIEW,
+			projection: "globe",
+			space: { preset: "milkyway" },
+			basemaps: monitorMapBasemaps()
+		}
+	});
+}

package/src/lib/map/sync-plugins.svelte.ts

@@ -0,0 +1,69 @@
+import { untrack } from "svelte";
+import type { MapContext, MapPlugin, PluginOptions } from "@sjvair/map-sdk";
+import { beforeId, DRAW_ORDER, type PluginKey } from "../options/plugin-order";
+
+/** A plugin, or a plugin with the add options it needs (e.g. its selection mode). */
+export type PluginEntry =
+	MapPlugin | { plugin: MapPlugin; options?: Omit<PluginOptions, "before"> };
+
+/**
+ * Builds a fresh plugin for each key (plugin objects are single-use). Called untracked. A key
+ * with no factory is never added, and never removed either: another `syncPlugins` call may own it.
+ */
+export type PluginFactories = Partial<Record<PluginKey, () => PluginEntry>>;
+
+function entryOf(entry: PluginEntry): { plugin: MapPlugin; options?: PluginOptions } {
+	return "plugin" in entry ? entry : { plugin: entry };
+}
+
+/**
+ * Keeps `map`'s plugins in step with `wanted()`, in `DRAW_ORDER`: adds a wanted plugin below the
+ * first present plugin above it and removes one that is no longer wanted. A change to anything
+ * `deps()` reads removes and re-adds every present plugin of `factories` (e.g. `clustered`,
+ * which a plugin only takes when it is built). Call it during component setup.
+ */
+export function syncPlugins(
+	map: MapContext,
+	wanted: () => Set<PluginKey>,
+	factories: PluginFactories,
+	deps?: () => unknown
+): void {
+	const keys = DRAW_ORDER.filter((key) => factories[key]);
+	// Bumped when a dep changes; separate from `wanted` so an option change that leaves the
+	// wanted set as it is never rebuilds anything.
+	let generation = $state(0);
+	let built = 0;
+
+	if (deps) {
+		let first = true;
+		$effect(() => {
+			deps();
+			if (first) first = false;
+			else untrack(() => generation++);
+		});
+	}
+
+	$effect(() => {
+		const want = wanted();
+		const current = generation;
+		untrack(() => {
+			const rebuild = current !== built;
+			built = current;
+			// A scratch copy of the ids for this pass; nothing reads it reactively.
+			// eslint-disable-next-line svelte/prefer-svelte-reactivity
+			const present = new Set(map.plugins.map((p) => p.id));
+			for (const key of keys) {
+				if (present.has(key) && (rebuild || !want.has(key))) {
+					map.removePlugin(key);
+					present.delete(key);
+				}
+			}
+			for (const key of keys) {
+				if (!want.has(key) || present.has(key)) continue;
+				const { plugin, options } = entryOf(factories[key]!());
+				map.addPlugin(plugin, { ...options, before: beforeId(key, present) });
+				present.add(key);
+			}
+		});
+	});
+}

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

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { BellCheckIcon, BellOffIcon, ChevronDownIcon } from "@lucide/svelte";
 	import { subscribe, unsubscribe } from "@sjvair/sdk/account";
-	import { monitorsManager } from "$lib";
+	import LoadError from "$lib/LoadError.svelte";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte.js";
 	import { getApiToken, loadSubscriptionLevel } from "$lib/monitors/subscriptions";
 
 	interface MonitorSubscriptionManagerProps {
@@ -22,23 +23,21 @@
 	let saving = $state(false);
 	let subscribedLevel: string | null = $state(null);
 
+	// The alert rows, in this order, from the PM2.5 scale; a key the scale lacks is skipped.
 	const alertLevels = $derived.by(() => {
-		if (!monitorsManager.meta) return [];
-		try {
-			return monitorsManager.meta
-				.entryType("pm25")
-				.asIter.levels!.filter((level) =>
-					ALERT_LEVEL_NAMES.includes(level.name as (typeof ALERT_LEVEL_NAMES)[number])
-				);
-		} catch {
-			return [];
-		}
+		const levels = monitorsManager.meta?.entryType("pm25").scale?.levels ?? [];
+		return ALERT_LEVEL_NAMES.flatMap((key) => levels.find((level) => level.key === key) ?? []);
 	});
 
+	let loadError = $state(false);
+	let attempt = $state(0);
+
 	$effect(() => {
 		const id = monitorId;
+		void attempt;
 		open = false;
 		subscribedLevel = null;
+		loadError = false;
 		const controller = new AbortController();
 		const { signal } = controller;
 		loading = true;
@@ -47,7 +46,9 @@
 				if (!signal.aborted) subscribedLevel = level;
 			})
 			.catch((error) => {
-				if (!signal.aborted) throw error;
+				if (signal.aborted) return;
+				console.error("Could not load subscription status", error);
+				loadError = true;
 			})
 			.finally(() => {
 				if (!signal.aborted) loading = false;
@@ -78,53 +79,57 @@
 	}
 </script>
 
-<div class="relative select-none">
-	<button
-		class={[
-			"flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white",
-			subscribedLevel
-				? "border-green-700 bg-green-600 hover:bg-green-700"
-				: "border-blue-600 bg-blue-500 hover:bg-blue-600"
-		]}
-		disabled={loading}
-		onclick={() => (open = !open)}
-	>
-		{subscribedLevel ? "Manage Subscription" : "Subscribe to Alerts"}
-		<ChevronDownIcon
-			size={16}
-			class={["transition-transform duration-300", open ? "rotate-180" : ""]}
-		/>
-	</button>
+{#if loadError}
+	<LoadError message="Couldn't load your alert settings." onretry={() => attempt++} />
+{:else}
+	<div class="relative select-none">
+		<button
+			class={[
+				"flex w-full cursor-pointer items-center justify-center gap-2 rounded border px-3 py-1.5 text-sm font-semibold text-white",
+				subscribedLevel
+					? "border-green-700 bg-green-600 hover:bg-green-700"
+					: "border-blue-600 bg-blue-500 hover:bg-blue-600"
+			]}
+			disabled={loading}
+			onclick={() => (open = !open)}
+		>
+			{subscribedLevel ? "Manage Subscription" : "Subscribe to Alerts"}
+			<ChevronDownIcon
+				size={16}
+				class={["transition-transform duration-300", open ? "rotate-180" : ""]}
+			/>
+		</button>
 
-	{#if open}
-		<button aria-label="Close" class="fixed inset-0 z-10" onclick={() => (open = false)}></button>
-		<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
-			{#if subscribedLevel}
-				<button
-					class="flex w-full cursor-pointer items-center justify-between rounded-t border border-black/30 px-4 py-2 text-sm hover:bg-[#F5F5F3]"
-					onclick={() => handleLevelClick(subscribedLevel)}
-				>
-					Unsubscribe
-					<BellOffIcon size={14} />
-				</button>
-			{/if}
-			{#each alertLevels as level (level.name)}
-				{@const isSubscribed = level.name === subscribedLevel}
-				<button
-					class={[
-						"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
-						!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
-					]}
-					style="background-color: {level.color}"
-					disabled={saving}
-					onclick={!isSubscribed ? () => handleLevelClick(level.name) : null}
-				>
-					<span>{level.label}</span>
-					{#if isSubscribed}
-						<BellCheckIcon size={14} />
-					{/if}
-				</button>
-			{/each}
-		</div>
-	{/if}
-</div>
+		{#if open}
+			<button aria-label="Close" class="fixed inset-0 z-10" onclick={() => (open = false)}></button>
+			<div class="absolute top-full left-0 z-20 mt-1 w-full overflow-hidden rounded shadow-lg">
+				{#if subscribedLevel}
+					<button
+						class="flex w-full cursor-pointer items-center justify-between rounded-t border border-black/30 px-4 py-2 text-sm hover:bg-[#F5F5F3]"
+						onclick={() => handleLevelClick(subscribedLevel)}
+					>
+						Unsubscribe
+						<BellOffIcon size={14} />
+					</button>
+				{/if}
+				{#each alertLevels as level (level.key)}
+					{@const isSubscribed = level.key === subscribedLevel}
+					<button
+						class={[
+							"flex w-full items-center justify-between px-4 py-2 text-sm text-white last:rounded-b",
+							!isSubscribed ? "cursor-pointer first:rounded-t hover:brightness-90" : ""
+						]}
+						style="background-color: {level.color}"
+						disabled={saving}
+						onclick={!isSubscribed ? () => handleLevelClick(level.key) : null}
+					>
+						<span>{level.label}</span>
+						{#if isSubscribed}
+							<BellCheckIcon size={14} />
+						{/if}
+					</button>
+				{/each}
+			</div>
+		{/if}
+	</div>
+{/if}

package/src/lib/monitors/filtered-source.svelte.ts

@@ -0,0 +1,38 @@
+import type { DataSource, MonitorFeatureProperties } from "@sjvair/map-sdk/data";
+import type { MapOptions } from "../options/map-option-defaults";
+
+type Options = Pick<MapOptions, "monitorTypes" | "inactive" | "inside">;
+
+function shown(props: MonitorFeatureProperties, options: Options): boolean {
+	return (
+		options.monitorTypes[props.type] === true &&
+		(props.isActive || options.inactive) &&
+		(props.location !== "inside" || options.inside)
+	);
+}
+
+/**
+ * `source` with only the monitors the Monitors menu shows: types that are on, inactive and
+ * inside ones only when those are on. Clusters are built from these, so their averages follow.
+ */
+export function filteredMonitors(
+	source: DataSource<MonitorFeatureProperties>,
+	options: Options
+): DataSource<MonitorFeatureProperties> {
+	const features = $derived.by(() => {
+		const all = source.features;
+		if (!all) return null;
+		return { ...all, features: all.features.filter((f) => shown(f.properties, options)) };
+	});
+	return {
+		get status() {
+			return source.status;
+		},
+		get features() {
+			return features;
+		},
+		get scale() {
+			return source.scale;
+		}
+	};
+}