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

package/src/lib/map/map-style-state.svelte.ts

@@ -1,94 +0,0 @@
-import type { MapStyleVariant, ReferenceMapStyle } from "@maptiler/sdk";
-import { DefaultMapStyle, mapManager } from "./map-manager.svelte.js";
-import { integrationsManager } from "./integrations/integrations-manager";
-import { variantForStyle } from "./basemap";
-
-/** Basemap + theme selection, shared so the Settings menu and Reset Map Options agree. */
-class MapStyleState {
-	referenceStyle: ReferenceMapStyle = $state.raw(DefaultMapStyle.getReferenceStyle());
-	variant: MapStyleVariant = $state.raw(DefaultMapStyle);
-	// The variant last handed to setStyle (loaded or still loading); null once a load has failed
-	// with nothing left to fall back to, so that any later selection is tried again.
-	private applied: MapStyleVariant | null = DefaultMapStyle;
-	// The variant the map last finished loading, which a failed change falls back to.
-	private loaded: MapStyleVariant = DefaultMapStyle;
-	private stopWaiting: (() => void) | null = null;
-
-	selectReferenceStyle(style: ReferenceMapStyle): void {
-		this.referenceStyle = style;
-		this.selectVariant(variantForStyle(style, this.variant));
-	}
-
-	selectVariant(variant: MapStyleVariant): void {
-		this.variant = variant;
-		this.apply();
-	}
-
-	reset(): void {
-		this.referenceStyle = DefaultMapStyle.getReferenceStyle();
-		this.selectVariant(DefaultMapStyle);
-	}
-
-	private apply(): void {
-		if (!mapManager.map || this.variant === this.applied) return;
-		this.load(this.variant);
-	}
-
-	private load(variant: MapStyleVariant): void {
-		const map = mapManager.map;
-		if (!map) return;
-		// A newer change supersedes one still in flight.
-		this.stopWaiting?.();
-		this.applied = variant;
-
-		// setStyle wipes every custom source/layer; re-add enabled integrations once it loads.
-		const onLoad = () => {
-			this.stopWaiting?.();
-			this.loaded = variant;
-			mapManager.styleLoading = false;
-			integrationsManager.refresh();
-		};
-		// "error" also fires for tiles, sprites and glyphs; only the style document failing means
-		// the change failed.
-		const onError = (event: { error?: unknown }) => {
-			if (!isRequestFor(event.error, variant.getExpandedStyleURL())) return;
-			this.stopWaiting?.();
-			this.recover(variant);
-		};
-		this.stopWaiting = () => {
-			map.off("style.load", onLoad);
-			map.off("error", onError);
-			this.stopWaiting = null;
-		};
-		map.on("style.load", onLoad);
-		map.on("error", onError);
-		mapManager.styleLoading = true;
-		map.setStyle(variant);
-	}
-
-	/**
-	 * A style that fails to load leaves the map with no style at all, so go back to the last one
-	 * that loaded and make the selection say so. When that one fails too (e.g. offline) there is
-	 * nothing to draw on: `styleLoading` stays set, since integrations cannot add layers to a
-	 * missing style, and the next selection starts a fresh attempt.
-	 */
-	private recover(failed: MapStyleVariant): void {
-		if (failed === this.loaded) {
-			this.applied = null;
-			return;
-		}
-		this.variant = this.loaded;
-		this.referenceStyle = this.loaded.getReferenceStyle();
-		this.load(this.loaded);
-	}
-}
-
-/** Whether a map "error" event's error is a failed request for `url`, ignoring the query. */
-function isRequestFor(error: unknown, url: string): boolean {
-	const failed = (error as { url?: unknown } | null | undefined)?.url;
-	if (typeof failed !== "string") return false;
-	return failed.split("?")[0] === url.split("?")[0];
-}
-
-export const mapStyleState = new MapStyleState();
-export type { MapStyleState };

package/src/lib/map/utils.ts

