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

package/src/lib/collocation-sites/collocations-map-integration.svelte.ts

@@ -1,136 +0,0 @@
-import { type Popup, type MapLayerEventType, type Map as MaptilerMap } from "@maptiler/sdk";
-import type { Geometry } from "geojson";
-import { mapManager } from "$lib/map/map-manager.svelte.js";
-import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
-import { CollocationIconManager, getCollocationIconId } from "./collocations-icon-manager.svelte";
-import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";
-import { collocationSitesManager } from "./collocations.svelte";
-import { monitorsManager } from "$lib/monitors/monitors.svelte";
-import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte";
-import type { CollocationSiteMapFeature, CollocationSiteMarkerProperties } from "./types";
-import { untrack } from "svelte";
-import CollocationTooltip from "./CollocationTooltip.svelte";
-import { mountPopup } from "$lib/map/utils";
-
-function collocationTooltip(evt: MapLayerEventType["mousemove"] & object): Popup | void {
-	const feature = evt.features?.[0] as unknown as CollocationSiteMapFeature | undefined;
-	if (!feature) return;
-	return mountPopup(CollocationTooltip, { feature }, evt.lngLat);
-}
-
-class CollocationSitesMapIntegration extends MapIconLayerIntegration<CollocationSiteMarkerProperties> {
-	referenceId: string = "collocation-sites";
-	enabled: boolean = $state(false);
-
-	icons: CollocationIconManager = new CollocationIconManager(monitorsManager);
-	tooltipManager: TooltipManager = new TooltipManager();
-
-	/** The option only applies while monitors are shown with PM2.5. */
-	get available(): boolean {
-		return monitorsMapIntegration.enabled && monitorsManager.pollutant === "pm25";
-	}
-
-	features: Array<CollocationSiteMapFeature> = $derived.by(() => {
-		if (
-			!monitorsManager.meta ||
-			!monitorsManager.pollutant ||
-			!collocationSitesManager.collocationSites ||
-			monitorsMapIntegration.features.length === 0
-		) {
-			return [];
-		}
-
-		return collocationSitesManager.collocationSites
-			.map((c) => {
-				const referenceMonitorFeature = monitorsMapIntegration.features.find(
-					(m) => m.properties.id === c.reference_id
-				);
-
-				if (!referenceMonitorFeature) return;
-
-				const feature: CollocationSiteMapFeature = {
-					type: "Feature",
-					properties: {
-						icon: getCollocationIconId(referenceMonitorFeature!.properties.icon),
-						colocated_id: c.colocated_id,
-						reference_id: c.reference_id,
-						name: c.name
-					},
-					geometry: c.position! as Geometry
-				};
-
-				return feature;
-			})
-			.filter((f) => f !== undefined);
-	});
-
-	mapLayer: Parameters<MaptilerMap["addLayer"]>[0] = {
-		id: this.referenceId,
-		type: "symbol",
-		source: this.referenceId,
-		layout: {
-			"icon-allow-overlap": true,
-			"icon-ignore-placement": true,
-			"icon-image": ["get", "icon"],
-			"icon-size": 1
-		},
-		paint: {}
-	};
-
-	get mapSource(): Parameters<MaptilerMap["addSource"]>[1] {
-		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);
-			});
-
-			// Remove the layer while the option is unavailable (Ozone or Pollutant = None); restore
-			// it when it becomes available again if the user still has it checked.
-			$effect(() => {
-				if (!this.available) {
-					untrack(() => this.remove());
-				} else if (untrack(() => this.enabled)) {
-					untrack(() => this.apply());
-				}
-			});
-		});
-	}
-
-	apply() {
-		if (!this.available) {
-			this.remove();
-			return;
-		}
-		if (!mapManager.map) return;
-
-		if (!this.tooltipManager.has(this.referenceId)) {
-			this.tooltipManager.register(this.referenceId, collocationTooltip, Number.MAX_SAFE_INTEGER);
-		}
-
-		this.tooltipManager.enable();
-
-		super.apply();
-	}
-
-	remove() {
-		this.tooltipManager.disable();
-		super.remove();
-	}
-}
-
-export const collocationSitesMapIntegration = new CollocationSitesMapIntegration();
-export type { CollocationSitesMapIntegration as MonitorsMapIntegration };

