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

package/src/lib/data-chart/pacific-time.ts

@@ -0,0 +1,31 @@
+import { startOfPacificDay } from "@sjvair/sdk/datetime/pacific";
+
+/** The chart's zone: times and days are Pacific, whatever zone the device is in. */
+export const PACIFIC_TIME_ZONE = "America/Los_Angeles";
+
+/**
+ * The x-axis end: `now` when the data ends earlier on the current Pacific day (so the axis
+ * reaches the present), else the data's end. Both are Unix seconds.
+ */
+export function chartRangeMax(max: number, now: Date = new Date()): number {
+	const end = new Date(max * 1000);
+	const today = startOfPacificDay(end).getTime() === startOfPacificDay(now).getTime();
+	return today && now > end ? Math.floor(now.getTime() / 1000) : max;
+}
+
+const formatter = new Intl.DateTimeFormat("en-US", {
+	timeZone: PACIFIC_TIME_ZONE,
+	month: "short",
+	day: "numeric",
+	year: "numeric",
+	hour: "numeric",
+	minute: "2-digit"
+});
+
+/** A Unix time as Pacific wall-clock time, e.g. "Nov 4, 2026 8:05 PM". */
+export function formatPacificTime(unixSeconds: number): string {
+	const part = Object.fromEntries(
+		formatter.formatToParts(new Date(unixSeconds * 1000)).map((p) => [p.type, p.value])
+	);
+	return `${part.month} ${part.day}, ${part.year} ${part.hour}:${part.minute} ${part.dayPeriod}`;
+}

package/src/lib/data-chart/tooltip.ts

@@ -1,4 +1,4 @@
-import { format, fromUnixTime } from "date-fns";
+import { formatPacificTime } from "./pacific-time";
 import type { LevelColors } from "./level-colors";
 
 let cursLeft = -100;
@@ -153,7 +153,7 @@ export function tooltipsPlugin() {
 					let label = u.series[i].label as string;
 					label = label?.substring(label.indexOf("(") + 1, label.indexOf(")")) || label;
 
-					ttHeader.textContent = format(fromUnixTime(xVal), "MMM d, yyyy h:mm a");
+					ttHeader.textContent = formatPacificTime(xVal);
 					tt!.textContent = `${label}: ${yVal}`;
 				}
 			}

package/{dist/lib/ev-stations/components/EvStationTooltip.svelte → src/lib/ev-stations/EvPopup.svelte}

@@ -1,18 +1,19 @@
 <script lang="ts">
 	import CreditCard from "@lucide/svelte/icons/credit-card";
 	import Zap from "@lucide/svelte/icons/zap";
-	import type { EvStationMapFeature } from "../types";
+	import type { EvStation } from "./types";
 
 	interface Props {
-		feature: EvStationMapFeature;
+		station: EvStation;
 	}
 
-	const { feature }: Props = $props();
+	const { station }: Props = $props();
 
