@sjvair/monitor-map 3.0.2 → 3.0.4

package/dist/lib/wind/wind.svelte.js

@@ -1,21 +1,13 @@
-import { MapLayerIntegration as e } from "../map/integrations/map-layer-integration.svelte.js";
-import { baseLayerSeperator as t } from "../map/integrations/base-layer-seperator.js";
-import * as n from "svelte/internal/client";
-import { WindLayer as r } from "@maptiler/weather";
-var i = new class extends e {
-	referenceId = "MapTiler Wind";
-	beforeLayer = t.referenceId;
-	#e = n.state(!1);
-	get enabled() {
-		return n.get(this.#e);
-	}
-	set enabled(e) {
-		n.set(this.#e, e, !0);
-	}
-	mapLayer = new r({
-		id: this.referenceId,
-		opacity: .5
-	});
-}();
-//#endregion
-export { i as windMapIntegration };
+import { WindLayer } from "@maptiler/weather";
+import { baseLayerSeperator } from "../map/integrations/base-layer-seperator.ts";
+import { MapLayerIntegration } from "../map/integrations/map-layer-integration.svelte.ts";
+class WindMapIntegration extends MapLayerIntegration {
+    referenceId = "MapTiler Wind";
+    beforeLayer = baseLayerSeperator.referenceId;
+    enabled = $state(false);
+    mapLayer = new WindLayer({
+        id: this.referenceId,
+        opacity: 0.5
+    });
+}
+export const windMapIntegration = new WindMapIntegration();

package/package.json

@@ -1,11 +1,12 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "3.0.2",
+	"version": "3.0.4",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
-		"build:lib": "vite build --config vite.config.lib.ts",
+		"build:local": "PROD_MODE=local vite build",
+		"build": "PROD_MODE=production vite build",
+		"build:lib": "PROD_MODE=local svelte-package -i src/lib -o dist/lib",
 		"preview": "vite preview",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
@@ -13,75 +14,77 @@
 		"lint": "prettier --check . && eslint ."
 	},
 	"type": "module",
-	"svelte": "./src/lib/index.ts",
-	"types": "./src/lib/index.ts",
+	"svelte": "./dist/lib/index.js",
+	"types": "./dist/lib/index.d.ts",
 	"exports": {
 		".": {
-			"svelte": "./src/lib/index.ts",
-			"types": "./src/lib/index.ts",
-			"default": "./src/lib/index.ts"
+			"svelte": "./dist/lib/index.js",
+			"types": "./dist/lib/index.d.ts",
+			"default": "./dist/lib/index.js"
 		}
 	},
 	"files": [
 		"src/lib",
-		"dist/lib",
-		"dist/monitor-map"
+		"dist/lib"
 	],
 	"sideEffects": [
 		"**/*.css"
 	],
 	"peerDependencies": {
+		"@sveltejs/enhanced-img": "^0.11.0",
+		"sv-router": "^0.16.2",
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^2.1.0",
 		"@eslint/js": "^10.0.1",
 		"@fontsource-variable/inter": "^5.2.8",
-		"@internationalized/date": "^3.12.1",
-		"@lucide/svelte": "^1.16.0",
+		"@sveltejs/enhanced-img": "^0.11.0",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.2.0",
+		"@tailwindcss/vite": "^4.3.2",
+		"@types/node": "^26.1.1",
+		"eslint": "^10.6.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.20.0",
+		"globals": "^17.7.0",
+		"postcss": "^8.5.16",
+		"prettier": "^3.9.4",
+		"prettier-plugin-svelte": "^4.1.1",
+		"prettier-plugin-tailwindcss": "^0.8.0",
+		"shadcn-svelte": "^1.4.0",
+		"svelte": "^5.56.4",
+		"svelte-check": "^4.7.2",
+		"tailwindcss": "^4.3.2",
+		"tw-animate-css": "^1.4.0",
+		"typescript": "^6.0.3",
+		"typescript-eslint": "^8.63.0",
+		"vite": "^8.1.3"
+	},
+	"dependencies": {
+		"@internationalized/date": "^3.12.2",
+		"@lucide/svelte": "^1.23.0",
 		"@maptiler/sdk": "^4.0.2",
 		"@maptiler/weather": "^3.1.1",
 		"@sjvair/sdk": "npm:@jsr/sjvair__sdk@^3.0.2",
-		"@sveltejs/enhanced-img": "^0.10.4",
-		"@sveltejs/vite-plugin-svelte": "^7.1.2",
-		"@tailwindcss/vite": "^4.3.0",
 		"@tstk/builtin-extensions": "npm:@jsr/tstk__builtin-extensions@^1.0.8",
-		"@tstk/decorators": "npm:@jsr/tstk__decorators@^1.0.5",
-		"@tstk/types": "npm:@jsr/tstk__types@^1.1.0",
 		"@tstk/utils": "npm:@jsr/tstk__utils@^1.1.2",
 		"@turf/area": "^7.3.5",
+		"@turf/clusters-dbscan": "^7.3.5",
 		"@turf/helpers": "^7.3.5",
 		"@types/geojson": "^7946.0.16",
-		"@types/node": "^25.9.1",
 		"bits-ui": "^2.18.1",
 		"clsx": "^2.1.1",
-		"color2k": "^2.0.3",
-		"date-fns": "^4.3.0",
-		"eslint": "^10.4.0",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.17.1",
-		"globals": "^17.6.0",
-		"postcss": "^8.5.15",
-		"prettier": "^3.8.3",
-		"prettier-plugin-svelte": "^4.0.1",
-		"prettier-plugin-tailwindcss": "^0.8.0",
-		"shadcn-svelte": "^1.2.7",
-		"svelte": "^5.55.9",
-		"svelte-check": "^4.4.8",
+		"color2k": "^2.0.4",
+		"date-fns": "^4.4.0",
 		"tailwind-merge": "^3.6.0",
 		"tailwind-variants": "^3.2.2",
-		"tailwindcss": "^4.3.0",
-		"tw-animate-css": "^1.4.0",
-		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.60.0",
-		"uplot": "^1.6.32",
-		"vite": "^8.0.14"
-	},
-	"dependencies": {
-		"@turf/clusters-dbscan": "^7.3.5",
-		"sv-router": "^0.16.2"
+		"uplot": "^1.6.32"
 	},
 	"keywords": [
 		"svelte"
-	]
+	],
+	"allowScripts": {
+		"sharp@0.34.5": true
+	}
 }

