@sjvair/map-sdk 0.1.0-beta.6 → 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,19 @@ 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

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/ui/FeatureList.svelte

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