+	// 4.x's station popup, from the station NREL returned (codes already turned into labels).
 	const computed = $derived.by(() => {
-		const p = feature.properties;
+		const p = station;
 
-		const connectors: string[] = JSON.parse(p.ev_connector_types || "[]");
+		const connectors: string[] = (p.ev_connector_types ?? []).filter(Boolean);
 
 		const cards: string[] = p.cards_accepted
 			? p.cards_accepted.split(",").map((c) => c.trim())

package/src/lib/ev-stations/ev-plugin.svelte.ts

@@ -0,0 +1,86 @@
+import { createRawSnippet } from "svelte";
+import { pointsPlugin, type MapPlugin } from "@sjvair/map-sdk";
+import type { DataSource } from "@sjvair/map-sdk/data";
+import { EV_STATION_LEVELS, evStationIcon } from "./ev-station-icons";
+import type { EvFeatureProperties, EvLevel } from "./ev-store.svelte.js";
+
+export type EvPluginId = "ev-l2" | "ev-l3";
+
+export const EV_PLUGIN_IDS: Record<EvLevel, EvPluginId> = { lvl2: "ev-l2", lvl3: "ev-l3" };
+
+const LEVEL_LABELS: Record<EvLevel, string> = { lvl2: "Level 2", lvl3: "Level 3" };
+
+/** The marker size, as in 4.x. */
+const ICON_SIZE = 32;
+
+/** "rgb(r, g, b)" at 0.6 alpha, the cluster bubbles' fill in 4.x. */
+function clusterFill(rgb: string): string {
+	return rgb.replace("rgb(", "rgba(").replace(")", ", 0.6)");
+}
+
+/** 4.x's cluster tooltip: "Level 2 Chargers" over "N stations". */
+function clusterTooltip(level: EvLevel, count: number) {
+	return createRawSnippet(() => ({
+		render: () =>
+			`<div class="flex flex-col gap-1 p-1"><p class="font-semibold">${LEVEL_LABELS[level]} Chargers</p><p class="text-sm">${count} stations</p></div>`
+	}));
+}
+
+/**
+ * One level of EV chargers, as 4.x drew them: the level's charger icon and, clustered, bubbles in
+ * the level's color (radius 15/20/25 by count, with a white count) that zoom in on click. Stations
+ * are listed for the feature list; a click on one is a `featureclick` with a `feature` ref whose
+ * id is the station id (the layout opens the popup).
+ */
+export function evPlugin(
+	level: EvLevel,
+	source: DataSource<EvFeatureProperties>,
+	options: { clustered: boolean }
+): MapPlugin {
+	const { bg, border } = EV_STATION_LEVELS[level];
+	const icon = evStationIcon(bg, border);
+	return pointsPlugin<EvFeatureProperties>({
+		id: EV_PLUGIN_IDS[level],
+		source,
+		layerLabel: `${LEVEL_LABELS[level]} Chargers`,
+		selectable: false,
+		icon: { category: () => level, draw: () => icon, size: ICON_SIZE },
+		detail: () => `${LEVEL_LABELS[level]} charger`,
+		...(options.clustered && {
+			cluster: {
+				radius: 40,
+				maxZoom: 9,
+				layers: ({ sourceId }) => [
+					{
+						local: "cluster-circle",
+						spec: {
+							type: "circle",
+							source: sourceId,
+							filter: ["has", "point_count"],
+							paint: {
+								"circle-color": clusterFill(bg),
+								"circle-radius": ["step", ["get", "point_count"], 15, 10, 20, 25, 25]
+							}
+						}
+					},
+					{
+						local: "cluster-label",
+						spec: {
+							type: "symbol",
+							source: sourceId,
+							filter: ["has", "point_count"],
+							layout: {
+								"text-field": ["get", "point_count_abbreviated"],
+								"text-size": 12,
+								"text-allow-overlap": true,
+								"text-ignore-placement": true
+							},
+							paint: { "text-color": "#ffffff" }
+						}
+					}
+				],
+				tooltip: (cluster) => clusterTooltip(level, cluster.pointCount)
+			}
+		})
+	});
+}

package/src/lib/ev-stations/ev-station-icons.ts

@@ -1,6 +1,3 @@
-import { MapIconManager } from "$lib/map/integrations/map-icon-manager";
-import { asDataURI } from "$lib/map/icons";
-
 const EV_STATION_PATH =
 	"m340-200 100-160h-60v-120L280-320h60v120ZM240-560h240v-200H240v200Zm0 360h240v-280H240v280Zm-80 80v-640q0-33 23.5-56.5T240-840h240q33 0 56.5 23.5T560-760v280h50q29 0 49.5 20.5T680-410v185q0 17 14 31t31 14q18 0 31.5-14t13.5-31v-375h-10q-17 0-28.5-11.5T720-640v-80h20v-60h40v60h40v-60h40v60h20v80q0 17-11.5 28.5T840-600h-10v375q0 42-30.5 73.5T725-120q-43 0-74-31.5T620-225v-185q0-5-2.5-7.5T610-420h-50v300H160Zm320-80H240h240Z";
 
@@ -11,6 +8,7 @@ export const EV_STATION_LEVELS = {
 
 export type EvStationLevel = keyof typeof EV_STATION_LEVELS;
 
+/** A charger marker: a circle in the level's colors with the white charger glyph, 32px. */
 export function evStationIcon(bg: string, border: string): string {
 	return `<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
   <circle cx="16" cy="16" r="14" fill="${bg}" stroke="${border}" stroke-width="2"/>
@@ -19,17 +17,3 @@ export function evStationIcon(bg: string, border: string): string {
   </svg>
 </svg>`;
 }
-
-export class EvStationIconManager extends MapIconManager {
-	constructor() {
-		super();
-		for (const [level, colors] of Object.entries(EV_STATION_LEVELS) as Array<
-			[EvStationLevel, (typeof EV_STATION_LEVELS)[EvStationLevel]]
-		>) {
-			const id = `ev-station-${level}`;
-			const icon = new Image(32, 32);
-			icon.src = asDataURI(evStationIcon(colors.bg, colors.border));
-			this.register(id, icon);
-		}
-	}
-}

package/src/lib/ev-stations/ev-stations.ts

@@ -0,0 +1,72 @@
+import {
+	accessDetailCodeTypes,
+	creditCardTypes,
+	evConnectorTypes,
+	evNetworkTypes,
+	facilityTypes
+} from "./data-maps";
+import { monitorMapConfig } from "../config.svelte.js";
+import type { EvStation } from "./types";
+import { EV_ZIP_CODES } from "./zip-codes";
+
+/** Which NREL charging level each map level asks for. */
+const CHARGING_LEVEL = { lvl2: "2", lvl3: "dc_fast" } as const;
+
+/**
+ * Fetches the public electric chargers of one level in the Valley's ZIPs from NREL (key from
+ * `monitorMapConfig().nrelKey`), with codes turned into labels. Station 226154 is dropped: its
+ * coordinates are wrong.
+ */
+export async function fetchEvStations(
+	level: "lvl2" | "lvl3",
+	signal?: AbortSignal
+): Promise<Array<EvStation>> {
+	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", CHARGING_LEVEL[level]);
+	url.searchParams.set("zip", EV_ZIP_CODES.join(","));
+	url.searchParams.set("api_key", monitorMapConfig().nrelKey);
+
+	const res = await fetch(url, { signal });
+	if (!res.ok) throw new Error(`EV chargers: NREL answered ${res.status}`);
+	const data = await res.json();
+	const fuelStations: Array<EvStation> = data.fuel_stations;
+	if (!Array.isArray(fuelStations)) throw new Error("EV chargers: no fuel_stations in the answer");
+	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: string) => creditCardTypes.get(c))
+						.join(", ");
+				}
+
+				if (station.ev_connector_types && station.ev_connector_types.length) {
+					station.ev_connector_types = station.ev_connector_types.map((t: string) =>
+						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)
+	);
+}

