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

package/dist/lib/ev-stations/ev-stations-map-integration.svelte.js

@@ -1,226 +0,0 @@
-import { untrack } from "svelte";
-import { mapManager } from "../map/map-manager.svelte.js";
-import { clickManager } from "../map/integrations/click-manager";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { MapDisplayOption } from "../map/integrations/map-display-option.svelte";
-import { TooltipManager } from "../map/integrations/tooltip.svelte";
-import { mountClickPopup } from "../map/utils";
-import { evStationsManager } from "./ev-stations.svelte";
-import { EvStationIconManager } from "./ev-station-icons";
-import { EvStationsClusterRenderer } from "./ev-stations-cluster-renderer";
-import EvStationTooltip from "./components/EvStationTooltip.svelte";
-class EvStationsMapIntegration extends MapIconLayerIntegration {
-    referenceId = "ev-stations";
-    enabled = $state(false);
-    clustered = $state(true);
-    icons = new EvStationIconManager();
-    tooltipManager = new TooltipManager();
-    renderer = new EvStationsClusterRenderer(this);
-    currentPopup = null;
-    displayOptions = $derived.by(() => ({
-        lvl2: new MapDisplayOption("Level 2", true, this.icons.get("ev-station-lvl2")),
-        lvl3: new MapDisplayOption("Level 3", true, this.icons.get("ev-station-lvl3"))
-    }));
-    features = $derived.by(() => {
-        const result = [];
-        if (evStationsManager.lvl2Stations) {
-            for (const station of evStationsManager.lvl2Stations) {
-                result.push(toFeature(station, "lvl2"));
-            }
-        }
-        if (evStationsManager.lvl3Stations) {
-            for (const station of evStationsManager.lvl3Stations) {
-                result.push(toFeature(station, "lvl3"));
-            }
-        }
-        return result;
-    });
-    featuresByLevel = $derived.by(() => {
-        const byLevel = {};
-        for (const feature of this.features) {
-            const level = feature.properties.level;
-            if (level === "lvl2" && !this.displayOptions.lvl2.value)
-                continue;
-            if (level === "lvl3" && !this.displayOptions.lvl3.value)
-                continue;
-            const arr = byLevel[level] ?? [];
-            arr.push(feature);
-            byLevel[level] = arr;
-        }
-        return byLevel;
-    });
-    filters = $derived.by(() => {
-        const levels = [];
-        if (this.displayOptions.lvl2.value)
-            levels.push("lvl2");
-        if (this.displayOptions.lvl3.value)
-            levels.push("lvl3");
-        if (levels.length === 0)
-            return ["==", ["get", "level"], "none"];
-        if (levels.length === 2)
-            return ["boolean", true];
-        return ["==", ["get", "level"], levels[0]];
-    });
-    handleStationClick = (features, evt) => {
-        this.currentPopup?.remove();
-        const feature = features[0];
-        if (!feature)
-            return;
-        this.currentPopup = mountClickPopup(EvStationTooltip, { feature }, evt.lngLat);
-        this.currentPopup.addTo(mapManager.map);
-    };
-    get mapLayer() {
-        return {
-            id: this.referenceId,
-            type: "symbol",
-            source: this.referenceId,
-            filter: this.filters,
-            layout: {
-                "icon-allow-overlap": true,
-                "icon-ignore-placement": true,
-                "icon-image": ["get", "icon"],
-                "icon-size": 1
-            },
-            paint: {}
-        };
-    }
-    get mapSource() {
-        return {
-            type: "geojson",
-            promoteId: "id",
-            data: {
-                type: "FeatureCollection",
-                features: this.features
-            }
-        };
-    }
-    constructor() {
-        super();
-        $effect.root(() => {
-            // Lazy-fetch level data only once the integration is enabled and the level is on
-            $effect(() => {
-                if (this.enabled &&
-                    this.displayOptions.lvl2.value &&
-                    evStationsManager.lvl2Stations === undefined) {
-                    evStationsManager.loadLvl2Stations();
-                }
-            });
-            $effect(() => {
-                if (this.enabled &&
-                    this.displayOptions.lvl3.value &&
-                    evStationsManager.lvl3Stations === undefined) {
-                    evStationsManager.loadLvl3Stations();
-                }
-            });
-            // Every effect below early-returns while disabled 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 unclustered layer
-            $effect(() => {
-                const filter = this.filters;
-                if (!mapManager.map || this.clustered)
-                    return;
-                if (!untrack(() => this.enabled))
-                    return;
-                if (mapManager.map.getLayer(this.referenceId)) {
-                    mapManager.map.setFilter(this.referenceId, filter);
-                }
-            });
-            // Sync unclustered source when features change
-            $effect(() => {
-                const features = this.features;
-                if (!mapManager.map || this.clustered)
-                    return;
-                if (!untrack(() => this.enabled))
-                    return;
-                mapManager.setDataSource(this.referenceId, features);
-            });
-            // Sync clustered sources when featuresByLevel changes
-            $effect(() => {
-                void this.featuresByLevel;
-                if (!mapManager.map || !this.clustered)
-                    return;
-                if (!untrack(() => this.enabled))
-                    return;
-                this.renderer.syncFeatures();
-            });
-            // Re-apply when clustered mode switches or data first arrives
-            $effect(() => {
-                void this.clustered;
-                const hasFeatures = Object.keys(this.featuresByLevel).length > 0;
-                if (!untrack(() => mapManager.map) || !hasFeatures)
-                    return;
-                if (!untrack(() => this.enabled))
-                    return;
-                untrack(() => this.apply());
-            });
-        });
-    }
-    apply() {
-        if (!mapManager.map)
-            return;
-        if (this.clustered) {
-            if (mapManager.map.getLayer(this.referenceId))
-                mapManager.map.removeLayer(this.referenceId);
-            if (mapManager.map.getSource(this.referenceId))
-                mapManager.map.removeSource(this.referenceId);
-            clickManager.unregister([this.referenceId]);
-            this.tooltipManager.disable();
-            this.renderer.remove();
-            // Clustering may be toggled again before the icons arrive; only the latest apply runs.
-            this.supersedePending();
-            this.whenIconsLoad(() => {
-                this.renderer.apply(this.handleStationClick);
-                this.tooltipManager.enable();
-            });
-        }
-        else {
-            this.renderer.remove();
-            this.tooltipManager.disable();
-            clickManager.unregister([this.referenceId]);
-            super.apply();
-            this.whenIconsLoad(() => {
-                clickManager.register([this.referenceId], this.handleStationClick);
-                this.tooltipManager.enable();
-            });
-        }
-    }
-    remove() {
-        clickManager.unregister([this.referenceId]);
-        clickManager.unregister(this.renderer.unclusteredLayerIds);
-        this.renderer.remove();
-        this.currentPopup?.remove();
-        this.currentPopup = null;
-        super.remove();
-    }
-}
-function toFeature(station, level) {
-    return {
-        type: "Feature",
-        properties: {
-            icon: `ev-station-${level}`,
-            id: station.id,
-            level,
-            station_name: station.station_name ?? "",
-            facility_type: station.facility_type ?? "",
-            ev_network: station.ev_network ?? "",
-            station_phone: station.station_phone ?? "",
-            street_address: station.street_address ?? "",
-            city: station.city ?? "",
-            state: station.state ?? "",
-            zip: station.zip ?? "",
-            access_days_time: station.access_days_time ?? "",
-            access_detail_code: station.access_detail_code ?? "",
-            cards_accepted: station.cards_accepted ?? null,
-            ev_pricing: station.ev_pricing ?? "",
-            ev_connector_types: JSON.stringify(station.ev_connector_types ?? [])
-        },
-        geometry: {
-            type: "Point",
-            coordinates: [station.longitude, station.latitude]
-        }
-    };
-}
-export const evStationsMapIntegration = new EvStationsMapIntegration();

