@sjvair/monitor-map 3.0.3 → 3.0.5

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

@@ -1,181 +1,207 @@
-import { mountClickPopup as e } from "../map/utils.js";
-import { mapManager as t } from "../map/map.svelte.js";
-import { clickManager as n } from "../map/integrations/click-manager.js";
-import { MapIconLayerIntegration as r } from "../map/integrations/map-geojson-integration.svelte.js";
-import { TooltipManager as i } from "../map/integrations/tooltip.svelte.js";
-import { MapDisplayOption as a } from "../map/integrations/map-display-option.svelte.js";
-import { evStationsManager as o } from "./ev-stations.svelte.js";
-import { EvStationIconManager as s } from "./ev-station-icons.js";
-import { EvStationsClusterRenderer as c } from "./ev-stations-cluster-renderer.js";
-import l from "./components/EvStationTooltip.js";
-import * as u from "svelte/internal/client";
-import { untrack as d } from "svelte";
-//#region src/lib/ev-stations/ev-stations-map-integration.svelte.ts
-var f = class extends r {
-	referenceId = "ev-stations";
-	#e = u.state(!0);
-	get enabled() {
-		return u.get(this.#e);
-	}
-	set enabled(e) {
-		u.set(this.#e, e, !0);
-	}
-	#t = u.state(!0);
-	get clustered() {
-		return u.get(this.#t);
-	}
-	set clustered(e) {
-		u.set(this.#t, e, !0);
-	}
-	icons = new s();
-	tooltipManager = new i();
-	renderer = new c(this);
-	currentPopup = null;
-	#n = u.derived(() => ({
-		lvl2: new a("Level 2", !1, this.icons.get("ev-station-lvl2")),
-		lvl3: new a("Level 3", !1, this.icons.get("ev-station-lvl3"))
-	}));
-	get displayOptions() {
-		return u.get(this.#n);
-	}
-	set displayOptions(e) {
-		u.set(this.#n, e);
-	}
-	#r = u.derived(() => {
-		let e = [];
-		if (o.lvl2Stations) for (let t of o.lvl2Stations) e.push(p(t, "lvl2"));
-		if (o.lvl3Stations) for (let t of o.lvl3Stations) e.push(p(t, "lvl3"));
-		return e;
-	});
-	get features() {
-		return u.get(this.#r);
-	}
-	set features(e) {
-		u.set(this.#r, e);
-	}
-	#i = u.derived(() => {
-		let e = {};
-		for (let t of this.features) {
-			let n = t.properties.level;
-			if (n === "lvl2" && !this.displayOptions.lvl2.value || n === "lvl3" && !this.displayOptions.lvl3.value) continue;
-			let r = e[n] ?? [];
-			r.push(t), e[n] = r;
-		}
-		return e;
-	});
-	get featuresByLevel() {
-		return u.get(this.#i);
-	}
-	set featuresByLevel(e) {
-		u.set(this.#i, e);
-	}
-	#a = u.derived(() => {
-		let e = [];
-		return this.displayOptions.lvl2.value && e.push("lvl2"), this.displayOptions.lvl3.value && e.push("lvl3"), e.length === 0 ? [
-			"==",
-			["get", "level"],
-			"none"
-		] : e.length === 2 ? ["boolean", !0] : [
-			"==",
-			["get", "level"],
-			e[0]
-		];
-	});
-	get filters() {
-		return u.get(this.#a);
-	}
-	set filters(e) {
-		u.set(this.#a, e);
-	}
-	handleStationClick = (n, r) => {
-		this.currentPopup?.remove();
-		let i = n[0];
-		i && (this.currentPopup = e(l, { feature: i }, r.lngLat), this.currentPopup.addTo(t.map));
-	};
-	get mapLayer() {
-		return {
-			id: this.referenceId,
-			type: "symbol",
-			source: this.referenceId,
-			filter: this.filters,
-			layout: {
-				"icon-allow-overlap": !0,
-				"icon-ignore-placement": !0,
-				"icon-image": ["get", "icon"],
-				"icon-size": 1
-			},
-			paint: {}
-		};
-	}
-	get mapSource() {
-		return {
-			type: "geojson",
-			promoteId: "id",
-			data: {
-				type: "FeatureCollection",
-				features: this.features
-			}
-		};
-	}
-	constructor() {
-		super(), u.effect_root(() => {
-			u.user_effect(() => {
-				this.displayOptions.lvl2.value && o.lvl2Stations === void 0 && o.loadLvl2Stations();
-			}), u.user_effect(() => {
-				this.displayOptions.lvl3.value && o.lvl3Stations === void 0 && o.loadLvl3Stations();
-			}), u.user_effect(() => {
-				let e = this.filters;
-				!t.map || this.clustered || t.map.getLayer(this.referenceId) && t.map.setFilter(this.referenceId, e);
-			}), u.user_effect(() => {
-				let e = this.features;
-				!t.map || this.clustered || t.setDataSource(this.referenceId, e);
-			}), u.user_effect(() => {
-				this.featuresByLevel, !(!t.map || !this.clustered) && this.renderer.syncFeatures();
-			}), u.user_effect(() => {
-				this.clustered;
-				let e = Object.keys(this.featuresByLevel).length > 0;
-				!d(() => t.map) || !e || d(() => this.apply());
-			});
-		});
-	}
-	apply() {
-		t.map && (this.clustered ? (t.map.getLayer(this.referenceId) && t.map.removeLayer(this.referenceId), t.map.getSource(this.referenceId) && t.map.removeSource(this.referenceId), n.unregister([this.referenceId]), this.tooltipManager.disable(), this.renderer.remove(), this.icons.loadIcons().then(() => {
-			this.renderer.apply(this.handleStationClick), this.tooltipManager.enable();
-		})) : (this.renderer.remove(), this.tooltipManager.disable(), n.unregister([this.referenceId]), super.apply(), this.icons.loadIcons().then(() => {
-			n.register([this.referenceId], this.handleStationClick), this.tooltipManager.enable();
-		})));
-	}
-	remove() {
-		n.unregister([this.referenceId]), n.unregister(this.renderer.unclusteredLayerIds), this.renderer.remove(), this.currentPopup?.remove(), this.currentPopup = null, super.remove();
-	}
-};
-function p(e, t) {
-	return {
-		type: "Feature",
-		properties: {
-			icon: `ev-station-${t}`,
-			id: e.id,
-			level: t,
-			station_name: e.station_name ?? "",
-			facility_type: e.facility_type ?? "",
-			ev_network: e.ev_network ?? "",
-			station_phone: e.station_phone ?? "",
-			street_address: e.street_address ?? "",
-			city: e.city ?? "",
-			state: e.state ?? "",
-			zip: e.zip ?? "",
-			access_days_time: e.access_days_time ?? "",
-			access_detail_code: e.access_detail_code ?? "",
-			cards_accepted: e.cards_accepted ?? null,
-			ev_pricing: e.ev_pricing ?? "",
-			ev_connector_types: JSON.stringify(e.ev_connector_types ?? [])
-		},
-		geometry: {
-			type: "Point",
-			coordinates: [e.longitude, e.latitude]
-		}
-	};
+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();
+    }
 }
-var m = new f();
-//#endregion
-export { m as evStationsMapIntegration };
+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

@@ -1,33 +1,55 @@
-import { accessDetailCodeTypes as e, creditCardTypes as t, evConnectorTypes as n, evNetworkTypes as r, facilityTypes as i } from "./data-maps.js";
-import { zip_codes_exports as a } from "./zip-codes.js";
-import * as o from "svelte/internal/client";
-//#region src/lib/ev-stations/ev-stations.svelte.ts
-var s = class {
-	#e = o.state();
-	get lvl2Stations() {
-		return o.get(this.#e);
-	}
-	set lvl2Stations(e) {
-		o.set(this.#e, e, !0);
-	}
-	#t = o.state();
-	get lvl3Stations() {
-		return o.get(this.#t);
-	}
-	set lvl3Stations(e) {
-		o.set(this.#t, e, !0);
-	}
-	async loadLvl3Stations() {
-		this.lvl3Stations = await l("dc_fast");
-	}
-	async loadLvl2Stations() {
-		this.lvl2Stations = await l("2");
-	}
-}, c = Object.values(a).reduce((e, t) => e.concat(t)).join(",");
-async function l(a) {
-	let o = new URL("https://developer.nlr.gov/api/alt-fuel-stations/v1.json");
-	return o.searchParams.set("fuel_type", "ELEC"), o.searchParams.set("state", "CA"), o.searchParams.set("status", "E"), o.searchParams.set("access", "public"), o.searchParams.set("ev_charging_level", a), o.searchParams.set("zip", c), o.searchParams.set("api_key", "BThVJdnwHbO8hDpQkBdeqsUoeXhQuMgMRgO3hvyo"), await fetch(o).then(async (e) => await e.json()).then((a) => a.fuel_stations.map((a) => (a.access_detail_code &&= e.get(a.access_detail_code), a.cards_accepted &&= a.cards_accepted.split(" ").map((e) => t.get(e)).join(", "), a.ev_connector_types && a.ev_connector_types.length && (a.ev_connector_types = a.ev_connector_types.map((e) => n.get(e))), a.ev_network &&= r.get(a.ev_network), a.facility_type &&= i.get(a.facility_type), a)).filter((e) => e.id !== 226154));
+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");
+    }
 }
-var u = new s();
-//#endregion
-export { u as evStationsManager };
+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[];