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

package/src/lib/data-chart/DataChart.svelte

@@ -7,14 +7,20 @@
 	import uPlot from "uplot";
 	import "uplot/dist/uPlot.min.css";
 	import { getMonitorEntriesCSVUrl } from "@sjvair/sdk/monitors";
-	import { format, parseISO } from "date-fns";
 	import { RangeCalendar } from "$lib/components/ui/range-calendar";
 	import type { PanelPollutant } from "../monitors/panel-pollutant";
 	import { monitorsManager } from "../monitors/monitors.svelte";
 	import { DataChartManager } from "./data-chart.svelte";
-	import { createDateRange, extendToNow, includesToday } from "./DateRange";
+	import {
+		createDateRange,
+		dateRangeLabel as formatDateRange,
+		extendToNow,
+		fileDay,
+		includesToday
+	} from "./DateRange";
 	import { fetchChartData, type ChartMonitor } from "./requests";
 	import { getChartConfig } from "./chart-utils";
+	import { PACIFIC_TIME_ZONE } from "./pacific-time";
 	import { levelColors } from "./level-colors";
 
 	interface Props {
@@ -38,11 +44,7 @@
 	let dateRangeContainer: HTMLElement | undefined = $state();
 	let triggerRebuild: (() => void) | undefined = $state();
 
-	const dateRangeLabel = $derived(
-		format(parseISO(chartManager.dateRange.start), "MMM d") +
-			" – " +
-			format(parseISO(chartManager.dateRange.end), "MMM d, yyyy")
-	);
+	const dateRangeLabel = $derived(formatDateRange(chartManager.dateRange));
 
 	// A request with no entries still resolves to [[], []], so test the x axis, not the tuple.
 	const noChartData = $derived(!chartManager.chartData[0]?.length);
@@ -53,17 +55,18 @@
 				? "No Data Available For Selected Date Range"
 				: ""
 	);
-	const pollutantLabel = $derived(pollutant === "pm25" ? "PM 2.5" : "Ozone");
-	// Level definitions are shared metadata, not the map's current selection.
-	const colors = $derived(
-		levelColors(monitorsManager.meta?.entryType(pollutant).asIter.levels ?? [])
-	);
-
-	// Reload for another monitor or pollutant, not for a new object describing the same one.
-	// Both go through a $derived: the owner recomputes what it passes on every refresh, and a
-	// prop read directly would re-run this effect even when the value is unchanged.
+	// Props are read through a $derived: the owner recomputes what it passes on every refresh,
+	// and a prop read directly would re-run an effect even when the value is unchanged.
 	const monitorId = $derived(monitor.id);
+	const monitorType = $derived(monitor.type);
 	const chartPollutant = $derived(pollutant);
+
+	// Level definitions and labels are shared metadata, not the map's current selection.
+	const entryType = $derived(monitorsManager.meta?.entryType(chartPollutant));
+	const pollutantLabel = $derived(entryType?.label ?? "");
+	const colors = $derived(levelColors(entryType?.scale ?? null));
+
+	// Reload for another monitor or pollutant, not for a new object describing the same one.
 	$effect(() => {
 		void monitorId;
 		void chartPollutant;
@@ -101,9 +104,15 @@
 		return () => document.removeEventListener("click", handleDocClick);
 	});
 
+	// Rebuild for new data or anything the chart draws with, and nothing else: `rebuild` runs
+	// untracked, so a refreshed copy of the same monitor does not recreate the chart.
 	$effect(() => {
-		void chartManager.chartData; // re-run whenever chart data updates
-		triggerRebuild?.();
+		void chartManager.chartData;
+		void monitorType;
+		void colors;
+		void pollutantLabel;
+		const rebuild = triggerRebuild;
+		untrack(() => rebuild?.());
 	});
 
 	const chartAttachment: Attachment<HTMLElement> = (el) => {
@@ -121,7 +130,9 @@
 			instance?.destroy?.();
 			el.innerHTML = "";
 			const maxDiff = Math.max(...flatData) - Math.min(...flatData);
-			const opts = getChartConfig(monitor.type, maxDiff, width, height, colors, pollutantLabel);
+			const opts = getChartConfig(monitorType, maxDiff, width, height, colors, pollutantLabel);
+			// Axis ticks in Pacific time, like the tooltip.
+			opts.tzDate = (ts) => uPlot.tzDate(new Date(ts * 1000), PACIFIC_TIME_ZONE);
 			instance = new uPlot(opts, chartManager.chartData, el);
 		};
 
@@ -143,17 +154,36 @@
 	};
 
 	let chartRequest = 0;