package/dist/lib/ev-stations/ev-stations.svelte.d.ts

@@ -1,10 +0,0 @@
-import type { SignalOptions } from "../abort";
-import type { EvStation } from "./types";
-declare class EvStationsManager {
-    lvl2Stations: Array<EvStation> | undefined;
-    lvl3Stations: Array<EvStation> | undefined;
-    loadLvl3Stations({ signal }?: SignalOptions): Promise<void>;
-    loadLvl2Stations({ signal }?: SignalOptions): Promise<void>;
-}
-export declare const evStationsManager: EvStationsManager;
-export type { EvStationsManager };

package/dist/lib/ev-stations/ev-stations.svelte.js

@@ -1,57 +0,0 @@
-import { accessDetailCodeTypes, creditCardTypes, evConnectorTypes, evNetworkTypes, facilityTypes } from "./data-maps";
-import * as ZipCodes from "./zip-codes";
-class EvStationsManager {
-    lvl2Stations = $state();
-    lvl3Stations = $state();
-    async loadLvl3Stations({ signal } = {}) {
-        this.lvl3Stations = await fetchEvStations("dc_fast", signal);
-    }
-    async loadLvl2Stations({ signal } = {}) {
-        this.lvl2Stations = await fetchEvStations("2", signal);
-    }
-}
-const zipCodes = Object.values(ZipCodes)
-    .reduce((prev, curr) => prev.concat(curr))
-    .join(",");
-async function fetchEvStations(chargingLevel, signal) {
-    if (signal?.aborted)
-        throw signal.reason;
-    const url = new URL(`https://developer.nlr.gov/api/alt-fuel-stations/v1.json`);
-    url.searchParams.set("fuel_type", "ELEC");
-    url.searchParams.set("state", "CA");
-    url.searchParams.set("status", "E");
-    url.searchParams.set("access", "public");
-    url.searchParams.set("ev_charging_level", chargingLevel);
-    url.searchParams.set("zip", zipCodes);
-    url.searchParams.set("api_key", import.meta.env.VITE_NREL_KEY);
-    return await fetch(url, { signal })
-        .then(async (res) => await res.json())
-        .then((data) => {
-        const fuelStations = data.fuel_stations;
-        return (fuelStations
-            .map((station) => {
-            if (station.access_detail_code) {
-                station.access_detail_code = accessDetailCodeTypes.get(station.access_detail_code);
-            }
-            if (station.cards_accepted) {
-                station.cards_accepted = station.cards_accepted
-                    .split(" ")
-                    .map((c) => creditCardTypes.get(c))
-                    .join(", ");
-            }
-            if (station.ev_connector_types && station.ev_connector_types.length) {
-                station.ev_connector_types = station.ev_connector_types.map((t) => evConnectorTypes.get(t));
-            }
-            if (station.ev_network) {
-                station.ev_network = evNetworkTypes.get(station.ev_network);
-            }
-            if (station.facility_type) {
-                station.facility_type = facilityTypes.get(station.facility_type);
-            }
-            return station;
-        })
-            // remove stations with invalid coordinates
-            .filter((station) => station.id !== 226154));
-    });
-}
-export const evStationsManager = new EvStationsManager();

