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

package/dist/view/MapView.svelte

@@ -11,8 +11,10 @@
 	import type { SortBy } from "../ui/feature-list.js";
 	import MapControls from "../ui/MapControls.svelte";
 	import MapTooltip from "../ui/MapTooltip.svelte";
+	import type { CardOptions } from "../ui/card.js";
 	import SelectionBar from "../ui/SelectionBar.svelte";
 	import ViewSummary from "../ui/ViewSummary.svelte";
+	import PickNotice from "../ui/PickNotice.svelte";
 	import { createDataCredits } from "../ui/data-credits.svelte.js";
 	import { createGlMap, setDataCredits, watchTheme } from "./create-gl-map.js";
 	import {
@@ -56,6 +58,13 @@
 		 * Keyboard focus from the feature list always shows it pinned.
 		 */
 		tooltip?: "pinned" | "pointer";
+		/**
+		 * `true`: a click or tap on a feature pins its reading card, which takes the pointer and
+		 * closes with Esc, its Close button, or a click elsewhere on the map; focusing a
+		 * feature-list row shows the same card. Selection and `featureclick` are unchanged.
+		 * `{ actions }` also puts the host's buttons on the card (see `CardContext`).
+		 */
+		card?: boolean | CardOptions;
 	}
 
 	let {
@@ -67,9 +76,50 @@
 		featureList = true,
 		selectionBar = true,
 		controls = "mapsdk",
-		tooltip = "pinned"
+		tooltip = "pinned",
+		card = false
 	}: Props = $props();
 
+	// Pinning only, no plugin setup, so it's safe in an effect.
+	// Boolean(): an untyped host's `null` is off, like `false`.
+	const cardOn = $derived(Boolean(card));
+	const cardActions = $derived(card && typeof card === "object" ? card.actions : undefined);
+
+	$effect(() => {
+		map.setCardEnabled(cardOn);
+		return () => map.setCardEnabled(false);
+	});
+
+	/**
+	 * Esc outside the card closes it when focus is in this map or nowhere (the body), so a key
+	 * pressed in another map, or elsewhere on the page, leaves this card alone.
+	 */
+	function onWindowKeydown(e: KeyboardEvent) {
+		if (e.key !== "Escape" || e.defaultPrevented || !map.pinned) return;
+		const active = document.activeElement;
+		if (active && active !== document.body && !root.contains(active)) return;
+		// Focus nowhere: only the most recently pinned card on the page closes.
+		if (!active || active === document.body) {
+			let latest: HTMLElement | null = null;
+			for (const el of document.querySelectorAll<HTMLElement>("[data-mapsdk-pinned-at]")) {
+				if (!latest || Number(el.dataset.mapsdkPinnedAt) > Number(latest.dataset.mapsdkPinnedAt)) {
+					latest = el;
+				}
+			}
+			if (latest && latest !== root) return;
+		}
+		e.preventDefault();
+		map.unpin();
+	}
+
+	// When this map's card was pinned, so Esc with focus nowhere closes the latest card only.
+	$effect(() => {
+		const pinned = map.pinned;
+		if (!root) return;
+		if (pinned) root.dataset.mapsdkPinnedAt = String(performance.now());
+		else delete root.dataset.mapsdkPinnedAt;
+	});
+
 	const list = $derived(resolveFeatureList(featureList));
 	const sides = $derived(list ? cornerSides(list.position) : null);
 
@@ -148,6 +198,12 @@
 	function onListKeydown(e: KeyboardEvent) {
 		if (e.key !== "Escape") return;
 		e.preventDefault();
+		// The card closes first (and the focused row's card with it); the next Esc closes the panel.
+		if (cardOn && (map.pinned || map.focusedKey)) {
+			map.unpin();
+			map.focusFeature(null);
+			return;
+		}
 		listOpen = false;
 		listButton?.focus();
 	}
@@ -242,6 +298,8 @@
 	});
 </script>
 
+<svelte:window onkeydown={onWindowKeydown} />
+
 <div
 	bind:this={root}
 	bind:clientWidth={width}
@@ -250,9 +308,9 @@
 	role="region"
 	aria-label={label ?? map.messages("mapsdk_map_label")}
 	data-mapsdk-map={map.uid}
+	style:--mapsdk-map-width={width > 0 ? `${width}px` : undefined}
 >
 	<div class="mapsdk-gl" bind:this={glContainer}></div>
-	<MapTooltip {map} {project} {width} {height} mode={tooltip} gl={projector} />
 	{#if list && sides}
 		<div
 			class="mapsdk-list-panel"
@@ -282,11 +340,23 @@
 			{/if}
 		</div>
 	{/if}
+	<!-- After the list, so Tab from a list row reaches the pinned card's Close button. -->
+	<MapTooltip
+		{map}
+		{project}
+		{width}
+		{height}
+		mode={tooltip}
+		gl={projector}
+		card={cardOn}
+		actions={cardActions}
+	/>
 	<!-- After the list, so Tab reaches the List button first. -->
 	{#if selectionBar}
 		<SelectionBar {map} clearRight={list?.position === "top-right" && controls === "none"} />
 	{/if}
 	<ViewSummary {map} />
+	<PickNotice {map} />
 	{#if controls === "mapsdk"}
 		<MapControls {map} gl={projector} />
 	{/if}

package/dist/view/MapView.svelte.d.ts

@@ -2,6 +2,7 @@ import "@maptiler/sdk/dist/maptiler-sdk.css";
 import "../ui/controls.css";
 import type { Snippet } from "svelte";
 import type { MapContext } from "../core/create-map.svelte.js";
+import type { CardOptions } from "../ui/card.js";
 import { type FeatureListOptions } from "./list-placement.js";
 interface Props {
     /** The map to show. Fixed for the component's life. */
@@ -37,6 +38,13 @@ interface Props {
      * Keyboard focus from the feature list always shows it pinned.
      */
     tooltip?: "pinned" | "pointer";
+    /**
+     * `true`: a click or tap on a feature pins its reading card, which takes the pointer and
+     * closes with Esc, its Close button, or a click elsewhere on the map; focusing a
+     * feature-list row shows the same card. Selection and `featureclick` are unchanged.
+     * `{ actions }` also puts the host's buttons on the card (see `CardContext`).
+     */
+    card?: boolean | CardOptions;
 }
 declare const MapView: import("svelte").Component<Props, {}, "">;
 type MapView = ReturnType<typeof MapView>;

package/dist/view/create-gl-map.js

@@ -128,6 +128,10 @@ function recordView(gl, ctx) {
  */
 export function createGlMap(container, ctx, engineControls = false) {
     const { camera, style } = untrack(() => ({ camera: ctx.camera, style: styleOf(ctx) }));
+    // Before the map exists, so its telemetry timer finds it off. Sessions stay on: MapTiler
+    // bills SDK maps by session, and without one every tile request counts on its own.
+    if (ctx.config.telemetry === false)
+        maptilerConfig.telemetry = false;
     const gl = new GlMap({
         container,
         style,

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.1",
+	"version": "0.1.0-beta.10",
 	"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",