@sjvair/map-sdk 0.1.0-beta.1 → 0.1.0-beta.10

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

@@ -8,6 +8,8 @@
 	"mapsdk_list_row": "{name}, {value} {units}, {level}",
 	"mapsdk_list_row_no_units": "{name}, {value}, {level}",
 	"mapsdk_list_row_no_value": "{name}, no reading",
+	"mapsdk_list_row_level": "{name}, {level}",
+	"mapsdk_list_row_detail": "{name}, {detail}",
 	"mapsdk_list_empty": "Nothing on the map in this view",
 	"mapsdk_selected_count_one": "{count} selected",
 	"mapsdk_selected_count_other": "{count} selected",
@@ -37,15 +39,23 @@
 	"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)",
-	"mapsdk_collocation_updated": "Last updated {when}"
+	"mapsdk_collocation_updated": "Last updated {when}",
+	"mapsdk_card_close": "Close"
 }

package/dist/data/selection.d.ts

@@ -4,4 +4,10 @@ export interface PickGesture {
 }
 export declare function selectionKind(ref: FeatureRef): "monitors" | "regions" | null;
 export declare function applyPick(current: SpatialSelection | null, ref: FeatureRef, mode: SelectionMode, gesture: PickGesture): SpatialSelection | null;
+/**
+ * A modifier-click (or a card's Select/Remove): toggles `ref`. In `single` mode it is the
+ * selection, or `null` when it already is; in `multiple` mode it is added or removed (another
+ * kind starts a new selection, and removing the last id gives `null`).
+ */
+export declare function toggleInSelection(current: SpatialSelection | null, ref: FeatureRef, mode: SelectionMode): SpatialSelection | null;
 export declare function selectionKeys(sel: SpatialSelection | null): Set<string>;

package/dist/data/selection.js

@@ -23,6 +23,27 @@ export function applyPick(current, ref, mode, gesture) {
     }
     return { kind, ids: [...current.ids, id] };
 }
+/**
+ * A modifier-click (or a card's Select/Remove): toggles `ref`. In `single` mode it is the
+ * selection, or `null` when it already is; in `multiple` mode it is added or removed (another
+ * kind starts a new selection, and removing the last id gives `null`).
+ */
+export function toggleInSelection(current, ref, mode) {
+    const kind = selectionKind(ref);
+    const id = selectionId(ref);
+    if (mode === "none" || kind === null || id === null)
+        return current;
+    const has = current?.kind === kind && current.ids.includes(id);
+    if (mode === "single")
+        return has ? null : { kind, ids: [id] };
+    if (!current || current.kind !== kind)
+        return { kind, ids: [id] };
+    if (has) {
+        const ids = current.ids.filter((x) => x !== id);
+        return ids.length ? { kind, ids } : null;
+    }
+    return { kind, ids: [...current.ids, id] };
+}
 export function selectionKeys(sel) {
     if (!sel)
         return new Set();

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";
@@ -54,3 +56,4 @@ export type { FireDetection, FireGroup } from "./presets/fire-groups.js";
 export { collocationSitesPlugin, COLLOCATION_CROSSHAIR_COLOR } from "./presets/collocation-sites.js";
 export type { CollocationSitesPluginOptions } from "./presets/collocation-sites.js";
 export { circle, CROSSHAIR_ICON_SIZE, square, triangle, withCrosshair } from "./plugins/icons.js";
+export type { CardContext, CardOptions } from "./ui/card.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

@@ -60,8 +60,9 @@ export interface PointsOptions<P extends MapFeatureProperties> {
     sortKey?(props: P): number;
     /**
      * Limits every layer the plugin draws (points, clusters, selection) to a zoom range: visible
-     * from `min` (inclusive) up to `max` (exclusive). Set on the layers, so it switches live while
-     * zooming. Default: all zooms.
+     * from `min` (inclusive) up to `max` (exclusive) of the camera zoom, switching live while
+     * zooming (layer visibility, not layer zoom ranges, so ranges that meet leave no gap on a
+     * globe). Default: all zooms.
      */
     zoomRange?: {
         min?: number;
@@ -75,6 +76,17 @@ export interface PointsOptions<P extends MapFeatureProperties> {
      * it loads.
      */
     legendTitle?: "layer" | "entry-type";
+    /**
+     * A short text for a feature with no level (e.g. "Level 2 charger"), shown in the feature list,
+     * its accessible name, and the generic tooltip where "No level" would be. Ignored for a
+     * 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

@@ -93,6 +93,7 @@ export function pointsPlugin(options) {
             if (!ref)
                 continue;
             const [lng, lat] = geometry.coordinates;
+            const detail = options.detail?.(props)?.trim();
             items.push({
                 refKey: props.refKey,
                 ref,
@@ -102,7 +103,9 @@ export function pointsPlugin(options) {
                 units: scale?.units ?? "",
                 precision,
                 lngLat: [lng, lat],
-                selectable: selectable && selectionId(ref) !== null
+                selectable: selectable && selectionId(ref) !== null,
+                ...(detail ? { detail } : {}),
+                ...(options.truncateValues ? { truncate: true } : {})
             });
         }
         return items;
@@ -209,15 +212,39 @@ export function pointsPlugin(options) {
             }
             return spec;
         }
-        /** The spec limited to the plugin's zoom range. */
+        // The zoom range shows and hides the layers by the camera zoom, not with layer
+        // minzoom/maxzoom: on a globe MapLibre uses the next zoom's tiles a little before the camera
+        // gets there and leaves a layer out of tiles at or above its maxzoom, so two plugins whose
+        // ranges meet (fire groups below 10, hotspots from 10) would leave a gap where neither drew.
+        const { min, max } = options.zoomRange ?? {};
+        const ranged = min !== undefined || max !== undefined;
+        const inRange = () => {
+            const zoom = gl.getZoom();
+            return (min === undefined || zoom >= min) && (max === undefined || zoom < max);
+        };
+        let shown = ranged ? inRange() : true;
+        /** The spec, hidden while the camera is outside the plugin's zoom range. */
         function zoomed(spec) {
-            const { min, max } = options.zoomRange ?? {};
+            if (!ranged)
+                return spec;
+            const layout = spec.layout;
             return {
                 ...spec,
-                ...(min !== undefined ? { minzoom: min } : {}),
-                ...(max !== undefined ? { maxzoom: max } : {})
+                layout: { ...layout, visibility: shown ? "visible" : "none" }
             };
         }
+        const onZoom = () => {
+            if (dead || inRange() === shown)
+                return;
+            shown = !shown;
+            for (const layerId of layers) {
+                if (gl.getLayer(layerId)) {
+                    gl.setLayoutProperty(layerId, "visibility", shown ? "visible" : "none");
+                }
+            }
+        };
+        if (ranged)
+            gl.on("zoom", onZoom);
         function removeLayers() {
             for (const layerId of layers.toReversed()) {
                 if (gl.getLayer(layerId))
@@ -447,6 +474,8 @@ export function pointsPlugin(options) {
         });
         return () => {
             dead = true;
+            if (ranged)
+                gl.off("zoom", onZoom);
             providers = null;
             live = null;
         };

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;
 }