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

package/dist/core/shape-view.js

@@ -0,0 +1,323 @@
+/** The geometry's bounding box, or `null` when it has no coordinates. */
+export function geometryBbox(geometry) {
+    let west = Infinity;
+    let south = Infinity;
+    let east = -Infinity;
+    let north = -Infinity;
+    const add = (p) => {
+        if (p[0] < west)
+            west = p[0];
+        if (p[0] > east)
+            east = p[0];
+        if (p[1] < south)
+            south = p[1];
+        if (p[1] > north)
+            north = p[1];
+    };
+    const walk = (g) => {
+        switch (g.type) {
+            case "Point":
+                add(g.coordinates);
+                break;
+            case "MultiPoint":
+            case "LineString":
+                g.coordinates.forEach(add);
+                break;
+            case "MultiLineString":
+            case "Polygon":
+                g.coordinates.forEach((ring) => ring.forEach(add));
+                break;
+            case "MultiPolygon":
+                g.coordinates.forEach((poly) => poly.forEach((ring) => ring.forEach(add)));
+                break;
+            case "GeometryCollection":
+                g.geometries.forEach(walk);
+                break;
+        }
+    };
+    walk(geometry);
+    return west <= east ? [west, south, east, north] : null;
+}
+const inRect = (p, b) => p[0] >= b.west && p[0] <= b.east && p[1] >= b.south && p[1] <= b.north;
+/** The polygons of a geometry (each an outer ring and holes), or `null` for a non-polygon. */
+function polygonsOf(g) {
+    if (g.type === "Polygon")
+        return [g.coordinates];
+    if (g.type === "MultiPolygon")
+        return g.coordinates;
+    return null;
+}
+function linesOf(g) {
+    if (g.type === "LineString")
+        return [g.coordinates];
+    if (g.type === "MultiLineString")
+        return g.coordinates;
+    return null;
+}
+/** Ring edges, closing an unclosed ring. Fewer than 3 points: no area, so no edges. */
+function ringEdges(ring) {
+    const n = ring.length;
+    if (n < 3)
+        return [];
+    const edges = [];
+    for (let i = 0; i < n - 1; i++)
+        edges.push([ring[i], ring[i + 1]]);
+    const [a, z] = [ring[0], ring[n - 1]];
+    if (a[0] !== z[0] || a[1] !== z[1])
+        edges.push([z, a]);
+    return edges;
+}
+function inRing(p, ring) {
+    let inside = false;
+    for (const [a, b] of ringEdges(ring)) {
+        if (a[1] > p[1] !== b[1] > p[1]) {
+            const x = ((b[0] - a[0]) * (p[1] - a[1])) / (b[1] - a[1]) + a[0];
+            if (p[0] < x)
+                inside = !inside;
+        }
+    }
+    return inside;
+}
+function inPolygon(p, polygon) {
+    const [outer, ...holes] = polygon;
+    return !!outer && inRing(p, outer) && !holes.some((hole) => inRing(p, hole));
+}
+/** Inside an outer ring and outside its holes, for any polygon of the geometry. */
+export function containsPoint(geometry, p) {
+    return polygonsOf(geometry)?.some((polygon) => inPolygon(p, polygon)) ?? false;
+}
+const cross = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
+const onSegment = (p, a, b) => Math.min(a[0], b[0]) <= p[0] &&
+    p[0] <= Math.max(a[0], b[0]) &&
+    Math.min(a[1], b[1]) <= p[1] &&
+    p[1] <= Math.max(a[1], b[1]);
+/** Whether segments ab and cd meet, touching and collinear overlaps included. */
+function segmentsMeet(a, b, c, d) {
+    const d1 = cross(c, d, a);
+    const d2 = cross(c, d, b);
+    const d3 = cross(a, b, c);
+    const d4 = cross(a, b, d);
+    if (((d1 > 0 && d2 < 0) || (d1 < 0 && d2 > 0)) && ((d3 > 0 && d4 < 0) || (d3 < 0 && d4 > 0)))
+        return true;
+    return ((d1 === 0 && onSegment(a, c, d)) ||
+        (d2 === 0 && onSegment(b, c, d)) ||
+        (d3 === 0 && onSegment(c, a, b)) ||
+        (d4 === 0 && onSegment(d, a, b)));
+}
+function rectCorners(b) {
+    return [
+        [b.west, b.south],
+        [b.east, b.south],
+        [b.east, b.north],
+        [b.west, b.north]
+    ];
+}
+function segmentHitsRect(a, b, r) {
+    if (inRect(a, r) || inRect(b, r))
+        return true;
+    const c = rectCorners(r);
+    return c.some((p, i) => segmentsMeet(a, b, p, c[(i + 1) % 4]));
+}
+function polygonHitsRect(polygon, r) {
+    const edges = polygon.flatMap(ringEdges);
+    if (edges.length === 0)
+        return false;
+    if (edges.some(([a]) => inRect(a, r)))
+        return true;
+    if (rectCorners(r).some((p) => inPolygon(p, polygon)))
+        return true;
+    return edges.some(([a, b]) => segmentHitsRect(a, b, r));
+}
+/**
+ * Whether the item is in view: a shape (`geometry`) when it intersects `bounds` (bbox pre-check,
+ * then the exact test; holes count), anything else when its `lngLat` is inside. Edges included.
+ */
+export function intersectsBounds(item, bounds) {
+    const { geometry } = item;
+    const polygons = geometry && polygonsOf(geometry);
+    const lines = geometry && linesOf(geometry);
+    if (!geometry || (!polygons && !lines && geometry.type !== "Point")) {
+        return inRect(item.lngLat, bounds);
+    }
+    if (geometry.type === "Point")
+        return inRect(geometry.coordinates, bounds);
+    const box = item.bbox ?? geometryBbox(geometry);
+    if (!box ||
+        box[0] > bounds.east ||
+        box[2] < bounds.west ||
+        box[1] > bounds.north ||
+        box[3] < bounds.south) {
+        return false;
+    }
+    if (polygons)
+        return polygons.some((polygon) => polygonHitsRect(polygon, bounds));
+    return lines.some((line) => line.some((p, i) => i === 0 ? line.length === 1 && inRect(p, bounds) : segmentHitsRect(line[i - 1], p, bounds)));
+}
+/** Sutherland–Hodgman: the ring clipped to the rectangle (open, no repeated first point). */
+function clipRing(ring, r) {
+    let pts = ringEdges(ring).map(([a]) => [a[0], a[1]]);
+    const sides = [
+        [(p) => p[0] >= r.west, (a, b) => atX(a, b, r.west)],
+        [(p) => p[0] <= r.east, (a, b) => atX(a, b, r.east)],
+        [(p) => p[1] >= r.south, (a, b) => atY(a, b, r.south)],
+        [(p) => p[1] <= r.north, (a, b) => atY(a, b, r.north)]
+    ];
+    for (const [keep, cut] of sides) {
+        const out = [];
+        for (let i = 0; i < pts.length; i++) {
+            const cur = pts[i];
+            const prev = pts[(i + pts.length - 1) % pts.length];
+            if (keep(cur)) {
+                if (!keep(prev))
+                    out.push(cut(prev, cur));
+                out.push(cur);
+            }
+            else if (keep(prev)) {
+                out.push(cut(prev, cur));
+            }
+        }
+        pts = out;
+        if (pts.length === 0)
+            break;
+    }
+    return pts;
+}
+const atX = (a, b, x) => [
+    x,
+    a[1] + ((b[1] - a[1]) * (x - a[0])) / (b[0] - a[0])
+];
+const atY = (a, b, y) => [
+    a[0] + ((b[0] - a[0]) * (y - a[1])) / (b[1] - a[1]),
+    y
+];
+function openArea(pts) {
+    let area = 0;
+    for (let i = 0; i < pts.length; i++) {
+        const [a, b] = [pts[i], pts[(i + 1) % pts.length]];
+        area += a[0] * b[1] - b[0] * a[1];
+    }
+    return Math.abs(area) / 2;
+}
+/**
+ * A point well inside the clipped polygon (outer ring, then holes): the midpoint of the widest
+ * interior span of a horizontal line through its middle. When that line has none (a C shape,
+ * bands around a hole), the widest span among lines between neighboring vertex heights.
+ */
+function polygonInteriorPoint(rings) {
+    const ys = [...new Set(rings.flatMap((ring) => ring.map((p) => p[1])))].sort((a, b) => a - b);
+    if (ys.length < 2)
+        return null;
+    const middle = widestSpan(rings, ys, [(ys[0] + ys[ys.length - 1]) / 2]);
+    if (middle)
+        return middle;
+    const gaps = [];
+    for (let i = 1; i < ys.length; i++)
+        gaps.push((ys[i - 1] + ys[i]) / 2);
+    return widestSpan(rings, ys, gaps);
+}
+/** The midpoint of the widest interior span on any of the horizontal `lines`. */
+function widestSpan(rings, ys, lines) {
+    let best = null;
+    let width = 0;
+    for (let y of lines) {
+        // On a vertex height the crossings double up; step off it.
+        if (ys.includes(y))
+            y += (ys[ys.length - 1] - ys[0]) * 1e-9;
+        const xs = [];
+        for (const ring of rings) {
+            for (let i = 0; i < ring.length; i++) {
+                const [a, b] = [ring[i], ring[(i + 1) % ring.length]];
+                if (a[1] > y !== b[1] > y)
+                    xs.push(atY(a, b, y)[0]);
+            }
+        }
+        xs.sort((a, b) => a - b);
+        for (let i = 0; i + 1 < xs.length; i += 2) {
+            if (xs[i + 1] - xs[i] > width) {
+                width = xs[i + 1] - xs[i];
+                best = [(xs[i] + xs[i + 1]) / 2, y];
+            }
+        }
+    }
+    return best;
+}
+/** Liang–Barsky: the segment clipped to the rectangle, or `null` when it misses. */
+function clipSegment(a, b, r) {
+    const dx = b[0] - a[0];
+    const dy = b[1] - a[1];
+    let t0 = 0;
+    let t1 = 1;
+    const checks = [
+        [-dx, a[0] - r.west],
+        [dx, r.east - a[0]],
+        [-dy, a[1] - r.south],
+        [dy, r.north - a[1]]
+    ];
+    for (const [p, q] of checks) {
+        if (p === 0) {
+            if (q < 0)
+                return null;
+        }
+        else {
+            const t = q / p;
+            if (p < 0)
+                t0 = Math.max(t0, t);
+            else
+                t1 = Math.min(t1, t);
+            if (t0 > t1)
+                return null;
+        }
+    }
+    return [
+        [a[0] + t0 * dx, a[1] + t0 * dy],
+        [a[0] + t1 * dx, a[1] + t1 * dy]
+    ];
+}
+/**
+ * A point of the shape inside `view`: `center` when the shape contains it; otherwise a point well
+ * inside the shape's visible part (polygons: the largest clipped one, never in a hole; lines: the
+ * middle of the longest visible piece); `null` when nothing of it is visible.
+ */
+export function shapeAnchor(geometry, view, center) {
+    const polygons = polygonsOf(geometry);
+    if (polygons) {
+        if (inRect(center, view) && containsPoint(geometry, center))
+            return center;
+        // Visible parts, largest first; the first that yields a point wins.
+        const parts = [];
+        for (const polygon of polygons) {
+            if (!polygon[0] || ringEdges(polygon[0]).length === 0)
+                continue;
+            const rings = polygon.map((ring) => clipRing(ring, view));
+            const area = rings[0].length >= 3 ? openArea(rings[0]) : 0;
+            if (area > 0)
+                parts.push({ rings: rings.filter((r, i) => i === 0 || r.length >= 3), area });
+        }
+        parts.sort((a, b) => b.area - a.area);
+        for (const { rings } of parts) {
+            const at = polygonInteriorPoint(rings);
+            if (at)
+                return at;
+        }
+        return null;
+    }
+    const lines = linesOf(geometry);
+    if (lines) {
+        let best = null;
+        let length = -1;
+        for (const line of lines) {
+            for (let i = 1; i < line.length; i++) {
+                const piece = clipSegment(line[i - 1], line[i], view);
+                if (!piece)
+                    continue;
+                const len = Math.hypot(piece[1][0] - piece[0][0], piece[1][1] - piece[0][1]);
+                if (len > length) {
+                    length = len;
+                    best = [(piece[0][0] + piece[1][0]) / 2, (piece[0][1] + piece[1][1]) / 2];
+                }
+            }
+        }
+        return best;
+    }
+    return null;
+}

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

