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

package/src/lib/hms/hms-fire-icon-manager.ts

@@ -1,48 +0,0 @@
-import { asDataURI, fireIcon } from "$lib/map/icons";
-import { MapIconManager } from "$lib/map/integrations/map-icon-manager";
-import type { LegendCategory } from "$lib/legend/legend-data";
-
-export type FRPTier = "sm" | "md" | "lg" | "xl" | "xxl";
-
-export const FRP_TIERS: Record<FRPTier, { color: string; size: number }> = {
-	sm: { color: "#FFD700", size: 20 },
-	md: { color: "#FF8C00", size: 24 },
-	lg: { color: "#FF4500", size: 28 },
-	xl: { color: "#DC143C", size: 32 },
-	xxl: { color: "#8B0000", size: 36 }
-};
-
-const FRP_TIER_LABELS: Record<FRPTier, string> = {
-	sm: "<10",
-	md: "10-49",
-	lg: "50-149",
-	xl: "150-349",
-	xxl: "≥350"
-};
-
-/** Fire legend blocks (MW), in tier order, using the same colors as the map icons. */
-export const FIRE_LEGEND_CATEGORIES: Array<LegendCategory> = (
-	Object.keys(FRP_TIERS) as Array<FRPTier>
-).map((tier) => ({ color: FRP_TIERS[tier].color, label: FRP_TIER_LABELS[tier] }));
-
-export function getTierIconId(frp: number): string {
-	if (frp < 10) return "hms-fire-sm";
-	if (frp < 50) return "hms-fire-md";
-	if (frp < 150) return "hms-fire-lg";
-	if (frp < 350) return "hms-fire-xl";
-	return "hms-fire-xxl";
-}
-
-export class HMSFireIconManager extends MapIconManager {
-	constructor() {
-		super();
-		for (const [tier, { color, size }] of Object.entries(FRP_TIERS) as [
-			FRPTier,
-			{ color: string; size: number }
-		][]) {
-			const img = new Image(size, size);
-			img.src = asDataURI(fireIcon(color, size));
-			this.register(`hms-fire-${tier}`, img);
-		}
-	}
-}

package/src/lib/hms/hms-fire-map-integration.svelte.ts

@@ -1,109 +0,0 @@
-import type { Map as MaptilerMap } from "@maptiler/sdk";
-import type { Feature } from "geojson";
-import type { Point } from "geojson";
-import { mapManager } from "$lib/map/map-manager.svelte.js";
-import { MapIconLayerIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
-import { hmsManager } from "./hms.svelte";
-import { HMSFireIconManager, getTierIconId } from "./hms-fire-icon-manager";
-
-type FireProperties = Record<string, unknown>;
-
-const ZOOM_THRESHOLD = 10;
-
-class HMSFireMapIntegration extends MapIconLayerIntegration<FireProperties> {
-	referenceId = "hms-fire";
-	enabled: boolean = $state(true);
-	icons = new HMSFireIconManager();
-	private zoomedIn: boolean = $state(false);
-
-	get features(): Array<Feature<Point, FireProperties>> {
-		return this.zoomedIn ? this.hotspotFeatures : this.groupFeatures;
-	}
-
-	get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0] {
-		return {
-			id: this.referenceId,
-			type: "symbol",
-			source: this.referenceId,
-			layout: {
-				"icon-image": ["get", "icon"],
-				"icon-allow-overlap": true,
-				"icon-ignore-placement": true
-			},
-			paint: {}
-		};
-	}
-
-	get mapSource(): Parameters<MaptilerMap["addSource"]>[1] {
-		return {
-			type: "geojson",
-			promoteId: "id",
-			data: { type: "FeatureCollection", features: this.features }
-		};
-	}
-
-	private get groupFeatures(): Array<Feature<Point, FireProperties>> {
-		return (hmsManager.fireGroups ?? []).map((g) => ({
-			type: "Feature",
-			properties: {
-				id: g.id,
-				icon: getTierIconId(g.avgFrp),
-				avgFrp: g.avgFrp,
-				count: g.count
-			},
-			geometry: { type: "Point", coordinates: g.coordinates }
-		}));
-	}
-
-	private get hotspotFeatures(): Array<Feature<Point, FireProperties>> {
-		return (hmsManager.fire ?? []).map((d) => ({
-			type: "Feature",
-			properties: {
-				id: d.id,
-				icon: getTierIconId(d.frp),
-				frp: d.frp
-			},
-			geometry: d.geometry as Point
-		}));
-	}
-
-	private onZoom = () => {
-		if (!mapManager.map) return;
-		this.zoomedIn = mapManager.map.getZoom() >= ZOOM_THRESHOLD;
-	};
-
-	constructor() {
-		super();
-
-		$effect.root(() => {
-			$effect(() => {
-				const features = this.features;
-				if (!mapManager.map || !this.enabled) return;
-				mapManager.setDataSource(this.referenceId, features);
-			});
-		});
-	}
-
-	apply() {
-		if (!mapManager.map) return;
-		this.icons
-			.loadIcons()
-			.then(() => {
-				if (!mapManager.map || !this.enabled || mapManager.styleLoading) return;
-				this.remove();
-				this.zoomedIn = mapManager.map.getZoom() >= ZOOM_THRESHOLD;
-				mapManager.map.addSource(this.referenceId, this.mapSource);
-				mapManager.map.addLayer(this.mapLayer, this.beforeLayer);
-				mapManager.map.on("zoom", this.onZoom);
-			})
-			.catch(console.error);
-	}
-
-	remove() {
-		mapManager.map?.off("zoom", this.onZoom);
-		super.remove();
-	}
-}
-
-export const hmsFireMapIntegration = new HMSFireMapIntegration();
-export type { HMSFireMapIntegration };

