@sjvair/monitor-map 3.6.3 → 4.0.0

package/dist/lib/legend/legend-data.d.ts

@@ -0,0 +1,40 @@
+import type { SJVAirEntryLevel } from "@sjvair/sdk";
+import type { MonitorsPollutant } from "../monitors/types";
+export interface LegendCategory {
+    color: string;
+    label?: string;
+}
+export type LegendBarData = {
+    kind: "gradient";
+    colors: Array<string>;
+    ticks: Array<string>;
+} | {
+    kind: "blocks";
+    categories: Array<LegendCategory>;
+    breakpoints?: Array<string>;
+};
+export interface LegendSection {
+    id: string;
+    title: string;
+    unit?: string;
+    bar: LegendBarData;
+}
+export interface SmokeDensityStyle {
+    label: string;
+    color: string;
+    opacity: number;
+}
+/**
+ * Pollutant legend built from the monitors meta levels — the same levels the map markers are
+ * colored by, so the two can never disagree. One tick per level, at that level's color stop.
+ */
+export declare function pollutantLegendSection(pollutant: MonitorsPollutant, levels: ReadonlyArray<Pick<SJVAirEntryLevel, "color" | "range">>): LegendSection | null;
+/** Fire & Smoke share one toggle, so they render as two independent bars. */
+export declare function fireSmokeLegendSections(fireTiers: ReadonlyArray<LegendCategory>, smoke: ReadonlyArray<SmokeDensityStyle>): Array<LegendSection>;
+/** Approximates how a translucent fill layer looks over a light basemap. */
+export declare function swatchOverWhite(color: string, opacity: number): string;
+export declare function gradientBackground(colors: ReadonlyArray<string>): string;
+/** Hard-edged equal-width blocks: each color repeated at both edges of its own share. */
+export declare function blocksBackground(colors: ReadonlyArray<string>): string;
+/** Percent position of the index-th of `count` evenly spaced labels. */
+export declare function tickPosition(index: number, count: number): number;

package/dist/lib/legend/legend-data.js

@@ -0,0 +1,65 @@
+import { mix } from "color2k";
+const POLLUTANT_TITLES = {
+    pm25: { title: "PM2.5", unit: "µg/m³" },
+    o3: { title: "Ozone", unit: "ppb" }
+};
+/**
+ * Pollutant legend built from the monitors meta levels — the same levels the map markers are
+ * colored by, so the two can never disagree. One tick per level, at that level's color stop.
+ */
+export function pollutantLegendSection(pollutant, levels) {
+    if (levels.length === 0)
+        return null;
+    return {
+        id: "pollutant",
+        ...POLLUTANT_TITLES[pollutant],
+        bar: {
+            kind: "gradient",
+            colors: levels.map((level) => level.color),
+            ticks: levels.map((level) => String(Math.floor(level.range[0])))
+        }
+    };
+}
+/** Fire & Smoke share one toggle, so they render as two independent bars. */
+export function fireSmokeLegendSections(fireTiers, smoke) {
+    return [
+        { id: "fire", title: "Fire", unit: "MW", bar: { kind: "blocks", categories: [...fireTiers] } },
+        {
+            id: "smoke",
+            title: "Smoke Density",
+            bar: {
+                kind: "blocks",
+                categories: smoke.map(({ label, color, opacity }) => ({
+                    label,
+                    color: swatchOverWhite(color, opacity)
+                }))
+            }
+        }
+    ];
+}
+/** Approximates how a translucent fill layer looks over a light basemap. */
+export function swatchOverWhite(color, opacity) {
+    return mix("#ffffff", color, opacity);
+}
+export function gradientBackground(colors) {
+    if (colors.length === 0)
+        return "none";
+    if (colors.length === 1)
+        return colors[0];
+    return `linear-gradient(to right, ${colors.join(", ")})`;
+}
+/** Hard-edged equal-width blocks: each color repeated at both edges of its own share. */
+export function blocksBackground(colors) {
+    const count = colors.length;
+    if (count === 0)
+        return "none";
+    const stops = colors.map((color, i) => `${color} ${percent(i / count)}, ${color} ${percent((i + 1) / count)}`);
+    return `linear-gradient(to right, ${stops.join(", ")})`;
+}
+/** Percent position of the index-th of `count` evenly spaced labels. */
+export function tickPosition(index, count) {
+    return count <= 1 ? 0 : (index / (count - 1)) * 100;
+}
+function percent(fraction) {
+    return `${(fraction * 100).toFixed(2)}%`;
+}