package/src/lib/ev-stations/ev-store.svelte.ts

@@ -0,0 +1,117 @@
+import type { FeatureCollection, Point } from "geojson";
+import {
+	encodeRef,
+	type DataSource,
+	type DataStatus,
+	type MapFeatureProperties
+} from "@sjvair/map-sdk/data";
+import { fetchEvStations } from "./ev-stations";
+import type { EvStation } from "./types";
+
+export type EvLevel = "lvl2" | "lvl3";
+
+/** A charger on the map: `name` is the station's name; chargers have no value. */
+export interface EvFeatureProperties extends MapFeatureProperties {
+	level: EvLevel;
+}
+
+export type FetchEvStations = (level: EvLevel, signal?: AbortSignal) => Promise<EvStation[]>;
+
+export interface EvStore {
+	/** One level's chargers for its plugin; `loading` until the first `load(level)`. */
+	dataSource(level: EvLevel): DataSource<EvFeatureProperties>;
+	/**
+	 * Fetches a level once; overlapping calls share the run. A failure sets the status to `error`
+	 * (its `retry()` fetches again) and rejects.
+	 */
+	load(level: EvLevel): Promise<void>;
+	/** A loaded station by id, from either level. */
+	station(id: string): EvStation | undefined;
+}
+
+/** NREL has this station in the wrong place, so it is left out (as in 4.x). */
+const DROPPED_STATION = 226154;
+
+function toFeatures(
+	stations: EvStation[],
+	level: EvLevel
+): FeatureCollection<Point, EvFeatureProperties> {
+	return {
+		type: "FeatureCollection",
+		features: stations.map((station) => ({
+			type: "Feature",
+			properties: {
+				refKey: encodeRef({ kind: "feature", id: String(station.id) }),
+				name: station.station_name ?? "",
+				value: null,
+				level
+			},
+			geometry: { type: "Point", coordinates: [station.longitude, station.latitude] }
+		}))
+	};
+}
+
+class EvLevelSource implements DataSource<EvFeatureProperties> {
+	status: DataStatus = $state.raw({ state: "loading" });
+	features: FeatureCollection<Point, EvFeatureProperties> | null = $state.raw(null);
+	readonly scale = null;
+	stations: EvStation[] = [];
+
+	#run: Promise<void> | null = null;
+	#loaded = false;
+
+	constructor(
+		private level: EvLevel,
+		private fetchStations: FetchEvStations
+	) {}
+
+	load(): Promise<void> {
+		if (this.#loaded) return Promise.resolve();
+		this.#run ??= this.#fetch();
+		return this.#run;
+	}
+
+	async #fetch(): Promise<void> {
+		if (this.status.state !== "loading") this.status = { state: "loading" };
+		try {
+			const stations = (await this.fetchStations(this.level)).filter(
+				(station) => station.id !== DROPPED_STATION
+			);
+			this.stations = stations;
+			this.features = toFeatures(stations, this.level);
+			this.status = { state: "ready" };
+			this.#loaded = true;
+		} catch (error) {
+			this.features = null;
+			this.status = {
+				state: "error",
+				error,
+				retry: () => {
+					this.load().catch(() => {});
+				}
+			};
+			throw error;
+		} finally {
+			this.#run = null;
+		}
+	}
+}
+
+/** EV chargers by level, each fetched when first wanted. */
+export function createEvStore(fetchStations: FetchEvStations = fetchEvStations): EvStore {
+	const levels = {
+		lvl2: new EvLevelSource("lvl2", fetchStations),
+		lvl3: new EvLevelSource("lvl3", fetchStations)
+	};
+	return {
+		dataSource: (level) => levels[level],
+		load: (level) => levels[level].load(),
+		station(id) {
+			for (const source of Object.values(levels)) {
+				const found = source.stations.find((station) => String(station.id) === id);
+				if (found) return found;
+			}
+			return undefined;
+		}
+	};
+}

