@sjvair/monitor-map 3.0.2 → 3.0.3

package/dist/lib/search/service.js

@@ -0,0 +1,90 @@
+import { monitorsManager as e } from "../monitors/monitors.svelte.js";
+import t from "../assets/logos/airgradient-blue.js";
+import n from "../assets/logos/airnow-compact.js";
+import r from "../assets/logos/carb-compact.js";
+import i from "../assets/logos/purpleair-compact.js";
+import a from "../assets/logos/sjvair.js";
+import { geocoding as o } from "@maptiler/sdk";
+//#region src/lib/search/service.ts
+var s = [-119.8, 36.76];
+function c(e) {
+	switch (e.data_source.name) {
+		case "AQview": return {
+			url: r,
+			alt: "AQview"
+		};
+		case "AirNow.gov": return {
+			url: n,
+			alt: "AirNow.gov"
+		};
+		case "PurpleAir": return {
+			url: i,
+			alt: "PurpleAir"
+		};
+		case "Central California Asthma Collaborative": return {
+			url: a,
+			alt: "Central California Asthma Collaborative"
+		};
+		case "AirGradient": return {
+			url: t,
+			alt: "AirGradient"
+		};
+		default: return console.warn(`[search] Unknown data source: ${e.data_source.name}`), {
+			url: "",
+			alt: ""
+		};
+	}
+}
+var l = null;
+function u() {
+	return l ??= d();
+}
+function d() {
+	return new Promise((e) => {
+		if (!navigator.geolocation) {
+			e(s);
+			return;
+		}
+		let t = setTimeout(() => e(s), 3e3);
+		navigator.geolocation.getCurrentPosition((n) => {
+			clearTimeout(t), e([n.coords.longitude, n.coords.latitude]);
+		}, () => {
+			clearTimeout(t), e(s);
+		});
+	});
+}
+async function f(t) {
+	if (!e.latest) return [];
+	let n = t.toLowerCase(), r = [], i = [], a = [];
+	for (let t of e.latest.values()) {
+		let e = t.name.toLowerCase();
+		e === n ? r.push(t) : e.startsWith(n) ? i.push(t) : e.includes(n) && a.push(t);
+	}
+	return [
+		...r,
+		...i,
+		...a
+	].slice(0, 4).map((e) => ({
+		type: "monitor",
+		monitor: e,
+		logo: c(e)
+	}));
+}
+async function p(e) {
+	let t = await u();
+	try {
+		return (await o.forward(e, {
+			country: ["us"],
+			fuzzyMatch: !0,
+			limit: 4,
+			proximity: t
+		})).features.map((e) => ({
+			type: "geocode",
+			feature: e
+		}));
+	} catch {
+		return [];
+	}
+}
+//#endregion
+export { p as geocode, f as monitorSearch };

package/dist/lib/utils.js

@@ -1,8 +1,14 @@
-import e from "./node_modules/clsx/dist/clsx.js";
-import { twMerge as t } from "./node_modules/tailwind-merge/dist/bundle-mjs.js";
+import { clsx as e } from "clsx";
+import { twMerge as t } from "tailwind-merge";
 //#region src/lib/utils.ts
 function n(...n) {
 	return t(e(n));
 }
+function r(e, t) {
+	let n;
+	return (...r) => {
+		clearTimeout(n), n = setTimeout(() => e(...r), t);
+	};
+}
 //#endregion
-export { n as cn };
+export { n as cn, r as debounce };

package/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "@sjvair/monitor-map",
 	"description": "SJVAir's interactive monitor map",
-	"version": "3.0.2",
+	"version": "3.0.3",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build",
+		"build:local": "PROD_MODE=local vite build",
+		"build": "PROD_MODE=production vite build",
 		"build:lib": "vite build --config vite.config.lib.ts",
 		"preview": "vite preview",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
@@ -24,64 +25,64 @@
 	},
 	"files": [
 		"src/lib",
-		"dist/lib",
-		"dist/monitor-map"
+		"dist/lib"
 	],
 	"sideEffects": [
 		"**/*.css"
 	],
 	"peerDependencies": {
+		"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/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 [_id, 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}