package/dist/lib/hms/hms-fire-icon-manager.d.ts

@@ -1,13 +0,0 @@
-import { MapIconManager } from "../map/integrations/map-icon-manager";
-import type { LegendCategory } from "../legend/legend-data";
-export type FRPTier = "sm" | "md" | "lg" | "xl" | "xxl";
-export declare const FRP_TIERS: Record<FRPTier, {
-    color: string;
-    size: number;
-}>;
-/** Fire legend blocks (MW), in tier order, using the same colors as the map icons. */
-export declare const FIRE_LEGEND_CATEGORIES: Array<LegendCategory>;
-export declare function getTierIconId(frp: number): string;
-export declare class HMSFireIconManager extends MapIconManager {
-    constructor();
-}

package/dist/lib/hms/hms-fire-icon-manager.js

@@ -1,39 +0,0 @@
-import { asDataURI, fireIcon } from "../map/icons";
-import { MapIconManager } from "../map/integrations/map-icon-manager";
-export const FRP_TIERS = {
-    sm: { color: "#FFD700", size: 20 },
-    md: { color: "#FF8C00", size: 24 },
-    lg: { color: "#FF4500", size: 28 },
-    xl: { color: "#DC143C", size: 32 },
-    xxl: { color: "#8B0000", size: 36 }
-};
-const FRP_TIER_LABELS = {
-    sm: "<10",
-    md: "10-49",
-    lg: "50-149",
-    xl: "150-349",
-    xxl: "≥350"
-};
-/** Fire legend blocks (MW), in tier order, using the same colors as the map icons. */
-export const FIRE_LEGEND_CATEGORIES = Object.keys(FRP_TIERS).map((tier) => ({ color: FRP_TIERS[tier].color, label: FRP_TIER_LABELS[tier] }));
-export function getTierIconId(frp) {
-    if (frp < 10)
-        return "hms-fire-sm";
-    if (frp < 50)
-        return "hms-fire-md";
-    if (frp < 150)
-        return "hms-fire-lg";
-    if (frp < 350)
-        return "hms-fire-xl";
-    return "hms-fire-xxl";
-}
-export class HMSFireIconManager extends MapIconManager {
-    constructor() {
-        super();
-        for (const [tier, { color, size }] of Object.entries(FRP_TIERS)) {
-            const img = new Image(size, size);
-            img.src = asDataURI(fireIcon(color, size));
-            this.register(`hms-fire-${tier}`, img);
-        }
-    }
-}