package/src/lib/collocation-sites/collocations.svelte.ts

@@ -1,27 +0,0 @@
-import { getCollocationSites, type CollocationSite } from "@sjvair/sdk";
-import type { SignalOptions } from "$lib/abort";
-
-class CollocationSitesManager {
-	initialized: boolean = $state(false);
-
-	collocationSites: Array<CollocationSite> | null = $state(null);
-
-	async init({ signal }: SignalOptions = {}): Promise<void> {
-		if (this.initialized) return;
-		if (signal?.aborted) throw signal.reason;
-
-		this.collocationSites = await getCollocationSites({ signal });
-
-		this.initialized = true;
-	}
-
-	async update({ signal }: SignalOptions = {}): Promise<void> {
-		if (!this.initialized) return;
-		if (signal?.aborted) throw signal.reason;
-
-		this.collocationSites = await getCollocationSites({ signal });
-	}
-}
-
-export const collocationSitesManager = new CollocationSitesManager();
-export type { CollocationSitesManager };

package/src/lib/collocation-sites/types.ts

@@ -1,10 +0,0 @@
-import type { Feature, Geometry } from "geojson";
-
-export type CollocationSiteMapFeature = Feature<Geometry, CollocationSiteMarkerProperties>;
-
-export interface CollocationSiteMarkerProperties {
-	icon: string;
-	colocated_id: string;
-	reference_id: string;
-	name: string;
-}

package/src/lib/ev-stations/components/EvStationClusterTooltip.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-	import type { EvStationClusterMapFeature } from "../types";
-
-	interface Props {
-		feature: EvStationClusterMapFeature;
-	}
-
-	const { feature }: Props = $props();
-
-	const levelLabel = $derived(feature.source.includes("lvl2") ? "Level 2" : "Level 3");
-</script>
-
-<div class="flex flex-col gap-1 p-1">
-	<p class="font-semibold">{levelLabel} Chargers</p>
-	<p class="text-sm">{feature.properties.point_count} stations</p>
-</div>

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

