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

package/dist/lib/options/map-option-defaults.d.ts

@@ -1,9 +1,24 @@
-import type { MonitorsPollutant } from "../monitors/types";
-import { 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.
- */
+/** The map options the toolbar edits; `mapOptions` holds the live copy. */
+export interface MapOptions {
+    /** False for the Pollutant menu's "None": no monitors (or collocation sites) on the map. */
+    monitorsOn: boolean;
+    /** Which monitor types draw, keyed by server type; a type with no key never draws. */
+    monitorTypes: Record<string, boolean>;
+    inactive: boolean;
+    inside: boolean;
+    /** Monitors' and EV chargers' clustering. */
+    clustered: boolean;
+    collocationSites: boolean;
+    /** HMS smoke and fire together. */
+    fireAndSmoke: boolean;
+    evStations: boolean;
+    evLevels: {
+        lvl2: boolean;
+        lvl3: boolean;
+    };
+    wind: boolean;
+}
+/** Defaults restored by "Reset Map Options"; a fresh load starts at them too. */
 export declare const MAP_OPTION_DEFAULTS: {
     readonly monitorTypes: {
         readonly airnow: true;
@@ -13,9 +28,9 @@ export declare const MAP_OPTION_DEFAULTS: {
         readonly airgradient: true;
         readonly purpleair: true;
         readonly vozbox: true;
-        readonly inactive: false;
-        readonly inside: false;
     };
+    readonly inactive: false;
+    readonly inside: false;
     readonly clustered: true;
     readonly collocationSites: false;
     readonly fireAndSmoke: true;
@@ -26,31 +41,5 @@ export declare const MAP_OPTION_DEFAULTS: {
     };
     readonly wind: false;
 };
-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 declare function applyMapOptionDefaults(targets: MapOptionTargets, defaultPollutant: MonitorsPollutant | null): void;
-export {};
+/** A fresh copy of the defaults, with monitors on. */
+export declare function defaultMapOptions(): MapOptions;

package/dist/lib/options/map-option-defaults.js

@@ -1,8 +1,4 @@
-import { applyPollutantSelection } 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.
- */
+/** Defaults restored by "Reset Map Options"; a fresh load starts at them too. */
 export const MAP_OPTION_DEFAULTS = {
     monitorTypes: {
         airnow: true,
@@ -11,10 +7,10 @@ export const MAP_OPTION_DEFAULTS = {
         bam1022: true,
         airgradient: true,
         purpleair: true,
-        vozbox: true,
-        inactive: false,
-        inside: false
+        vozbox: true
     },
+    inactive: false,
+    inside: false,
     clustered: true,
     collocationSites: false,
     fireAndSmoke: true,
@@ -22,26 +18,12 @@ export const MAP_OPTION_DEFAULTS = {
     evLevels: { lvl2: true, lvl3: true },
     wind: false
 };
-export function applyMapOptionDefaults(targets, defaultPollutant) {
-    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();
+/** A fresh copy of the defaults, with monitors on. */
+export function defaultMapOptions() {
+    return {
+        ...MAP_OPTION_DEFAULTS,
+        monitorsOn: true,
+        monitorTypes: { ...MAP_OPTION_DEFAULTS.monitorTypes },
+        evLevels: { ...MAP_OPTION_DEFAULTS.evLevels }
+    };
 }

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

@@ -0,0 +1,13 @@
+import type { MonitorsPollutant } from "../monitors/types";
+import { type MapOptions } from "./map-option-defaults";
+export type { MapOptions } from "./map-option-defaults";
+/**
+ * The toolbar's map options. Module-level, so they survive the layout remounting (as the 4.x
+ * integrations' state did); the layout turns them into map-sdk plugins.
+ */
+export declare const mapOptions: MapOptions;
+/**
+ * "Reset Map Options": every option back to its default, monitors on, and the pollutant back to
+ * `defaultPollutant` (the server's default; null before the meta loads leaves it as it is).
+ */
+export declare function resetMapOptions(defaultPollutant: MonitorsPollutant | null): void;

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

@@ -0,0 +1,26 @@
+import { monitorsManager } from "../monitors/monitors.svelte.js";
+import { defaultMapOptions, MAP_OPTION_DEFAULTS } from "./map-option-defaults";
+/**
+ * The toolbar's map options. Module-level, so they survive the layout remounting (as the 4.x
+ * integrations' state did); the layout turns them into map-sdk plugins.
+ */
+export const mapOptions = $state(defaultMapOptions());
+/**
+ * "Reset Map Options": every option back to its default, monitors on, and the pollutant back to
+ * `defaultPollutant` (the server's default; null before the meta loads leaves it as it is).
+ */
+export function resetMapOptions(defaultPollutant) {
+    if (defaultPollutant)
+        monitorsManager.setPollutant(defaultPollutant);
+    mapOptions.monitorsOn = true;
+    Object.assign(mapOptions.monitorTypes, MAP_OPTION_DEFAULTS.monitorTypes);
+    mapOptions.inactive = MAP_OPTION_DEFAULTS.inactive;
+    mapOptions.inside = MAP_OPTION_DEFAULTS.inside;
+    mapOptions.clustered = MAP_OPTION_DEFAULTS.clustered;
+    mapOptions.collocationSites = MAP_OPTION_DEFAULTS.collocationSites;
+    mapOptions.fireAndSmoke = MAP_OPTION_DEFAULTS.fireAndSmoke;
+    mapOptions.evStations = MAP_OPTION_DEFAULTS.evStations;
+    mapOptions.evLevels.lvl2 = MAP_OPTION_DEFAULTS.evLevels.lvl2;
+    mapOptions.evLevels.lvl3 = MAP_OPTION_DEFAULTS.evLevels.lvl3;
+    mapOptions.wind = MAP_OPTION_DEFAULTS.wind;
+}

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

@@ -4,43 +4,31 @@
 	import CheckboxRow from "../rows/CheckboxRow.svelte";
 	import SubmenuRow from "../rows/SubmenuRow.svelte";
 	import MarkerIcon from "../rows/MarkerIcon.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";
-
-	const levels = $derived(evStationsMapIntegration.displayOptions);
+	import { mapOptions } from "../map-options.svelte.js";
+	import { ROW_ICONS } from "../row-icons";
 </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;
-			}
-		}
-	>
+	<CheckboxRow label="Fire & Smoke" bind:checked={mapOptions.fireAndSmoke}>
 		{#snippet icon()}
 			<FlameIcon size={18} color="#ff4500" />
 		{/snippet}
 	</CheckboxRow>
-	<SubmenuRow label="EV Chargers" bind:checked={evStationsMapIntegration.enabled}>
+	<SubmenuRow label="EV Chargers" bind:checked={mapOptions.evStations}>
 		{#snippet icon()}
 			<EvChargerIcon size={18} color="#708090" />
 		{/snippet}
-		<CheckboxRow label="Level 2" bind:checked={evStationsMapIntegration.displayOptions.lvl2.value}>
+		<CheckboxRow label="Level 2" bind:checked={mapOptions.evLevels.lvl2}>
 			{#snippet icon()}
-				<MarkerIcon icon={levels.lvl2.icon} class="w-5" />
+				<MarkerIcon svg={ROW_ICONS.evLevel2} class="w-5" />
 			{/snippet}
 		</CheckboxRow>
-		<CheckboxRow label="Level 3" bind:checked={evStationsMapIntegration.displayOptions.lvl3.value}>
+		<CheckboxRow label="Level 3" bind:checked={mapOptions.evLevels.lvl3}>
 			{#snippet icon()}
-				<MarkerIcon icon={levels.lvl3.icon} class="w-5" />
+				<MarkerIcon svg={ROW_ICONS.evLevel3} class="w-5" />
 			{/snippet}
 		</CheckboxRow>
 	</SubmenuRow>

package/dist/lib/options/menus/LayersMenu.svelte.d.ts

@@ -1,3 +1,18 @@
-declare const LayersMenu: import("svelte").Component<Record<string, never>, {}, "">;
-type LayersMenu = ReturnType<typeof LayersMenu>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const LayersMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LayersMenu = InstanceType<typeof LayersMenu>;
 export default LayersMenu;

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

@@ -4,9 +4,9 @@
 	import CheckboxRow from "../rows/CheckboxRow.svelte";
 	import GroupRow from "../rows/GroupRow.svelte";
 	import MarkerIcon from "../rows/MarkerIcon.svelte";
-	import { monitorsManager } from "../../monitors/monitors.svelte";
-	import { monitorsMapIntegration } from "../../monitors/monitors-map-integration.svelte";
-	import { collocationSitesMapIntegration } from "../../collocation-sites/collocations-map-integration.svelte";
+	import { mapOptions } from "../map-options.svelte.js";
+	import { ROW_ICONS } from "../row-icons";
+	import { monitorsManager } from "../../monitors/monitors.svelte.js";
 	import {
 		LOW_COST_TYPES,
 		REFERENCE_GRADE_TYPES,
@@ -14,52 +14,68 @@
 		type MonitorGroupType
 	} from "../../monitors/monitor-groups";
 
+	const TYPE_LABELS: Record<MonitorGroupType, string> = {
+		airnow: "AirNow",
+		aqlite: "AQLite",
+		aqview: "AQview",
+		bam1022: "SJVAir",
+		airgradient: "AirGradient",
+		purpleair: "PurpleAir",
+		vozbox: "VOZbox"
+	};
+
+	/** A type's filter as the `{ value }` option GroupRow binds to. */
+	function typeOption(type: MonitorGroupType) {
+		return {
+			get value() {
+				return mapOptions.monitorTypes[type] ?? false;
+			},
+			set value(value: boolean) {
+				mapOptions.monitorTypes[type] = value;
+			}
+		};
+	}
+
 	// 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]
-			}));
+			.map((type) => ({ key: type, label: TYPE_LABELS[type], option: typeOption(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}>
+<OptionsMenu id="monitors" label="Monitors" disabled={!mapOptions.monitorsOn}>
 	{#snippet icon()}
 		<RadioTowerIcon size={20} color="#4682b4" />
 	{/snippet}
 	<GroupRow label="Reference-grade" options={referenceGrade}>
 		{#snippet icon()}
-			<MarkerIcon icon={icons.get("outside-display-triangle")} />
+			<MarkerIcon svg={ROW_ICONS.referenceGrade} />
 		{/snippet}
 	</GroupRow>
 	<GroupRow label="Low-cost sensors" options={lowCost}>
 		{#snippet icon()}
-			<MarkerIcon icon={icons.get("outside-display-circle")} />
+			<MarkerIcon svg={ROW_ICONS.lowCost} />
 		{/snippet}
 	</GroupRow>
 	<hr class="my-1 border-gray-200" />
-	<CheckboxRow label="Inactive" bind:checked={monitorsMapIntegration.displayOptions.inactive.value}>
+	<CheckboxRow label="Inactive" bind:checked={mapOptions.inactive}>
 		{#snippet icon()}
-			<MarkerIcon icon={monitorsMapIntegration.displayOptions.inactive.icon} />
+			<MarkerIcon svg={ROW_ICONS.inactive} />
 		{/snippet}
 	</CheckboxRow>
-	<CheckboxRow label="Inside" bind:checked={monitorsMapIntegration.displayOptions.inside.value}>
+	<CheckboxRow label="Inside" bind:checked={mapOptions.inside}>
 		{#snippet icon()}
-			<MarkerIcon icon={monitorsMapIntegration.displayOptions.inside.icon} />
+			<MarkerIcon svg={ROW_ICONS.inside} />
 		{/snippet}
 	</CheckboxRow>
 	{#if monitorsManager.pollutant === "pm25"}
-		<CheckboxRow label="Collocation Sites" bind:checked={collocationSitesMapIntegration.enabled}>
+		<CheckboxRow label="Collocation Sites" bind:checked={mapOptions.collocationSites}>
 			{#snippet icon()}
 				<CrosshairIcon size={16} color="#4A5FC6" />
 			{/snippet}

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

@@ -2,7 +2,7 @@
 	import { SquareStackIcon, WindIcon } from "@lucide/svelte";
 	import OptionsMenu from "../OptionsMenu.svelte";
 	import CheckboxRow from "../rows/CheckboxRow.svelte";
-	import { windMapIntegration } from "../../wind/wind.svelte";
+	import { mapOptions } from "../map-options.svelte.js";
 </script>
 
 <!-- Independent checkboxes: several overlays may be on at once. -->
@@ -10,7 +10,7 @@
 	{#snippet icon()}
 		<SquareStackIcon size={20} color="#708090" />
 	{/snippet}
-	<CheckboxRow label="Wind" bind:checked={windMapIntegration.enabled}>
+	<CheckboxRow label="Wind" bind:checked={mapOptions.wind}>
 		{#snippet icon()}
 			<WindIcon size={18} color="#1e90ff" />
 		{/snippet}

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

@@ -9,8 +9,8 @@
 		currentSelection,
 		type PollutantSelection
 	} from "../pollutant-param";
-	import { monitorsManager } from "../../monitors/monitors.svelte";
-	import { monitorsMapIntegration } from "../../monitors/monitors-map-integration.svelte";
+	import { mapOptions } from "../map-options.svelte.js";
+	import { monitorsManager } from "../../monitors/monitors.svelte.js";
 	import pm25Icon from "../../assets/icons/pm25/pm25-02-particle-field.svg";
 	import ozoneIcon from "../../assets/icons/ozone/ozone-08-sunrise-haze.svg";
 
@@ -44,16 +44,11 @@
 	];
 
 	const menus = useOptionsMenus();
-	const selection = $derived(
-		currentSelection(monitorsManager.pollutant, monitorsMapIntegration.enabled)
-	);
+	const selection = $derived(currentSelection(monitorsManager.pollutant, mapOptions.monitorsOn));
 	const selected = $derived(options.find((o) => o.value === selection) ?? options[0]);
 
 	function select(value: PollutantSelection) {
-		applyPollutantSelection(value, {
-			manager: monitorsManager,
-			integration: monitorsMapIntegration
-		});
+		applyPollutantSelection(value, { manager: monitorsManager, options: mapOptions });
 		// Toolbar dropdown closes on pick; the panel section stays open.
 		if (isWideLayout()) menus.close("pollutant");
 	}

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

@@ -1,29 +1,36 @@
 <script lang="ts">
+	import type { MapContext } from "@sjvair/map-sdk";
 	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";
+	import { mapOptions, resetMapOptions } from "../map-options.svelte.js";
+	import { asPollutant } from "../pollutant-param";
+	import { basemapChoices, choiceForId, defaultBasemapId, switchBasemap } from "../../map/basemaps";
+	import { monitorsManager } from "../../monitors/monitors.svelte.js";
+
+	interface Props {
+		map: MapContext;
+	}
+
+	let { map }: Props = $props();
+
+	const choices = basemapChoices();
+	// Reads map-sdk's selection, so a basemap that fails to load shows as reverted.
+	const current = $derived(choiceForId(map.basemap.current));
+
+	function reset() {
+		resetMapOptions(asPollutant(monitorsManager.meta?.default_pollutant));
+		map.basemap.select(defaultBasemapId());
+	}
 </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;
-			}
-		}
-	>
+	<!-- Monitors' and EV chargers' clustering together. -->
+	<CheckboxRow label="Marker Clusters" bind:checked={mapOptions.clustered}>
 		{#snippet icon()}
 			<NetworkIcon size={18} color="#1e90ff" />
 		{/snippet}
@@ -37,12 +44,12 @@
 		<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)
-			}
+			value={current?.name}
+			onchange={(event) =>
+				map.basemap.select(switchBasemap(map.basemap.current, event.currentTarget.value))}
 		>
-			{#each MAP_STYLE_OPTIONS as style (style.getId())}
-				<option value={style}>{style.getName()}</option>
+			{#each choices as choice (choice.name)}
+				<option value={choice.name}>{choice.name}</option>
 			{/each}
 		</select>
 	</div>
@@ -51,12 +58,12 @@
 		<ContrastIcon size={18} color="#708090" />
 		Theme
 	</p>
-	{#each mapStyleState.referenceStyle.getVariants() as variant (variant.getId())}
+	{#each current?.variants ?? [] as variant (variant.id)}
 		<RadioRow
 			name="monitor-map-theme"
-			label={variant.getName()}
-			checked={variant === mapStyleState.variant}
-			onselect={() => mapStyleState.selectVariant(variant)}
+			label={variant.name}
+			checked={variant.id === map.basemap.current}
+			onselect={() => map.basemap.select(variant.id)}
 		/>
 	{/each}
 	<hr class="my-1 border-gray-200" />
@@ -64,7 +71,7 @@
 		<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}
+			onclick={reset}
 		>
 			<RotateCcwIcon size={16} />
 			Reset Map Options

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

@@ -1,18 +1,7 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { MapContext } from "@sjvair/map-sdk";
+interface Props {
+    map: MapContext;
 }
-declare const SettingsMenu: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type SettingsMenu = InstanceType<typeof SettingsMenu>;
+declare const SettingsMenu: import("svelte").Component<Props, {}, "">;
+type SettingsMenu = ReturnType<typeof SettingsMenu>;
 export default SettingsMenu;

package/dist/lib/options/plugin-order.d.ts

@@ -0,0 +1,8 @@
+import type { MapOptions } from "./map-option-defaults";
+/** The map's plugins, bottom to top (4.x's layer order). */
+export declare const DRAW_ORDER: readonly ["wind", "hms-smoke", "hms-fire", "collocation-sites", "monitors", "ev-l2", "ev-l3"];
+export type PluginKey = (typeof DRAW_ORDER)[number];
+/** The first of `present` that draws above `key`: the plugin to add `key` before. */
+export declare function beforeId(key: PluginKey, present: ReadonlySet<string>): string | undefined;
+/** The plugins `options` put on the map while the monitors show `pollutant`. */
+export declare function wantedPlugins(options: MapOptions, pollutant: string | null): Set<PluginKey>;

package/dist/lib/options/plugin-order.js

@@ -0,0 +1,36 @@
+/** The map's plugins, bottom to top (4.x's layer order). */
+export const DRAW_ORDER = [
+    "wind",
+    "hms-smoke",
+    "hms-fire",
+    "collocation-sites",
+    "monitors",
+    "ev-l2",
+    "ev-l3"
+];
+/** The first of `present` that draws above `key`: the plugin to add `key` before. */
+export function beforeId(key, present) {
+    return DRAW_ORDER.slice(DRAW_ORDER.indexOf(key) + 1).find((above) => present.has(above));
+}
+/** The plugins `options` put on the map while the monitors show `pollutant`. */
+export function wantedPlugins(options, pollutant) {
+    const wanted = new Set();
+    if (options.wind)
+        wanted.add("wind");
+    if (options.fireAndSmoke) {
+        wanted.add("hms-smoke");
+        wanted.add("hms-fire");
+    }
+    if (options.monitorsOn) {
+        if (options.collocationSites && pollutant === "pm25")
+            wanted.add("collocation-sites");
+        wanted.add("monitors");
+    }
+    if (options.evStations) {
+        if (options.evLevels.lvl2)
+            wanted.add("ev-l2");
+        if (options.evLevels.lvl3)
+            wanted.add("ev-l3");
+    }
+    return wanted;
+}

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

@@ -1,17 +1,19 @@
 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.
+ * the monitors plugin is off while the manager keeps its last real pollutant.
  */
 export type PollutantSelection = MonitorsPollutant | "none";
 export interface PollutantTargets {
     manager: {
-        pollutant: MonitorsPollutant | null;
+        setPollutant(pollutant: MonitorsPollutant): void;
     };
-    integration: {
-        enabled: boolean;
+    options: {
+        monitorsOn: boolean;
     };
 }
 export declare function parsePollutantParam(value: unknown): PollutantSelection | null;
-export declare function currentSelection(pollutant: MonitorsPollutant | null, monitorsEnabled: boolean): PollutantSelection | null;
+/** A pollutant the map can show, or null. */
+export declare function asPollutant(value: unknown): MonitorsPollutant | null;
+export declare function currentSelection(pollutant: string | null, monitorsOn: boolean): PollutantSelection | null;
 export declare function applyPollutantSelection(selection: PollutantSelection, targets: PollutantTargets): void;

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

@@ -1,14 +1,18 @@
 export function parsePollutantParam(value) {
     return value === "pm25" || value === "o3" || value === "none" ? value : null;
 }
-export function currentSelection(pollutant, monitorsEnabled) {
-    return monitorsEnabled ? pollutant : "none";
+/** A pollutant the map can show, or null. */
+export function asPollutant(value) {
+    return value === "pm25" || value === "o3" ? value : null;
+}
+export function currentSelection(pollutant, monitorsOn) {
+    return monitorsOn ? asPollutant(pollutant) : "none";
 }
 export function applyPollutantSelection(selection, targets) {
     if (selection === "none") {
-        targets.integration.enabled = false;
+        targets.options.monitorsOn = false;
         return;
     }
-    targets.manager.pollutant = selection;
-    targets.integration.enabled = true;
+    targets.manager.setPollutant(selection);
+    targets.options.monitorsOn = true;
 }

package/dist/lib/options/row-icons.d.ts

@@ -0,0 +1,8 @@
+export declare const ROW_ICONS: {
+    readonly referenceGrade: string;
+    readonly lowCost: string;
+    readonly inactive: string;
+    readonly inside: string;
+    readonly evLevel2: string;
+    readonly evLevel3: string;
+};

package/dist/lib/options/row-icons.js

@@ -0,0 +1,15 @@
+import { circle, triangle } from "@sjvair/map-sdk";
+import { EV_STATION_LEVELS, evStationIcon } from "../ev-stations/ev-station-icons";
+// The menu rows' marker icons (SVG markup), drawn with the map's own shapes as in 4.x.
+const DISPLAY_COLOR = "#48c78e";
+const INACTIVE_COLOR = "#969696";
+const INSIDE_OUTLINE = "#000000";
+const BORDER_WIDTH = 2;
+export const ROW_ICONS = {
+    referenceGrade: triangle(DISPLAY_COLOR, BORDER_WIDTH),
+    lowCost: circle(DISPLAY_COLOR, BORDER_WIDTH),
+    inactive: circle(INACTIVE_COLOR, BORDER_WIDTH),
+    inside: circle(DISPLAY_COLOR, BORDER_WIDTH, INSIDE_OUTLINE),
+    evLevel2: evStationIcon(EV_STATION_LEVELS.lvl2.bg, EV_STATION_LEVELS.lvl2.border),
+    evLevel3: evStationIcon(EV_STATION_LEVELS.lvl3.bg, EV_STATION_LEVELS.lvl3.border)
+};