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

package/dist/lib/monitors/filtered-source.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { DataSource, MonitorFeatureProperties } from "@sjvair/map-sdk/data";
+import type { MapOptions } from "../options/map-option-defaults";
+type Options = Pick<MapOptions, "monitorTypes" | "inactive" | "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 declare function filteredMonitors(source: DataSource<MonitorFeatureProperties>, options: Options): DataSource<MonitorFeatureProperties>;
+export {};

package/dist/lib/monitors/filtered-source.svelte.js

@@ -0,0 +1,28 @@
+function shown(props, options) {
+    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, options) {
+    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;
+        }
+    };
+}

package/dist/lib/monitors/monitor-details.svelte.js

@@ -9,13 +9,15 @@ export class MonitorDetailsState {
     #id = null;
     // Bumped per request; a response for anything but the latest request is dropped.
     #request = 0;
+    #controller = null;
     async load(id) {
         this.#id = id;
         const request = ++this.#request;
+        const { signal } = this.#restart();
         this.monitor = null;
         this.status = "loading";
         try {
-            const monitor = await getMonitorDetails(id);
+            const monitor = await getMonitorDetails(id, { signal });
             if (request !== this.#request)
                 return;
             this.monitor = monitor;
@@ -37,17 +39,23 @@ export class MonitorDetailsState {
         if (this.status !== "ready" || this.#id === null)
             return;
         const request = ++this.#request;
+        const { signal } = this.#restart();
         try {
-            const monitor = await getMonitorDetails(this.#id);
+            const monitor = await getMonitorDetails(this.#id, { signal });
             if (request !== this.#request)
                 return;
             this.monitor = monitor;
         }
         catch (error) {
-            if (request === this.#request)
+            if (!signal.aborted && request === this.#request)
                 console.error(error);
         }
     }
+    /** Aborts whatever request is in flight and starts a new controller for the next one. */
+    #restart() {
+        this.#controller?.abort();
+        return (this.#controller = new AbortController());
+    }
     retry() {
         return this.#id === null ? Promise.resolve() : this.load(this.#id);
     }

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

@@ -1,39 +1,42 @@
-import { type MonitorData, type MonitorLatestType, type MonitorsMeta, type SJVAirEntryLevel } from "@sjvair/sdk";
-import { XMap } from "@tstk/builtin-extensions";
-import { Interval } from "@tstk/utils";
-import type { MonitorsDataSource } from "./types";
+import type { MonitorData, MonitorsMeta } from "@sjvair/sdk";
+import type { MonitorsStore } from "@sjvair/map-sdk/stores";
 export interface MonitorsInitOptions {
     /**
      * Start the 2-minute polling once the initial load finishes. Defaults to true; pass false to
      * load the data without showing a map (`resumeAutoUpdate()` starts polling later).
      */
     autoUpdate?: boolean;
-}
-declare class MonitorsManager implements MonitorsDataSource {
-    #private;
-    autoUpdate: Interval;
-    initialized: boolean;
-    latest: XMap<string, MonitorLatestType<"pm25" | "o3">> | null;
-    list: Array<MonitorData> | null;
-    meta: MonitorsMeta | null;
-    pollutant: "pm25" | "o3" | null;
-    levels: Array<SJVAirEntryLevel> | null;
-    constructor();
     /**
-     * Safe to call from several places: overlapping calls share one run, and a failed run can
-     * be retried. An explicit "pm25"/"o3" wins over a call without one, whichever came first;
-     * between two explicit values the most recent wins. Polling starts when the run finishes
-     * unless every call sharing it passed `autoUpdate: false`. A no-op once initialized, so it
-     * never restarts polling either: that is `resumeAutoUpdate()`.
+     * Stops waiting: the returned promise rejects with the signal's reason. The shared run keeps
+     * going for the other calls waiting on it, and is cancelled only when every call waiting on it
+     * passed a signal and all of those aborted. Ignored once initialized.
      */
-    init(urlPollutant?: string | number | boolean, options?: MonitorsInitOptions): Promise<void>;
+    signal?: AbortSignal;
+}
+/**
+ * The live monitors data, as hosts have used it since 4.x: a thin view over map-sdk's monitors
+ * store, which owns the data, the shared init and the polling.
+ */
+export interface MonitorsManager {
+    /** Loads the monitors. Only "pm25" and "o3" pass through; anything else means the default. */
+    init(pollutant?: unknown, options?: MonitorsInitOptions): Promise<void>;
+    readonly initialized: boolean;
+    readonly meta: MonitorsMeta | null;
     /**
-     * Starts polling when it is not running: after something stopped it (MonitorMapLayout stops
-     * it on destroy) or after an init that opted out of it. Refreshes first since the data may
-     * be stale. A no-op before init or while polling.
+     * Every monitor, or null until initialized. The same array between reads until the store's
+     * monitors are replaced.
      */
+    readonly list: MonitorData[] | null;
+    /** The pollutant the readings are for, or null before init. */
+    readonly pollutant: string | null;
+    setPollutant(pollutant: "pm25" | "o3"): void;
+    update(options?: {
+        signal?: AbortSignal;
+    }): Promise<void>;
     resumeAutoUpdate(): void;
-    update(): Promise<void>;
+    pauseAutoUpdate(): void;
+    /** The store underneath, for map-sdk plugins and stores. */
+    readonly store: MonitorsStore;
 }
+export declare function createMonitorsManager(store: MonitorsStore): MonitorsManager;
 export declare const monitorsManager: MonitorsManager;
-export type { MonitorsManager };

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

@@ -1,128 +1,37 @@
-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);
-    latest = $state(null);
-    list = $state(null);
-    meta = $state(null);
-    pollutant = $state(null);
-    levels = $derived(this.meta?.entryType(this.pollutant ?? this.meta.default_pollutant).asIter.levels || null);
-    #initPromise = null;
-    #requestedPollutant = null;
-    #requestedAutoUpdate = false;
-    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;
-            });
-        });
-    }
-    /**
-     * Safe to call from several places: overlapping calls share one run, and a failed run can
-     * be retried. An explicit "pm25"/"o3" wins over a call without one, whichever came first;
-     * between two explicit values the most recent wins. Polling starts when the run finishes
-     * unless every call sharing it passed `autoUpdate: false`. A no-op once initialized, so it
-     * never restarts polling either: that is `resumeAutoUpdate()`.
-     */
-    init(urlPollutant, options = {}) {
-        if (this.initialized)
-            return Promise.resolve();
-        if (options.autoUpdate !== false)
-            this.#requestedAutoUpdate = true;
-        if (urlPollutant === "pm25" || urlPollutant === "o3") {
-            this.#requestedPollutant = urlPollutant;
-        }
-        this.#initPromise ??= this.#runInit().finally(() => {
-            this.#initPromise = null;
-            this.#requestedPollutant = null;
-            this.#requestedAutoUpdate = false;
-        });
-        return this.#initPromise;
-    }
-    async #runInit() {
-        // The pollutant the latest readings were requested for.
-        let fetchedPollutant = this.#requestedPollutant;
-        const metaRequest = getMonitorsMeta();
-        const listAndMeta = Promise.all([getMonitorsList(), metaRequest]).then(([list, meta]) => {
-            this.list = list;
-            this.meta = meta;
-            return meta;
-        });
-        // The latest readings only need the pollutant, so they never wait for the list. An explicit
-        // pollutant may still arrive before meta does, in which case the default is never fetched.
-        const latestRequest = fetchedPollutant
-            ? getMonitorsLatestMap(fetchedPollutant)
-            : metaRequest.then((meta) => {
-                const pollutant = this.#requestedPollutant ?? meta.default_pollutant;
-                fetchedPollutant = pollutant;
-                return getMonitorsLatestMap(pollutant);
-            });
-        // One Promise.all so a failure in either never leaves the other unhandled.
-        const [meta, firstLatest] = await Promise.all([listAndMeta, latestRequest]);
-        let latest = firstLatest;
-        // An explicit pollutant may have arrived while the requests above were in flight.
-        let wanted = this.#requestedPollutant ?? meta.default_pollutant;
-        while (wanted !== fetchedPollutant) {
-            latest = await getMonitorsLatestMap(wanted);
-            fetchedPollutant = wanted;
-            wanted = this.#requestedPollutant ?? meta.default_pollutant;
-        }
-        this.pollutant = fetchedPollutant;
-        this.latest = latest;
-        if (this.#requestedAutoUpdate)
-            this.autoUpdate.start();
-        this.initialized = true;
-    }
-    /**
-     * Starts polling when it is not running: after something stopped it (MonitorMapLayout stops
-     * it on destroy) or after an init that opted out of it. Refreshes first since the data may
-     * be stale. A no-op before init or while polling.
-     */
-    resumeAutoUpdate() {
-        if (!this.initialized || this.autoUpdate.isActive)
-            return;
-        this.update().catch(console.error);
-        this.autoUpdate.start();
-    }
-    async update() {
-        if (!this.initialized)
-            return;
-        const pollutant = this.pollutant;
-        const [list, latest] = await Promise.all([
-            getMonitorsList(),
-            getMonitorsLatestMap(pollutant || this.meta?.default_pollutant || "pm25")
-        ]);
-        // The pollutant changed while this was in flight: these readings belong to the previous
-        // one, and the change has already started its own update.
-        if (this.pollutant !== pollutant)
-            return;
-        this.list = list;
-        this.latest = latest;
-    }
+import { monitorsStore } from "../stores.svelte.js";
+function initPollutant(pollutant) {
+    return pollutant === "pm25" || pollutant === "o3" ? pollutant : undefined;
 }
-async function getMonitorsLatestMap(pollutant) {
-    const monitors = await getMonitors(pollutant);
-    const latest = new XMap();
-    for (const monitor of monitors) {
-        latest.set(monitor.id, monitor);
-    }
-    return latest;
+export function createMonitorsManager(store) {
+    // The list built from `store.monitors`, which the store replaces rather than mutates.
+    let listFrom = null;
+    let list = [];
+    return {
+        init: (pollutant, options) => store.init(initPollutant(pollutant), options),
+        get initialized() {
+            return store.initialized;
+        },
+        get meta() {
+            return store.meta;
+        },
+        get list() {
+            if (!store.initialized)
+                return null;
+            const monitors = store.monitors;
+            if (monitors !== listFrom) {
+                listFrom = monitors;
+                list = [...monitors.values()];
+            }
+            return list;
+        },
+        get pollutant() {
+            return store.entryType;
+        },
+        setPollutant: (pollutant) => store.entryTypeFor(pollutant),
+        update: (options) => store.update(options),
+        resumeAutoUpdate: () => store.resumeAutoUpdate(),
+        pauseAutoUpdate: () => store.pauseAutoUpdate(),
+        store
+    };
 }
-export const monitorsManager = new MonitorsManager();
+export const monitorsManager = createMonitorsManager(monitorsStore);

package/dist/lib/monitors/retry-load.d.ts

@@ -0,0 +1,8 @@
+import type { monitorsStore } from "../stores.svelte.js";
+/**
+ * Retries a failed initial monitors load through the store's own `status.retry()`, which repeats
+ * the failed `init()` call. When the status is not an error (nothing to retry), runs `fallback`.
+ */
+export declare function retryMonitorsLoad(store: {
+    dataSource: Pick<typeof monitorsStore.dataSource, "status">;
+}, fallback: () => void): void;

package/dist/lib/monitors/retry-load.js

@@ -0,0 +1,11 @@
+/**
+ * Retries a failed initial monitors load through the store's own `status.retry()`, which repeats
+ * the failed `init()` call. When the status is not an error (nothing to retry), runs `fallback`.
+ */
+export function retryMonitorsLoad(store, fallback) {
+    const { status } = store.dataSource;
+    if (status.state === "error")
+        status.retry();
+    else
+        fallback();
+}

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

@@ -0,0 +1,3 @@
+import type { SignalOptions } from "../abort";
+export declare function getApiToken(): string | undefined;
+export declare function loadSubscriptionLevel(monitorId: string, options?: SignalOptions): Promise<string | null>;

package/dist/lib/monitors/subscriptions.js

@@ -0,0 +1,9 @@
+import { getSubscriptions } from "@sjvair/sdk/account";
+export function getApiToken() {
+    const token = globalThis["USER"]?.api_token;
+    return typeof token === "string" && token !== "" ? token : undefined;
+}
+export async function loadSubscriptionLevel(monitorId, options) {
+    const subscriptions = await getSubscriptions(getApiToken(), { signal: options?.signal });
+    return subscriptions.find((s) => s.monitor === monitorId)?.level ?? null;
+}

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

@@ -1,42 +1,2 @@
-import type { Feature, Geometry } from "geojson";
-import type { MonitorLatestType, MonitorsMeta, MonitorType, SJVAirEntryLevel } from "@sjvair/sdk";
-import type { MapGeoJSONFeature } from "@maptiler/sdk";
-import type { XMap } from "@tstk/builtin-extensions";
-export type MonitorMapFeature = Feature<Geometry, MonitorMarkerProperties>;
-export interface MonitorClusterMapFeature extends MapGeoJSONFeature {
-    properties: MonitorClusterMarkerProperties;
-}
-export interface MonitorMarkerProperties {
-    icon: string;
-    id: string;
-    is_active: boolean;
-    is_sjvair?: boolean;
-    location: string;
-    name: string;
-    order: number;
-    type: MonitorType;
-    value: string;
-}
-export interface MonitorClusterMarkerProperties {
-    cluster: true;
-    cluster_id: number;
-    point_count: number;
-    point_count_abbreviated: string | number;
-    sumValues: number;
-    countValues: number;
-}
-/** The pollutants monitorsMapIntegration/monitorsIconManager can render. */
+/** The pollutants the map can show. */
 export type MonitorsPollutant = "pm25" | "o3";
-/**
- * The reactive data a monitors map display needs: which monitors exist, their
- * per-monitor "latest" value for the active pollutant, and the entry-level metadata
- * used to color icons. `monitorsManager` (live, auto-polling) is the default
- * implementation; a host app can supply its own (e.g. one backed by historical
- * summaries instead of live readings) to reuse the map rendering with different data.
- */
-export interface MonitorsDataSource {
-    readonly meta: MonitorsMeta | null;
-    readonly pollutant: MonitorsPollutant | null;
-    readonly latest: XMap<string, MonitorLatestType<MonitorsPollutant>> | null;
-    readonly levels: Array<SJVAirEntryLevel> | null;
-}

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;