package/dist/lib/hms/hms-fire-map-integration.svelte.d.ts

@@ -1,23 +0,0 @@
-import type { Map as MaptilerMap } from "@maptiler/sdk";
-import type { Feature } from "geojson";
-import type { Point } from "geojson";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { HMSFireIconManager } from "./hms-fire-icon-manager";
-type FireProperties = Record<string, unknown>;
-declare class HMSFireMapIntegration extends MapIconLayerIntegration<FireProperties> {
-    referenceId: string;
-    enabled: boolean;
-    icons: HMSFireIconManager;
-    private zoomedIn;
-    get features(): Array<Feature<Point, FireProperties>>;
-    get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0];
-    get mapSource(): Parameters<MaptilerMap["addSource"]>[1];
-    private get groupFeatures();
-    private get hotspotFeatures();
-    private onZoom;
-    constructor();
-    apply(): void;
-    remove(): void;
-}
-export declare const hmsFireMapIntegration: HMSFireMapIntegration;
-export type { HMSFireMapIntegration };

package/dist/lib/hms/hms-fire-map-integration.svelte.js

@@ -1,94 +0,0 @@
-import { mapManager } from "../map/map-manager.svelte.js";
-import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { hmsManager } from "./hms.svelte";
-import { HMSFireIconManager, getTierIconId } from "./hms-fire-icon-manager";
-const ZOOM_THRESHOLD = 10;
-class HMSFireMapIntegration extends MapIconLayerIntegration {
-    referenceId = "hms-fire";
-    enabled = $state(true);
-    icons = new HMSFireIconManager();
-    zoomedIn = $state(false);
-    get features() {
-        return this.zoomedIn ? this.hotspotFeatures : this.groupFeatures;
-    }
-    get mapLayer() {
-        return {
-            id: this.referenceId,
-            type: "symbol",
-            source: this.referenceId,
-            layout: {
-                "icon-image": ["get", "icon"],
-                "icon-allow-overlap": true,
-                "icon-ignore-placement": true
-            },
-            paint: {}
-        };
-    }
-    get mapSource() {
-        return {
-            type: "geojson",
-            promoteId: "id",
-            data: { type: "FeatureCollection", features: this.features }
-        };
-    }
-    get groupFeatures() {
-        return (hmsManager.fireGroups ?? []).map((g) => ({
-            type: "Feature",
-            properties: {
-                id: g.id,
-                icon: getTierIconId(g.avgFrp),
-                avgFrp: g.avgFrp,
-                count: g.count
-            },
-            geometry: { type: "Point", coordinates: g.coordinates }
-        }));
-    }
-    get hotspotFeatures() {
-        return (hmsManager.fire ?? []).map((d) => ({
-            type: "Feature",
-            properties: {
-                id: d.id,
-                icon: getTierIconId(d.frp),
-                frp: d.frp
-            },
-            geometry: d.geometry
-        }));
-    }
-    onZoom = () => {
-        if (!mapManager.map)
-            return;
-        this.zoomedIn = mapManager.map.getZoom() >= ZOOM_THRESHOLD;
-    };
-    constructor() {
-        super();
-        $effect.root(() => {
-            $effect(() => {
-                const features = this.features;
-                if (!mapManager.map || !this.enabled)
-                    return;
-                mapManager.setDataSource(this.referenceId, features);
-            });
-        });
-    }
-    apply() {
-        if (!mapManager.map)
-            return;
-        this.icons
-            .loadIcons()
-            .then(() => {
-            if (!mapManager.map || !this.enabled || mapManager.styleLoading)
-                return;
-            this.remove();
-            this.zoomedIn = mapManager.map.getZoom() >= ZOOM_THRESHOLD;
-            mapManager.map.addSource(this.referenceId, this.mapSource);
-            mapManager.map.addLayer(this.mapLayer, this.beforeLayer);
-            mapManager.map.on("zoom", this.onZoom);
-        })
-            .catch(console.error);
-    }
-    remove() {
-        mapManager.map?.off("zoom", this.onZoom);
-        super.remove();
-    }
-}
-export const hmsFireMapIntegration = new HMSFireMapIntegration();