package/dist/lib/map/MapShell.svelte

@@ -19,8 +19,10 @@
 		 * trigger the escape-hatch full-page navigation below.
 		 */
 		knownRoutes?: Array<string>;
-		/** Rendered inside the display-options menu toggle */
+		/** Menus (OptionsGroup/OptionsMenu) rendered inside the options toolbar/panel */
 		menu?: Snippet;
+		/** Rendered last in the toolbar (wide) or beside the menu button (narrow) */
+		search?: Snippet;
 		/** Freeform absolutely-positioned content over the map (legend, search, etc.) */
 		overlays?: Snippet;
 		/** The routed detail panel content */
@@ -50,7 +52,7 @@
 <script lang="ts">
 	import LoadScreen, { disable as disableLoadScreen } from "../LoadScreen.svelte";
 	import Map from "./Map.svelte";
-	import Menu from "./Menu.svelte";
+	import OptionsBar from "../options/OptionsBar.svelte";
 	import { mapManager } from "./map.svelte";
 	import { useMonitorMapRouter } from "../router-context";
 
@@ -60,6 +62,7 @@
 		panelOpen,
 		knownRoutes = [],
 		menu,
+		search,
 		overlays,
 		children,
 		basePath: providedBasePath,
@@ -124,10 +127,8 @@
 	<div class="relative flex-1 overflow-hidden">
 		<Map {integrations} />
 		{@render overlays?.()}