package/src/lib/ev-stations/station-popup.svelte.ts

@@ -0,0 +1,64 @@
+import { mount, unmount, untrack } from "svelte";
+import { Popup } from "@maptiler/sdk";
+import { maptilerMap, type MapContext } from "@sjvair/map-sdk";
+import EvPopup from "./EvPopup.svelte";
+import type { EvStation } from "./types";
+
+export interface StationPopups {
+	/** Opens `station`'s popup at `lngLat`, closing any other; it belongs to plugin `pluginId`. */
+	open(pluginId: string, station: EvStation, lngLat: [number, number]): void;
+	close(): void;
+}
+
+/**
+ * The EV station popup, 4.x's (a MapTiler `Popup` with a close button that a map click leaves
+ * open). One is open at a time; it closes on a basemap switch, when its plugin leaves the map,
+ * and when the GL map is replaced. Call it during component setup: its effects live as long as
+ * the component.
+ */
+export function stationPopups(map: MapContext): StationPopups {
+	let current: { popup: Popup; pluginId: string } | null = $state.raw(null);
+
+	function close() {
+		const open = current;
+		current = null;
+		open?.popup.remove();
+	}
+
+	// A basemap switch or a new GL map closes it.
+	$effect(() => {
+		void map.basemap.current;
+		void map.gl;
+		untrack(close);
+	});
+
+	// So does its plugin leaving the map (its level turned off). A Marker Clusters flip removes and
+	// re-adds the plugin in one pass, so the popup stays: the station is still there.
+	$effect(() => {
+		const ids = map.plugins.map((plugin) => plugin.id);
+		const open = current;
+		if (open && !ids.includes(open.pluginId)) untrack(close);
+	});
+
+	$effect(() => () => untrack(close));
+
+	return {
+		open(pluginId, station, lngLat) {
+			close();
+			const gl = maptilerMap(map);
+			if (!gl) return;
+			const target = document.createElement("div");
+			const instance = mount(EvPopup, { target, props: { station } });
+			const popup = new Popup({ closeButton: true, closeOnClick: false, maxWidth: "none" })
+				.setLngLat(lngLat)
+				.setDOMContent(target);
+			popup.on("close", () => {
+				unmount(instance);
+				if (current?.popup === popup) current = null;
+			});
+			current = { popup, pluginId };
+			popup.addTo(gl);
+		},
+		close
+	};
+}