package/src/lib/hms/hms-smoke-map-integration.svelte.ts

@@ -1,105 +0,0 @@
-import type { Map as MaptilerMap } from "@maptiler/sdk";
-import type { Feature, MultiPolygon } from "geojson";
-import type { HMSSmokeGeoJSON } from "@sjvair/sdk/hms";
-import { mapManager } from "$lib/map/map-manager.svelte.js";
-import { MapGeoJSONIntegration } from "$lib/map/integrations/map-geojson-integration.svelte";
-import { hmsManager } from "./hms.svelte";
-import type { SmokeDensityStyle } from "$lib/legend/legend-data";
-
-/** Smoke fill styles, shared by the map layer and the legend so they can't drift apart. */
-export const SMOKE_DENSITY_STYLES = {
-	light: { label: "Light", color: "#bfc8c3", opacity: 0.2 },
-	medium: { label: "Medium", color: "#757b78", opacity: 0.3 },
-	heavy: { label: "Heavy", color: "#333634", opacity: 0.4 }
-} satisfies Record<string, SmokeDensityStyle>;
-
-export const SMOKE_LEGEND: Array<SmokeDensityStyle> = Object.values(SMOKE_DENSITY_STYLES);
-
-type SmokeProperties = {
-	id: string;
-	density: HMSSmokeGeoJSON["density"];
-};
-
-class HMSSmokeMapIntegration extends MapGeoJSONIntegration<SmokeProperties> {
-	referenceId = "hms-smoke";
-	enabled: boolean = $state(true);
-
-	get features(): Array<Feature<MultiPolygon, SmokeProperties>> {
-		return (hmsManager.smoke ?? []).map((d) => ({
-			type: "Feature",
-			properties: {
-				id: d.id,
-				density: d.density
-			},
-			geometry: d.geometry as MultiPolygon
-		}));
-	}
-
-	get mapLayer(): Parameters<MaptilerMap["addLayer"]>[0] {
-		return {
-			id: this.referenceId,
-			type: "fill",
-			source: this.referenceId,
-			layout: {},
-			paint: {
-				"fill-color": [
-					"match",
-					["get", "density"],
-					"light",
-					SMOKE_DENSITY_STYLES.light.color,
-					"medium",
-					SMOKE_DENSITY_STYLES.medium.color,
-					SMOKE_DENSITY_STYLES.heavy.color
-				],
-				"fill-opacity": [
-					"match",
-					["get", "density"],
-					"light",
-					SMOKE_DENSITY_STYLES.light.opacity,
-					"medium",
-					SMOKE_DENSITY_STYLES.medium.opacity,
-					SMOKE_DENSITY_STYLES.heavy.opacity
-				],
-				"fill-outline-color": [
-					"match",
-					["get", "density"],
-					"light",
-					SMOKE_DENSITY_STYLES.light.color,
-					"medium",
-					SMOKE_DENSITY_STYLES.medium.color,
-					SMOKE_DENSITY_STYLES.heavy.color
-				]
-			}
-		};
-	}
-
-	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);
-			});
-		});
-	}
-
-	apply() {
-		if (!mapManager.map) return;
-		this.remove();
-		mapManager.map.addSource(this.referenceId, this.mapSource);
-		super.apply();
-	}
-}
-
-export const hmsSmokeMapIntegration = new HMSSmokeMapIntegration();
-export type { HMSSmokeMapIntegration };