package/src/lib/LoadScreen.svelte

@@ -32,14 +32,14 @@
 
 {#if loadScreenState.enabled}
 	<div
-		class="absolute top-0 left-0 z-50 flex h-full w-full flex-col items-center justify-center gap-4 overflow-hidden bg-white"
+		class="absolute top-0 left-0 z-50 flex h-full w-full items-center justify-center overflow-hidden bg-white"
 		{@attach animationTrigger}
 	>
-		<div>
+		<div class="flex justify-around gap-4">
 			<enhanced:img
 				src="$lib/assets/logos/sjvair-parts/sjvair-icon.webp"
 				alt="SJVAir Icon"
-				class="icon inline-block h-24! w-auto! transition-all duration-500 ease-out"
+				class="icon inline-block h-24! w-auto! transition-all duration-500 ease-out object-contain"
 				class:translate-x-0={loadScreenState.entered}
 				class:-translate-x-full={!loadScreenState.entered}
 				class:opacity-100={loadScreenState.entered}
@@ -48,7 +48,7 @@
 			<enhanced:img
 				src="$lib/assets/logos/sjvair-parts/sjvair-sjv.webp"
 				alt="SJV"
-				class="sjv inline-block h-24! w-auto! transition-all duration-500 ease-out"
+				class="sjv inline-block h-24! w-auto! transition-all duration-500 ease-out object-contain"
 				class:translate-y-0={loadScreenState.entered}
 				class:-translate-y-full={!loadScreenState.entered}
 				class:opacity-100={loadScreenState.entered}
@@ -57,7 +57,7 @@
 			<enhanced:img
 				src="$lib/assets/logos/sjvair-parts/sjvair-air.webp"
 				alt="Air"
-				class="air inline-block h-24! w-auto! transition-all duration-500 ease-out"
+				class="air inline-block h-24! w-auto! transition-all duration-500 ease-out object-contain"
 				class:translate-y-0={loadScreenState.entered}
 				class:translate-y-full={!loadScreenState.entered}
 				class:opacity-100={loadScreenState.entered}

package/src/lib/MainMapView.svelte

@@ -0,0 +1 @@
+<!-- Map view — the map renders in App.svelte, not in the router outlet -->

package/src/lib/MapLegend.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import MonitorMarkersLegend from "$lib/monitors/components/MonitorMarkersLegend.svelte";
+	import HMSFireLegend from "$lib/hms/components/HMSFireLegend.svelte";
+</script>
+
+<!--
+<div class="z-10 absolute bottom-6 left-6 w-1/2 lg:w-1/5">
+	<MonitorMarkersLegend />
+	<HMSFireLegend />
+</div>
+-->
+<div class="flex flex-col gap-1 pointer-events-none pl-4 pb-4">
+	<HMSFireLegend />
+	<MonitorMarkersLegend />
+</div>

package/src/lib/MonitorDetailPanel.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import type { ComponentProps } from "svelte";
+	import type { SJVAirEntryLevel } from "@sjvair/sdk";
+	import DataBox from "$lib/components/DataBox.svelte";
+	import MonitorWidgetModal from "$lib/monitors/components/MonitorWidgetModal.svelte";
+	import MonitorSubscriptionManager from "$lib/monitors/components/MonitorSubscriptionManager.svelte";
+	import DataChart from "$lib/data-chart/DataChart.svelte";
+	import { monitorsManager } from "$lib";
+	import { useMonitorMapRouter } from "./router-context";
+	import { fetchTempByCoords } from "$lib/weather.ts";
+	import { Colors, valueToColor } from "$lib/colors";
+	import { getCurrentLevel } from "$lib/monitors/monitor-utils.ts";
+
+	type TempDataBox = Pick<ComponentProps<typeof DataBox>, "color" | "value">;
+
+	interface BadgeOpts {
+		bgClass?: string;
+		iconColorClass?: string;
+		labelColorClass?: string;
+		href?: string;
+	}
+	const { route, navigate, basePath } = useMonitorMapRouter();
+
+	const monitor = $derived(monitorsManager.latest?.get(route.params.id ?? ""));
+	let tempData: TempDataBox | undefined = $state();
+	const entryData: ComponentProps<typeof DataBox> | undefined = $derived.by(() => {
+		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,
+			subheading: `(${updateDuration} avg)`,
+			value: Math.round(parseInt(monitor.latest.value, 10)).toString()
+		};
+	});
+
+	const tempColors = [
+		{ min: -Infinity, color: Colors.blue },
+		{ min: 65, color: Colors.green },
+		{ min: 78, color: Colors.yellow },
+		{ min: 95, color: Colors.red }
+	];
+
+	$effect(() => {
+		if (monitor && monitor.position) {
+			fetchTempByCoords(monitor.position.coordinates).then((temperature) => {
+				tempData = {
+					value: `${temperature}°F`,
+					color: valueToColor(temperature, tempColors)
+				};
+			});
+		}
+	});
+</script>
+
+{#snippet badge(icon: string, label: string, opts: BadgeOpts = {})}
+	<span
+		class="flex items-center justify-center gap-1 rounded-sm border px-1 py-0.5
+    {opts.bgClass ?? 'bg-neutral-100'}"
+	>
+		<span class={["svg-icon", icon, opts.iconColorClass ?? "bg-black/70"]}></span>
+		{#if opts.href}
+			<a class="text-link text-xs" href={opts.href} target="_blank" translate="no">{label}</a>
+		{:else}
+			<span
+				class={["text-xs whitespace-nowrap", opts.labelColorClass ?? "text-black/70"]}
+				translate="no">{label}</span
+			>
+		{/if}
+	</span>
+{/snippet}
+
+<div class="flex h-full w-full flex-col overflow-y-auto bg-white">
+	<div
+		class="flex flex-col items-center justify-center gap-8 border-b border-gray-200 p-4 shadow-lg"
+	>
+		<button
+			class="cursor-pointer self-end rounded border border-gray-300 px-2 py-1 text-sm hover:bg-gray-50"
+			onclick={() => navigate(`${basePath}/`)}
+		>
+			✕ Close
+		</button>
+		{#if monitor}
+			<h2 class="text-center text-3xl font-semibold">{monitor.name}</h2>
+			<div class="flex flex-wrap items-center justify-center gap-4">
+				{#if monitor.is_sjvair}
+					{@render badge("lungs", "SJVAir", {
+						bgClass: "bg-aqua-haze",
+						iconColorClass: "bg-sky-600",
+						labelColorClass: "text-sky-600"
+					})}
+				{/if}
+
+				{@render badge("rss-feed", monitor.data_source.name, { href: monitor.data_source.url })}
+				{@render badge("router", monitor.device)}
+				{@render badge("location-on", monitor.county)}
+				{@render badge("location-searching", monitor.location)}
+			</div>
+		{/if}
+	</div>
+
+	<div class="flex flex-col items-center gap-12 overflow-y-auto p-5 pt-10">
+		{#if monitor}
+			<div class="flex w-full justify-around">
+				{#if tempData}
+					<DataBox color={tempData.color} header="Temperature" value={tempData.value} />
+				{/if}
+				{#if entryData}
+					<DataBox
+						color={entryData.color}
+						header={entryData.header}
+						subheading={entryData.subheading}
+						value={entryData.value}
+					/>
+				{/if}
+			</div>
+
+			<MonitorWidgetModal monitorId={monitor.id} />
+			<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+			{#if (globalThis as any).USER?.is_authenticated}
+				<MonitorSubscriptionManager monitorId={monitor.id} />
+			{/if}
+
+			<div class="w-full">
+				<DataChart {monitor} />
+			</div>
+
+			<div class="w-full">
+				<h3 class="font-semibold">Data Provided Courtesy Of:</h3>
+				<ul>
+					{#each monitor.data_providers as provider, idx (idx)}
+						<li>
+							{#if provider.url}
+								<a class="text-link" href={provider.url} target="_blank">{provider.name}</a>
+							{:else}
+								<span>{provider.name}</span>
+							{/if}
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+	</div>
+</div>

package/src/lib/MonitorMapLayout.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { onDestroy } from "svelte";
+	import LoadScreen, { disable as disableLoadScreen } from "$lib/LoadScreen.svelte";
+	import Map from "$lib/map/Map.svelte";
+	import Menu from "$lib/map/Menu.svelte";
+	import MonitorsDisplayOptions from "$lib/monitors/components/MonitorsDisplayOptions.svelte";
+	import MapLayersDisplayOptions from "$lib/components/MapLayersDisplayOptions.svelte";
+	import MapStyleDisplayOptions from "$lib/map/MapStyleDisplayOptions.svelte";
+	import { mapManager } from "$lib/map/map.svelte";
+	import { monitorsManager } from "$lib/monitors/monitors.svelte";
+	import { monitorsMapIntegration } from "$lib/monitors/monitors-map-integration.svelte.ts";
+	import { windMapIntegration } from "$lib/wind/wind.svelte";
+	import { baseLayerSeperator } from "$lib/map/integrations/base-layer-seperator";
+	import type { SomeMapIntegration } from "$lib/map/integrations/types";
+	import { collocationSitesManager } from "$lib/collocation-sites/collocations.svelte";
+	import { collocationSitesMapIntegration } from "$lib/collocation-sites/collocations-map-integration.svelte";
+	import EvStationsDisplayOptions from "$lib/ev-stations/components/EvStationsDisplayOptions.svelte";
+	import { evStationsMapIntegration } from "$lib/ev-stations/ev-stations-map-integration.svelte.ts";
+	import { hmsManager } from "$lib/hms/hms.svelte.ts";
+	import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte.ts";
+	import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte.ts";
+	import MapLegend from "$lib/MapLegend.svelte";
+	import Search from "$lib/search/Search.svelte";
+	import { useMonitorMapRouter } from "./router-context";
+
+	interface Props {
+		children: Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	const { route, navigate, basePath } = useMonitorMapRouter();
+
+	const TRANSITION_MS = 300;
+
+	const integrations: Array<SomeMapIntegration> = [
+		baseLayerSeperator,
+		collocationSitesMapIntegration,
+		windMapIntegration,
+		hmsSmokeMapIntegration,
+		hmsFireMapIntegration,
+		monitorsMapIntegration,
+		evStationsMapIntegration
+	];
+
+	monitorsManager.init(route.search.pollutant);
+	collocationSitesManager.init();
+	hmsManager.init();
+	monitorsMapIntegration.onMonitorClick = (id: string) => {
+		navigate(`${basePath}/monitor/:id`, { params: { id } }).catch(console.error);
+	};
+
+	let panelOpen = $derived(route.pathname.startsWith(`${basePath}/monitor/`));
+
+	$effect(() => {
+		if (mapManager.map && monitorsManager.initialized) {
+			mapManager.map.once("idle", () => disableLoadScreen());
+		}
+	});
+
+	$effect(() => {
+		if (panelOpen) {
+			// Container width snapped to open; resize after layout settles
+			requestAnimationFrame(() => mapManager.map?.resize());
+		} else {
+			// Container width snaps back after the transform transition ends
+			setTimeout(() => mapManager.map?.resize(), TRANSITION_MS);
+		}
+	});
+
+	// Clear selected icon scale when the detail panel closes
+	$effect(() => {
+		if (panelOpen) return;
+		monitorsMapIntegration.selectedMonitorId = null;
+	});
+
+	onDestroy(() => {
+		monitorsManager.autoUpdate.stop();
+	});
+
+	/**
+	 * HACK: Fix for escaping sv-router and allowing navigation to other pages,
+	 * as well as navigating back
+	 */
+	const rootPath = basePath || "/";
+	const knownRoutes = [`${basePath}/monitor/`];
+
+	window.addEventListener("pageshow", (e) => {
+		if (e.persisted) window.location.reload();
+	});
+
+	document.addEventListener(
+		"click",
+		(e) => {
+			const anchor = e
+				.composedPath()
+				.find((el) => el instanceof HTMLAnchorElement) as HTMLAnchorElement;
+			if (!anchor) return;
+			const { pathname } = new URL(anchor.href);
+			const isKnown = pathname === rootPath || knownRoutes.some((r) => pathname.startsWith(r));
+			if (!isKnown) {
+				e.stopImmediatePropagation();
+				window.location.href = anchor.href;
+			}
+		},
+		{ capture: true }
+	);
+</script>
+
+<div class="shell" class:panel-open={panelOpen}>
+	<LoadScreen />
+	<div class="relative flex-1 overflow-hidden">
+		<Map {integrations} />
+		<div class="z-10 absolute bottom-0 left-0 pointer-events-none">
+			<MapLegend />
+		</div>
+		<div class="absolute top-4 left-4 z-10">
+			<div class="absolute z-10">
+				<Menu>
+					<MonitorsDisplayOptions />
+					<EvStationsDisplayOptions />
+					<MapLayersDisplayOptions />
+					<MapStyleDisplayOptions />
+				</Menu>
+			</div>
+			<div class="absolute left-16">
+				<Search />
+			</div>
+		</div>
+	</div>
+	<div class="panel-container">
+		<div class="panel-content">
+			{@render children()}
+		</div>
+	</div>
+</div>
+
+<style>
+	.shell {
+		display: flex;
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.panel-container {
+		flex-shrink: 0;
+		overflow: hidden;
+		width: 0;
+	}
+
+	.shell.panel-open .panel-container {
+		width: 33.333vw;
+	}
+
+	.panel-content {
+		width: 33.333vw;
+		height: 100%;
+		transform: translateX(100%);
+		transition: transform 300ms ease-in-out;
+	}
+
+	.shell.panel-open .panel-content {
+		transform: translateX(0);
+	}
+
+	@media (max-width: 768px) {
+		.shell {
+			flex-direction: column;
+		}
+
+		.panel-container {
+			width: 100vw;
+			height: 0;
+		}
+
+		.shell.panel-open .panel-container {
+			width: 100vw;
+			height: 50vh;
+		}
+
+		.panel-content {
+			width: 100vw;
+			height: 50vh;
+			transform: translateY(100%);
+		}
+
+		.shell.panel-open .panel-content {
+			transform: translateY(0);
+		}
+	}
+</style>

package/src/lib/components/MapLayersDisplayOptions.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { WindIcon, CrosshairIcon, FlameIcon, WavesVerticalIcon } from "@lucide/svelte";
+	import { WindIcon, CrosshairIcon, WavesVerticalIcon } from "@lucide/svelte";
 	import DisplayOption from "$lib/components/DisplayOption.svelte";
 	import ToggleSwitch from "$lib/components/ToggleSwitch.svelte";
 	import { windMapIntegration } from "$lib/wind/wind.svelte";
@@ -7,6 +7,8 @@
 	import { monitorsManager } from "$lib/monitors/monitors.svelte";
 	import { hmsFireMapIntegration } from "$lib/hms/hms-fire-map-integration.svelte";
 	import { hmsSmokeMapIntegration } from "$lib/hms/hms-smoke-map-integration.svelte";
+
+	const fireIcon = hmsFireMapIntegration.icons.get("hms-fire-xxl");
 </script>
 
 <DisplayOption>
@@ -26,7 +28,9 @@
 		</div>
 	{/if}
 	<div class="flex gap-1 items-center">
-		<FlameIcon size="16" />
+		{#if fireIcon}
+			<img class="w-4" src={fireIcon.image.src} alt={fireIcon.image.alt} />
+		{/if}
 		<ToggleSwitch id="hms-fire" label="HMS Fire" bind:value={hmsFireMapIntegration.enabled}
 		></ToggleSwitch>
 	</div>

package/src/lib/hms/components/HMSFireLegend.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { hmsFireMapIntegration } from "../hms-fire-map-integration.svelte.ts";
+
+	const levels = ["<10", "10-49", "50-149", "150-349", "≥350"];
+</script>
+
+{#if hmsFireMapIntegration.enabled && hmsFireMapIntegration.features.length > 0}
+	<div class="flex flex-col bg-white rounded shadow w-fit p-1">
+		<p class="text-center whitespace-nowrap font-semibold">Fire Points</p>
+		<div class="flex flex-col">
+			{#each hmsFireMapIntegration.icons.iter as [, icon], idx (idx)}
+				<div class="flex gap-1 items-center">
+					<div class="size-9 flex justify-center items-center">
+						<img src={icon.image.src} alt={icon.image.alt} />
+					</div>
+					<span>{levels[idx]} MW</span>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}

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

@@ -6,7 +6,6 @@ import {
 } from "@sjvair/sdk/hms";
 import clustersDbscan from "@turf/clusters-dbscan";
 import { featureCollection, point } from "@turf/helpers";
-import { SvelteMap } from "svelte/reactivity";
 
 const HMS_FIRE_DBSCAN_EPSILON = 2;
 const HMS_FIRE_DBSCAN_MIN_POINTS = 1;
@@ -47,16 +46,16 @@ class HmsManager {
 function deduplicateByCoordinates(
 	fires: (HMSFireGeoJSON & { frp: number })[]
 ): (HMSFireGeoJSON & { frp: number })[] {
-	const latest = new Map<string, 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.get(key);
+		const existing = latest[key];
 		if (!existing || fire.timestamp > existing.timestamp) {
-			latest.set(key, fire);
+			latest[key] = fire;
 		}
 	}
-	return Array.from(latest.values());
+	return Object.values(latest);
 }
 
 function computeFireGroups(fires: (HMSFireGeoJSON & { frp: number })[]): HMSFireGroup[] {
@@ -73,7 +72,7 @@ function computeFireGroups(fires: (HMSFireGeoJSON & { frp: number })[]): HMSFire
 		units: "kilometers"
 	});
 
-	const groups = new SvelteMap<string, { frps: number[]; lngs: number[]; lats: number[] }>();
+	const groups: Record<string, { frps: number[]; lngs: number[]; lats: number[] }> = {};
 
 	for (const feature of clustered.features) {
 		const props = feature.properties as {
@@ -86,14 +85,14 @@ function computeFireGroups(fires: (HMSFireGeoJSON & { frp: number })[]): HMSFire
 		// 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.get(key) ?? { frps: [], lngs: [], lats: [] };
+		const entry = groups[key] ?? { frps: [], lngs: [], lats: [] };
 		entry.frps.push(props.frp);
 		entry.lngs.push(lng);
 		entry.lats.push(lat);
-		groups.set(key, entry);
+		groups[key] = entry;
 	}
 
-	return Array.from(groups.entries()).map(([key, { frps, lngs, lats }]) => ({
+	return Object.entries(groups).map(([key, { frps, lngs, lats }]) => ({
 		id: `hms-fire-group-${key}`,
 		coordinates: [
 			lngs.reduce((s, v) => s + v, 0) / lngs.length,