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

package/src/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 "$lib/monitors/monitors.svelte";
-	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
-	import { collocationSitesMapIntegration } from "$lib/collocation-sites/collocations-map-integration.svelte";
+	import { mapOptions } from "../map-options.svelte.js";
+	import { ROW_ICONS } from "../row-icons";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte.js";
 	import {
 		LOW_COST_TYPES,
 		REFERENCE_GRADE_TYPES,
@@ -14,52 +14,68 @@
 		type MonitorGroupType
 	} from "$lib/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/src/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 "$lib/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/src/lib/options/menus/PollutantMenu.svelte

@@ -9,8 +9,8 @@
 		currentSelection,
 		type PollutantSelection
 	} from "../pollutant-param";
-	import { monitorsManager } from "$lib/monitors/monitors.svelte";
-	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
+	import { mapOptions } from "../map-options.svelte.js";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte.js";
 	import pm25Icon from "$lib/assets/icons/pm25/pm25-02-particle-field.svg";
 	import ozoneIcon from "$lib/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/src/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 "$lib/map/utils";
-	import { mapStyleState } from "$lib/map/map-style-state.svelte.js";
-	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
-	import { evStationsMapIntegration } from "$lib/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 "$lib/map/basemaps";
+	import { monitorsManager } from "$lib/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/src/lib/options/plugin-order.ts

@@ -0,0 +1,38 @@
+import type { MapOptions } from "./map-option-defaults";
+
+/** 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"
+] as const;
+
+export type PluginKey = (typeof DRAW_ORDER)[number];
+
+/** The first of `present` that draws above `key`: the plugin to add `key` before. */
+export function beforeId(key: PluginKey, present: ReadonlySet<string>): string | undefined {
+	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: MapOptions, pollutant: string | null): Set<PluginKey> {
+	const wanted = new Set<PluginKey>();
+	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/src/lib/options/pollutant-param.ts

@@ -2,24 +2,29 @@ import type { MonitorsPollutant } from "$lib/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 };
-	integration: { enabled: boolean };
+	manager: { setPollutant(pollutant: MonitorsPollutant): void };
+	options: { monitorsOn: boolean };
 }
 
 export function parsePollutantParam(value: unknown): PollutantSelection | null {
 	return value === "pm25" || value === "o3" || value === "none" ? value : null;
 }
 
+/** A pollutant the map can show, or null. */
+export function asPollutant(value: unknown): MonitorsPollutant | null {
+	return value === "pm25" || value === "o3" ? value : null;
+}
+
 export function currentSelection(
-	pollutant: MonitorsPollutant | null,
-	monitorsEnabled: boolean
+	pollutant: string | null,
+	monitorsOn: boolean
 ): PollutantSelection | null {
-	return monitorsEnabled ? pollutant : "none";
+	return monitorsOn ? asPollutant(pollutant) : "none";
 }
 
 export function applyPollutantSelection(
@@ -27,9 +32,9 @@ export function applyPollutantSelection(
 	targets: PollutantTargets
 ): void {
 	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/src/lib/options/row-icons.ts

@@ -0,0 +1,17 @@
+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)
+} as const;

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

@@ -1,10 +1,10 @@
 <script lang="ts">
-	import type { MapImageIcon } from "$lib/map/integrations/types";
+	/** A marker image from its SVG markup (e.g. map-sdk's `circle`). */
+	let { svg, class: className = "w-4" }: { svg: string | undefined; class?: string } = $props();
 
-	let { icon, class: className = "w-4" }: { icon: MapImageIcon | undefined; class?: string } =
-		$props();
+	const src = $derived(svg ? `data:image/svg+xml;utf8,${encodeURIComponent(svg)}` : undefined);
 </script>
 