package/src/lib/ev-stations/types.ts

@@ -1,6 +1,3 @@
-import type { Feature, Geometry } from "geojson";
-import type { MapGeoJSONFeature } from "@maptiler/sdk";
-
 export interface EvStation {
 	access_code: string;
 	access_days_time: string;
@@ -25,34 +22,3 @@ export interface EvStation {
 	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; // JSON.stringify(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;
-	};
-	// level is derived from feature.source: "ev-stations-lvl2" | "ev-stations-lvl3"
-}

package/src/lib/ev-stations/zip-codes.ts

@@ -48,7 +48,6 @@ export const SanJoaquin = [
 export const Stanislaus = [
 	"95355",
 	"95350",
-	"94550",
 	"95351",
 	"95307",
 	"95380",
@@ -80,7 +79,6 @@ export const Stanislaus = [
 ];
 
 export const Merced = [
-	"95023",
 	"95380",
 	"93635",
 	"95301",
@@ -101,13 +99,11 @@ export const Merced = [
 	"95369",
 	"95303",
 	"95317",
-	"95325",
 	"93665",
 	"95342",
 	"95344",
 	"95343",
 	"93661",
-	"09534",
 	"95312"
 ];
 
@@ -141,7 +137,6 @@ export const Fresno = [
 	"93706",
 	"93711",
 	"93705",
-	"93245",
 	"93612",
 	"93657",
 	"93710",
@@ -189,7 +184,6 @@ export const Fresno = [
 	"93652",
 	"93627",
 	"93606",
-	"93665",
 	"93628",
 	"93605",
 	"93607",
@@ -235,8 +229,7 @@ export const Fresno = [
 	"93888",
 	"93844",
 	"93784",
-	"93780",
-	"93633"
+	"93780"
 ];
 
 export const Kings = [
@@ -247,7 +240,6 @@ export const Kings = [
 	"93204",
 	"93656",
 	"93242",
-	"93249",
 	"93266",
 	"93201",
 	"93202",
@@ -288,12 +280,9 @@ export const Tulare = [
 	"93238",
 	"93261",
 	"93641",
-	"93255",
 	"93603",
 	"93244",
 	"93262",
-	"93549",
-	"93628",
 	"93208",
 	"93227",
 	"93237",
@@ -412,7 +401,6 @@ export const Calaveras = [
 export const Tuolumne = [
 	"95370",
 	"95327",
-	"95247",
 	"95383",
 	"95321",
 	"95379",
@@ -423,8 +411,6 @@ export const Tuolumne = [
 	"95310",
 	"95346",
 	"95364",
-	"95224",
-	"93541",
 	"95305",
 	"95335",
 	"95314",
@@ -438,7 +424,6 @@ export const Mono = ["93514", "93546", "93517", "96107", "93529", "96133", "9354
 
 export const Mariposa = [
 	"95338",
-	"95333",
 	"93601",
 	"95311",
 	"95329",
@@ -468,3 +453,31 @@ export const Inyo = [
 	"93522",
 	"93530"
 ];
+
+/**
+ * Every county's ZIPs once, sorted: the EV charger query's `zip` list. A ZIP that spans two
+ * counties is in both lists above; `scripts/check-ev-zips.mjs` checks the lists against the
+ * Census ZCTA-to-county file.
+ *
+ * The county lists began as a hand-scraped list. 5.0 only removes ZIPs with no land in their
+ * county; it adds none. Border ZIPs with some San Joaquin land (95632 Galt, 95641 Isleton,
+ * 94505 Discovery Bay) are left out (decided 2026-11-07): their chargers sit mostly outside
+ * the county. Revisit if users ask for chargers just over the county line.
+ */
+export const EV_ZIP_CODES: readonly string[] = [
+	...new Set([
+		...SanJoaquin,
+		...Stanislaus,
+		...Merced,
+		...Madera,
+		...Fresno,
+		...Kings,
+		...Tulare,
+		...Kern,
+		...Calaveras,
+		...Tuolumne,
+		...Mono,
+		...Mariposa,
+		...Inyo
+	])
+].sort();