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

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/MapTooltip.svelte

@@ -70,11 +70,24 @@
 	// A found item anchors the tooltip at its point (stable while the pointer moves over it).
 	// In pointer mode a hovered hit is anchored at the pointer instead (a focused item stays
 	// pinned).
-	const anchor = $derived(
-		mode === "pointer" && !map.focusedKey
-			? (map.hovered?.lngLat ?? null)
-			: (item?.lngLat ?? map.hovered?.lngLat ?? null)
+	// A hovered shape whose point is off-screen pins at a point of it in view, found once per
+	// hovered feature (keyed on primitives), so pointer moves within it don't move the tooltip.
+	// It's found again when the map settles (`bounds`), so a pan or zoom under a resting pointer
+	// doesn't leave it off-screen.
+	const hoverKey = $derived(
+		!map.focusedKey && item && hitPluginId ? `${hitPluginId}\n${item.refKey}` : null
 	);
+	const hoverAnchor = $derived.by(() => {
+		if (hoverKey === null) return null;
+		void map.bounds;
+		return untrack(() => (item?.geometry ? map.anchorFor(item) : null));
+	});
+	const anchor = $derived.by((): [number, number] | null => {
+		if (mode === "pointer" && !map.focusedKey) return map.hovered?.lngLat ?? null;
+		// A focused feature that left the data has no item, so no tooltip.
+		if (map.focusedKey) return item ? (map.focusedAnchor ?? item.lngLat) : null;
+		return hoverAnchor ?? item?.lngLat ?? map.hovered?.lngLat ?? null;
+	});
 	const projected = $derived(anchor ? project(anchor) : null);
 	// Centered above the point; flipped below it near the top edge; inside the container.
 	const position = $derived.by(() => {

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.d.ts

@@ -16,7 +16,10 @@ export declare const MENU_EVENT_WINDOW_MS = 1000;
  * separator and different rows never share a fragment.
  */
 export declare function optionIdPart(pluginId: string, refKey: string): string;
-/** Items whose point is inside `bounds`, edges included. No antimeridian handling (the Valley). */
+/**
+ * Items in `bounds`, edges included: a shape (`geometry`) when it overlaps them, anything else when
+ * its point is inside. No antimeridian handling (the Valley).
+ */
 export declare function inView(items: FeatureListItem[], bounds: Bounds): FeatureListItem[];
 /**
  * The item's level, or null for `NO_LEVEL`. A level with an empty color is still shown, by its

package/dist/ui/feature-list.js

@@ -1,3 +1,4 @@
+import { intersectsBounds } from "../core/shape-view.js";
 import { NO_LEVEL } from "../data/scale.js";
 import { formatValue } from "./value-format.js";
 /**
@@ -14,11 +15,12 @@ export function optionIdPart(pluginId, refKey) {
     const escape = (text) => text.replace(/[^A-Za-z0-9]/g, (c) => `_${c.codePointAt(0).toString(16)}_`);
     return `${escape(pluginId)}--${escape(refKey)}`;
 }
-/** Items whose point is inside `bounds`, edges included. No antimeridian handling (the Valley). */
+/**
+ * Items in `bounds`, edges included: a shape (`geometry`) when it overlaps them, anything else when
+ * its point is inside. No antimeridian handling (the Valley).
+ */
 export function inView(items, bounds) {
-    return items.filter(({ lngLat: [lng, lat] }) => {
-        return lng >= bounds.west && lng <= bounds.east && lat >= bounds.south && lat <= bounds.north;
-    });
+    return items.filter((item) => intersectsBounds(item, bounds));
 }
 /**
  * The item's level, or null for `NO_LEVEL`. A level with an empty color is still shown, by its
@@ -87,7 +89,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.5",
 	"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",