@@ -1,53 +0,0 @@
-import { mount, unmount } from "svelte";
-import type { Component } from "svelte";
-import { MapStyle, Popup } from "@maptiler/sdk";
-import type { ReferenceMapStyle, GeoJSONSource, LngLat } from "@maptiler/sdk";
-
-export const MAP_STYLE_OPTIONS: ReferenceMapStyle[] = (() => {
-	const latest = new Map<string, { version: number; style: ReferenceMapStyle }>();
-	for (const style of Object.values(MapStyle) as ReferenceMapStyle[]) {
-		const id = style.getId();
-		const match = id.match(/^(.+?)_V(\d+)$/i);
-		const baseName = match ? match[1] : id;
-		const version = match ? parseInt(match[2], 10) : 0;
-		const existing = latest.get(baseName);
-		if (!existing || version > existing.version) {
-			latest.set(baseName, { version, style });
-		}
-	}
-	return Array.from(latest.values())
-		.map((e) => e.style)
-		.sort((a, b) => a.getName().localeCompare(b.getName()));
-})();
-
-export function isGeoJSONSource(source: unknown): source is GeoJSONSource {
-	return (
-		typeof source === "object" &&
-		source !== null &&
-		"type" in source &&
-		(source as Record<string, unknown>).type === "geojson"
-	);
-}
-
-export function mountPopup<P extends Record<string, unknown>>(
-	component: Component<P>,
-	props: P,
-	lngLat: LngLat,
-	closeButton = false
-): Popup {
-	const container = document.createElement("div");
-	const instance = mount(component, { target: container, props });
-	const popup = new Popup({ closeButton, closeOnClick: false, maxWidth: "none" })
-		.setLngLat(lngLat)
-		.setDOMContent(container);
-	popup.on("close", () => unmount(instance));
-	return popup;
-}
-
-export function mountClickPopup<P extends Record<string, unknown>>(
-	component: Component<P>,
-	props: P,
-	lngLat: LngLat
-): Popup {
-	return mountPopup(component, props, lngLat, true);
-}

package/src/lib/monitors/components/MonitorClusterTooltip.svelte