-{#if icon}
-	<img src={icon.image.src} alt="" class={className} />
+{#if src}
+	<img {src} alt="" class={className} />
 {/if}

package/src/lib/search/Search.svelte

@@ -1,19 +1,24 @@
 <script lang="ts">
-	import { onDestroy } from "svelte";
-	import { Marker } from "@maptiler/sdk";
 	import { MapPinIcon, SearchIcon } from "@lucide/svelte";
+	import type { MapContext } from "@sjvair/map-sdk";
 	import { useMonitorMapRouter } from "../router-context";
-	import { mapManager } from "$lib/map/map-manager.svelte.js";
 	import { debounce } from "$lib/utils";
+	import { searchPin } from "./search-pin.svelte.js";
 	import { monitorSearch, geocode, type SearchResult } from "./service";
-	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
 
+	interface SearchProps {
+		map: MapContext;
+	}
+
+	const { map }: SearchProps = $props();
 	const { navigate, basePath } = useMonitorMapRouter();
 
 	let collapsed = $state(true);
 	let searchText = $state("");
 	let results: SearchResult[] = $state([]);
-	let marker: Marker | null = $state.raw(null);
+	// The layout passes one MapContext for the widget's lifetime.
+	// svelte-ignore state_referenced_locally
+	const pin = searchPin(map);
 	let inputEl: HTMLInputElement | null = $state(null);
 
 	function clickOutside(node: HTMLElement) {
@@ -42,16 +47,14 @@
 	function clearSearch() {
 		searchText = "";
 		results = [];
-		marker?.remove();
-		marker = null;
+		pin.clear();
 	}
 
 	async function handleInput() {
 		const query = searchText;
 		if (!query) {
 			results = [];
-			marker?.remove();
-			marker = null;
+			pin.clear();
 			return;
 		}
 		const monitorResults = await monitorSearch(query);
@@ -73,40 +76,24 @@
 		collapsed = true;
 		searchText = "";
 		results = [];
-		marker?.remove();
-		marker = null;
-		if (mapManager.map && result.monitor.position) {
+		pin.clear();
+		if (result.monitor.position) {
 			const { coordinates } = result.monitor.position;
-			const center: [number, number] = [coordinates[0], coordinates[1]];
-			mapManager.map.flyTo({
-				center,
-				zoom: 12
-			});
+			map.flyTo({ center: [coordinates[0], coordinates[1]], zoom: 12 });
 		}
 		await navigate(`${basePath}/monitor/:id`, { params: { id: result.monitor.id } });
-		monitorsMapIntegration.selectedMonitorId = result.monitor.id;
 	}
 
 	function selectGeocode(result: Extract<SearchResult, { type: "geocode" }>) {
 		const { feature } = result;
-		marker?.remove();
-		marker = null;
-		if (mapManager.map) {
-			const center: [number, number] = [feature.center[0], feature.center[1]];
-			marker = new Marker().setLngLat(center).addTo(mapManager.map);
-			const isAddress = feature.place_type?.[0] === "address";
-			mapManager.map.flyTo({
-				center,
-				...(isAddress && { zoom: 16 })
-			});
-		}
+		pin.clear();
+		const center: [number, number] = [feature.center[0], feature.center[1]];
+		pin.place(center);
+		const isAddress = feature.place_type?.[0] === "address";
+		map.flyTo({ center, ...(isAddress && { zoom: 16 }) });
 		results = [];
 		collapsed = true;
 	}
-
-	onDestroy(() => {
-		marker?.remove();
-	});
 </script>
 
 <div

package/src/lib/search/search-pin.svelte.ts

@@ -0,0 +1,35 @@
+import { Marker } from "@maptiler/sdk";
+import { maptilerMap, type MapContext } from "@sjvair/map-sdk";
+
+export interface SearchPin {
+	place(center: [number, number]): void;
+	clear(): void;
+}
+
+/**
+ * The pin a geocoded place leaves on the map. It follows the map: when the GL map is replaced
+ * (a basemap or style rebuild), the pin leaves the old one and is added to the new one. Call it
+ * during component init; the pin is removed when the component is destroyed.
+ */
+export function searchPin(map: MapContext): SearchPin {
+	let center = $state.raw<[number, number] | null>(null);
+
+	$effect(() => {
+		const gl = maptilerMap(map);
+		const at = center;
+		if (!gl || !at) return;
+		const marker = new Marker().setLngLat(at).addTo(gl);
+		return () => {
+			marker.remove();
+		};
+	});
+
+	return {
+		place(next) {
+			center = next;
+		},
+		clear() {
+			center = null;
+		}
+	};
+}

package/src/lib/search/service.ts

@@ -1,6 +1,7 @@
 import { geocoding, type GeocodingFeature } from "@maptiler/sdk";
-import type { MonitorLatestType } from "@sjvair/sdk";
-import { monitorsManager } from "$lib/monitors/monitors.svelte";
+import type { MonitorData } from "@sjvair/sdk";
+import { monitorMapConfig } from "$lib/config.svelte.js";
+import { monitorsStore } from "$lib/stores.svelte.js";
 import AirGradientLogo from "../assets/logos/airgradient-blue.svg";
 import AirNowLogo from "../assets/logos/airnow-compact.jpg";
 import CarbLogo from "../assets/logos/carb-compact.jpg";
@@ -9,7 +10,7 @@ import SJVAirLogo from "../assets/logos/sjvair.svg";
 
 export type MonitorResult = {
 	type: "monitor";
-	monitor: MonitorLatestType<"pm25" | "o3">;
+	monitor: MonitorData;
 	logo: { url: string; alt: string };
 };
 
@@ -22,7 +23,7 @@ export type SearchResult = MonitorResult | GeocodeResult;
 
 const SJV_CENTER: [number, number] = [-119.8, 36.76];
 
-function getMonitorLogo(monitor: MonitorLatestType<"pm25" | "o3">): { url: string; alt: string } {
+function getMonitorLogo(monitor: MonitorData): { url: string; alt: string } {
 	switch (monitor.data_source.name) {
 		case "AQview":
 			return { url: CarbLogo, alt: "AQview" };
@@ -66,29 +67,43 @@ function resolveProximity(): Promise<[number, number]> {
 	});
 }
 
-export async function monitorSearch(query: string): Promise<SearchResult[]> {
-	if (!monitorsManager.latest) return [];
+/** Monitors whose name matches `query`: exact, then prefix, then substring; at most 4. */
+export function searchMonitors(
+	query: string,
+	monitors: Iterable<MonitorData>,
+	latest: ReadonlyMap<string, { value: number | null }>
+): MonitorData[] {
 	const normalized = query.toLowerCase();
-	const exact: MonitorLatestType<"pm25" | "o3">[] = [];
-	const prefix: MonitorLatestType<"pm25" | "o3">[] = [];
-	const substr: MonitorLatestType<"pm25" | "o3">[] = [];
+	const exact: MonitorData[] = [];
+	const prefix: MonitorData[] = [];
+	const substr: MonitorData[] = [];
 
-	for (const monitor of monitorsManager.latest.values()) {
+	// Only monitors with a reading for the current pollutant, as the map shows them.
+	for (const monitor of monitors) {
+		if (latest.get(monitor.id)?.value == null) continue;
 		const name = monitor.name.toLowerCase();
 		if (name === normalized) exact.push(monitor);
 		else if (name.startsWith(normalized)) prefix.push(monitor);
 		else if (name.includes(normalized)) substr.push(monitor);
 	}
 
-	return [...exact, ...prefix, ...substr]
-		.slice(0, 4)
-		.map((monitor) => ({ type: "monitor" as const, monitor, logo: getMonitorLogo(monitor) }));
+	return [...exact, ...prefix, ...substr].slice(0, 4);
 }
 
-export async function geocode(query: string): Promise<SearchResult[]> {
-	const proximity = await getProximity();
+export async function monitorSearch(query: string): Promise<SearchResult[]> {
+	return searchMonitors(query, monitorsStore.monitors.values(), monitorsStore.latest).map(
+		(monitor) => ({ type: "monitor" as const, monitor, logo: getMonitorLogo(monitor) })
+	);
+}
+
+export async function geocodeQuery(
+	query: string,
+	proximity: [number, number],
+	key: string
+): Promise<SearchResult[]> {
 	try {
 		const result = await geocoding.forward(query, {
+			apiKey: key,
 			country: ["us"],
 			fuzzyMatch: true,
 			limit: 4,
@@ -99,3 +114,7 @@ export async function geocode(query: string): Promise<SearchResult[]> {
 		return [];
 	}
 }
+
+export async function geocode(query: string): Promise<SearchResult[]> {
+	return geocodeQuery(query, await getProximity(), monitorMapConfig().maptilerKey);
+}

package/src/lib/stores.svelte.ts

@@ -0,0 +1,15 @@
+import {
+	createCollocationSitesStore,
+	createHmsFireStore,
+	createHmsSmokeStore,
+	createMonitorsStore
+} from "@sjvair/map-sdk/stores";
+
+/**
+ * The app-wide data stores, created once. This module imports only `@sjvair/map-sdk/stores`, so
+ * the light `/core` entry can reach it without loading the map engine.
+ */
+export const monitorsStore = createMonitorsStore();
+export const hmsSmokeStore = createHmsSmokeStore();
+export const hmsFireStore = createHmsFireStore();
+export const collocationSitesStore = createCollocationSitesStore({ monitors: monitorsStore });

package/src/lib/wind/wind-plugin.ts

@@ -0,0 +1,33 @@
+import { config, type CustomLayerInterface } from "@maptiler/sdk";
+import { WindLayer } from "@maptiler/weather";
+import type { MapPlugin } from "@sjvair/map-sdk";
+import { monitorMapConfig } from "../config.svelte.js";
+
+export interface WindPluginOptions {
+	/** Builds the layer; runs again on each restyle. Defaults to a `@maptiler/weather` WindLayer. */
+	createLayer?: (id: string) => CustomLayerInterface;
+}
+
+// The weather layer fetches its data with the SDK's global key, which map-sdk (it passes the key
+// to the map only) never sets.
+const defaultCreateLayer = (id: string) => {
+	config.apiKey = monitorMapConfig().maptilerKey;
+	return new WindLayer({ id, opacity: 0.5 }) as unknown as CustomLayerInterface;
+};
+
+/**
+ * Wind particles as a map-sdk custom layer. `@maptiler/weather` can't be a map-sdk dependency, so
+ * the host adds it here; only the layout chunk reaches this module.
+ */
+export function windPlugin(options: WindPluginOptions = {}): MapPlugin {
+	const createLayer = options.createLayer ?? defaultCreateLayer;
+	return {
+		id: "wind",
+		label: "Wind",
+		selectable: false,
+		setup(ctx) {
+			ctx.addCustomLayer("wind", createLayer);
+			return () => {};
+		}
+	};
+}