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

package/README.md

@@ -135,7 +135,13 @@ default MapTiler Streets v4 variants (build on `defaultBasemaps()`, which `creat
 sjvair.com setup is `{ ...defaultBasemaps(), excludedLayers: [] }`); `config.initialView` and
 `config.cooperativeGestures` set the camera and gesture handling. `config.projection` (`"mercator"`
 by default, or `"globe"`) and `config.space` (`false` by default, or `{ preset: "milkyway" }` for a
-space background behind the globe) are passed to MapTiler only when set.
+space background behind the globe) are passed to MapTiler only when set. `config.telemetry: false`
+turns off MapTiler's telemetry (a usage report of the SDK version, API key, and session id, sent
+about 2 s after each map is created) before the map is created. It is a page-wide setting in
+MapTiler's SDK: once one map turns it off, it stays off for every map on the page. MapTiler's
+session id (`mtsid`) stays on either way, since MapTiler bills SDK maps by session (without one,
+every tile request counts on its own) and its tile cache needs it. By default (`true`) MapTiler's
+own default applies.
 
 Without `createMonitorsStore`, build a `DataSource` yourself (below).
 
@@ -207,7 +213,9 @@ the legend section's title: `layerLabel` (default) or the entry type's label fro
 provider (`monitorsPlugin` uses the latter, so its section reads "PM2.5"; `layerLabel` still names
 the layer in the list, selection bar and summary). `Legend` takes `order` (`"bottom-first"`,
 default, or `"top-first"`) and `framed` (`true`, default, draws its own card; `false` draws no
-border, background, padding or fixed width, so a host's own card frames it). Without a frame,
+border, background, padding or fixed width, so a host's own card frames it). The framed legend
+and the feature list panel are 21rem wide at most, and never wider than the map less 2rem (the
+window less 2rem outside a `MapView`), so they fit a small map on a wide screen. Without a frame,
 translucent swatches blend over the nearest ancestor with an opaque background (a see-through
 card is skipped), else `--background`; that color is read on mount, when `framed` changes, and on
 a theme change, but not when the card changes color through its own class or style.
@@ -254,7 +262,9 @@ source loads, fails, or is unavailable, the legend says so (a failure offers "Tr
 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. Fire values are cut off
-rather than rounded (see `truncateValues`). Times in the tooltips read like sjvair.com's map, in
+rather than rounded (see `truncateValues`). On a category scale, a value that is its level's code
+(smoke's `"light"`, the heat score's `2`) isn't shown: the list row, the tooltip, and the row's
+accessible name give only the level label. 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
@@ -548,6 +558,29 @@ local sjvair.com stack at `http://localhost:8000`.
 
 ## Changes
 
+### 0.1.0-beta.7
+
+- **Plugins come back at once after a basemap switch.** After picking another basemap, monitors,
+  fire, smoke and the other layers were missing until every tile of the new basemap had loaded
+  and drawn (4–10 s on a slow connection). They are now added as soon as the new style loads, as
+  sjvair.com's map does. A theme change while tiles are loading no longer waits either.
+- **`config.telemetry: false`** turns off MapTiler's telemetry (its usage report) for the page,
+  before the map is created. Sessions stay on, so billing by session and the tile cache are
+  unchanged. By default nothing changes.
+- **The feature list panel and the framed legend fit the map.** They were capped at the window's
+  width less 2rem; inside a `MapView` they are now capped at the map's width less 2rem, so a small
+  map on a wide screen doesn't overflow. MapView sets `--mapsdk-map-width` for this.
+
+### 0.1.0-beta.6
+
+- **A category reading is shown once.** When a feature's value is its category level's code, the
+  list row, the tooltip, and the row's accessible name show only the level label. Smoke rows read
+  "Smoke, Light" (was "light Light"), burn status "Burning Discouraged", and heat score
+  "Moderate" (the 0–4 number is no longer shown). Number scales such as PM2.5 and fire power are
+  unchanged, and a category value that matches no level is still shown.
+- **New message key for hosts with their own catalog:** `mapsdk_list_row_level`
+  (`"{name}, {level}"`).
+
 ### 0.1.0-beta.5
 
 - **Shapes that cover the view are in view.** The feature list and the view summary count a shape

package/dist/core/create-map.svelte.d.ts

@@ -32,6 +32,14 @@ export interface MapConfig {
     space?: false | {
         preset: string;
     };
+    /**
+     * Default `true`: MapTiler's own default. `false` turns off MapTiler's telemetry (a usage
+     * report of the SDK version, the API key, and the session id, sent about 2 s after each map is
+     * created) before the GL map is created. It is a page-wide setting in MapTiler's SDK, so once
+     * one map turns it off it stays off for every map on the page. MapTiler's session id (`mtsid`)
+     * stays on: MapTiler bills SDK maps by session, and its tile cache needs sessions.
+     */
+    telemetry?: boolean;
 }
 export interface CreateMapOptions {
     config: MapConfig;

package/dist/core/create-map.svelte.js

@@ -381,7 +381,9 @@ class MapContextImpl {
         this.#host.attach(gl);
         this.#router.attach(gl);
         gl.on("moveend", this.#onMoveEnd);
-        this.basemap.attach(gl, () => this.#host.restyle(), () => {
+        this.basemap.attach(gl, 
+        // Called from style.load: the style is loaded, though its tiles may not be.
+        () => this.#host.restyle(true), () => {
             this.#ready = false;
             this.#readyRequested = false;
             this.#host.suspend();

package/dist/core/plugin-host.svelte.d.ts

@@ -57,11 +57,15 @@ export declare class PluginHost {
      */
     suspend(): void;
     /**
-     * Tears down and sets up every plugin again (after a basemap change), once the style loads.
-     * On a loaded style the setup is synchronous, so only map events and theme watching call this,
-     * never code inside an effect: roots created there can stop (see the class comment).
+     * Tears down and sets up every plugin again (after a basemap or theme change), once the style
+     * loads. Pass `styleLoaded` from a `style.load` listener: `isStyleLoaded()` stays false there
+     * until every tile has loaded, and `style.load` has already fired, so waiting would last until
+     * `idle`. A live host's style is loaded too (`suspend` comes before every `setStyle`), so a theme
+     * change sets up at once as well. On a loaded style the setup is synchronous, so only map events
+     * and theme watching call this, never code inside an effect: roots created there can stop (see
+     * the class comment).
      */
-    restyle(): void;
+    restyle(styleLoaded?: boolean): void;
     /** Tears down every plugin. The gl is not touched after this returns. */
     detach(): void;
 }

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

@@ -161,15 +161,26 @@ export class PluginHost {
         this.#teardownAll();
     }
     /**
-     * Tears down and sets up every plugin again (after a basemap change), once the style loads.
-     * On a loaded style the setup is synchronous, so only map events and theme watching call this,
-     * never code inside an effect: roots created there can stop (see the class comment).
+     * Tears down and sets up every plugin again (after a basemap or theme change), once the style
+     * loads. Pass `styleLoaded` from a `style.load` listener: `isStyleLoaded()` stays false there
+     * until every tile has loaded, and `style.load` has already fired, so waiting would last until
+     * `idle`. A live host's style is loaded too (`suspend` comes before every `setStyle`), so a theme
+     * change sets up at once as well. On a loaded style the setup is synchronous, so only map events
+     * and theme watching call this, never code inside an effect: roots created there can stop (see
+     * the class comment).
      */
-    restyle() {
+    restyle(styleLoaded = false) {
         if (!this.#gl)
             return;
+        const loaded = styleLoaded || this.#live;
         this.#teardownAll();
-        this.#whenStyleLoaded(true);
+        if (loaded) {
+            this.#cancelStyleWait();
+            this.#setupAll();
+        }
+        else {
+            this.#whenStyleLoaded(true);
+        }
     }
     /** Tears down every plugin. The gl is not touched after this returns. */
     detach() {

package/dist/data/messages/en.json

@@ -8,6 +8,7 @@
 	"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",

package/dist/ui/FeatureList.svelte

@@ -11,11 +11,11 @@
 		rowLabel,
 		levelText,
 		shownLevel,
+		shownValue,
 		sortItems,
 		typeaheadIndex,
 		type SortBy
 	} from "./feature-list.js";
-	import { formatValue as formatNumber } from "./value-format.js";
 
 	interface Props {
 		map: MapContext;
@@ -267,13 +267,6 @@
 		pick(rows[index], e.shiftKey || e.metaKey || e.ctrlKey);
 	}
 
-	function formatValue(row: Row): string {
-		if (row.value === null) return "";
-		return typeof row.value === "number"
-			? formatNumber(row.value, row.precision, map.format, row.truncate)
-			: row.value;
-	}
-
 	onDestroy(() => {
 		clearTimeout(typeaheadTimer);
 		clearTimeout(menuSentTimer);
@@ -332,6 +325,7 @@
 				{@const index = range.start + i}
 				{@const level = shownLevel(row)}
 				{@const levelPlace = levelText(row, map.messages)}
+				{@const value = shownValue(row, map.format)}
 				{@const isOn = isSelected(row)}
 				<!-- Options aren't focused: the listbox holds focus and handles keys (aria-activedescendant). -->
 				<!-- svelte-ignore a11y_click_events_have_key_events, a11y_interactive_supports_focus -->
@@ -359,7 +353,7 @@
 					</span>
 					<span class="mapsdk-list-name">{row.name}</span>
 					<span class="mapsdk-list-value">
-						{formatValue(row)}{#if row.units && row.value !== null}&nbsp;{row.units}{/if}
+						{value ?? ""}{#if row.units && value !== null}&nbsp;{row.units}{/if}
 					</span>
 					<span class="mapsdk-list-level text-xs">
 						{#if levelPlace.kind !== "detail"}
@@ -387,7 +381,8 @@
 		flex-direction: column;
 		position: relative;
 		width: 21rem;
-		max-width: calc(100vw - 2rem);
+		/* The map's width inside a MapView (set there), else the window's. */
+		max-width: calc(var(--mapsdk-map-width, 100vw) - 2rem);
 		max-height: 100%;
 		box-sizing: border-box;
 		border: 1px solid var(--card-border, var(--border));

package/dist/ui/Legend.svelte

@@ -143,7 +143,8 @@
 		flex-direction: column;
 		gap: 0.75rem;
 		width: 21rem;
-		max-width: calc(100vw - 2rem);
+		/* The map's width inside a MapView (set there), else the window's. */
+		max-width: calc(var(--mapsdk-map-width, 100vw) - 2rem);
 		box-sizing: border-box;
 		padding: 0.75rem 1rem;
 		border: 1px solid var(--card-border, var(--border));

package/dist/ui/TooltipItem.svelte

@@ -3,9 +3,8 @@
 	import type { MessageProvider } from "../data/messages.js";
 	import type { FeatureListItem } from "../core/plugin.js";
 	import { NO_LEVEL } from "../data/scale.js";
-	import { levelText } from "./feature-list.js";
+	import { levelText, shownValue } from "./feature-list.js";
 	import { levelChip } from "./level-chip.js";
-	import { formatValue } from "./value-format.js";
 
 	// The generic tooltip body under a feature's name: its value and a chip with its level. Shared
 	// by MapTooltip and by plugins that show it for features they don't list.
@@ -26,13 +25,8 @@
 		const chip = levelChip(level?.color);
 		return chip ? `background:${chip.background};color:${chip.text}` : "";
 	});
-	const valueText = $derived(
-		item.value == null
-			? null
-			: typeof item.value === "number"
-				? formatValue(item.value, item.precision, format, item.truncate)
-				: item.value
-	);
+	// A category reading shows only its level chip: its value is the level's code.
+	const valueText = $derived(shownValue(item, format));
 </script>
 
 <div class="mapsdk-tooltip-item">

package/dist/ui/feature-list.d.ts

@@ -26,6 +26,11 @@ export declare function inView(items: FeatureListItem[], bounds: Bounds): Featur
  * label on a neutral swatch.
  */
 export declare function shownLevel(item: FeatureListItem): Level | null;
+/**
+ * The value as shown, or `null` for none. A category reading, whose value is its level's code
+ * (smoke's "light", the heat score's 2), shows no value: its level label already says it.
+ */
+export declare function shownValue(item: FeatureListItem, format: FormatProvider): string | null;
 /** A sorted copy. `value`: highest first, null values and no level last; ties and `name` by name. */
 export declare function sortItems(items: FeatureListItem[], by: SortBy): FeatureListItem[];
 /** The first index at or after `from` (wrapping) whose name starts with `query`, any case; -1 if none. */

package/dist/ui/feature-list.js

@@ -29,6 +29,20 @@ export function inView(items, bounds) {
 export function shownLevel(item) {
     return item.level !== NO_LEVEL ? item.level : null;
 }
+/**
+ * The value as shown, or `null` for none. A category reading, whose value is its level's code
+ * (smoke's "light", the heat score's 2), shows no value: its level label already says it.
+ */
+export function shownValue(item, format) {
+    if (item.value === null)
+        return null;
+    const level = shownLevel(item);
+    if (level && level.value !== null && level.value === item.value)
+        return null;
+    return typeof item.value === "number"
+        ? formatValue(item.value, item.precision, format, item.truncate)
+        : item.value;
+}
 const collator = new Intl.Collator("en-US");
 /** A value's sort weight; `null` sorts last. Category values sort by their level's tier. */
 function weight(item) {
@@ -82,16 +96,18 @@ export function levelText(item, messages) {
 /** A row's accessible name: name, value, units, and level label (or detail). */
 export function rowLabel(item, messages, format) {
     const level = levelText(item, messages);
-    if (item.value === null) {
+    const value = shownValue(item, format);
+    if (value === null) {
+        // A category reading: its level is its value.
+        if (item.value !== null && level.kind === "level")
+            return messages("mapsdk_list_row_level", { name: item.name, level: level.text });
         return level.kind === "detail"
             ? messages("mapsdk_list_row_detail", { name: item.name, detail: level.text })
             : messages("mapsdk_list_row_no_value", { name: item.name });
     }
     const params = {
         name: item.name,
-        value: typeof item.value === "number"
-            ? formatValue(item.value, item.precision, format, item.truncate)
-            : item.value,
+        value,
         units: item.units,
         level: level.text
     };

package/dist/view/MapView.svelte

@@ -250,6 +250,7 @@
 	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} />

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.5",
+	"version": "0.1.0-beta.7",
 	"license": "MIT",
 	"repository": {
 		"type": "git",