package/src/lib/hms/hms.svelte.ts

@@ -1,264 +0,0 @@
-import {
-	getHMSFire,
-	getHMSSmoke,
-	type HMSFireGeoJSON,
-	type HMSSmokeGeoJSON
-} from "@sjvair/sdk/hms";
-import clustersDbscan from "@turf/clusters-dbscan";
-import { featureCollection, point } from "@turf/helpers";
-
-const HMS_FIRE_DBSCAN_EPSILON = 2;
-const HMS_FIRE_DBSCAN_MIN_POINTS = 1;
-
-export interface HMSFireGroup {
-	id: string;
-	coordinates: [number, number];
-	avgFrp: number;
-	count: number;
-}
-
-class HmsManager {
-	smoke: Array<HMSSmokeGeoJSON> | undefined = $state();
-	fire: Array<HMSFireGeoJSON & { frp: number }> | undefined = $state();
-	fireGroups: Array<HMSFireGroup> | undefined = $state();
-
-	async init() {
-		await Promise.allSettled([this.loadSmoke(), this.loadFire()]);
-	}
-
-	async loadSmoke() {
-		this.smoke = await getHMSSmoke();
-	}
-
-	async loadFire() {
-		try {
-			const raw = await getHMSFire();
-			const filtered = raw.filter((d): d is HMSFireGeoJSON & { frp: number } => d.frp !== null);
-			const deduped = deduplicateByCoordinates(filtered);
-			this.fire = deduped;
-			this.fireGroups = computeFireGroups(deduped);
-		} catch (err) {
-			console.error("HMS fire load failed:", err);
-		}
-	}
-}
-
-function deduplicateByCoordinates(
-	fires: (HMSFireGeoJSON & { frp: number })[]
-): (HMSFireGeoJSON & { frp: number })[] {
-	const latest: Record<string, HMSFireGeoJSON & { frp: number }> = {};
-	for (const fire of fires) {
-		const [lng, lat] = fire.geometry.coordinates as [number, number];
-		const key = `${lng},${lat}`;
-		const existing = latest[key];
-		if (!existing || fire.timestamp > existing.timestamp) {
-			latest[key] = fire;
-		}
-	}
-	return Object.values(latest);
-}
-
-function computeFireGroups(fires: (HMSFireGeoJSON & { frp: number })[]): HMSFireGroup[] {
-	if (!fires.length) return [];
-
-	const fc = featureCollection(
-		fires.map((d) =>
-			point(d.geometry.coordinates as [number, number], { fireId: d.id, frp: d.frp })
-		)
-	);
-
-	const clustered = clustersDbscan(fc, HMS_FIRE_DBSCAN_EPSILON, {
-		minPoints: HMS_FIRE_DBSCAN_MIN_POINTS,
-		units: "kilometers"
-	});
-
-	const groups: Record<string, { frps: number[]; lngs: number[]; lats: number[] }> = {};
-
-	for (const feature of clustered.features) {
-		const props = feature.properties as {
-			dbscan: "core" | "edge" | "noise";
-			cluster?: number;
-			fireId: string;
-			frp: number;
-		};
-		// With minPoints=1 every point self-qualifies as core, so "noise" never occurs.
-		// This branch activates correctly if minPoints is raised above 1 in future.
-		const key = props.dbscan === "noise" ? `noise-${props.fireId}` : `cluster-${props.cluster}`;
-		const [lng, lat] = feature.geometry.coordinates as [number, number];
-		const entry = groups[key] ?? { frps: [], lngs: [], lats: [] };
-		entry.frps.push(props.frp);
-		entry.lngs.push(lng);
-		entry.lats.push(lat);
-		groups[key] = entry;
-	}
-
-	return Object.entries(groups).map(([key, { frps, lngs, lats }]) => ({
-		id: `hms-fire-group-${key}`,
-		coordinates: [
-			lngs.reduce((s, v) => s + v, 0) / lngs.length,
-			lats.reduce((s, v) => s + v, 0) / lats.length
-		] as [number, number],
-		avgFrp: frps.reduce((s, v) => s + v, 0) / frps.length,
-		count: frps.length
-	}));
-}
-
-//async function fakeFireData(): Promise<Array<HMSFireGeoJSON>> {
-//  const response: FetchHMSFireResponse["body"] = {
-//    data: [
-//      {
-//        id: "4Kx7mNpQrQ",
-//        date: "2026-04-13",
-//        satellite: "GOES-16",
-//        timestamp: "2026-04-13T18:30:00Z",
-//        frp: 360,
-//        ecosystem: 4,
-//        method: "AF",
-//        geometry: {
-//          type: "Point",
-//          coordinates: [-118.532, 36.591],
-//        },
-//      },
-//      {
-//        id: "4Kx7mNpQrD",
-//        date: "2026-04-13",
-//        satellite: "GOES-16",
-//        timestamp: "2026-04-13T18:30:00Z",
-//        frp: 20,
-//        ecosystem: 4,
-//        method: "AF",
-//        geometry: {
-//          type: "Point",
-//          coordinates: [-118.632, 36.691],
-//        },
-//      },
-//      {
-//        id: "4Kx7mNpQrT",
-//        date: "2026-04-13",
-//        satellite: "GOES-16",
-//        timestamp: "2026-04-13T18:30:00Z",
-//        frp: 152.7,
-//        ecosystem: 4,
-//        method: "AF",
-//        geometry: {
-//          type: "Point",
-//          coordinates: [-118.832, 36.491],
-//        },
-//      },
-//      {
-//        id: "9vBjLsWqYm",
-//        date: "2026-04-13",
-//        satellite: "GOES-17",
-//        timestamp: "2026-04-13T17:45:00Z",
-//        frp: 58.2,
-//        ecosystem: 2,
-//        method: "AF",
-//        geometry: {
-//          type: "Point",
-//          coordinates: [-119.204, 37.112],
-//        },
-//      },
-//      {
-//        id: "2HcFnRkVxZ",
-//        date: "2026-04-13",
-//        satellite: "GOES-16",
-//        timestamp: "2026-04-13T16:00:00Z",
-//        frp: null,
-//        ecosystem: 7,
-//        method: "FDC",
-//        geometry: {
-//          type: "Point",
-//          coordinates: [-120.571, 35.883],
-//        },
-//      },
-//    ],
-//    page: 1,
-//    count: 3,
-//    pages: 1,
-//    has_next_page: false,
-//    has_previous_page: false,
-//  };
-//  return Promise.resolve(response.data);
-//}
-
-//async function fakeSmokeData(): Promise<Array<HMSSmokeGeoJSON>> {
-//	const response: FetchHMSSmokeResponse["body"] = {
-//		data: [
-//			{
-//				id: "sM3kNpQrL1",
-//				date: "2026-04-13",
-//				satellite: "GOES-16",
-//				start: "2026-04-13T12:00:00Z",
-//				end: "2026-04-13T18:00:00Z",
-//				density: "light",
-//				geometry: {
-//					type: "MultiPolygon",
-//					coordinates: [
-//						[
-//							[
-//								[-122.5, 39.5],
-//								[-120.5, 39.5],
-//								[-120.5, 41.0],
-//								[-122.5, 41.0],
-//								[-122.5, 39.5]
-//							]
-//						]
-//					]
-//				}
-//			},
-//			{
-//				id: "sM3kNpQrL2",
-//				date: "2026-04-13",
-//				satellite: "GOES-16",
-//				start: "2026-04-13T12:00:00Z",
-//				end: "2026-04-13T18:00:00Z",
-//				density: "medium",
-//				geometry: {
-//					type: "MultiPolygon",
-//					coordinates: [
-//						[
-//							[
-//								[-121.0, 36.5],
-//								[-119.0, 36.5],
-//								[-119.0, 38.0],
-//								[-121.0, 38.0],
-//								[-121.0, 36.5]
-//							]
-//						]
-//					]
-//				}
-//			},
-//			{
-//				id: "sM3kNpQrL3",
-//				date: "2026-04-13",
-//				satellite: "GOES-16",
-//				start: "2026-04-13T12:00:00Z",
-//				end: "2026-04-13T18:00:00Z",
-//				density: "heavy",
-//				geometry: {
-//					type: "MultiPolygon",
-//					coordinates: [
-//						[
-//							[
-//								[-119.0, 33.5],
-//								[-116.5, 33.5],
-//								[-116.5, 35.0],
-//								[-119.0, 35.0],
-//								[-119.0, 33.5]
-//							]
-//						]
-//					]
-//				}
-//			}
-//		],
-//		page: 1,
-//		count: 3,
-//		pages: 1,
-//		has_next_page: false,
-//		has_previous_page: false
-//	};
-//	return Promise.resolve(response.data);
-//}
-
-export const hmsManager = new HmsManager();
-export type { HmsManager as HMSManager };