+	let chartController: AbortController | undefined;
+
+	// A closed panel cancels its in-flight fetch.
+	$effect(() => () => chartController?.abort());
 
 	// `silent` keeps the current chart on screen while a timed refresh loads.
 	async function loadChartData({ silent = false } = {}) {
 		const request = ++chartRequest;
-		if (!silent) chartManager.loading = true;
-		const data = await fetchChartData(monitor, chartManager.dateRange, pollutant);
+		chartController?.abort();
+		const controller = (chartController = new AbortController());
+		// A refresh that supersedes a load still in flight takes over its loading flag: the
+		// superseded load will never clear it.
+		const ownsLoading = !silent || chartManager.loading;
+		chartManager.loading = ownsLoading;
+		let data: Awaited<ReturnType<typeof fetchChartData>>;
+		try {
+			data = await fetchChartData(monitor, chartManager.dateRange, pollutant, {
+				signal: controller.signal
+			});
+		} catch (err) {
+			// Superseded or closed: the newer call owns `loading` and the chart, so leave both.
+			if (controller.signal.aborted || request !== chartRequest) return;
+			console.error("Failed to load chart data: ", err);
+			data = [];
+		}
 		// A newer request (another range, monitor, pollutant or refresh) owns the chart now.
 		if (request !== chartRequest) return;
 		// A failed request resolves to [] (an empty range is [[], []]); a background refresh
 		// that failed keeps the chart already on screen.
-		if (silent && data.length === 0) return;
+		if (!ownsLoading && data.length === 0) return;
 		chartManager.chartData = data;
 		chartManager.loading = false;
 	}
@@ -186,8 +216,8 @@
 		if (!canvas) return;
 		const link = document.createElement("a");
 		const monitorName = monitor.name.split(" ").join("-");
-		const start = format(parseISO(chartManager.dateRange.start), "dd.MMM.yyyy");
-		const end = format(parseISO(chartManager.dateRange.end), "dd.MMM.yyyy");
+		const start = fileDay(chartManager.dateRange.start);
+		const end = fileDay(chartManager.dateRange.end);
 		link.download = `${monitorName}_${start}-${end}.png`;
 		link.href = canvas.toDataURL();
 		link.click();

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

@@ -1,32 +1,75 @@
-import { subDays, startOfDay, endOfDay, isToday, parseISO } from "date-fns";
+import { addPacificDays, endOfPacificDay, startOfPacificDay } from "@sjvair/sdk/datetime/pacific";
 import type { DateValue } from "@internationalized/date";
 
+/** ISO instants. Days are Pacific days, whatever zone the device is in. */
 export type DateRange = { start: string; end: string };
 
