@sjvair/monitor-map 3.0.2 → 3.0.4

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

@@ -0,0 +1,207 @@
+import { untrack } from "svelte";
+import { mapManager } from "../map/map.svelte.ts";
+import { clickManager } from "../map/integrations/click-manager.ts";
+import { MapIconLayerIntegration } from "../map/integrations/map-geojson-integration.svelte.ts";
+import { MapDisplayOption } from "../map/integrations/map-display-option.svelte.ts";
+import { TooltipManager } from "../map/integrations/tooltip.svelte.ts";
+import { mountClickPopup } from "../map/utils.ts";
+import { evStationsManager } from "./ev-stations.svelte.ts";
+import { EvStationIconManager } from "./ev-station-icons.ts";
+import { EvStationsClusterRenderer } from "./ev-stations-cluster-renderer.ts";
+import EvStationTooltip from "./components/EvStationTooltip.svelte";
+class EvStationsMapIntegration extends MapIconLayerIntegration {
+    referenceId = "ev-stations";
+    enabled = $state(true);
+    clustered = $state(true);
+    icons = new EvStationIconManager();
+    tooltipManager = new TooltipManager();
+    renderer = new EvStationsClusterRenderer(this);
+    currentPopup = null;
+    displayOptions = $derived.by(() => ({
+        lvl2: new MapDisplayOption("Level 2", false, this.icons.get("ev-station-lvl2")),
+        lvl3: new MapDisplayOption("Level 3", false, 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 when integration is enabled and level is toggled on
+            $effect(() => {
+                if (this.displayOptions.lvl2.value && evStationsManager.lvl2Stations === undefined) {
+                    evStationsManager.loadLvl2Stations();
+                }
+            });
+            $effect(() => {
+                if (this.displayOptions.lvl3.value && evStationsManager.lvl3Stations === undefined) {
+                    evStationsManager.loadLvl3Stations();
+                }
+            });
+            // Push filter changes to the unclustered layer
+            $effect(() => {
+                const filter = this.filters;
+                if (!mapManager.map || this.clustered)
+                    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;
+                mapManager.setDataSource(this.referenceId, features);
+            });
+            // Sync clustered sources when featuresByLevel changes
+            $effect(() => {
+                void this.featuresByLevel;
+                if (!mapManager.map || !this.clustered)
+                    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;
+                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();
+            this.icons.loadIcons().then(() => {
+                this.renderer.apply(this.handleStationClick);
+                this.tooltipManager.enable();
+            });
+        }
+        else {
+            this.renderer.remove();
+            this.tooltipManager.disable();
+            clickManager.unregister([this.referenceId]);
+            super.apply();
+            this.icons.loadIcons().then(() => {
+                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

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

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

@@ -0,0 +1,55 @@
+import { accessDetailCodeTypes, creditCardTypes, evConnectorTypes, evNetworkTypes, facilityTypes } from "./data-maps.ts";
+import * as ZipCodes from "./zip-codes.ts";
+class EvStationsManager {
+    lvl2Stations = $state();
+    lvl3Stations = $state();
+    async loadLvl3Stations() {
+        this.lvl3Stations = await fetchEvStations("dc_fast");
+    }
+    async loadLvl2Stations() {
+        this.lvl2Stations = await fetchEvStations("2");
+    }
+}
+const zipCodes = Object.values(ZipCodes)
+    .reduce((prev, curr) => prev.concat(curr))
+    .join(",");
+async function fetchEvStations(chargingLevel) {
+    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)
+        .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/ev-stations/types.d.ts

@@ -0,0 +1,53 @@
+import type { Feature, Geometry } from "geojson";
+import type { MapGeoJSONFeature } from "@maptiler/sdk";
+export interface EvStation {
+    access_code: string;
+    access_days_time: string;
+    access_detail_code: string;
+    cards_accepted: null | string;
+    date_last_confirmed: string;
+    groups_with_access_code: string;
+    id: number;
+    station_name: string;
+    station_phone: string;
+    updated_at: string;
+    facility_type: string;
+    latitude: number;
+    longitude: number;
+    city: string;
+    state: string;
+    street_address: string;
+    zip: string;
+    country: string;
+    ev_connector_types: Array<string>;
+    ev_dc_fast_num: number;
+    ev_network: string;
+    ev_pricing: string;
+}
+export interface EvStationMarkerProperties {
+    icon: string;
+    id: number;
+    level: "lvl2" | "lvl3";
+    station_name: string;
+    facility_type: string;
+    ev_network: string;
+    station_phone: string;
+    street_address: string;
+    city: string;
+    state: string;
+    zip: string;
+    access_days_time: string;
+    access_detail_code: string;
+    cards_accepted: string | null;
+    ev_pricing: string;
+    ev_connector_types: string;
+}
+export type EvStationMapFeature = Feature<Geometry, EvStationMarkerProperties>;
+export interface EvStationClusterMapFeature extends MapGeoJSONFeature {
+    properties: {
+        cluster: true;
+        cluster_id: number;
+        point_count: number;
+        point_count_abbreviated: string | number;
+    };
+}

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

@@ -0,0 +1 @@
+export {};

package/dist/lib/ev-stations/zip-codes.d.ts

@@ -0,0 +1,13 @@
+export declare const SanJoaquin: string[];
+export declare const Stanislaus: string[];
+export declare const Merced: string[];
+export declare const Madera: string[];
+export declare const Fresno: string[];
+export declare const Kings: string[];
+export declare const Tulare: string[];
+export declare const Kern: string[];
+export declare const Calaveras: string[];
+export declare const Tuolumne: string[];
+export declare const Mono: string[];
+export declare const Mariposa: string[];
+export declare const Inyo: string[];