@@ -1,162 +0,0 @@
-import type { GeoJSONSource, MapLayerEventType, Popup } from "@maptiler/sdk";
-import type { Point } from "geojson";
-import { mapManager } from "$lib/map/map-manager.svelte.js";
-import { mountPopup } from "$lib/map/utils";
-import { clickManager, type ClickHandler } from "$lib/map/integrations/click-manager";
-import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";
-import { EV_STATION_LEVELS, type EvStationLevel } from "./ev-station-icons";
-import type { EvStationClusterMapFeature, EvStationMapFeature } from "./types";
-import EvStationClusterTooltip from "./components/EvStationClusterTooltip.svelte";
-
-export interface EvStationsClusterContext {
-	referenceId: string;
-	featuresByLevel: Record<string, EvStationMapFeature[]>;
-	beforeLayer?: string;
-	tooltipManager: TooltipManager;
-}
-
-function clusterTooltip(evt: MapLayerEventType["mousemove"] & object): Popup | void {
-	const feature = evt.features?.[0] as unknown as EvStationClusterMapFeature | undefined;
-	if (!feature) return;
-	return mountPopup(EvStationClusterTooltip, { feature }, evt.lngLat);
-}
-
-export class EvStationsClusterRenderer {
-	private _levels: EvStationLevel[] = [];
-
-	constructor(private ctx: EvStationsClusterContext) {}
-
-	apply(stationClickHandler: ClickHandler): void {
-		if (!mapManager.map) return;
-
-		for (const level of Object.keys(EV_STATION_LEVELS) as EvStationLevel[]) {
-			const sourceId = `${this.ctx.referenceId}-${level}`;
-			const features = this.ctx.featuresByLevel[level] ?? [];
-			const { bg } = EV_STATION_LEVELS[level];
-			const clusterBg = bg.replace("rgb(", "rgba(").replace(")", ", 0.6)");
-
-			mapManager.map.addSource(sourceId, {
-				type: "geojson",
-				promoteId: "id",
-				data: { type: "FeatureCollection", features },
-				cluster: true,
-				clusterRadius: 40,
-				clusterMaxZoom: 9
-			});
-
-			mapManager.map.addLayer(
-				{
-					id: `${sourceId}-cluster-circle`,
-					type: "circle",
-					source: sourceId,
-					filter: ["has", "point_count"],
-					paint: {
-						"circle-color": clusterBg,
-						"circle-radius": ["step", ["get", "point_count"], 15, 10, 20, 25, 25]
-					}
-				},
-				this.ctx.beforeLayer
-			);
-
-			mapManager.map.addLayer(
-				{
-					id: `${sourceId}-cluster-label`,
-					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" }
-				},
-				this.ctx.beforeLayer
-			);
-
-			mapManager.map.addLayer(
-				{
-					id: `${sourceId}-unclustered`,
-					type: "symbol",
-					source: sourceId,
-					filter: ["!", ["has", "point_count"]],
-					layout: {
-						"icon-image": `ev-station-${level}`,
-						"icon-allow-overlap": true,
-						"icon-ignore-placement": true,
-						"icon-size": 1
-					},
-					paint: {}
-				},
-				this.ctx.beforeLayer
-			);
-
-			const circleLayerId = `${sourceId}-cluster-circle`;
-			const unclusteredLayerId = `${sourceId}-unclustered`;
-
-			if (!this.ctx.tooltipManager.has(circleLayerId)) {
-				this.ctx.tooltipManager.register(circleLayerId, clusterTooltip);
-			}
-
-			clickManager.register([circleLayerId], this.makeClusterClickHandler(sourceId));
-			clickManager.register([unclusteredLayerId], stationClickHandler);
-
-			this._levels.push(level);
-		}
-	}
-
-	remove(): void {
-		if (!mapManager.map) return;
-
-		for (const level of this._levels) {
-			const sourceId = `${this.ctx.referenceId}-${level}`;
-			const layerIds = [
-				`${sourceId}-cluster-circle`,
-				`${sourceId}-cluster-label`,
-				`${sourceId}-unclustered`
-			];
-
-			for (const layerId of layerIds) {
-				clickManager.unregister([layerId]);
-				if (mapManager.map.getLayer(layerId)) {
-					mapManager.map.removeLayer(layerId);
-				}
-			}
-
-			if (mapManager.map.getSource(sourceId)) {
-				mapManager.map.removeSource(sourceId);
-			}
-		}
-
-		this._levels = [];
-	}
-
-	get unclusteredLayerIds(): string[] {
-		return this._levels.map((level) => `${this.ctx.referenceId}-${level}-unclustered`);
-	}
-
-	syncFeatures(): void {
-		if (!mapManager.map) return;
-		for (const level of this._levels) {
-			const sourceId = `${this.ctx.referenceId}-${level}`;
-			mapManager.setDataSource(sourceId, this.ctx.featuresByLevel[level] ?? []);
-		}
-	}
-
-	private makeClusterClickHandler(sourceId: string): ClickHandler {
-		return async (features) => {
-			try {
-				const feature = features[0];
-				if (!feature?.properties?.cluster_id) return;
-				const source = mapManager.map?.getSource(sourceId) as GeoJSONSource | undefined;
-				if (!source) return;
-				const zoom = await source.getClusterExpansionZoom(feature.properties.cluster_id);
-				const coords = (feature.geometry as Point).coordinates as [number, number];
-				mapManager.map?.easeTo({ center: coords, zoom });
-			} catch (err) {
-				console.error("EvStations: cluster expansion zoom failed", err);
-			}
-		};
-	}
-}

package/src/lib/ev-stations/ev-stations-map-integration.svelte.ts