@@ -12,6 +12,8 @@ export { legendSection } from "./ui/legend-data.js";
 export type { LegendBar as LegendBarData, LegendSection } from "./ui/legend-data.js";
 export { rowLabel } from "./ui/feature-list.js";
 export type { SortBy } from "./ui/feature-list.js";
+export { geometryBbox, intersectsBounds } from "./core/shape-view.js";
+export type { Bbox } from "./core/shape-view.js";
 export { pointsPlugin } from "./plugins/points.svelte.js";
 export type { ClusterInfo, ClusterLayerArgs, PointsOptions, PointsTooltipEnv } from "./plugins/points.svelte.js";
 export type { ClusterLayers } from "./plugins/points-clusters.js";

package/dist/index.js

@@ -10,6 +10,7 @@ export { default as ViewSummary } from "./ui/ViewSummary.svelte";
 export { default as MapControls } from "./ui/MapControls.svelte";
 export { legendSection } from "./ui/legend-data.js";
 export { rowLabel } from "./ui/feature-list.js";
+export { geometryBbox, intersectsBounds } from "./core/shape-view.js";
 export { pointsPlugin } from "./plugins/points.svelte.js";
 export { colorExpression, levelKeyExpression, opacityExpression } from "./plugins/style.js";
 export { shapesPlugin } from "./plugins/shapes.svelte.js";

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