-		{#if menu}
-			<div class="absolute top-4 left-4 z-10">
-				<Menu>{@render menu()}</Menu>
-			</div>
+		{#if menu || search}
+			<OptionsBar {search}>{@render menu?.()}</OptionsBar>
 		{/if}
 	</div>
 	<div

package/dist/lib/map/MapShell.svelte.d.ts

@@ -17,8 +17,10 @@ export interface MapShellProps {
      * trigger the escape-hatch full-page navigation below.
      */
     knownRoutes?: Array<string>;
-    /** Rendered inside the display-options menu toggle */
+    /** Menus (OptionsGroup/OptionsMenu) rendered inside the options toolbar/panel */
     menu?: Snippet;
+    /** Rendered last in the toolbar (wide) or beside the menu button (narrow) */
+    search?: Snippet;
     /** Freeform absolutely-positioned content over the map (legend, search, etc.) */
     overlays?: Snippet;
     /** The routed detail panel content */

package/dist/lib/map/basemap.d.ts

@@ -0,0 +1,14 @@
+/** The slices of MapTiler's MapStyleVariant / ReferenceMapStyle this module needs. */
+export interface StyleVariantLike {
+    getType(): string;
+}
+export interface ReferenceStyleLike<V extends StyleVariantLike> {
+    hasVariant(type: string): boolean;
+    getVariant(type: string): V;
+    getDefaultVariant(): V;
+}
+/**
+ * Variant to show after switching basemaps: the same variant type (e.g. "DARK") when the new
+ * basemap offers it, otherwise the new basemap's default.
+ */
+export declare function variantForStyle<V extends StyleVariantLike>(style: ReferenceStyleLike<V>, previous: StyleVariantLike | null): V;

package/dist/lib/map/basemap.js

@@ -0,0 +1,10 @@
+/**
+ * Variant to show after switching basemaps: the same variant type (e.g. "DARK") when the new
+ * basemap offers it, otherwise the new basemap's default.
+ */
+export function variantForStyle(style, previous) {
+    if (previous && style.hasVariant(previous.getType())) {
+        return style.getVariant(previous.getType());
+    }
+    return style.getDefaultVariant();
+}

package/dist/lib/map/integrations/map-geojson-integration.svelte.d.ts

@@ -6,6 +6,12 @@ export declare abstract class MapGeoJSONIntegration<T = Record<string, unknown>>
     abstract features: Array<Feature<Geometry, T>>;
     abstract mapSource: Parameters<MaptilerMap["addSource"]>[1];
     remove(): void;
+    /**
+     * Removes only this integration's own layer and source. Non-virtual on purpose: `apply()`
+     * paths call it to clear stale map state before re-adding, without triggering a subclass's
+     * `remove()` override (which also tears down tooltips/click handlers that apply just set up).
+     */
+    protected removeLayerAndSource(): void;
 }
 export declare abstract class MapIconLayerIntegration<T = Record<string, unknown>> extends MapGeoJSONIntegration<T> {
     abstract icons: MapIconManager;

package/dist/lib/map/integrations/map-geojson-integration.svelte.js

@@ -2,7 +2,17 @@ import { MapLayerIntegration } from "./map-layer-integration.svelte";
 import { mapManager } from "../map.svelte";
 export class MapGeoJSONIntegration extends MapLayerIntegration {
     remove() {
-        super.remove();
+        this.removeLayerAndSource();
+    }
+    /**
+     * Removes only this integration's own layer and source. Non-virtual on purpose: `apply()`
+     * paths call it to clear stale map state before re-adding, without triggering a subclass's
+     * `remove()` override (which also tears down tooltips/click handlers that apply just set up).
+     */
+    removeLayerAndSource() {
+        if (mapManager.map?.getLayer(this.referenceId)) {
+            mapManager.map.removeLayer(this.referenceId);
+        }
         if (mapManager.map?.getSource(this.referenceId)) {
             mapManager.map.removeSource(this.referenceId);
         }
@@ -13,7 +23,10 @@ export class MapIconLayerIntegration extends MapGeoJSONIntegration {
         if (!mapManager.map)
             return;
         this.icons.loadIcons().then(() => {
-            this.remove();
+            // A basemap change started while icons loaded; the refresh on "style.load" re-applies.
+            if (mapManager.styleLoading)
+                return;
+            this.removeLayerAndSource();
             mapManager.map?.addSource(this.referenceId, this.mapSource);
             super.apply();
         });

package/dist/lib/map/integrations/map-layer-integration.svelte.js

@@ -8,13 +8,17 @@ export class MapLayerIntegration extends MapIntegration {
         // Each integration manages its own lifecycle. Tracking both mapManager.map and
         // this.enabled means apply/remove fire automatically on map load and on enabled
         // changes. untrack on the call itself prevents reactive reads inside apply/remove
-        // from leaking back into this effect's dependency graph.
+        // from leaking back into this effect's dependency graph. While a new basemap style is
+        // loading nothing is applied or removed: the refresh on "style.load" does both.
         $effect.root(() => {
             $effect(() => {
-                if (mapManager.map && this.enabled) {
+                const enabled = this.enabled;
+                if (!mapManager.map || mapManager.styleLoading)
+                    return;
+                if (enabled) {
                     untrack(() => this.apply());
                 }
-                else if (mapManager.map && !this.enabled) {
+                else {
                     untrack(() => this.remove());
                 }
             });

package/dist/lib/map/map-style-state.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { MapStyleVariant, ReferenceMapStyle } from "@maptiler/sdk";
+/** Basemap + theme selection, shared so the Settings menu and Reset Map Options agree. */
+declare class MapStyleState {
+    referenceStyle: ReferenceMapStyle;
+    variant: MapStyleVariant;
+    private applied;
+    selectReferenceStyle(style: ReferenceMapStyle): void;
+    selectVariant(variant: MapStyleVariant): void;
+    reset(): void;
+    private apply;
+}
+export declare const mapStyleState: MapStyleState;
+export type { MapStyleState };

package/dist/lib/map/map-style-state.svelte.js

@@ -0,0 +1,35 @@
+import { DefaultMapStyle, mapManager } from "./map.svelte";
+import { integrationsManager } from "./integrations/integrations-manager";
+import { variantForStyle } from "./basemap";
+/** Basemap + theme selection, shared so the Settings menu and Reset Map Options agree. */
+class MapStyleState {
+    referenceStyle = $state.raw(DefaultMapStyle.getReferenceStyle());
+    variant = $state.raw(DefaultMapStyle);
+    applied = DefaultMapStyle;
+    selectReferenceStyle(style) {
+        this.referenceStyle = style;
+        this.selectVariant(variantForStyle(style, this.variant));
+    }
+    selectVariant(variant) {
+        this.variant = variant;
+        this.apply();
+    }
+    reset() {
+        this.referenceStyle = DefaultMapStyle.getReferenceStyle();
+        this.selectVariant(DefaultMapStyle);
+    }
+    apply() {
+        const map = mapManager.map;
+        if (!map || this.variant === this.applied)
+            return;
+        this.applied = this.variant;
+        // setStyle wipes every custom source/layer; re-add enabled integrations once it loads.
+        map.once("style.load", () => {
+            mapManager.styleLoading = false;
+            integrationsManager.refresh();
+        });
+        mapManager.styleLoading = true;
+        map.setStyle(this.variant);
+    }
+}
+export const mapStyleState = new MapStyleState();

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

@@ -4,6 +4,12 @@ import type { Feature, GeoJsonProperties, Geometry } from "geojson";
 export declare const DefaultMapStyle: MapStyleVariant;
 declare class MapManager {
     map: MaptilerMap | null;
+    /**
+     * True between `setStyle()` and the new style's "style.load". Plain (non-reactive) on purpose:
+     * integrations skip touching the style while it's set, and the `integrationsManager.refresh()`
+     * that runs on "style.load" applies/removes every integration afterwards.
+     */
+    styleLoading: boolean;
     setDataSource(sourceId: string, features: Array<Feature<Geometry, GeoJsonProperties>>): void;
     refreshMap(): void;
     removeExcludedLayers(): void;

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

@@ -5,6 +5,12 @@ export const DefaultMapStyle = MapStyle.STREETS_V4.DEFAULT;
 const excludeLayers = ["Sport", "Tourism", "Culture", "Shopping", "Food", "Transport"];
 class MapManager {
     map = $state(null);
+    /**
+     * True between `setStyle()` and the new style's "style.load". Plain (non-reactive) on purpose:
+     * integrations skip touching the style while it's set, and the `integrationsManager.refresh()`
+     * that runs on "style.load" applies/removes every integration afterwards.
+     */
+    styleLoading = false;
     setDataSource(sourceId, features) {
         const source = mapManager.map?.getSource(sourceId);
         if (isGeoJSONSource(source)) {

package/dist/lib/monitors/monitor-groups.d.ts

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

package/dist/lib/monitors/monitor-groups.js

@@ -0,0 +1,7 @@
+/** Monitor display-option keys shown under each Monitors menu group, in display order. */
+export const REFERENCE_GRADE_TYPES = ["airnow", "aqlite", "aqview", "bam1022"];
+export const LOW_COST_TYPES = ["airgradient", "purpleair", "vozbox"];
+export function typeSupportsPollutant(meta, type, pollutant) {
+    const deviceMeta = meta?.monitors[type];
+    return !!deviceMeta && !!pollutant && pollutant in deviceMeta.entries;
+}

package/dist/lib/monitors/monitor-utils.js

@@ -26,15 +26,13 @@ export function getOrder(monitor) {
 }
 export function getTypeShape(type) {
     switch (type) {
-        case "airgradient":
-            return "circle";
         case "airnow":
         case "aqview":
         case "bam1022":
         case "aqlite":
             return "triangle";
+        case "airgradient":
         case "purpleair":
-            return "square";
         case "vozbox":
             return "circle";
         default:

package/dist/lib/monitors/monitors-icon-manager.svelte.js

@@ -8,18 +8,15 @@ const MONITOR_ICON_DISPLAY_COLOR = "#48c78e"; // light gray
 export function getIconId(monitor, level) {
     const id = `${monitor.location}-${monitor.is_active ? level.name : "default"}`;
     switch (monitor.type) {
-        case "airgradient":
-            return `${id}-circle`;
         case "airnow":
         case "aqview":
         case "bam1022":
+        case "aqlite":
             return `${id}-triangle`;
+        case "airgradient":
         case "purpleair":
-            return `${id}-${monitor.is_sjvair ? "circle" : "square"}`;
         case "vozbox":
             return `${id}-circle`;
-        case "aqlite":
-            return `${id}-triangle`;
         default:
             throw new Error(`Map icon for ${monitor.device} has not been set`);
     }

package/dist/lib/monitors/monitors-map-integration.svelte.d.ts

@@ -14,13 +14,13 @@ declare class MonitorsMapIntegration extends MapIconLayerIntegration<MonitorMark
     tooltipManager: TooltipManager;
     private renderer;
     displayOptions: {
-        purpleair: MapDisplayOption;
-        sjvair: MapDisplayOption;
+        airnow: MapDisplayOption;
+        aqlite: MapDisplayOption;
         aqview: MapDisplayOption;
         bam1022: MapDisplayOption;
-        airnow: MapDisplayOption;
+        airgradient: MapDisplayOption;
+        purpleair: MapDisplayOption;
         vozbox: MapDisplayOption;
-        aqlite: MapDisplayOption;
         inactive: MapDisplayOption;
         inside: MapDisplayOption;
     };

package/dist/lib/monitors/monitors-map-integration.svelte.js

@@ -11,12 +11,6 @@ import { MonitorsClusterRenderer, monitorTooltip } from "./monitors-cluster-rend
 const filters = {
     monitor(deviceType) {
         return ["==", ["get", "type"], deviceType];
-    },
-    purpleair() {
-        return ["all", ["==", ["get", "type"], "purpleair"], ["==", ["get", "is_sjvair"], false]];
-    },
-    sjvPurpleair() {
-        return ["all", ["==", ["get", "type"], "purpleair"], ["==", ["get", "is_sjvair"], true]];
     }
 };
 class MonitorsMapIntegration extends MapIconLayerIntegration {
@@ -28,13 +22,13 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
     tooltipManager = new TooltipManager();
     renderer = new MonitorsClusterRenderer(this);
     displayOptions = $derived.by(() => ({
-        purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-square")),
-        sjvair: new MapDisplayOption("SJVAir non-FEM", true, this.icons.get("outside-display-circle")),
-        aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
-        bam1022: new MapDisplayOption("SJVAir FEM", true, this.icons.get("outside-display-triangle")),
         airnow: new MapDisplayOption("AirNow", true, this.icons.get("outside-display-triangle")),
-        vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
         aqlite: new MapDisplayOption("AQLite", true, this.icons.get("outside-display-triangle")),
+        aqview: new MapDisplayOption("AQview", true, this.icons.get("outside-display-triangle")),
+        bam1022: new MapDisplayOption("SJVAir", true, this.icons.get("outside-display-triangle")),
+        airgradient: new MapDisplayOption("AirGradient", true, this.icons.get("outside-display-circle")),
+        purpleair: new MapDisplayOption("PurpleAir", true, this.icons.get("outside-display-circle")),
+        vozbox: new MapDisplayOption("VOZbox", true, this.icons.get("outside-display-circle")),
         inactive: new MapDisplayOption("Inactive", false, this.icons.get("outside-default-square")),
         inside: new MapDisplayOption("Inside", false, this.icons.get("inside-display-square"))
     }));
@@ -95,20 +89,20 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
             ["==", ["get", "location"], "outside"]
         ];
         const statusFilters = ["any", ["==", ["get", "is_active"], true]];
-        if (this.displayOptions.purpleair.value)
-            monitorFilters.push(filters.purpleair());
+        if (this.displayOptions.airnow.value)
+            monitorFilters.push(filters.monitor("airnow"));
+        if (this.displayOptions.aqlite.value)
+            monitorFilters.push(filters.monitor("aqlite"));
         if (this.displayOptions.aqview.value)
             monitorFilters.push(filters.monitor("aqview"));
         if (this.displayOptions.bam1022.value)
             monitorFilters.push(filters.monitor("bam1022"));
-        if (this.displayOptions.airnow.value)
-            monitorFilters.push(filters.monitor("airnow"));
+        if (this.displayOptions.airgradient.value)
+            monitorFilters.push(filters.monitor("airgradient"));
+        if (this.displayOptions.purpleair.value)
+            monitorFilters.push(filters.monitor("purpleair"));
         if (this.displayOptions.vozbox.value)
             monitorFilters.push(filters.monitor("vozbox"));
-        if (this.displayOptions.aqlite.value)
-            monitorFilters.push(filters.monitor("aqlite"));
-        if (this.displayOptions.sjvair.value)
-            monitorFilters.push(filters.sjvPurpleair(), filters.monitor("airgradient"));
         if (this.displayOptions.inside.value)
             locationFilters.push(["==", ["get", "location"], "inside"]);
         if (this.displayOptions.inactive.value)
@@ -116,8 +110,7 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
         return ["all", monitorFilters, locationFilters, statusFilters];
     });
     // Groups features by monitor type for per-type cluster sources, applying display option
-    // filters so cluster aggregates only include visible monitors. sjvair purpleair is remapped
-    // to "airgradient" since they share the same shape (circle).
+    // filters so cluster aggregates only include visible monitors.
     featuresByType = $derived.by(() => {
         const opts = this.displayOptions;
         const byType = {};
@@ -128,20 +121,19 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
             if (p.location === "inside" && !opts.inside.value)
                 continue;
             const typeVisible = {
-                purpleair: p.is_sjvair ? opts.sjvair.value : opts.purpleair.value,
-                airgradient: opts.sjvair.value,
+                airnow: opts.airnow.value,
+                aqlite: opts.aqlite.value,
                 aqview: opts.aqview.value,
                 bam1022: opts.bam1022.value,
-                airnow: opts.airnow.value,
-                vozbox: opts.vozbox.value,
-                aqlite: opts.aqlite.value
+                airgradient: opts.airgradient.value,
+                purpleair: opts.purpleair.value,
+                vozbox: opts.vozbox.value
             };
             if (!(typeVisible[p.type] ?? true))
                 continue;
-            const key = p.type === "purpleair" && p.is_sjvair ? "airgradient" : p.type;
-            const arr = byType[key] ?? [];
+            const arr = byType[p.type] ?? [];
             arr.push(feat);
-            byType[key] = arr;
+            byType[p.type] = arr;
         }
         return byType;
     });
@@ -181,12 +173,20 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
         this.dataSource = dataSource;
         this.icons = new MonitorsIconManager(dataSource);
         $effect.root(() => {
+            // Every effect below early-returns while disabled (Pollutant = None) so a data refresh
+            // can't re-add the layer. `enabled` is read untracked: the base class's own effect
+            // already applies/removes on enabled changes, and tracking it here would apply twice.
+            // The guard comes after each effect's tracked reads so its dependencies are always
+            // collected; returning before reading anything would leave the effect permanently dead.
             // Push filter changes to the active layer(s) imperatively
             $effect(() => {
                 const filter = this.filters;
+                const clustered = this.clustered;
                 if (!mapManager.map)
                     return;
-                if (this.clustered) {
+                if (!untrack(() => this.enabled))
+                    return;
+                if (clustered) {
                     this.renderer.syncFilter();
                 }
                 else {
@@ -200,6 +200,8 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
                 const features = this.features;
                 if (!mapManager.map || this.clustered)
                     return;
+                if (!untrack(() => this.enabled))
+                    return;
                 mapManager.setDataSource(this.referenceId, features);
             });
             // Keep cluster source data in sync when features or display options change
@@ -207,6 +209,8 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
                 void this.featuresByType;
                 if (!mapManager.map || !this.clustered)
                     return;
+                if (!untrack(() => this.enabled))
+                    return;
                 this.renderer.syncFeatures();
             });
             // Push updated icon expressions to cluster layers when the pollutant changes
@@ -214,6 +218,8 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
                 const thresholds = this.clusterIconThresholds;
                 if (!mapManager.map || !this.clustered || !thresholds.length)
                     return;
+                if (!untrack(() => this.enabled))
+                    return;
                 this.renderer.syncThresholds();
             });
             // Re-apply when clustered mode switches or when data first arrives (cold load).
@@ -224,6 +230,8 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
                 const hasFeatures = Object.keys(this.featuresByType).length > 0;
                 if (!untrack(() => mapManager.map) || !hasFeatures)
                     return;
+                if (!untrack(() => this.enabled))
+                    return;
                 untrack(() => this.apply());
             });
             // Sync selected icon scale via feature state
@@ -250,6 +258,8 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
             this.tooltipManager.disable();
             this.renderer.remove();
             this.icons.loadIcons().then(() => {
+                if (mapManager.styleLoading)
+                    return;
                 this.renderer.apply(this.handleMonitorClick);
                 this.tooltipManager.enable();
                 this.applySelectedState();
@@ -262,12 +272,15 @@ class MonitorsMapIntegration extends MapIconLayerIntegration {
             clickManager.unregister([this.referenceId]);
             super.apply();
             this.icons.loadIcons().then(() => {
+                if (mapManager.styleLoading)
+                    return;
                 clickManager.register([this.referenceId], this.handleMonitorClick);
                 this.applySelectedState();
             });
         }
     }
     remove() {
+        this.tooltipManager.disable();
         clickManager.unregister([this.referenceId]);
         this.renderer.remove();
         super.remove();

package/dist/lib/monitors/monitors.svelte.d.ts

@@ -10,6 +10,7 @@ declare class MonitorsManager implements MonitorsDataSource {
     meta: MonitorsMeta | null;
     pollutant: "pm25" | "o3" | null;
     levels: Array<SJVAirEntryLevel> | null;
+    constructor();
     init(urlPollutant?: string | number | boolean): Promise<void>;
     update(): Promise<void>;
 }

package/dist/lib/monitors/monitors.svelte.js

@@ -1,6 +1,7 @@
 import { getMonitors, getMonitorsList, getMonitorsMeta } from "@sjvair/sdk";
 import { XMap } from "@tstk/builtin-extensions";
 import { Interval } from "@tstk/utils";
+import { untrack } from "svelte";
 class MonitorsManager {
     autoUpdate = new Interval(async () => await this.update(), 2 * 60 * 1000);
     initialized = $state(false);
@@ -9,6 +10,27 @@ class MonitorsManager {
     meta = $state(null);
     pollutant = $state(null);
     levels = $derived(this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
+    constructor() {
+        // Refetch monitors when the pollutant changes after the initial load, wherever the change
+        // comes from (Pollutant menu, URL sync, a host's own UI). Clearing first blanks the markers
+        // instead of briefly coloring them with the previous pollutant's readings.
+        let fetchedPollutant = null;
+        $effect.root(() => {
+            $effect(() => {
+                const pollutant = this.pollutant;
+                if (!this.initialized)
+                    return;
+                if (fetchedPollutant !== null && fetchedPollutant !== pollutant) {
+                    untrack(() => {
+                        this.list = [];
+                        this.latest = null;
+                        this.update();
+                    });
+                }
+                fetchedPollutant = pollutant;
+            });
+        });
+    }
     async init(urlPollutant) {
         if (this.initialized)
             return;