package/dist/lib/hms/hms-smoke-map-integration.svelte.d.ts

@@ -1,39 +0,0 @@
-import type { Map as MaptilerMap } from "@maptiler/sdk";
-import type { Feature, MultiPolygon } from "geojson";
-import type { HMSSmokeGeoJSON } from "@sjvair/sdk/hms";
-import { MapGeoJSONIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import type { SmokeDensityStyle } from "../legend/legend-data";
-/** Smoke fill styles, shared by the map layer and the legend so they can't drift apart. */
-export declare const SMOKE_DENSITY_STYLES: {
-    light: {
-        label: string;
-        color: string;
-        opacity: number;
-    };
-    medium: {
-        label: string;
-        color: string;
-        opacity: number;
-    };
-    heavy: {
-        label: string;
-        color: string;
-        opacity: number;
-    };
-};
-export declare const SMOKE_LEGEND: Array<SmokeDensityStyle>;
-type SmokeProperties = {
-    id: string;
-    density: HMSSmokeGeoJSON["density"];
-};
-declare class HMSSmokeMapIntegration extends MapGeoJSONIntegration<SmokeProperties> {
-    referenceId: string;
-    enabled: boolean;
-    get features(): Array<Feature<MultiPolygon, SmokeProperties>>;
-    get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0];
-    get mapSource(): Parameters<MaptilerMap["addSource"]>[1];
-    constructor();
-    apply(): void;
-}
-export declare const hmsSmokeMapIntegration: HMSSmokeMapIntegration;
-export type { HMSSmokeMapIntegration };

package/dist/lib/hms/hms-smoke-map-integration.svelte.js