-export function createDateRange(start?: DateValue, end?: DateValue): DateRange {
+/** An instant on the given calendar day in Pacific time (noon UTC is 4–5 AM Pacific). */
+function onPacificDay(day: DateValue): Date {
+	return new Date(Date.UTC(day.year, day.month - 1, day.day, 12));
+}
+
+function samePacificDay(a: Date, b: Date): boolean {
+	return startOfPacificDay(a).getTime() === startOfPacificDay(b).getTime();
+}
+
+/**
+ * The chart's range: with no days picked, the start of yesterday through now; otherwise the
+ * whole picked days, ending now when the end day is today.
+ */
+export function createDateRange(start?: DateValue, end?: DateValue, now = new Date()): DateRange {
 	if (!start || !end) {
 		return {
-			start: startOfDay(subDays(new Date(), 1)).toISOString(),
-			end: new Date().toISOString()
+			start: startOfPacificDay(addPacificDays(now, -1)).toISOString(),
+			end: now.toISOString()
 		};
 	}
 
-	const startDate = startOfDay(new Date(start.year, start.month - 1, start.day));
-	let endDate = new Date(end.year, end.month - 1, end.day);
-	endDate = isToday(endDate) ? new Date() : endOfDay(endDate);
-
+	const endDay = onPacificDay(end);
 	return {
-		start: startDate.toISOString(),
-		end: endDate.toISOString()
+		start: startOfPacificDay(onPacificDay(start)).toISOString(),
+		end: (samePacificDay(endDay, now) ? now : endOfPacificDay(endDay)).toISOString()
 	};
 }
 
-/** Whether the range ends on the current calendar day, i.e. it can still gain entries. */
-export function includesToday(range: DateRange): boolean {
-	return isToday(parseISO(range.end));
+/** Whether the range ends on the current Pacific day, i.e. it can still gain entries. */
+export function includesToday(range: DateRange, now = new Date()): boolean {
+	return samePacificDay(new Date(range.end), now);
 }
 
 /** The same range with its end moved to the present. */
-export function extendToNow(range: DateRange): DateRange {
-	return { start: range.start, end: new Date().toISOString() };
+export function extendToNow(range: DateRange, now = new Date()): DateRange {
+	return { start: range.start, end: now.toISOString() };
+}
+
+const PACIFIC = "America/Los_Angeles";
+const shortDay = new Intl.DateTimeFormat("en-US", {
+	timeZone: PACIFIC,
+	month: "short",
+	day: "numeric"
+});
+const shortDayYear = new Intl.DateTimeFormat("en-US", {
+	timeZone: PACIFIC,
+	month: "short",
+	day: "numeric",
+	year: "numeric"
+});
+const fileDayParts = new Intl.DateTimeFormat("en-US", {
+	timeZone: PACIFIC,
+	day: "2-digit",
+	month: "short",
+	year: "numeric"
+});
+
+/** The range's Pacific days for display, e.g. "Nov 3 – Nov 4, 2026". */
+export function dateRangeLabel(range: DateRange): string {
+	return `${shortDay.format(new Date(range.start))} – ${shortDayYear.format(new Date(range.end))}`;
+}
+
+/** An instant's Pacific day for a file name, e.g. "04.Nov.2026". */
+export function fileDay(iso: string): string {
+	const parts = Object.fromEntries(
+		fileDayParts.formatToParts(new Date(iso)).map((part) => [part.type, part.value])
+	);
+	return `${parts.day}.${parts.month}.${parts.year}`;
 }

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

@@ -1,6 +1,6 @@
 import type { LevelColors } from "./level-colors";
 import { tooltipsPlugin, uPlotCursorConfig } from "./tooltip";
-import { fromUnixTime, getUnixTime, isToday, isAfter } from "date-fns";
+import { chartRangeMax } from "./pacific-time";
 import type uPlot from "uplot";
 import type { MonitorType } from "@sjvair/sdk";
 
@@ -64,12 +64,7 @@ export function getChartConfig(
 		},
 		scales: {
 			x: {
-				range: (_: uPlot, min: number, max: number) => {
-					const maxDate = fromUnixTime(max);
-					const now = new Date();
-					max = isToday(maxDate) && isAfter(now, maxDate) ? getUnixTime(now) : max;
-					return [min, max];
-				}
+				range: (_: uPlot, min: number, max: number) => [min, chartRangeMax(max)]
 			},
 			y: {
 				range: {
@@ -118,6 +113,10 @@ function getSeriesConfigs(monitorType: MonitorType, stops: LevelColors) {
 		case "airgradient":
 		case "purpleair":
 			return [baseXSeriesConfig, pm25SeriesConfig(stops)];
+
+		// Types without a real-time series of their own (CIMIS weather stations, from SDK 5.0).
+		default:
+			return [baseXSeriesConfig, singleSeriesConfig];
 	}
 }
 

package/src/lib/data-chart/level-colors.ts

@@ -1,13 +1,12 @@
+import type { Scale } from "@sjvair/map-sdk/data";
+
 /** Color stops for a chart: each level's lower bound and its hex color without the `#`. */
 export type LevelColors = Array<[number, string]>;
 
-// `range` is loose on purpose: the SDK types it as a tuple with an open tail, and only its
-// first member (the level's lower bound) is read.
-export function levelColors(
-	levels: ReadonlyArray<{
-		range: readonly [number, ...unknown[]] | readonly number[];
-		color: string;
-	}>
-): LevelColors {
-	return levels.map((level) => [level.range[0], level.color.replace(/^#/, "")]);
+/** The chart's color stops from a range scale; a level with no lower bound or color is skipped. */
+export function levelColors(scale: Scale | null): LevelColors {
+	return (scale?.levels ?? []).flatMap((level): LevelColors => {
+		if (level.min === null || !level.color) return [];
+		return [[level.min, level.color.replace(/^#/, "")]];
+	});
 }

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/requests.ts

@@ -2,6 +2,7 @@ import { getMonitorEntries, type MonitorDetails, type MonitorEntry } from "@sjva
 import { getUnixTime, parseISO, differenceInMinutes, addMinutes } from "date-fns";
 import type { PanelPollutant } from "../monitors/panel-pollutant";
 import type { DateRange } from "./DateRange";
+import type { SignalOptions } from "$lib/abort";
 
 /** The monitor fields the chart reads. */
 export type ChartMonitor = Pick<MonitorDetails, "id" | "name" | "type" | "data_source">;
@@ -9,14 +10,18 @@ export type ChartMonitor = Pick<MonitorDetails, "id" | "name" | "type" | "data_s
 export async function fetchChartData(
 	m: ChartMonitor,
 	d: DateRange,
-	entryType: PanelPollutant
+	entryType: PanelPollutant,
+	options: SignalOptions = {}
 ): Promise<uPlot.AlignedData> {
-	return await getMonitorEntries({
-		entryType,
-		monitorId: m.id,
-		timestampGte: d.start,
-		timestampLte: d.end
-	})
+	return await getMonitorEntries(
+		{
+			entryType,
+			monitorId: m.id,
+			timestampGte: d.start,
+			timestampLte: d.end
+		},
+		{ signal: options.signal }
+	)
 		.then((entries) => {
 			const xAxisData: Array<Date> = [];
 			const updateDuration = m.data_source.name === "PurpleAir" ? 2 : 60;
@@ -41,6 +46,8 @@ export async function fetchChartData(
 			return [xAxisData.map((d) => getUnixTime(d)), yAxisRecord] as uPlot.AlignedData;
 		})
 		.catch((err) => {
+			// A cancelled request is not a failure: let the caller see the reason, log nothing.
+			if (options.signal?.aborted) throw options.signal.reason;
 			console.error("Failed to load chart data: ", err);
 			return [] as uPlot.AlignedData;
 		});

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)
+	);
+}