@@ -1,248 +0,0 @@
-import type {
-	ExpressionSpecification,
-	FilterSpecification,
-	Map as MaptilerMap,
-	Popup
-} from "@maptiler/sdk";
-import type { Geometry } from "geojson";
-import { untrack } from "svelte";
-import { mapManager } from "$lib/map/map-manager.svelte.js";
-import { clickManager, type ClickHandler } from "$lib/map/integrations/click-manager";
-import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
-import { MapDisplayOption } from "$lib/map/integrations/map-display-option.svelte";
-import { TooltipManager } from "$lib/map/integrations/tooltip.svelte";
-import { mountClickPopup } from "$lib/map/utils";
-import { evStationsManager } from "./ev-stations.svelte";
-import { EvStationIconManager } from "./ev-station-icons";
-import {
-	EvStationsClusterRenderer,
-	type EvStationsClusterContext
-} from "./ev-stations-cluster-renderer";
-import type { EvStation, EvStationMapFeature, EvStationMarkerProperties } from "./types";
-import EvStationTooltip from "./components/EvStationTooltip.svelte";
-
-class EvStationsMapIntegration
-	extends MapIconLayerIntegration<EvStationMarkerProperties>
-	implements EvStationsClusterContext
-{
-	referenceId: string = "ev-stations";
-	enabled: boolean = $state(false);
-	clustered: boolean = $state(true);
-
-	icons: EvStationIconManager = new EvStationIconManager();
-	tooltipManager: TooltipManager = new TooltipManager();
-	private renderer: EvStationsClusterRenderer = new EvStationsClusterRenderer(this);
-	private currentPopup: Popup | null = 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: Array<EvStationMapFeature> = $derived.by(() => {
-		const result: EvStationMapFeature[] = [];
-		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: Record<string, EvStationMapFeature[]> = $derived.by(() => {
-		const byLevel: Record<string, EvStationMapFeature[]> = {};
-		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: FilterSpecification = $derived.by((): FilterSpecification => {
-		const levels: string[] = [];
-		if (this.displayOptions.lvl2.value) levels.push("lvl2");
-		if (this.displayOptions.lvl3.value) levels.push("lvl3");
-		if (levels.length === 0) return ["==", ["get", "level"], "none"] as ExpressionSpecification;
-		if (levels.length === 2) return ["boolean", true] as ExpressionSpecification;
-		return ["==", ["get", "level"], levels[0]] as ExpressionSpecification;
-	});
-
-	private handleStationClick: ClickHandler = (features, evt) => {
-		this.currentPopup?.remove();
-		const feature = features[0] as unknown as EvStationMapFeature | undefined;
-		if (!feature) return;
-		this.currentPopup = mountClickPopup(EvStationTooltip, { feature }, evt.lngLat);
-		this.currentPopup.addTo(mapManager.map!);
-	};
-
-	get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0] {
-		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(): Parameters<MaptilerMap["addSource"]>[1] {
-		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: EvStation, level: "lvl2" | "lvl3"): EvStationMapFeature {
-	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]
-		} as Geometry
-	};
-}
-
-export const evStationsMapIntegration = new EvStationsMapIntegration();
-export type { EvStationsMapIntegration };

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

@@ -1,84 +0,0 @@
-import {
-	accessDetailCodeTypes,
-	creditCardTypes,
-	evConnectorTypes,
-	evNetworkTypes,
-	facilityTypes
-} from "./data-maps";
-import type { SignalOptions } from "$lib/abort";
-import type { EvStation } from "./types";
-import * as ZipCodes from "./zip-codes";
-
-class EvStationsManager {
-	lvl2Stations: Array<EvStation> | undefined = $state();
-	lvl3Stations: Array<EvStation> | undefined = $state();
-
-	async loadLvl3Stations({ signal }: SignalOptions = {}): Promise<void> {
-		this.lvl3Stations = await fetchEvStations("dc_fast", signal);
-	}
-
-	async loadLvl2Stations({ signal }: SignalOptions = {}): Promise<void> {
-		this.lvl2Stations = await fetchEvStations("2", signal);
-	}
-}
-
-const zipCodes = Object.values(ZipCodes)
-	.reduce((prev, curr) => prev.concat(curr))
-	.join(",");
-
-async function fetchEvStations(
-	chargingLevel: "2" | "dc_fast",
-	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", 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: Array<EvStation> = 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: 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)
-			);
-		});
-}
-
-export const evStationsManager = new EvStationsManager();
-export type { EvStationsManager };