@@ -1,87 +0,0 @@
-import { mapManager } from "../map/map-manager.svelte.js";
-import { MapGeoJSONIntegration } from "../map/integrations/map-geojson-integration.svelte";
-import { hmsManager } from "./hms.svelte";
-/** Smoke fill styles, shared by the map layer and the legend so they can't drift apart. */
-export const SMOKE_DENSITY_STYLES = {
-    light: { label: "Light", color: "#bfc8c3", opacity: 0.2 },
-    medium: { label: "Medium", color: "#757b78", opacity: 0.3 },
-    heavy: { label: "Heavy", color: "#333634", opacity: 0.4 }
-};
-export const SMOKE_LEGEND = Object.values(SMOKE_DENSITY_STYLES);
-class HMSSmokeMapIntegration extends MapGeoJSONIntegration {
-    referenceId = "hms-smoke";
-    enabled = $state(true);
-    get features() {
-        return (hmsManager.smoke ?? []).map((d) => ({
-            type: "Feature",
-            properties: {
-                id: d.id,
-                density: d.density
-            },
-            geometry: d.geometry
-        }));
-    }
-    get mapLayer() {
-        return {
-            id: this.referenceId,
-            type: "fill",
-            source: this.referenceId,
-            layout: {},
-            paint: {
-                "fill-color": [
-                    "match",
-                    ["get", "density"],
-                    "light",
-                    SMOKE_DENSITY_STYLES.light.color,
-                    "medium",
-                    SMOKE_DENSITY_STYLES.medium.color,
-                    SMOKE_DENSITY_STYLES.heavy.color
-                ],
-                "fill-opacity": [
-                    "match",
-                    ["get", "density"],
-                    "light",
-                    SMOKE_DENSITY_STYLES.light.opacity,
-                    "medium",
-                    SMOKE_DENSITY_STYLES.medium.opacity,
-                    SMOKE_DENSITY_STYLES.heavy.opacity
-                ],
-                "fill-outline-color": [
-                    "match",
-                    ["get", "density"],
-                    "light",
-                    SMOKE_DENSITY_STYLES.light.color,
-                    "medium",
-                    SMOKE_DENSITY_STYLES.medium.color,
-                    SMOKE_DENSITY_STYLES.heavy.color
-                ]
-            }
-        };
-    }
-    get mapSource() {
-        return {
-            type: "geojson",
-            promoteId: "id",
-            data: { type: "FeatureCollection", features: this.features }
-        };
-    }
-    constructor() {
-        super();
-        $effect.root(() => {
-            $effect(() => {
-                const features = this.features;
-                if (!mapManager.map || !this.enabled)
-                    return;
-                mapManager.setDataSource(this.referenceId, features);
-            });
-        });
-    }
-    apply() {
-        if (!mapManager.map)
-            return;
-        this.remove();
-        mapManager.map.addSource(this.referenceId, this.mapSource);
-        super.apply();
-    }
-}
-export const hmsSmokeMapIntegration = new HMSSmokeMapIntegration();

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

@@ -1,20 +0,0 @@
-import { type HMSFireGeoJSON, type HMSSmokeGeoJSON } from "@sjvair/sdk/hms";
-import type { SignalOptions } from "../abort";
-export interface HMSFireGroup {
-    id: string;
-    coordinates: [number, number];
-    avgFrp: number;
-    count: number;
-}
-declare class HmsManager {
-    smoke: Array<HMSSmokeGeoJSON> | undefined;
-    fire: Array<HMSFireGeoJSON & {
-        frp: number;
-    }> | undefined;
-    fireGroups: Array<HMSFireGroup> | undefined;
-    init({ signal }?: SignalOptions): Promise<void>;
-    loadSmoke({ signal }?: SignalOptions): Promise<void>;
-    loadFire({ signal }?: SignalOptions): Promise<void>;
-}
-export declare const hmsManager: HmsManager;
-export type { HmsManager as HMSManager };