@sjvair/map-sdk 0.1.0-beta.3 → 0.1.0-beta.4

package/README.md

@@ -167,7 +167,22 @@ points only), as sjvair.com's map does today.
 
 `outline` on `shapesPlugin` is `"theme"` (default, a 1px `--foreground` edge), `"level"` (the edge
 in each level's color at the fill's opacity; choropleth only), or `"none"` (no outline layer).
-`hmsSmokePlugin` uses `"level"`.
+`hmsSmokePlugin` uses `"level"`. `hoverable: false` on `shapesPlugin` sets the plugin's
+`hoverable` (see [Writing a plugin](#writing-a-plugin)): hovering a shape shows no tooltip and
+doesn't hide what is beneath it, while focusing it from the feature list still pins its tooltip.
+`hmsSmokePlugin` uses it, so a plume, which can cover much of the map, never pops up a tooltip.
+
+```ts
+map.addPlugin(
+	shapesPlugin({
+		id: "plumes",
+		source: staticSource(plumes, { dataset: "hms-smoke", entryType: "smoke-density" }),
+		layerLabel: "Plumes",
+		mode: "choropleth",
+		hoverable: false
+	})
+);
+```
 
 `zoomRange: { min?, max? }` on `pointsPlugin` limits every layer it draws (points, clusters,
 selection) to camera zooms from `min` (inclusive) up to `max` (exclusive), switching live while
@@ -177,7 +192,12 @@ zooming. Two plugins whose ranges meet hand over with no gap, on the globe too.
 colored by FRP. With `hotspots`, it switches by itself while zooming, as sjvair.com's map does:
 `source` (the fire store's `groups`) below zoom 10 and `hotspots` from zoom 10. It stays one
 layer: one legend section, one feature list (the groups, so keyboard users reach every fire;
-hotspots aren't listed), and tooltips for both.
+hotspots aren't listed), and tooltips for both. The tooltip is the monitors' reading box: "Fire
+(MW)", the power in its level's color, beside the name ("3 fire detections", "1 fire detection"
+for a group, "Fire detection" for one detection) and the level ("50–149 MW"); a group of two or
+more says "Average". A feature with a `count` (`FireFeatureProperties`, which the fire store's
+groups carry) is a group. Fire values are cut off at the display precision, not rounded, in the
+tooltip, the list and its accessible names, so 9.96 MW reads "9.9" beside "<10".
 
 `legendDisplay: "gradient" | "blocks"` on `pointsPlugin` sets how the legend draws a range scale
 (default a gradient; `hmsFirePlugin` uses `"blocks"`, labeled with the levels' own labels). A blocks
@@ -204,6 +224,10 @@ charger") shown where "No level" would be: in the feature list (plain text, no s
 accessible name ("Fresno Station, Level 2 charger"), and the tooltip. A feature with a level
 always shows its level. A plugin of your own sets the same `detail` on its `FeatureListItem`s.
 
+`truncateValues: true` on `pointsPlugin` cuts values off at the display precision instead of
+rounding them (`truncate` on each `FeatureListItem`), in the list, its accessible names, and the
+generic tooltip, so a value never reads as the next level up. `hmsFirePlugin` uses it.
+
 `collocationSitesPlugin({ id?, source, layerLabel })` draws collocation sites as sjvair.com does:
 each at its reference monitor, in that monitor's shape and level color (inactive gray, inside
 outlined), wrapped in a crosshair of `COLLOCATION_CROSSHAIR_COLOR` (`#4A5FC6`, a fixed color on
@@ -229,7 +253,12 @@ and reads "No level"; a level with an empty color draws neutral with its own lab
 source loads, fails, or is unavailable, the legend says so (a failure offers "Try again", which
 calls `status.retry()`). Values are shown with the metadata's display precision, except in the
 monitor, cluster, and collocation tooltips, which match monitor-map: the reading and a cluster's
-average are whole numbers, and a cluster's max and min are as reported.
+average are whole numbers, and a cluster's max and min are as reported. Fire values are cut off
+rather than rounded (see `truncateValues`). Times in the tooltips read like sjvair.com's map, in
+Pacific time: "4:00 pm Friday Nov 06, 2026", with " PT" after them on a device in another zone.
+The monitor cluster tooltip's count line gives the area the monitors are within, "3 monitors
+within a 22.619 mi² area": the area of their convex hull, left out when it would read 0.000 (two
+monitors, or all on one line or one spot).
 
 `createMonitorsStore()` (from `@sjvair/map-sdk/stores`) loads the monitors list and latest readings
 for an entry type, polls every two minutes, and exposes `dataSource`. `init()`, `update()`,
@@ -356,7 +385,10 @@ features are under the pointer, the hover tooltip shows the one whose plugin has
 `hoverPriority` (default 0), the topmost on a tie. Over a cluster bubble, the bubble's tooltip
 shows unless a feature beneath belongs to a plugin with a higher `hoverPriority` than the
 bubble's (collocation sites under monitor clusters). Clicks always go to the topmost, so a click
-on a bubble still zooms into it.
+on a bubble still zooms into it. A plugin with `hoverable: false` never takes the hover: its
+features show no hover tooltip or pointer cursor and are passed over as if they weren't drawn, so
+whatever is beneath gets the hover. They are still clicked, returned by `featuresAt`, and pin
+their tooltip when focused from the feature list.
 
 ```ts
 import type { CustomLayerInterface, MapPlugin, PluginContext } from "@sjvair/map-sdk";
@@ -500,6 +532,34 @@ local sjvair.com stack at `http://localhost:8000`.
    podman exec sjvaircom_web_1 python manage.py loaddata default-calibrations.yaml
    ```
 
+## Changes
+
+### 0.1.0-beta.4
+
+Defaults from monitor-map 5.0's parity review against sjvair.com's map (4.3.0). Every map gets
+them; none is an option.
+
+- **Tooltip times** read like sjvair.com's map, in Pacific time: "4:00 pm Friday Nov 06, 2026"
+  (was "Nov 6, 2026, 4:00 PM"). A device in another zone still gets " PT" after the time.
+- **The cluster area line is back.** The monitor cluster tooltip's count line reads "3 monitors
+  within a 22.619 mi² area". This reverses the 2026-11-04 parity decision of "no area line". The
+  wording is new (sjvair.com said "covering"), and the area is the convex hull of the cluster's
+  monitors, so clusters of four or more can differ from sjvair.com's number, which followed the
+  monitors' order and could cross itself. No line when the area would read 0.000.
+- **Fire tooltips are the reading box**: "Fire (MW)", the power in its level's color, beside the
+  name and level; "Average" for a group of two or more. Fire values are cut off, not rounded, in
+  the tooltip, the list and its accessible names. Every group names its count, a group of 1
+  included ("1 fire detection").
+- **Smoke plumes show no hover tooltip** and never take the hover from what is beneath them;
+  focusing a plume from the feature list still pins its tooltip. This reverses part of milestone
+  2's accessibility additions ("tooltips on smoke and fire"): fire keeps a tooltip.
+- **Breaking for hosts with their own message catalog:** `mapsdk_hms_fire_detections` is now
+  `mapsdk_hms_fire_detections_one` / `_other`. New keys: `mapsdk_hms_fire_box_header`,
+  `mapsdk_hms_fire_box_header_no_units`, `mapsdk_hms_fire_average`, `mapsdk_level_with_units`,
+  and `mapsdk_monitor_cluster_count_area_one` / `_other`.
+- **New API:** `MapPlugin.hoverable`, `shapesPlugin`'s `hoverable`, `pointsPlugin`'s
+  `truncateValues`, `FeatureListItem.truncate`, and `FireFeatureProperties`.
+
 ## Development
 
 ```bash

package/dist/core/interactions.svelte.d.ts

@@ -11,21 +11,23 @@ export interface Hovered {
  * layers, so registrations can come and go without re-binding listeners. Layers nobody registered
  * are never hit. A blocking layer (e.g. a cluster bubble, which zooms instead) is never hit either,
  * and when it is topmost at a point nothing beneath it is hit; only a feature whose plugin
- * outranks it in `hoverPriority` is hovered through it.
+ * outranks it in `hoverPriority` is hovered through it. A non-hoverable plugin's features (e.g.
+ * smoke plumes) are left out of the hover and cursor as if they weren't rendered, but are still
+ * clicked and returned by lookups.
  */
 export declare class InteractionRouter {
     #private;
     /** The top hit under the pointer and where it is. Reactive, for the tooltip. */
     get hovered(): Hovered | null;
     /** Records the layers whose features `toHit` turns into hits. Returns an unregister function. */
-    register(pluginId: string, layerIds: string[], toHit: (props: Record<string, unknown>) => FeatureHit | null, priority?: number): () => void;
+    register(pluginId: string, layerIds: string[], toHit: (props: Record<string, unknown>) => FeatureHit | null, priority?: number, hoverable?: boolean): () => void;
     /**
      * Records layers that hide what is beneath them: when one is topmost at a point, clicks pick
      * nothing (calling `onClick` with that feature instead) and the hover is `toHover`'s hit for
      * it (or nothing). `toHover` must have no side effects: lookups call it too. Returns an
      * unregister function.
      */
-    registerBlocking(pluginId: string, layerIds: string[], toHover?: (props: Record<string, unknown>) => FeatureHit | null, onClick?: (feature: BlockingClick) => void, priority?: number): () => void;
+    registerBlocking(pluginId: string, layerIds: string[], toHover?: (props: Record<string, unknown>) => FeatureHit | null, onClick?: (feature: BlockingClick) => void, priority?: number, hoverable?: boolean): () => void;
     /** Listens to `gl` from now on. */
     attach(gl: GlMapLike): void;
     /** Stops listening and clears `hovered`. */

package/dist/core/interactions.svelte.js

@@ -5,7 +5,9 @@
  * layers, so registrations can come and go without re-binding listeners. Layers nobody registered
  * are never hit. A blocking layer (e.g. a cluster bubble, which zooms instead) is never hit either,
  * and when it is topmost at a point nothing beneath it is hit; only a feature whose plugin
- * outranks it in `hoverPriority` is hovered through it.
+ * outranks it in `hoverPriority` is hovered through it. A non-hoverable plugin's features (e.g.
+ * smoke plumes) are left out of the hover and cursor as if they weren't rendered, but are still
+ * clicked and returned by lookups.
  */
 export class InteractionRouter {
     // Bookkeeping only; nothing reads these reactively.
@@ -28,8 +30,15 @@ export class InteractionRouter {
         return this.#hovered;
     }
     /** Records the layers whose features `toHit` turns into hits. Returns an unregister function. */
-    register(pluginId, layerIds, toHit, priority = 0) {
-        return this.#add({ pluginId, layerIds: [...layerIds], toHit, blocking: false, priority });
+    register(pluginId, layerIds, toHit, priority = 0, hoverable = true) {
+        return this.#add({
+            pluginId,
+            layerIds: [...layerIds],
+            toHit,
+            blocking: false,
+            priority,
+            hoverable
+        });
     }
     /**
      * Records layers that hide what is beneath them: when one is topmost at a point, clicks pick
@@ -37,14 +46,15 @@ export class InteractionRouter {
      * it (or nothing). `toHover` must have no side effects: lookups call it too. Returns an
      * unregister function.
      */
-    registerBlocking(pluginId, layerIds, toHover, onClick, priority = 0) {
+    registerBlocking(pluginId, layerIds, toHover, onClick, priority = 0, hoverable = true) {
         return this.#add({
             pluginId,
             layerIds: [...layerIds],
             toHit: toHover ?? (() => null),
             blocking: true,
             onClick,
-            priority
+            priority,
+            hoverable
         });
     }
     #add(registration) {
@@ -94,7 +104,8 @@ export class InteractionRouter {
         const found = this.#lookup(point);
         return found.blocked ? [] : found.hits;
     }
-    #lookup(point) {
+    /** What is under one point; with `forHover`, non-hoverable features are left out first. */
+    #lookup(point, forHover = false) {
         const none = { hits: [], hover: null, blocked: false, blocker: null, blockedBy: null };
         const gl = this.#gl;
         if (!gl)
@@ -103,6 +114,8 @@ export class InteractionRouter {
         /* eslint-disable svelte/prefer-svelte-reactivity */
         const byLayer = new Map();
         for (const registration of this.#registrations) {
+            if (forHover && !registration.hoverable)
+                continue;
             for (const id of registration.layerIds) {
                 // MapLibre errors on querying a missing layer (e.g. mid basemap change).
                 if (!byLayer.has(id) && gl.getLayer(id))
@@ -210,7 +223,7 @@ export class InteractionRouter {
         }
     };
     #onMove = (e) => {
-        const found = this.#lookup([e.point.x, e.point.y]);
+        const found = this.#lookup([e.point.x, e.point.y], true);
         const hit = found.blocked ? (found.hover ?? found.blocker) : found.hover;
         this.#hovered = hit ? { hit, lngLat: [e.lngLat.lng, e.lngLat.lat] } : null;
         this.#setPointer(found.blocked || hit !== null);

package/dist/core/plugin-host.svelte.js

@@ -406,12 +406,12 @@ export class PluginHost {
             interactive(layerIds, toHit) {
                 if (running.dead)
                     return;
-                running.unregisters.push(router.register(pluginId, layerIds, toHit, running.plugin.hoverPriority ?? 0));
+                running.unregisters.push(router.register(pluginId, layerIds, toHit, running.plugin.hoverPriority ?? 0, running.plugin.hoverable ?? true));
             },
             blocking(layerIds, toHover, onClick) {
                 if (running.dead)
                     return;
-                running.unregisters.push(router.registerBlocking(pluginId, layerIds, toHover, onClick, running.plugin.hoverPriority ?? 0));
+                running.unregisters.push(router.registerBlocking(pluginId, layerIds, toHover, onClick, running.plugin.hoverPriority ?? 0, running.plugin.hoverable ?? true));
             },
             on(type, layerId, listener) {
                 if (running.dead)

package/dist/core/plugin.d.ts

@@ -46,6 +46,12 @@ export interface FeatureListItem {
      * metadata's display hint). Without it the value is formatted as given.
      */
     precision?: number;
+    /**
+     * Cut a numeric `value` off at `precision` instead of rounding it, so the number never reads
+     * as the next level (e.g. fire power: 9.96 MW shows "9.9", not "10.0", beside "<10"). Default
+     * false.
+     */
+    truncate?: boolean;
     lngLat: [number, number];
     selectable: boolean;
     /**
@@ -139,6 +145,12 @@ export interface MapPlugin {
      * Clicks ignore this (topmost first), and a blocking layer on top still blocks them.
      */
     hoverPriority?: number;
+    /**
+     * False: the plugin's features never take the hover (so no hover tooltip and no pointer
+     * cursor) and never hide a feature beneath from it, as if they weren't rendered. Clicks,
+     * `featuresAt`, and keyboard focus from the list are unchanged. Default true.
+     */
+    hoverable?: boolean;
     displayOptions?: Snippet;
     /** Richer tooltip content for one of this plugin's features, below its name. */
     tooltip?(item: FeatureListItem): Snippet | undefined;

package/dist/data/format.d.ts

@@ -1,6 +1,6 @@
 export interface FormatProvider {
     number(value: number, options?: Intl.NumberFormatOptions): string;
-    /** Formats in Pacific time. */
+    /** Formats in Pacific time like sjvair.com's map: "4:00 pm Friday Nov 06, 2026". */
     dateTime(value: Date | string): string;
     /** "PT" only when the device zone isn't Pacific. */
     zoneLabel(): string | null;

package/dist/data/format.js

@@ -2,13 +2,26 @@ const PACIFIC = "America/Los_Angeles";
 export function createDefaultFormat(deviceZone = Intl.DateTimeFormat().resolvedOptions().timeZone) {
     const dateFormat = new Intl.DateTimeFormat("en-US", {
         timeZone: PACIFIC,
-        dateStyle: "medium",
-        timeStyle: "short"
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+        weekday: "long",
+        month: "short",
+        day: "2-digit",
+        year: "numeric"
     });
+    // date-fns' "h:mm aaa EEEE MMM dd, yyyy", assembled from the parts.
+    const dateTime = (value) => {
+        const date = typeof value === "string" ? new Date(value) : value;
+        const part = {};
+        for (const { type, value: text } of dateFormat.formatToParts(date))
+            part[type] = text;
+        return `${part.hour}:${part.minute} ${part.dayPeriod?.toLowerCase()} ${part.weekday} ${part.month} ${part.day}, ${part.year}`;
+    };
     const relative = new Intl.RelativeTimeFormat("en-US", { numeric: "always" });
     return {
         number: (value, options) => new Intl.NumberFormat("en-US", options).format(value),
-        dateTime: (value) => dateFormat.format(typeof value === "string" ? new Date(value) : value),
+        dateTime,
         zoneLabel: () => (deviceZone === PACIFIC ? null : "PT"),
         relativeTime: (value, now = new Date()) => {
             const ms = (typeof value === "string" ? new Date(value) : value).getTime() - now.getTime();

package/dist/data/messages/en.json

@@ -38,13 +38,20 @@
 	"mapsdk_monitor_cluster_title_sjvair": "SJVAir {type} Monitors",
 	"mapsdk_monitor_cluster_count_one": "{count} monitor",
 	"mapsdk_monitor_cluster_count_other": "{count} monitors",
+	"mapsdk_monitor_cluster_count_area_one": "{count} monitor within a {area} mi² area",
+	"mapsdk_monitor_cluster_count_area_other": "{count} monitors within a {area} mi² area",
 	"mapsdk_monitor_cluster_max": "Max: {value} {units}",
 	"mapsdk_monitor_cluster_min": "Min: {value} {units}",
 	"mapsdk_monitor_interval_avg": "({interval} avg)",
 	"mapsdk_monitor_updated": "Last updated {when}",
 	"mapsdk_hms_smoke_name": "Smoke",
 	"mapsdk_hms_fire_detection": "Fire detection",
-	"mapsdk_hms_fire_detections": "{count} fire detections",
+	"mapsdk_hms_fire_box_header": "Fire ({units})",
+	"mapsdk_hms_fire_box_header_no_units": "Fire",
+	"mapsdk_hms_fire_average": "Average",
+	"mapsdk_level_with_units": "{level} {units}",
+	"mapsdk_hms_fire_detections_one": "{count} fire detection",
+	"mapsdk_hms_fire_detections_other": "{count} fire detections",
 	"mapsdk_collocation_reference": "Reference monitor",
 	"mapsdk_collocation_colocated": "Collocated monitor",
 	"mapsdk_collocation_interval_avg": "({interval} avg)",

package/dist/data/types.d.ts

@@ -21,6 +21,11 @@ export interface MapFeatureProperties {
     name: string;
     value: number | string | null;
 }
+/** An HMS fire on the map: a group of nearby detections, or a single detection. */
+export interface FireFeatureProperties extends MapFeatureProperties {
+    /** Set on a group: how many detections it averages. Absent on a single detection. */
+    count?: number;
+}
 /** A monitor on the map: what the monitors preset draws and its tooltips show. */
 export interface MonitorFeatureProperties extends MapFeatureProperties {
     /** The server's monitor type (e.g. "purpleair", "airnow"); picks the marker shape. */

package/dist/plugins/points.svelte.d.ts

@@ -82,6 +82,11 @@ export interface PointsOptions<P extends MapFeatureProperties> {
      * feature with a level.
      */
     detail?(props: P): string | undefined;
+    /**
+     * Cut values off at the display precision instead of rounding them, in the list, its
+     * accessible names, and the generic tooltip (`FeatureListItem.truncate`). Default false.
+     */
+    truncateValues?: boolean;
     /** Whether `features()` lists this plugin's features. Default true. */
     listed?: boolean;
     /** Tooltip content for a feature, below its name; `props` are its source properties. */

package/dist/plugins/points.svelte.js

@@ -104,7 +104,8 @@ export function pointsPlugin(options) {
                 precision,
                 lngLat: [lng, lat],
                 selectable: selectable && selectionId(ref) !== null,
-                ...(detail ? { detail } : {})
+                ...(detail ? { detail } : {}),
+                ...(options.truncateValues ? { truncate: true } : {})
             });
         }
         return items;

package/dist/plugins/shapes.svelte.d.ts

@@ -19,6 +19,11 @@ export interface ShapesOptions<P extends MapFeatureProperties> {
      * (so LineString geometries are not drawn either).
      */
     outline?: "theme" | "level" | "none";
+    /**
+     * False: hovering a shape shows no tooltip and doesn't hide what is beneath it
+     * (`MapPlugin.hoverable`); list focus still shows it. Default true.
+     */
+    hoverable?: boolean;
 }
 /** The point used to place a feature in lists: its largest ring's centroid, or a line's midpoint. */
 export declare function labelPoint(geometry: Geometry): [number, number] | null;

package/dist/plugins/shapes.svelte.js

@@ -303,5 +303,7 @@ export function shapesPlugin(options) {
     };
     if (options.listed ?? true)
         plugin.features = features;
+    if (options.hoverable === false)
+        plugin.hoverable = false;
     return plugin;
 }

package/dist/presets/FireTooltip.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import type { FeatureListItem } from "../core/plugin.js";
+	import type { FormatProvider } from "../data/format.js";
+	import type { MessageProvider } from "../data/messages.js";
+	import { NO_LEVEL, numericValue } from "../data/scale.js";
+	import { formatValue } from "../ui/value-format.js";
+	import MonitorReadingBox from "./MonitorReadingBox.svelte";
+
+	// A fire's power in the monitors' reading box, beside its name and level. The value is cut
+	// off, not rounded, so it never reads as the next level (9.96 MW shows 9.9 beside "<10").
+	// No detection time: a satellite pass isn't when the fire started or whether it still burns.
+
+	interface Props {
+		item: FeatureListItem;
+		/** How many detections a group averages; null for a single detection. */
+		count: number | null;
+		messages: MessageProvider;
+		format: FormatProvider;
+	}
+
+	let { item, count, messages, format }: Props = $props();
+
+	const level = $derived(item.level !== NO_LEVEL ? item.level : null);
+	const value = $derived.by(() => {
+		const n = numericValue(item.value);
+		return n === null ? null : formatValue(n, item.precision, format, true);
+	});
+	const header = $derived(
+		item.units
+			? messages("mapsdk_hms_fire_box_header", { units: item.units })
+			: messages("mapsdk_hms_fire_box_header_no_units")
+	);
+</script>
+
+<div class="mapsdk-fire-tip mapsdk-tooltip-wide">
+	<MonitorReadingBox
+		color={level?.color || null}
+		{header}
+		value={value ?? messages("mapsdk_no_reading")}
+		large={value !== null}
+		subheading={count !== null && count >= 2 ? messages("mapsdk_hms_fire_average") : undefined}
+	/>
+	<div class="mapsdk-fire-detail">
+		<span class="mapsdk-fire-name text-lg">{item.name}</span>
+		<span>
+			{level
+				? item.units
+					? messages("mapsdk_level_with_units", { level: level.label, units: item.units })
+					: level.label
+				: messages("mapsdk_no_level")}
+		</span>
+	</div>
+</div>
+
+<style>
+	.mapsdk-fire-tip {
+		display: flex;
+		gap: 0.5rem;
+	}
+
+	.mapsdk-fire-name {
+		font-weight: 700;
+	}
+
+	.mapsdk-fire-detail {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+	}
+</style>

package/dist/presets/FireTooltip.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { FeatureListItem } from "../core/plugin.js";
+import type { FormatProvider } from "../data/format.js";
+import type { MessageProvider } from "../data/messages.js";
+interface Props {
+    item: FeatureListItem;
+    /** How many detections a group averages; null for a single detection. */
+    count: number | null;
+    messages: MessageProvider;
+    format: FormatProvider;
+}
+declare const FireTooltip: import("svelte").Component<Props, {}, "">;
+type FireTooltip = ReturnType<typeof FireTooltip>;
+export default FireTooltip;

package/dist/presets/MonitorClusterTooltip.svelte

@@ -7,12 +7,14 @@
 	import type { MonitorFeatureProperties } from "../data/types.js";
 	import type { ClusterInfo } from "../plugins/points-clusters.js";
 	import { formatValue } from "../ui/value-format.js";
+	import { clusterAreaSqMiles } from "./cluster-area.js";
 	import MonitorReadingBox from "./MonitorReadingBox.svelte";
 
 	// Ported from monitor-map's MonitorClusterTooltip: the cluster's average in a level-colored
 	// box beside its monitor type, count, and highest and lowest readings. The count and average
 	// come from the bubble itself, so they show at once; the rest fills in from the cluster's
 	// monitors. The average is a whole number and max and min are as reported, as monitor-map's.
+	// The count line adds the area the monitors are within (their convex hull) once they load.
 
 	interface Props {
 		cluster: ClusterInfo<MonitorFeatureProperties>;
@@ -29,6 +31,8 @@
 		isSjvair: boolean;
 		/** Readings only; monitors without one are left out. */
 		values: number[];
+		/** Square miles of the monitors' convex hull, every monitor included. */
+		area: number;
 	}
 
 	let leaves = $state.raw<Leaves | null>(null);
@@ -60,7 +64,8 @@
 					values: found.flatMap(({ props }) => {
 						const n = numericValue(props.value);
 						return n === null ? [] : [n];
-					})
+					}),
+					area: clusterAreaSqMiles(found.map(({ lngLat }) => lngLat))
 				};
 			},
 			() => {
@@ -87,6 +92,16 @@
 		return found !== NO_LEVEL ? found : null;
 	});
 	const units = $derived(scale?.units ?? "");
+	/** The area to 3 decimals, or null when there is none to show (it would read 0.000). */
+	const area = $derived.by(() => {
+		// Decided on the number, so a host's own number format can't change what's hidden.
+		if (!leaves || Math.round(leaves.area * 1000) === 0) return null;
+		return format.number(leaves.area, {
+			minimumFractionDigits: 3,
+			maximumFractionDigits: 3,
+			useGrouping: false
+		});
+	});
 	const max = $derived(leaves?.values.length ? Math.max(...leaves.values) : null);
 	const min = $derived(leaves?.values.length ? Math.min(...leaves.values) : null);
 </script>
@@ -108,7 +123,11 @@
 				)}
 			</span>
 		{/if}
-		<span>{messages("mapsdk_monitor_cluster_count", { count: cluster.pointCount })}</span>
+		<span>
+			{area
+				? messages("mapsdk_monitor_cluster_count_area", { count: cluster.pointCount, area })
+				: messages("mapsdk_monitor_cluster_count", { count: cluster.pointCount })}
+		</span>
 		<span>{level ? level.label : messages("mapsdk_no_level")}</span>
 		{#if max !== null && min !== null}
 			<span class="mapsdk-monitor-extremes text-base">

package/dist/presets/cluster-area.d.ts

@@ -0,0 +1,13 @@
+type Point = [number, number];
+/**
+ * The convex hull of lng/lat points (monotone chain): counter-clockwise, without a repeated
+ * closing point, inner and collinear points dropped. Fewer than 3 points means no area.
+ */
+export declare function convexHull(points: Point[]): Point[];
+/**
+ * The area, in square miles, of the smallest shape around a cluster's monitors (their convex
+ * hull), as sjvair.com's map computed area: `@turf/area`, then `convertArea`. 0 for fewer than 3
+ * points not on one line.
+ */
+export declare function clusterAreaSqMiles(points: Point[]): number;
+export {};

package/dist/presets/cluster-area.js

@@ -0,0 +1,34 @@
+import area from "@turf/area";
+import { convertArea, polygon } from "@turf/helpers";
+const cross = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
+/**
+ * The convex hull of lng/lat points (monotone chain): counter-clockwise, without a repeated
+ * closing point, inner and collinear points dropped. Fewer than 3 points means no area.
+ */
+export function convexHull(points) {
+    const sorted = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+    if (sorted.length < 3)
+        return sorted;
+    const half = (from) => {
+        const chain = [];
+        for (const p of from) {
+            while (chain.length >= 2 && cross(chain[chain.length - 2], chain[chain.length - 1], p) <= 0)
+                chain.pop();
+            chain.push(p);
+        }
+        chain.pop();
+        return chain;
+    };
+    return [...half(sorted), ...half([...sorted].reverse())];
+}
+/**
+ * The area, in square miles, of the smallest shape around a cluster's monitors (their convex
+ * hull), as sjvair.com's map computed area: `@turf/area`, then `convertArea`. 0 for fewer than 3
+ * points not on one line.
+ */
+export function clusterAreaSqMiles(points) {
+    const hull = convexHull(points);
+    if (hull.length < 3)
+        return 0;
+    return convertArea(area(polygon([[...hull, hull[0]]])), "meters", "miles");
+}

package/dist/presets/hms-fire.d.ts

@@ -1,12 +1,16 @@
 import type { MapPlugin } from "../core/plugin.js";
-import type { DataSource } from "../data/types.js";
+import type { DataSource, FireFeatureProperties } from "../data/types.js";
 export interface HmsFirePluginOptions {
     /** Default "hms-fire". */
     id?: string;
-    /** The fires, or with `hotspots` the groups shown below zoom 10 (listed). */
-    source: DataSource;
+    /**
+     * The fires, or with `hotspots` the groups shown below zoom 10 (listed). A feature with a
+     * `count` is a group (its tooltip says "Average" from 2 detections); one without is a single
+     * detection.
+     */
+    source: DataSource<FireFeatureProperties>;
     /** Single detections shown from zoom 10 instead of `source` (not listed). Default: none. */
-    hotspots?: DataSource;
+    hotspots?: DataSource<FireFeatureProperties>;
     /** Already-translated layer name for the list and summary. */
     layerLabel: string;
 }
@@ -16,9 +20,9 @@ export interface HmsFirePluginOptions {
  *
  * With `hotspots`, it is still one layer (one legend section, one list) that switches by itself
  * while zooming: `source` (groups from `groupFires`, value = `avgFrp`) below zoom 10, `hotspots`
- * (each detection) from zoom 10. Both are hit-tested and show the same tooltip (name, value,
- * level);
- * only the groups are listed.
+ * (each detection) from zoom 10. Both are hit-tested and show the same tooltip: the power in a
+ * reading box colored by its level, beside the name and level; only the groups are listed. Values
+ * are cut off at the display precision, not rounded, in the tooltip, list, and accessible names.
  *
  * The sources' `scale` is expected to be the ScaleRef `{ dataset: "hms-fire", entryType:
  * "fire-frp" }`, and each feature's `value` its FRP. This preset does not fetch.

package/dist/presets/hms-fire.js

@@ -1,7 +1,7 @@
 import { scopedContext } from "../core/scoped-context.js";
 import { fireIcon } from "../plugins/icons.js";
 import { pointsPlugin } from "../plugins/points.svelte.js";
-import TooltipItem from "../ui/TooltipItem.svelte";
+import FireTooltip from "./FireTooltip.svelte";
 import { componentSnippet } from "./monitors.js";
 /** The zoom where `hotspots` replace the groups (inclusive), as sjvair.com's map does. */
 const HOTSPOT_ZOOM = 10;
@@ -22,6 +22,14 @@ function firePoints(id, source, layerLabel, zoomRange) {
         selectable: false,
         zoomRange,
         legendDisplay: "blocks",
+        truncateValues: true,
+        tooltipShowsName: true,
+        tooltip: (item, props, env) => componentSnippet(FireTooltip, {
+            item,
+            count: typeof props.count === "number" ? props.count : null,
+            messages: env.messages,
+            format: env.format
+        }),
         icon: {
             category: () => "fire",
             draw: (_category, color, _theme, levelIndex) => drawFire(color, levelIndex),
@@ -35,9 +43,9 @@ function firePoints(id, source, layerLabel, zoomRange) {
  *
  * With `hotspots`, it is still one layer (one legend section, one list) that switches by itself
  * while zooming: `source` (groups from `groupFires`, value = `avgFrp`) below zoom 10, `hotspots`
- * (each detection) from zoom 10. Both are hit-tested and show the same tooltip (name, value,
- * level);
- * only the groups are listed.
+ * (each detection) from zoom 10. Both are hit-tested and show the same tooltip: the power in a
+ * reading box colored by its level, beside the name and level; only the groups are listed. Values
+ * are cut off at the display precision, not rounded, in the tooltip, list, and accessible names.
  *
  * The sources' `scale` is expected to be the ScaleRef `{ dataset: "hms-fire", entryType:
  * "fire-frp" }`, and each feature's `value` its FRP. This preset does not fetch.
@@ -50,8 +58,6 @@ export function hmsFirePlugin(options) {
     // Both inner plugins share the outer id, so their hits are this plugin's.
     const groups = firePoints(id, source, layerLabel, { max: HOTSPOT_ZOOM });
     const singles = firePoints(id, hotspots, layerLabel, { min: HOTSPOT_ZOOM });
-    // The providers of the running setup, for the hotspots' tooltips.
-    let ctxNow = null;
     return {
         id,
         label: layerLabel,
@@ -60,28 +66,21 @@ export function hmsFirePlugin(options) {
         },
         selectable: false,
         setup(ctx) {
-            ctxNow = ctx;
             const teardownGroups = groups.setup(scopedContext(ctx, "groups:"));
             const teardownSingles = singles.setup(scopedContext(ctx, "hotspots:"));
             return () => {
-                ctxNow = null;
                 teardownSingles();
                 teardownGroups();
             };
         },
         legend: groups.legend,
-        // Only the groups are listed; a hovered hotspot shows what a group's hover does: its name
-        // (the generic header) with its value and level.
+        // Only the groups are listed; a hovered hotspot shows the same box as a group.
         features: groups.features,
+        tooltip: groups.tooltip,
+        tooltipShowsName: true,
         hoverTooltip(hit) {
             const item = singles.features?.().find((f) => f.refKey === hit.refKey);
-            if (!item || !ctxNow)
-                return undefined;
-            return componentSnippet(TooltipItem, {
-                item,
-                messages: ctxNow.messages,
-                format: ctxNow.format
-            });
+            return item && singles.tooltip?.(item);
         }
     };
 }

package/dist/presets/hms-smoke.d.ts

@@ -10,7 +10,8 @@ export interface HmsSmokePluginOptions {
 /**
  * NOAA HMS smoke plumes: polygons filled and outlined (`outline: "level"`) by density, using each
  * level's opacity. Not selectable; listed (each plume a row with its density level), so plumes
- * can be reached without a mouse.
+ * can be reached without a mouse. Hovering a plume shows no tooltip and never hides another
+ * layer's (`hoverable: false`); focusing one from the list still pins its tooltip.
  *
  * The source's `scale` is expected to be the ScaleRef
  * `{ dataset: "hms-smoke", entryType: "smoke-density" }`, and each feature's `value` its density

package/dist/presets/hms-smoke.js

@@ -2,7 +2,8 @@ import { shapesPlugin } from "../plugins/shapes.svelte.js";
 /**
  * NOAA HMS smoke plumes: polygons filled and outlined (`outline: "level"`) by density, using each
  * level's opacity. Not selectable; listed (each plume a row with its density level), so plumes
- * can be reached without a mouse.
+ * can be reached without a mouse. Hovering a plume shows no tooltip and never hides another
+ * layer's (`hoverable: false`); focusing one from the list still pins its tooltip.
  *
  * The source's `scale` is expected to be the ScaleRef
  * `{ dataset: "hms-smoke", entryType: "smoke-density" }`, and each feature's `value` its density
@@ -15,6 +16,7 @@ export function hmsSmokePlugin(options) {
         layerLabel: options.layerLabel,
         mode: "choropleth",
         selectable: false,
-        outline: "level"
+        outline: "level",
+        hoverable: false
     });
 }

package/dist/stores/hms-stores.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type MessageProvider } from "../data/messages.js";
-import type { DataSource, DataStatus } from "../data/types.js";
+import type { DataSource, DataStatus, FireFeatureProperties } from "../data/types.js";
 import type { SignalOptions } from "./abort.js";
 export interface HmsStoreOptions {
     /** Names features ("Smoke", "Fire detection"). Default: the built-in English messages. */
@@ -22,8 +22,11 @@ export interface HmsSmokeStore {
 export interface HmsFireStore {
     /** `loading` until loaded, then `ready` (also when today has no fires) or `error`. */
     readonly status: DataStatus;
-    /** Nearby detections merged (`groupFires`), for `hmsFirePlugin`; `value` is the mean FRP. */
-    readonly groups: DataSource;
+    /**
+     * Nearby detections merged (`groupFires`), for `hmsFirePlugin`; `value` is the mean FRP and
+     * `count` how many detections it merges.
+     */
+    readonly groups: DataSource<FireFeatureProperties>;
     /** Each detection (`cleanFires`), for `hmsFirePlugin`; `value` is its FRP. */
     readonly hotspots: DataSource;
     /** As `HmsSmokeStore.init`. */

package/dist/stores/hms-stores.svelte.js

@@ -69,15 +69,15 @@ export function createHmsFireStore(options = {}) {
                 value: fire.frp
             }
         }));
+        // Every group names its count, a group of 1 included ("1 fire detection").
         const groups = groupFires(detections).map((group) => ({
             type: "Feature",
             geometry: { type: "Point", coordinates: group.coordinates },
             properties: {
                 refKey: encodeRef({ kind: "feature", id: group.id }),
-                name: group.count === 1
-                    ? detection
-                    : messages("mapsdk_hms_fire_detections", { count: group.count }),
-                value: group.avgFrp
+                name: messages("mapsdk_hms_fire_detections", { count: group.count }),
+                value: group.avgFrp,
+                count: group.count
             }
         }));
         return {

package/dist/ui/FeatureList.svelte

@@ -270,7 +270,7 @@
 	function formatValue(row: Row): string {
 		if (row.value === null) return "";
 		return typeof row.value === "number"
-			? formatNumber(row.value, row.precision, map.format)
+			? formatNumber(row.value, row.precision, map.format, row.truncate)
 			: row.value;
 	}
 

package/dist/ui/TooltipItem.svelte

@@ -30,7 +30,7 @@
 		item.value == null
 			? null
 			: typeof item.value === "number"
-				? formatValue(item.value, item.precision, format)
+				? formatValue(item.value, item.precision, format, item.truncate)
 				: item.value
 	);
 </script>

package/dist/ui/feature-list.js

@@ -87,7 +87,9 @@ export function rowLabel(item, messages, format) {
     }
     const params = {
         name: item.name,
-        value: typeof item.value === "number" ? formatValue(item.value, item.precision, format) : item.value,
+        value: typeof item.value === "number"
+            ? formatValue(item.value, item.precision, format, item.truncate)
+            : item.value,
         units: item.units,
         level: level.text
     };

package/dist/ui/value-format.d.ts

@@ -2,6 +2,7 @@ import type { FormatProvider } from "../data/format.js";
 /**
  * A numeric value with exactly `precision` decimal places, or as `format.number` gives it when
  * there is no precision. Every place that shows a value (list rows, tooltips) goes through this,
- * so they all agree.
+ * so they all agree. With `truncate` the extra decimals are cut off rather than rounded (9.96 at
+ * precision 1 is "9.9"), so the number never reads as the next level up.
  */
-export declare function formatValue(value: number, precision: number | undefined, format: FormatProvider): string;
+export declare function formatValue(value: number, precision: number | undefined, format: FormatProvider, truncate?: boolean): string;

package/dist/ui/value-format.js

@@ -1,11 +1,18 @@
 /**
  * A numeric value with exactly `precision` decimal places, or as `format.number` gives it when
  * there is no precision. Every place that shows a value (list rows, tooltips) goes through this,
- * so they all agree.
+ * so they all agree. With `truncate` the extra decimals are cut off rather than rounded (9.96 at
+ * precision 1 is "9.9"), so the number never reads as the next level up.
  */
-export function formatValue(value, precision, format) {
+export function formatValue(value, precision, format, truncate = false) {
     if (precision === undefined)
         return format.number(value);
+    if (truncate) {
+        const factor = 10 ** precision;
+        // toPrecision drops float noise first (4.35 * 100 is 434.99999999999994); 15 digits keep
+        // any real value from rounding up.
+        value = Math.trunc(Number((value * factor).toPrecision(15))) / factor;
+    }
     return format.number(value, {
         minimumFractionDigits: precision,
         maximumFractionDigits: precision

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@sjvair/map-sdk",
 	"description": "Svelte 5 map components for SJVAir air-quality data",
-	"version": "0.1.0-beta.3",
+	"version": "0.1.0-beta.4",
 	"license": "MIT",
 	"repository": {
 		"type": "git",
@@ -63,6 +63,7 @@
 	},
 	"dependencies": {
 		"@maptiler/sdk": "~4.2.0",
+		"@turf/area": "^7.4.0",
 		"@turf/clusters-dbscan": "^7.4.0",
 		"@turf/helpers": "^7.4.0",
 		"@types/geojson": "^7946.0.16",