package/src/lib/legend/LegendBar.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import {
-		blocksBackground,
-		gradientBackground,
-		tickPosition,
-		type LegendBarData
-	} from "./legend-data";
-
-	let { bar }: { bar: LegendBarData } = $props();
-
-	const background = $derived(
-		bar.kind === "gradient"
-			? gradientBackground(bar.colors)
-			: blocksBackground(bar.categories.map((category) => category.color))
-	);
-
-	// Labels placed on exact stop positions: gradient ticks, or block breakpoints.
-	const positioned = $derived(bar.kind === "gradient" ? bar.ticks : (bar.breakpoints ?? null));
-</script>
-
-<div class="h-3 rounded" style:background></div>
-{#if positioned}
-	<div class="relative mt-1 h-4 text-xs">
-		{#each positioned as label, i (i)}
-			{@const isFirst = i === 0}
-			{@const isLast = i === positioned.length - 1}
-			<span
-				class={[
-					"absolute top-0 whitespace-nowrap",
-					isFirst && "left-0",
-					isLast && "right-0",
-					!isFirst && !isLast && "-translate-x-1/2"
-				]}
-				style:left={!isFirst && !isLast ? `${tickPosition(i, positioned.length)}%` : undefined}
-				>{label}</span
-			>
-		{/each}
-	</div>
-{:else if bar.kind === "blocks"}
-	<div class="mt-1 flex text-xs">
-		{#each bar.categories as category, i (i)}
-			<span class="min-w-0 flex-1 text-center break-words">{category.label ?? ""}</span>
-		{/each}
-	</div>
-{/if}

package/src/lib/legend/legend-data.ts

@@ -1,101 +0,0 @@
-import type { SJVAirEntryLevel } from "@sjvair/sdk";
-import { mix } from "color2k";
-import type { MonitorsPollutant } from "$lib/monitors/types";
-
-export interface LegendCategory {
-	color: string;
-	label?: string;
-}
-
-export type LegendBarData =
-	| { kind: "gradient"; colors: Array<string>; ticks: Array<string> }
-	| { kind: "blocks"; categories: Array<LegendCategory>; breakpoints?: Array<string> };
-
-export interface LegendSection {
-	id: string;
-	title: string;
-	unit?: string;
-	bar: LegendBarData;
-}
-
-export interface SmokeDensityStyle {
-	label: string;
-	color: string;
-	opacity: number;
-}
-
-const POLLUTANT_TITLES: Record<MonitorsPollutant, { title: string; unit: string }> = {
-	pm25: { title: "PM2.5", unit: "µg/m³" },
-	o3: { title: "Ozone", unit: "ppb" }
-};
-
-/**
- * Pollutant legend built from the monitors meta levels — the same levels the map markers are
- * colored by, so the two can never disagree. One tick per level, at that level's color stop.
- */
-export function pollutantLegendSection(
-	pollutant: MonitorsPollutant,
-	levels: ReadonlyArray<Pick<SJVAirEntryLevel, "color" | "range">>
-): LegendSection | null {
-	if (levels.length === 0) return null;
-	return {
-		id: "pollutant",
-		...POLLUTANT_TITLES[pollutant],
-		bar: {
-			kind: "gradient",
-			colors: levels.map((level) => level.color),
-			ticks: levels.map((level) => String(Math.floor(level.range[0])))
-		}
-	};
-}
-
-/** Fire & Smoke share one toggle, so they render as two independent bars. */
-export function fireSmokeLegendSections(
-	fireTiers: ReadonlyArray<LegendCategory>,
-	smoke: ReadonlyArray<SmokeDensityStyle>
-): Array<LegendSection> {
-	return [
-		{ id: "fire", title: "Fire", unit: "MW", bar: { kind: "blocks", categories: [...fireTiers] } },
-		{
-			id: "smoke",
-			title: "Smoke Density",
-			bar: {
-				kind: "blocks",
-				categories: smoke.map(({ label, color, opacity }) => ({
-					label,
-					color: swatchOverWhite(color, opacity)
-				}))
-			}
-		}
-	];
-}
-
-/** Approximates how a translucent fill layer looks over a light basemap. */
-export function swatchOverWhite(color: string, opacity: number): string {
-	return mix("#ffffff", color, opacity);
-}
-
-export function gradientBackground(colors: ReadonlyArray<string>): string {
-	if (colors.length === 0) return "none";
-	if (colors.length === 1) return colors[0];
-	return `linear-gradient(to right, ${colors.join(", ")})`;
-}
-
-/** Hard-edged equal-width blocks: each color repeated at both edges of its own share. */
-export function blocksBackground(colors: ReadonlyArray<string>): string {
-	const count = colors.length;
-	if (count === 0) return "none";
-	const stops = colors.map(
-		(color, i) => `${color} ${percent(i / count)}, ${color} ${percent((i + 1) / count)}`
-	);
-	return `linear-gradient(to right, ${stops.join(", ")})`;
-}
-
-/** Percent position of the index-th of `count` evenly spaced labels. */
-export function tickPosition(index: number, count: number): number {
-	return count <= 1 ? 0 : (index / (count - 1)) * 100;
-}
-
-function percent(fraction: number): string {
-	return `${(fraction * 100).toFixed(2)}%`;
-}

package/src/lib/map/Map.svelte

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import "@maptiler/sdk/dist/maptiler-sdk.css";
-	import { initializeMap } from "./map-manager.svelte.js";
-	import { integrationsManager } from "$lib/map/integrations/integrations-manager";
-	import type { SomeMapIntegration } from "./integrations/types";
-
-	const { integrations }: { integrations: Array<SomeMapIntegration> } = $props();
-
-	// svelte-ignore state_referenced_locally (we only need the initial reference)
-	integrationsManager.register(...integrations);
-</script>
-
-<div {@attach initializeMap} style="width: 100%; height: 100%;"></div>