@@ -1,3 +1,4 @@
+import { geometryBbox } from "../core/shape-view.js";
 import { untrack } from "svelte";
 import { decodeRef, selectionId } from "../data/refs.js";
 import { levelFor, NO_LEVEL } from "../data/scale.js";
@@ -88,6 +89,17 @@ export function shapesPlugin(options) {
     /** Plain mode ignores the source's scale. */
     const currentScale = () => (choropleth ? scales.current() : NO_SCALE);
     const legend = () => (choropleth ? scales.legend() : null);
+    // Each feature's label point and bbox, measured once per feature object (once per data load):
+    // `features()` runs on every move. Per plugin instance, so two maps share nothing.
+    const measured = new WeakMap();
+    const measure = (feature) => {
+        let m = measured.get(feature);
+        if (!m) {
+            m = { lngLat: labelPoint(feature.geometry), bbox: geometryBbox(feature.geometry) };
+            measured.set(feature, m);
+        }
+        return m;
+    };
     function features() {
         const collection = source.features;
         if (!collection)
@@ -101,8 +113,10 @@ export function shapesPlugin(options) {
             if (!props || !feature.geometry)
                 continue;
             const ref = decodeRef(props.refKey);
-            const lngLat = labelPoint(feature.geometry);
-            if (!ref || !lngLat)
+            if (!ref)
+                continue;
+            const { lngLat, bbox } = measure(feature);
+            if (!lngLat)
                 continue;
             items.push({
                 refKey: props.refKey,
@@ -113,6 +127,8 @@ export function shapesPlugin(options) {
                 units: scale?.units ?? "",
                 precision,
                 lngLat,
+                geometry: feature.geometry,
+                ...(bbox && { bbox }),
                 selectable: selectable && selectionId(ref) !== null
             });
         }
@@ -303,5 +319,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 {};