@@ -1,112 +0,0 @@
-<script lang="ts">
-	import type { Geometry } from "geojson";
-	import { GeoJSONSource } from "@maptiler/sdk";
-	import type { SJVAirEntryLevel } from "@sjvair/sdk";
-	import type { ComponentProps } from "svelte";
-	import { area } from "@turf/area";
-	import { convertArea } from "@turf/helpers";
-	import DataBox from "$lib/components/DataBox.svelte";
-	import { mapManager } from "$lib/map/map-manager.svelte.js";
-	import type { MonitorClusterMapFeature, MonitorMapFeature } from "../types";
-	import { monitorsManager } from "../monitors.svelte";
-	import { getCurrentLevel } from "../monitor-utils";
-
-	interface MonitorClusterTooltipProps {
-		feature: MonitorClusterMapFeature;
-	}
-
-	interface MonitorClusterTooltipData extends ComponentProps<typeof DataBox> {
-		clusterType: string;
-		count: number;
-		coverage?: string;
-		max: number;
-		min: number;
-	}
-
-	const { feature }: MonitorClusterTooltipProps = $props();
-
-	let data: MonitorClusterTooltipData | undefined = $state();
-
-	$effect(() => {
-		const source = mapManager.map!.getSource(feature.source)! as GeoJSONSource;
-		const latest = monitorsManager.latest;
-		const meta = monitorsManager.meta;
-
-		source
-			.getClusterLeaves(feature.properties.cluster_id, feature.properties.point_count, 0)
-			.then((features) => {
-				//const monitor = monitorsManager.latest?.get(feature.properties.id);
-
-				if (!features.length || !meta || !latest) return;
-				const monitors = (features as Array<MonitorMapFeature>).map((f) =>
-					latest?.get(f.properties.id)
-				);
-
-				const firstMonitor = monitors[0];
-				if (!firstMonitor) return;
-
-				const entryType = meta.entryType(firstMonitor.latest.entry_type);
-				const monitorType = meta.monitorType(firstMonitor.type);
-
-				const coords = monitors.map((m) => m!.position!.coordinates);
-				const values = monitors.map((m) => parseFloat(m?.latest.value ?? "0"));
-
-				const avg = Math.round(values.reduce((sum, value) => sum + value, 0) / monitors.length);
-
-				const level: SJVAirEntryLevel | undefined = getCurrentLevel(avg, entryType.asIter.levels!);
-
-				data = {
-					color: level?.color || "#d3d3d3",
-					count: feature.properties.point_count,
-					coverage: calculateArea(coords),
-					header: entryType.label,
-					clusterType: `${firstMonitor.is_sjvair ? "SJVAir " : ""}${monitorType.label} Monitors`,
-					subheading: "(cluster avg)",
-					max: values.reduce((prev, current) => (prev > current ? prev : current)),
-					min: values.reduce((prev, current) => (prev < current ? prev : current)),
-					value: avg.toString()
-				};
-			});
-
-		function calculateArea(coords: Array<Array<number>>) {
-			// TODO: update to handle lines as well as area (only 2 in cluster)
-			if (coords.length === 3) {
-				coords.push(coords[0]);
-			}
-
-			const coverage = area({
-				type: "Feature",
-				geometry: {
-					type: "Polygon",
-					coordinates: [coords]
-				}
-			} as unknown as Geometry);
-
-			return coverage > 0 ? convertArea(coverage, "meters", "miles").toFixed(3) : undefined;
-		}
-	});
-</script>
-
-{#if data}
-	<div class="flex gap-2">
-		<DataBox
-			color={data.color}
-			header={data.header}
-			subheading={data.subheading}
-			value={data.value}
-		/>
-		<div class="flex flex-col">
-			<h1 class="text-lg font-bold">{data.clusterType}</h1>
-			<p>
-				{data.count} monitors
-				{#if data.coverage}
-					<span>covering {data.coverage}mi²</span>
-				{/if}
-			</p>
-			<div class="mt-auto">
-				<p class="text-base">Max: {data.max}µg/m³</p>
-				<p class="text-base leading-none">Min: {data.min}µg/m³</p>
-			</div>
-		</div>
-	</div>
-{/if}

package/src/lib/monitors/components/MonitorTooltip.svelte

@@ -1,61 +0,0 @@
-<script lang="ts">
-	import type { SJVAirEntryLevel } from "@sjvair/sdk";
-	import { format, formatDistanceToNow } from "date-fns";
-	import DataBox from "$lib/components/DataBox.svelte";
-	import { monitorsManager } from "../monitors.svelte";
-	import { getCurrentLevel } from "../monitor-utils";
-	import type { MonitorMapFeature } from "../types";
-
-	interface MonitorTooltipProps {
-		feature: MonitorMapFeature;
-	}
-
-	const { feature }: MonitorTooltipProps = $props();
-
-	const data = $derived.by(() => {
-		const monitor = monitorsManager.latest?.get(feature.properties.id);
-
-		if (!monitor || !monitorsManager.meta) return;
-
-		const entryType = monitorsManager.meta.entryType(monitor.latest.entry_type);
-		const level: SJVAirEntryLevel | undefined = getCurrentLevel(
-			monitor.latest.value,
-			entryType.asIter.levels!
-		);
-
-		const updateDuration = monitorsManager.meta.monitorType(monitor.type).expected_interval;
-
-		return {
-			color: level?.color ?? "",
-			header: entryType.label,
-			date: {
-				formatted: format(monitor.latest.timestamp, "h:mm:aaa EEEE MMM dd, yyyy"),
-				diference: formatDistanceToNow(monitor.latest.timestamp, {
-					addSuffix: true,
-					includeSeconds: true
-				})
-			},
-			subheading: `(${updateDuration} avg)`,
-			value: Math.round(parseInt(monitor.latest.value, 10)).toString()
-		};
-	});
-</script>
-
-{#if data}
-	<div class="flex gap-2">
-		<DataBox
-			color={data.color}
-			header={data.header}
-			subheading={data.subheading}
-			value={data.value}
-		/>
-		<div class="flex flex-col">
-			<p>{data.date.formatted}</p>
-			<h1 class="text-lg font-bold underline">{feature.properties.name}</h1>
-			<div class="mt-auto">
-				<p class="text-base leading-none">Last updated</p>
-				<p class="text-base leading-none">{data.date.diference}</p>
-			</div>
-		</div>
-	</div>
-{/if}

package/src/lib/monitors/monitor-utils.ts

@@ -1,57 +0,0 @@
-import type { MonitorData, SJVAirEntryLevel } from "@sjvair/sdk";
-
-export function getCurrentLevel(
-	value: string | number,
-	levels: Array<SJVAirEntryLevel>
-): SJVAirEntryLevel | undefined {
-	value = typeof value === "string" ? parseInt(value, 10) : value;
-	return levels.find((lvl) => {
-		return value >= lvl.range[0] && value <= lvl.range[1];
-	});
-}
-
-export function getOrder(monitor: MonitorData): number {
-	switch (monitor.type) {
-		case "airgradient":
-			return 5;
-
-		case "airnow":
-			return 2;
-
-		case "aqview":
-			return 3;
-
-		case "bam1022":
-			return 6;
-
-		case "purpleair":
-			return monitor.is_sjvair ? 4 : 1;
-
-		case "vozbox":
-			return 7;
-
-		case "aqlite":
-			return 8;
-
-		default:
-			throw new Error(`Map ordering for ${monitor.device} has not been set`);
-	}
-}
-
-export function getTypeShape(type: string): string {
-	switch (type) {
-		case "airnow":
-		case "aqview":
-		case "bam1022":
-		case "aqlite":
-			return "triangle";
-
-		case "airgradient":
-		case "purpleair":
-		case "vozbox":
-			return "circle";
-
-		default:
-			return "circle";
-	}
-}

package/src/lib/monitors/monitors-cluster-renderer.ts

@@ -1,285 +0,0 @@
-import type {
-	ExpressionSpecification,
-	FilterSpecification,
-	GeoJSONSource,
-	MapLayerEventType,
-	Popup
-} from "@maptiler/sdk";
-import type { Point } from "geojson";
-import type { SJVAirEntryLevel } from "@sjvair/sdk";
-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 { getTypeShape } from "./monitor-utils";
-import type { MonitorClusterMapFeature, MonitorMapFeature } from "./types";
-import MonitorTooltip from "./components/MonitorTooltip.svelte";
-import MonitorClusterTooltip from "./components/MonitorClusterTooltip.svelte";
-
-const AVG_EXPR: ExpressionSpecification = [
-	"/",
-	["get", "sumValues"],
-	["max", ["get", "point_count"], 1]
-];
-
-export function monitorTooltip(evt: MapLayerEventType["mousemove"] & object): Popup | void {
-	const features = evt.features as unknown as Array<MonitorMapFeature> | undefined;
-	const feature = features?.sort((a, b) => b.properties.order - a.properties.order)[0];
-	if (!feature) return;
-	return mountPopup(MonitorTooltip, { feature }, evt.lngLat);
-}
-
-function clusterTooltip(evt: MapLayerEventType["mousemove"] & object): Popup | void {
-	const feature = evt.features?.[0] as unknown as MonitorClusterMapFeature | undefined;
-	if (!feature) return;
-	return mountPopup(MonitorClusterTooltip, { feature }, evt.lngLat);
-}
-
-export interface MonitorsClusterContext {
-	referenceId: string;
-	featuresByType: Record<string, MonitorMapFeature[]>;
-	filters: FilterSpecification;
-	clusterIconThresholds: SJVAirEntryLevel[];
-	beforeLayer?: string;
-	tooltipManager: TooltipManager;
-}
-
-export class MonitorsClusterRenderer {
-	private _clusterTypes: string[] = [];
-
-	constructor(private ctx: MonitorsClusterContext) {}
-
-	apply(monitorClickHandler: ClickHandler): void {
-		if (!mapManager.map) return;
-
-		const sortedEntries = Object.entries(this.ctx.featuresByType).sort(([, a], [, b]) => {
-			const maxOrder = (fs: MonitorMapFeature[]) =>
-				fs.reduce((m, f) => Math.max(m, f.properties.order), 0);
-			return maxOrder(a) - maxOrder(b);
-		});
-
-		for (const [[type, features], index] of sortedEntries.map((e, i) => [e, i] as const)) {
-			const sourceId = `${this.ctx.referenceId}-${type}`;
-
-			mapManager.map.addSource(sourceId, {
-				type: "geojson",
-				promoteId: "id",
-				data: { type: "FeatureCollection", features },
-				cluster: true,
-				clusterRadius: 40,
-				clusterMaxZoom: 9,
-				clusterProperties: {
-					sumValues: ["+", ["to-number", ["get", "value"]], 0]
-				}
-			});
-
-			this.monitorTypeIconsLayer(sourceId, AVG_EXPR, getTypeShape(type));
-			this.clusterCountLayer(sourceId, AVG_EXPR);
-			this.unclusteredLayer(sourceId);
-
-			const { icon, unclustered } = this.clusterLayerIds(sourceId);
-
-			if (!this.ctx.tooltipManager.has(icon)) {
-				this.ctx.tooltipManager.register(icon, clusterTooltip, index);
-			}
-			if (!this.ctx.tooltipManager.has(unclustered)) {
-				this.ctx.tooltipManager.register(unclustered, monitorTooltip, index);
-			}
-
-			clickManager.register([unclustered], monitorClickHandler);
-			clickManager.register([icon], this.makeClusterClickHandler(sourceId));
-
-			this._clusterTypes.push(type);
-		}
-	}
-
-	remove(): void {
-		if (!mapManager.map) return;
-
-		for (const type of this._clusterTypes) {
-			const sourceId = `${this.ctx.referenceId}-${type}`;
-			const layers = this.clusterLayerIds(sourceId);
-			clickManager.unregister([layers.unclustered]);
-			clickManager.unregister([layers.icon]);
-			for (const layerId of Object.values(layers)) {
-				if (mapManager.map.getLayer(layerId)) {
-					mapManager.map.removeLayer(layerId);
-				}
-			}
-			if (mapManager.map.getSource(sourceId)) {
-				mapManager.map.removeSource(sourceId);
-			}
-		}
-
-		this._clusterTypes = [];
-	}
-
-	get unclusteredLayerIds(): string[] {
-		return this._clusterTypes.map((type) => `${this.ctx.referenceId}-${type}-unclustered`);
-	}
-
-	syncFeatures(): void {
-		if (!mapManager.map) return;
-		for (const type of this._clusterTypes) {
-			const sourceId = `${this.ctx.referenceId}-${type}`;
-			mapManager.setDataSource(sourceId, this.ctx.featuresByType[type] ?? []);
-		}
-	}
-
-	syncFilter(): void {
-		if (!mapManager.map) return;
-
-		for (const type of this._clusterTypes) {
-			const sourceId = `${this.ctx.referenceId}-${type}`;
-			const { unclustered } = this.clusterLayerIds(sourceId);
-			if (mapManager.map.getLayer(unclustered)) {
-				mapManager.map.setFilter(unclustered, [
-					"all",
-					this.ctx.filters as ExpressionSpecification,
-					["!", ["has", "point_count"]]
-				]);
-			}
-		}
-	}
-
-	syncThresholds(): void {
-		if (!mapManager.map) return;
-
-		for (const type of this._clusterTypes) {
-			const sourceId = `${this.ctx.referenceId}-${type}`;
-			const { icon, average } = this.clusterLayerIds(sourceId);
-
-			if (mapManager.map.getLayer(icon)) {
-				mapManager.map.setLayoutProperty(
-					icon,
-					"icon-image",
-					this.buildClusterIconExpression(AVG_EXPR, getTypeShape(type))
-				);
-			}
-			if (mapManager.map.getLayer(average)) {
-				mapManager.map.setPaintProperty(average, "text-color", this.clusterTextColorExpr(AVG_EXPR));
-			}
-		}
-	}
-
-	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("ClickManager: cluster expansion zoom failed", err);
-			}
-		};
-	}
-
-	private clusterLayerIds(sourceId: string): {
-		icon: string;
-		average: string;
-		unclustered: string;
-	} {
-		return {
-			icon: `${sourceId}-cluster-icon`,
-			average: `${sourceId}-cluster-average`,
-			unclustered: `${sourceId}-unclustered`
-		};
-	}
-
-	private get clusterTextColorThreshold(): number {
-		// Use the max of the 3rd level (unhealthy_sensitive) so text flips to white at unhealthy+
-		return this.ctx.clusterIconThresholds[2]?.range[1] ?? 150.5;
-	}
-
-	private clusterTextColorExpr(avgExpr: ExpressionSpecification): ExpressionSpecification {
-		return ["case", ["<=", avgExpr, this.clusterTextColorThreshold], "#000000", "#FFFFFF"];
-	}
-
-	private buildClusterIconExpression(
-		avgExpr: ExpressionSpecification,
-		shape: string
-	): ExpressionSpecification {
-		const thresholds = this.ctx.clusterIconThresholds;
-		if (!thresholds.length) return `outside-default-${shape}` as unknown as ExpressionSpecification;
-
-		const expr: unknown[] = ["case"];
-		for (const level of thresholds.slice(0, -1)) {
-			expr.push(["<=", avgExpr, level.range[1]], `outside-${level.name}-${shape}`);
-		}
-		expr.push(`outside-${thresholds.at(-1)!.name}-${shape}`);
-		return expr as ExpressionSpecification;
-	}
-
-	private monitorTypeIconsLayer(
-		sourceId: string,
-		avgExpr: ExpressionSpecification,
-		shape: string
-	): void {
-		const { icon } = this.clusterLayerIds(sourceId);
-		mapManager.map?.addLayer(
-			{
-				id: icon,
-				type: "symbol",
-				source: sourceId,
-				filter: ["has", "point_count"],
-				layout: {
-					"icon-image": this.buildClusterIconExpression(avgExpr, shape),
-					"icon-size": ["step", ["get", "point_count"], 1.3, 10, 1.6, 25, 2.0],
-					"icon-ignore-placement": true,
-					"icon-allow-overlap": true
-				},
-				paint: {
-					"icon-opacity": 0.8
-				}
-			},
-			this.ctx.beforeLayer
-		);
-	}
-
-	private clusterCountLayer(sourceId: string, avgExpr: ExpressionSpecification): void {
-		const { average } = this.clusterLayerIds(sourceId);
-		mapManager.map?.addLayer(
-			{
-				id: average,
-				type: "symbol",
-				source: sourceId,
-				filter: ["has", "point_count"],
-				layout: {
-					"text-field": ["to-string", ["round", avgExpr]],
-					"text-size": 12,
-					"text-ignore-placement": true,
-					"text-allow-overlap": true
-				},
-				paint: {
-					"text-color": this.clusterTextColorExpr(avgExpr)
-				}
-			},
-			this.ctx.beforeLayer
-		);
-	}
-
-	private unclusteredLayer(sourceId: string): void {
-		const { unclustered } = this.clusterLayerIds(sourceId);
-		mapManager.map?.addLayer(
-			{
-				id: unclustered,
-				type: "symbol",
-				source: sourceId,
-				filter: ["all", this.ctx.filters as ExpressionSpecification, ["!", ["has", "point_count"]]],
-				layout: {
-					"symbol-sort-key": ["coalesce", ["get", "order"], 0],
-					"icon-allow-overlap": true,
-					"icon-ignore-placement": true,
-					"icon-image": ["get", "icon"],
-					"icon-size": 1
-				},
-				paint: {}
-			},
-			this.ctx.beforeLayer
-		);
-	}
-}