isard 0.2.0 → 0.3.0

package/dist/map.js

@@ -1,36 +1,24 @@
 /**
- * The map: canvas, camera, layers, events and the frame loop. Frames are drawn on demand only: an idle map costs
- * nothing. Hover events are coalesced to one per frame, so the values computed for a mouse position are drawn in the
- * same frame.
+ * The map: canvas, camera, layers, events, overlays, credits and the frame loop. Frames are drawn on demand only: an
+ * idle map costs nothing. Hover events are coalesced to one per frame, so the values computed for a mouse position are
+ * drawn in the same frame. The engine's loading is in engine-loader.ts, its settings from the options in settings.ts,
+ * the camera animations in animation.ts.
  */
-import { BASEMAPS, BODY_TERRAINS, basemapName, HILLSHADE, IGN_ATTRIBUTION, IMAGE_SERVER, imageServerTerrain, SEA, TERRAIN_TILES, TERRAIN_TILES_ATTRIBUTION, TERRAIN_URL, } from "./basemaps.js";
-import { parseCssColor } from "./color.js";
+import { easeTo, flyTo } from "./animation.js";
+import { BASEMAPS, basemapName, HILLSHADE, SEA } from "./basemaps.js";
 import { AttributionControl } from "./controls.js";
-import { DEFAULT_DECODERS } from "./decoders.js";
-import { equirectangularLoader } from "./equirectangular.js";
+import { destroyedEngine, engineUrl, loadEngine, loadFullEngineLater, preloadFullEngine, startTileLoader, } from "./engine-loader.js";
 import { ExtrusionLayer, extrusionStyle } from "./extrusions.js";
 import { CircleLayer, circleStyle, FillLayer, fillStyle, LineLayer, lineStyle, } from "./features.js";
 import { Glyphs } from "./glyphs.js";
+import { equirectangularGrid, gridLoader, gridZooms, resolveGrid } from "./grid.js";
 import { Interaction } from "./interaction.js";
 import { GroundLayer, NetworkLayer, RasterLayer, Tiles3dLayer } from "./layers.js";
-import { TileLoader } from "./loader.js";
+import { atmosphereSettings, bodySettings, haloSettings, rgb, terrainSettings, } from "./settings.js";
 import { injectStyle } from "./style.js";
 import { SymbolLayer, symbolStyle } from "./symbols.js";
 import { encodedTerrainLoader } from "./terrain.js";
 import { BasemapWorkers, defaultWorkerCount, defaultWorkerUrl, VECTOR_BASEMAPS, VectorTiles, } from "./vectortiles.js";
-/** The engine of a destroyed map: every method a no-op returning undefined, but the camera (the last one) and the
- * bounds, which late callers read */
-function destroyed(camera) {
-    return new Proxy({}, {
-        get: (_, name) => {
-            if (name === 'camera')
-                return () => camera;
-            if (name === 'bounds')
-                return () => Float64Array.of(-180, -85, 180, 85);
-            return () => undefined;
-        },
-    });
-}
 /** Reports an error without throwing it here: the console shows it, as an uncaught one */
 function report(error) {
     if (typeof reportError === 'function')
@@ -40,42 +28,6 @@ function report(error) {
             throw error;
         });
 }
-/** The two builds of the engine, each compiled once per page: `core` without 3D Tiles (a third smaller), loaded by
- * every map; `full` with them, loaded for the first 3D Tiles layer, its module shared with the decoding workers. The
- * core engine has the same API but the 3D Tiles methods: its class is typed as the full one. */
-const engines = {};
-function loadEngine(kind, url) {
-    const loaded = engines[kind];
-    if (loaded)
-        return loaded;
-    const loading = (async () => {
-        // The bindings by dynamic import: an application bundles the ones it loads only
-        const [module, bindings] = await Promise.all([
-            compile(url),
-            kind === 'core' ? import('./wasm/isard_core.js') : import('./wasm/isard.js'),
-        ]);
-        await bindings.default({ module_or_path: module });
-        return { module, Engine: bindings.Engine };
-    })().catch((error) => {
-        // A later call tries again (a network error, a wrong URL fixed)
-        delete engines[kind];
-        throw error;
-    });
-    engines[kind] = loading;
-    return loading;
-}
-async function compile(url) {
-    const response = await fetch(url);
-    if (!response.ok)
-        throw new Error(`isard: failed to load the engine from ${url}: ${response.status}`);
-    try {
-        return await WebAssembly.compileStreaming(response.clone());
-    }
-    catch {
-        // Servers that do not send application/wasm
-        return WebAssembly.compile(await response.arrayBuffer());
-    }
-}
 /** Checks a network's arrays before the engine reads them: node index pairs, indices of existing nodes */
 function validateNetwork(nodes, edges) {
     if (nodes.length % 2 !== 0)
@@ -89,134 +41,17 @@ function validateNetwork(nodes, edges) {
             throw new Error(`isard: network edge ${i >> 1} refers to node ${node}, of ${count} nodes`);
     }
 }
-/** The named bodies; a body's `color` is that of its globe under the tiles (the Earth's follows its basemap), its
- * `relief` the range of its ground (the Earth's dry land, from the Dead Sea to Everest). Mars: the sphere of its
- * equatorial radius (its data take planetocentric latitudes), a faint butterscotch halo of dust */
-const BODIES = {
-    earth: { radius: 6378137, flattening: 1 / 298.257223563, atmosphere: true, color: '#cacaca', relief: [-450, 8900] },
-    moon: { radius: 1737400, flattening: 0, atmosphere: false, color: '#77756f', relief: [-9200, 10800] },
-    mars: {
-        radius: 3396190,
-        flattening: 0,
-        atmosphere: 'rgba(232, 168, 120, 0.6)',
-        color: '#b5714a',
-        relief: [-8300, 21300],
-    },
-};
-/** The Earth's halo, RGB 0-1 and its strength: what `atmosphere: true` draws */
-const EARTH_HALO = Float32Array.of(0.42, 0.66, 1, 1);
-/** A body from the option, its defaults filled in */
-function bodySettings(body) {
-    if (body === undefined || typeof body === 'string')
-        return BODIES[body ?? 'earth'];
-    const relief = [-0.01 * body.radius, 0.01 * body.radius];
-    return { flattening: 0, atmosphere: false, color: '#808080', relief, ...body };
-}
-/** The halo of an atmosphere for the engine (RGB 0-1 and its strength, the color's alpha): undefined for none */
-function haloSettings(atmosphere) {
-    if (atmosphere === true)
-        return EARTH_HALO;
-    const color = atmosphere === false ? undefined : parseCssColor(atmosphere);
-    return color && Float32Array.from(color);
-}
-/** The loaders of the relief by encoding, URL and floor: the same loader for the same tiles (the engine keeps its
- * tiles when only the exaggeration changes) */
-const terrainLoaders = new Map();
-function terrainLoader(url, encoding, floor) {
-    const key = `${encoding} ${floor ?? ''} ${url}`;
-    let loader = terrainLoaders.get(key);
-    if (!loader) {
-        loader = encodedTerrainLoader(url, encoding, floor);
-        terrainLoaders.set(key, loader);
-    }
-    return loader;
-}
-/** Relief settings from the option: undefined when off. On the Earth the Terrain Tiles by default (worldwide,
- * Terrarium PNGs decoded in the page) or the IGN terrain model (France, raised by the geoid); NASA's on the Moon and
- * Mars; an ArcGIS image service asked for in the body's Mercator */
-function terrainSettings(terrain, body, radius) {
-    if (!terrain)
-        return undefined;
-    let options = {};
-    if (typeof terrain === 'string')
-        options = { model: terrain };
-    else if (terrain !== true)
-        options = terrain;
-    const earth = (body ?? 'earth') === 'earth';
-    const exaggeration = options.exaggeration ?? 1;
-    if (options.url === undefined && earth) {
-        if (options.model === 'ign') {
-            const geoid = options.geoid ?? true;
-            return { url: TERRAIN_URL, exaggeration, maxZoom: options.maxZoom ?? 15, geoid, attribution: IGN_ATTRIBUTION };
-        }
-        return {
-            url: TERRAIN_TILES.url,
-            exaggeration,
-            maxZoom: options.maxZoom ?? TERRAIN_TILES.maxZoom,
-            geoid: options.geoid ?? false,
-            // The sea floor of the model at sea level: the oceans stay flat under the basemap's water
-            loader: terrainLoader(TERRAIN_TILES.url, 'terrarium', 0),
-            attribution: TERRAIN_TILES_ATTRIBUTION,
-        };
-    }
-    const preset = body === 'moon' || body === 'mars' ? BODY_TERRAINS[body] : undefined;
-    const url = options.url ?? preset?.url;
-    if (url === undefined)
-        throw new Error('isard: the relief of this body needs a url');
-    const encoding = options.encoding ?? 'float32';
-    return {
-        url: IMAGE_SERVER.test(url) ? imageServerTerrain(url, earth, radius) : url,
-        exaggeration,
-        maxZoom: options.maxZoom ?? (options.url === undefined && preset ? preset.maxZoom : 15),
-        geoid: options.geoid ?? false,
-        ...(encoding === 'float32' ? {} : { loader: terrainLoader(url, encoding) }),
-    };
-}
-/** Sky settings for the engine: colors (RGB 0-1) and blends, MapLibre's defaults */
-function atmosphereSettings(options) {
-    if (!options)
-        return undefined;
-    return Float32Array.from([
-        ...rgb(options.skyColor ?? '#9cc7ec'),
-        ...rgb(options.horizonColor ?? '#e8f1f8'),
-        ...rgb(options.fogColor ?? '#f2f5f8'),
-        options.skyHorizonBlend ?? 0.6,
-        options.horizonFogBlend ?? 0.7,
-        options.fogGroundBlend ?? 0.4,
-    ]);
-}
-/** MapLibre's default easing: cubic Bézier (0.25, 0.1, 0.25, 1) */
-export function defaultEasing(t) {
-    if (t <= 0 || t >= 1)
-        return Math.max(0, Math.min(1, t));
-    // Solve x(u) = t for the curve parameter, Newton then bisection
-    const [x1, y1, x2, y2] = [0.25, 0.1, 0.25, 1];
-    const bezier = (u, a, b) => 3 * a * u * (1 - u) ** 2 + 3 * b * u * u * (1 - u) + u ** 3;
-    let u = t;
-    for (let i = 0; i < 8; i += 1) {
-        const x = bezier(u, x1, x2) - t;
-        const dx = 3 * x1 * (1 - u) ** 2 + 6 * (x2 - x1) * u * (1 - u) + 3 * (1 - x2) * u * u;
-        if (Math.abs(x) < 1e-6 || dx === 0)
-            break;
-        u = Math.max(0, Math.min(1, u - x / dx));
-    }
-    return bezier(u, y1, y2);
-}
-const MERCATOR_LAT = 85.051128779806589;
-const toMercator = ([lon, lat]) => {
-    const phi = (Math.max(-MERCATOR_LAT, Math.min(MERCATOR_LAT, lat)) * Math.PI) / 180;
-    return [(lon + 180) / 360, 0.5 - Math.log(Math.tan(Math.PI / 4 + phi / 2)) / (2 * Math.PI)];
-};
-const fromMercator = ([x, y]) => [
-    x * 360 - 180,
-    (Math.atan(Math.sinh(Math.PI * (1 - 2 * y))) * 180) / Math.PI,
-];
-/** A CSS color to RGB 0-1 (its alpha dropped); black if unknown */
-function rgb(color) {
-    const [r, g, b] = parseCssColor(color) ?? [0, 0, 0, 1];
-    return [r, g, b];
-}
 const CORNERS = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+/** Frames the hover picking waits for its answer at most (usually one) */
+const MAX_POLLS = 30;
+/** The name of a basemap, checked: an unknown one throws */
+function checkBasemap(basemap) {
+    const name = basemapName(basemap);
+    if (name !== 'none' && !(name in VECTOR_BASEMAPS) && !(name in BASEMAPS)) {
+        throw new Error(`isard: unknown basemap '${basemap}'`);
+    }
+    return name;
+}
 /** A map (see `GeoMap.create`); layers take it as their host */
 export class GeoMap {
     canvas;
@@ -227,6 +62,8 @@ export class GeoMap {
     vector;
     glyphsUrl;
     basemapWorkerUrl;
+    /** Texture size of the vector basemap's tiles */
+    basemapTileSize;
     container;
     /** Markers and popups, over the canvas */
     overlay;
@@ -279,6 +116,8 @@ export class GeoMap {
     hoverPoint;
     /** Frame polling the engine for the answer of the hover picking, 0 if none */
     hoverPoll = 0;
+    /** Polls of the hover picking under way: given up after `MAX_POLLS` (an answer that never comes) */
+    hoverPolls = 0;
     /** What 'hoverfeature' looks for: within `radius` CSS pixels, in `layers` only if given */
     hoverPicking = {};
     frameRequest = 0;
@@ -294,14 +133,24 @@ export class GeoMap {
     basemapPool;
     /** Stops watching the device pixel ratio */
     unwatchRatio;
+    /** Stops listening to the canvas's context loss and restoration */
+    unwatchContext;
+    /** The loaders of the relief by encoding, URL and floor: the same loader for the same tiles (the engine keeps its
+     * tiles when only the exaggeration changes) */
+    terrainLoaders = new Map();
     /** Loads the engine (once per page) and creates a map filling `container` */
     static async create(container, options = {}) {
         // With 3D Tiles from the start when asked, or when only that engine's URL is given (as before the core engine)
         const full = options.tiles3d === true || (options.wasmUrl !== undefined && options.coreWasmUrl === undefined);
-        const bindings = full
-            ? await loadEngine('full', options.wasmUrl ?? new URL('./isard_bg.wasm', import.meta.url))
-            : await loadEngine('core', options.coreWasmUrl ?? new URL('./isard_core_bg.wasm', import.meta.url));
-        return new GeoMap(container, options, bindings.Engine, full ? bindings.module : undefined);
+        // Before anything is created
+        if (options.basemap !== undefined)
+            checkBasemap(options.basemap);
+        const kind = full ? 'full' : 'core';
+        const bindings = await loadEngine(kind, engineUrl(kind, options));
+        const map = new GeoMap(container, options, bindings.Engine, full ? bindings.module : undefined);
+        if (options.tiles3d === 'preload' && !full)
+            map.preloadTiles3d();
+        return map;
     }
     constructor(container, options, engineClass, tiles3dModule) {
         this.engineClass = engineClass;
@@ -309,6 +158,7 @@ export class GeoMap {
         this.tiles3dOptions = { ...options };
         this.glyphsUrl = options.glyphs;
         this.basemapWorkerUrl = options.basemapWorkerUrl;
+        this.basemapTileSize = options.basemapTileSize;
         this.container = container;
         this.canvas = document.createElement('canvas');
         Object.assign(this.canvas.style, { display: 'block', width: '100%', height: '100%', touchAction: 'none' });
@@ -341,20 +191,26 @@ export class GeoMap {
             globe: (options.projection ?? 'globe') === 'globe',
             sky: options.sky ?? true,
             atmosphere: atmosphereSettings(options.atmosphere),
-            terrain: terrainSettings(options.terrain, options.body, body.radius),
+            terrain: terrainSettings(options.terrain, options.body, body.radius, this.terrainLoader),
             loading: options.loading ?? 'immediate',
             background: rgb(options.background ?? (this.earth ? '#f2f2f0' : '#000000')),
             globeColor: this.earth ? SEA['osm-positron'] : rgb(body.color),
         };
         this.#engine = this.createEngine();
         // The browser may take the GPU away (driver reset, background tab on mobile): the map waits, then rebuilds
-        this.canvas.addEventListener('webglcontextlost', (event) => {
+        const lost = (event) => {
             event.preventDefault();
             this.lost = true;
             cancelAnimationFrame(this.frameRequest);
             this.frameRequest = 0;
-        });
-        this.canvas.addEventListener('webglcontextrestored', () => this.restore());
+        };
+        const restored = () => this.restore();
+        this.canvas.addEventListener('webglcontextlost', lost);
+        this.canvas.addEventListener('webglcontextrestored', restored);
+        this.unwatchContext = () => {
+            this.canvas.removeEventListener('webglcontextlost', lost);
+            this.canvas.removeEventListener('webglcontextrestored', restored);
+        };
         const start = this.earth
             ? { center: [2.4246, 48.8457], zoom: 13, pitch: 0, bearing: 0 }
             : { center: [0, 0], zoom: 2, pitch: 0, bearing: 0 };
@@ -412,17 +268,12 @@ export class GeoMap {
     }
     /** The decoding workers of 3D Tiles, with the engine that has them (they run its module) and unless turned off */
     startLoader(engine) {
-        const { workers: count, workerUrl, decoders } = this.tiles3dOptions;
-        const workers = count ?? Math.min(4, Math.max(1, (navigator.hardwareConcurrency || 2) - 1));
-        if (!this.tiles3dModule || workers === false || workers <= 0 || typeof Worker === 'undefined')
-            return undefined;
-        return new TileLoader(this.tiles3dModule, workerUrl ?? new URL('./decoder.worker.js', import.meta.url), workers, { ...DEFAULT_DECODERS, ...decoders }, engine.textureFormats());
+        return this.tiles3dModule && startTileLoader(this.tiles3dModule, this.tiles3dOptions, engine);
     }
     /** A 3D Tiles layer on the core engine: loads the engine with 3D Tiles, then rebuilds the map on it (camera,
      * settings and layers kept, as after a context loss); the layer is created then */
     upgrade() {
-        const url = this.tiles3dOptions.wasmUrl ?? new URL('./isard_bg.wasm', import.meta.url);
-        this.upgrading ??= loadEngine('full', url).then(({ module, Engine }) => {
+        this.upgrading ??= loadFullEngineLater(engineUrl('full', this.tiles3dOptions)).then(({ module, Engine }) => {
             this.upgrading = undefined;
             if (this.gone)
                 return;
@@ -434,12 +285,30 @@ export class GeoMap {
         }, (error) => {
             // The 3D Tiles layers stay empty; the next one added tries again
             this.upgrading = undefined;
+            if (this.gone)
+                return;
             report(error);
             this.requestRender();
         });
     }
+    /** Downloads and compiles the engine with 3D Tiles once the map is idle (`tiles3d: 'preload'`), without running
+     * it: the first 3D Tiles layer then only instantiates it */
+    preloadTiles3d() {
+        const url = engineUrl('full', this.tiles3dOptions);
+        const later = () => preloadFullEngine(url, () => !this.gone && !this.tiles3dModule);
+        if (this.settled)
+            later();
+        else {
+            const off = this.on('idle', () => {
+                off();
+                later();
+            });
+        }
+    }
     /** After a context loss: a new engine with the same camera, settings and layers (same handles, same order) */
     restore() {
+        if (this.gone)
+            return;
         this.cancelHoverPick();
         const camera = this.getCamera();
         this.#engine.free();
@@ -447,16 +316,46 @@ export class GeoMap {
         this.lost = false;
         this.setCamera(camera);
         this.#glyphs?.attach(this.#engine);
+        const engine = this.#engine;
+        // No layer refers to an id of the old engine while the others are created
         for (const layer of this.layers)
-            layer.attach(this.#engine);
+            layer.forgetEngine();
+        for (const layer of this.layers) {
+            // Still waiting for the engine with 3D Tiles (loading, or failed): created with it
+            if (layer instanceof Tiles3dLayer && !this.tiles3dModule)
+                continue;
+            // A layer that fails is reported and left out; the others are created
+            try {
+                layer.attach(engine);
+            }
+            catch (error) {
+                report(error);
+            }
+        }
+        // Links between layers, once every layer has its new id (buildings colored by a network above them)
+        for (const layer of this.layers) {
+            if (layer.id < 0)
+                continue;
+            try {
+                layer.relink(engine);
+            }
+            catch (error) {
+                report(error);
+            }
+        }
         this.resize();
     }
     /** @internal Forgets a removed layer */
     detach(layer) {
         this.unlist(layer);
+        this.onTop.delete(layer);
         if (this.rasterCredits.delete(layer))
             this.attributionChanged();
     }
+    /** @internal The layer is on the map */
+    hasLayer(layer) {
+        return !this.gone && this.layers.includes(layer);
+    }
     /** Takes a layer out of the drawing order (to put it back elsewhere, or for good) */
     unlist(layer) {
         const index = this.layers.indexOf(layer);
@@ -543,21 +442,9 @@ export class GeoMap {
     }
     /** Animated move to a camera: over `duration` milliseconds (or the options), ease-out by default */
     easeTo(camera, options = 600) {
-        const { duration = 600, easing = (t) => 1 - (1 - t) ** 3 } = typeof options === 'number' ? { duration: options } : options;
         const from = this.getCamera();
         const to = { ...from, ...camera };
-        // Shortest way round
-        const turn = ((to.bearing - from.bearing + 540) % 360) - 180;
-        const start = performance.now();
-        this.animate((now) => {
-            if (now - start >= duration)
-                this.engine.clearPreload();
-            const t = duration > 0 ? Math.min(1, (now - start) / duration) : 1;
-            const k = easing(t);
-            const mix = (a, b) => a + (b - a) * k;
-            this.engine.setCamera(mix(from.center[0], to.center[0]), mix(from.center[1], to.center[1]), mix(from.zoom, to.zoom), mix(from.pitch, to.pitch), from.bearing + turn * k);
-            return t < 1;
-        });
+        this.animate(easeTo(() => this.engine, from, to, options));
         // The destination's tiles load during the flight (as Cesium does)
         this.engine.preload(to.center[0], to.center[1], to.zoom, to.pitch, to.bearing);
     }
@@ -568,43 +455,8 @@ export class GeoMap {
     flyTo(camera, options = {}) {
         const from = this.getCamera();
         const to = { ...from, ...camera };
-        const { curve: rho = 1.42, speed = 1.2, easing = defaultEasing } = options;
-        const [x0, y0] = toMercator(from.center);
-        const [x1, y1] = toMercator(to.center);
-        // Across the antimeridian, the short way
-        const dx = x1 - x0 - Math.round(x1 - x0);
-        const dy = y1 - y0;
-        // In pixels at the start zoom (512 px world at zoom 0)
-        const world = 512 * 2 ** from.zoom;
-        const u1 = Math.hypot(dx, dy) * world;
-        const w0 = Math.max(this.canvas.clientWidth, this.canvas.clientHeight, 1);
-        const w1 = w0 / 2 ** (to.zoom - from.zoom);
-        const rho2 = rho * rho;
-        const r = (i) => {
-            const b = (w1 * w1 - w0 * w0 + (i ? -1 : 1) * rho2 * rho2 * u1 * u1) / (2 * (i ? w1 : w0) * rho2 * u1);
-            return Math.log(Math.sqrt(b * b + 1) - b);
-        };
-        // No move on the ground (or nearly): a plain zoom
-        const still = u1 < 1e-6 || !Number.isFinite(r(0)) || !Number.isFinite(r(1));
-        const r0 = still ? 0 : r(0);
-        const length = still ? Math.abs(Math.log(w1 / w0)) / rho : (r(1) - r0) / rho;
-        const width = (s) => still ? Math.exp((w1 < w0 ? -1 : 1) * rho * s) : Math.cosh(r0) / Math.cosh(r0 + rho * s);
-        const along = (s) => still ? 0 : (w0 * ((Math.cosh(r0) * Math.tanh(r0 + rho * s) - Math.sinh(r0)) / rho2)) / u1;
-        const duration = options.duration ?? (1000 * length) / speed;
-        const turn = ((to.bearing - from.bearing + 540) % 360) - 180;
-        const start = performance.now();
-        this.animate((now) => {
-            if (now - start >= duration)
-                this.engine.clearPreload();
-            const t = duration > 0 ? Math.min(1, (now - start) / duration) : 1;
-            const k = easing(t);
-            const s = k * length;
-            const u = t >= 1 ? 1 : along(s);
-            const zoom = t >= 1 ? to.zoom : from.zoom + Math.log2(1 / width(s));
-            const [lon, lat] = fromMercator([x0 + dx * u, y0 + dy * u]);
-            this.engine.setCamera(lon, lat, zoom, from.pitch + (to.pitch - from.pitch) * k, from.bearing + turn * k);
-            return t < 1;
-        });
+        const viewport = Math.max(this.canvas.clientWidth, this.canvas.clientHeight);
+        this.animate(flyTo(() => this.engine, from, to, viewport, options));
         this.engine.preload(to.center[0], to.center[1], to.zoom, to.pitch, to.bearing);
     }
     /** Longitudes and latitudes the view covers on the ground: `[west, south, east, north]` */
@@ -656,7 +508,7 @@ export class GeoMap {
      * on the Moon and Mars), one of the Earth's models by name (`'ign'`), its options, or false; on another body, its
      * options with a `url` */
     setTerrain(terrain) {
-        this.settings.terrain = terrainSettings(terrain, this.body, this.settings.body.radius);
+        this.settings.terrain = terrainSettings(terrain, this.body, this.settings.body.radius, this.terrainLoader);
         const t = this.settings.terrain;
         this.engine.setTerrain(t?.url, t?.exaggeration ?? 1, t?.maxZoom, t?.geoid, t?.loader);
         this.attributionChanged();
@@ -688,8 +540,9 @@ export class GeoMap {
         return this.engine.stats();
     }
     /**
-     * Network edge under a screen point (CSS pixels), undefined if none. Reads one pixel of an offscreen picking pass:
-     * cheap whatever the number of features, call it on hover.
+     * The feature under a screen point (CSS pixels), undefined if none: its layer id and index. Reads one pixel of an
+     * offscreen picking pass, whatever the number of features, but waits for the GPU to finish the frame (a stall): for
+     * clicks and one-off queries. On hover, listen to 'hoverfeature' instead, which picks without waiting.
      */
     pick(point, radius = 0, layers) {
         const only = layers && Uint32Array.from(layers.map((l) => l.id));
@@ -718,10 +571,15 @@ export class GeoMap {
     requestHoverPick(point) {
         const { radius = 0, layers } = this.hoverPicking;
         const only = layers && Uint32Array.from(layers.map((l) => l.id));
-        // A new request replaces the one in flight (in the engine too): one poll loop at most
-        if (!this.engine.requestPick(point[0], point[1], radius, only) || this.hoverPoll)
+        // The engine cannot pick (no request in flight): the poll under way would wait for nothing
+        if (!this.engine.requestPick(point[0], point[1], radius, only)) {
+            this.cancelHoverPick();
             return;
-        this.hoverPoll = requestAnimationFrame(this.pollHoverPick);
+        }
+        // A new request replaces the one in flight (in the engine too): one poll loop at most
+        this.hoverPolls = 0;
+        if (!this.hoverPoll)
+            this.hoverPoll = requestAnimationFrame(this.pollHoverPick);
     }
     pollHoverPick = () => {
         this.hoverPoll = 0;
@@ -729,8 +587,10 @@ export class GeoMap {
             return;
         const result = this.engine.pollPick();
         if (!result) {
-            // The GPU is not done yet (usually a frame): asked again next frame, without drawing
-            this.hoverPoll = requestAnimationFrame(this.pollHoverPick);
+            // The GPU is not done yet (usually a frame): asked again next frame, without drawing; given up at last
+            this.hoverPolls += 1;
+            if (this.hoverPolls < MAX_POLLS)
+                this.hoverPoll = requestAnimationFrame(this.pollHoverPick);
             return;
         }
         this.emit('hoverfeature', {
@@ -795,22 +655,21 @@ export class GeoMap {
     /** Replaces the basemap and the IGN hillshade, under the other layers (hillshade by default: 0, none). The former
      * names of the Géoplateforme basemaps (`LegacyBasemap`) are taken under their new ones */
     setBasemap(basemap, hillshade = 0) {
-        const name = basemapName(basemap);
-        this.basemap?.remove();
-        this.hillshade?.remove();
-        if (this.vector) {
-            this.onTop.delete(this.vector.labels);
-            this.vector.labels.remove();
-            this.vector.tiles.destroy();
-            this.vector = undefined;
-        }
+        const name = checkBasemap(basemap);
+        if (this.basemap && this.hasLayer(this.basemap))
+            this.basemap.remove();
+        if (this.hillshade && this.hasLayer(this.hillshade))
+            this.hillshade.remove();
+        // Its raster and labels go with it
+        this.vector?.tiles.destroy();
+        this.vector = undefined;
         const vector = VECTOR_BASEMAPS[name];
         if (vector) {
             const tiles = new VectorTiles(this, {
                 style: vector,
                 ...(this.basemapWorkerUrl ? { workerUrl: this.basemapWorkerUrl } : {}),
             });
-            this.basemap = tiles.raster();
+            this.basemap = tiles.raster(this.basemapTileSize ? { size: this.basemapTileSize } : {});
             this.vector = { tiles, labels: tiles.labels() };
         }
         else {
@@ -827,19 +686,28 @@ export class GeoMap {
             this.toBottom(this.basemap);
         this.attributionChanged();
     }
-    /** Raster tiles ({z}, {x}, {y} URL; Web Mercator, or reprojected from an equirectangular `grid`), over the layers
-     * already added */
+    /** Raster tiles ({z}, {x}, {y} URL; Web Mercator, or reprojected from another `grid`: longitudes and latitudes,
+     * Lambert-93, UTM…), over the layers already added */
     addRaster(options) {
-        const { url, grid = 'mercator', minZoom = 0, maxZoom = 19, opacity = 1, saturation = 1, size, before } = options;
-        let layer;
-        if (grid === 'equirectangular' && !options.loader) {
-            // The source's level n has the pixel size of Mercator level n + 1 at the equator
-            const loader = equirectangularLoader(url, maxZoom, size ?? 256);
-            layer = new RasterLayer(this, { url, minZoom, maxZoom: maxZoom + 1, opacity, saturation, size, loader });
-        }
-        else {
-            layer = new RasterLayer(this, { url, minZoom, maxZoom, opacity, saturation, size, loader: options.loader });
+        const { url, grid = 'mercator', opacity = 1, saturation = 1, size, before } = options;
+        let { minZoom = 0, maxZoom = 19 } = options;
+        let loader = options.loader;
+        if (grid !== 'mercator' && !loader) {
+            if (grid === 'equirectangular') {
+                // `minZoom` and `maxZoom` are levels of the source: its level n has the pixel size of Mercator level n + 1 at
+                // the equator
+                loader = gridLoader(url, resolveGrid(equirectangularGrid(minZoom, maxZoom)), size ?? 256, this.remoteReprojection);
+                [minZoom, maxZoom] = [minZoom + 1, maxZoom + 1];
+            }
+            else {
+                const resolved = resolveGrid(grid);
+                const zooms = gridZooms(resolved);
+                minZoom = options.minZoom ?? zooms.minZoom;
+                maxZoom = options.maxZoom ?? zooms.maxZoom;
+                loader = gridLoader(url, resolved, size ?? 256, this.remoteReprojection);
+            }
         }
+        const layer = new RasterLayer(this, { url, minZoom, maxZoom, opacity, saturation, size, loader });
         this.place(layer, before);
         if (options.attribution) {
             this.rasterCredits.set(layer, options.attribution);
@@ -904,6 +772,10 @@ export class GeoMap {
         this.vectorSets.add(tiles);
         return tiles;
     }
+    /** @internal Forgets a destroyed `VectorTiles` */
+    dropVectorTiles(tiles) {
+        this.vectorSets.delete(tiles);
+    }
     /**
      * @internal The workers for a `VectorTiles`: the map's shared pool, or a pool of its own (`own`, to stop with it)
      * when it asks for another count or URL
@@ -919,6 +791,30 @@ export class GeoMap {
         }
         return { pool: new BasemapWorkers(workers, workerUrl), own: true };
     }
+    /**
+     * The workers decoding the relief and reprojecting rasters: the map's pool, unless the map has no workers
+     * (`workers: false` or 0, or none in this browser): that is done in the page then
+     */
+    decodingPool() {
+        const { workers } = this.tiles3dOptions;
+        if (this.gone || workers === false || (workers !== undefined && workers <= 0))
+            return undefined;
+        if (typeof Worker === 'undefined' || typeof OffscreenCanvas === 'undefined')
+            return undefined;
+        return this.basemapWorkers().pool;
+    }
+    remoteHeights = (url, encoding, floor, tile, signal) => this.decodingPool()?.heights(url, encoding, floor, tile, signal, this);
+    remoteReprojection = (job, tile, signal) => this.decodingPool()?.reproject(job, tile, signal, this);
+    /** The loader of the relief tiles of `url` in a PNG encoding (one per URL, encoding and floor) */
+    terrainLoader = (url, encoding, floor) => {
+        const key = `${encoding} ${floor ?? ''} ${url}`;
+        let loader = this.terrainLoaders.get(key);
+        if (!loader) {
+            loader = encodedTerrainLoader(url, encoding, floor, this.remoteHeights);
+            this.terrainLoaders.set(key, loader);
+        }
+        return loader;
+    };
     /** Adds a layer, under `before` if given */
     place(layer, before) {
         this.add(layer);
@@ -947,13 +843,18 @@ export class GeoMap {
         this.animation = step;
         this.requestRender();
     }
-    /** @internal */
+    /** @internal The pointer moved over the map (undefined: it left). Without 'hover' and 'hoverfeature' listeners,
+     * nothing is drawn: a still map stays idle under a moving mouse */
     hover(point) {
-        this.hoverPoint = point;
-        if (point)
-            this.requestRender();
-        else
+        if (!point) {
+            this.hoverPoint = undefined;
             this.cancelHoverPick();
+            return;
+        }
+        if (this.listeners.hover.size === 0 && this.listeners.hoverfeature.size === 0)
+            return;
+        this.hoverPoint = point;
+        this.requestRender();
     }
     frame(now) {
         this.frameRequest = 0;
@@ -991,7 +892,9 @@ export class GeoMap {
             const point = this.hoverPoint;
             hovered = point;
             this.hoverPoint = undefined;
-            this.emit('hover', { point, lonLat: this.unproject(point) });
+            // The position under the pointer for its listeners only (a 'hoverfeature' alone does not need it)
+            if (this.listeners.hover.size > 0)
+                this.emit('hover', { point, lonLat: this.unproject(point) });
         }
         const t0 = performance.now();
         // The engine asks for the next frame while it draws (uploads past the frame budget, fades): not ignored
@@ -1048,12 +951,16 @@ export class GeoMap {
         this.frame(performance.now());
     }
     destroy() {
+        if (this.gone)
+            return;
         this.gone = true;
+        // A context restored later rebuilds nothing
+        this.unwatchContext();
         const camera = this.getCamera();
         cancelAnimationFrame(this.frameRequest);
         this.cancelHoverPick();
         this.vector?.tiles.destroy();
-        for (const tiles of this.vectorSets)
+        for (const tiles of [...this.vectorSets])
             tiles.destroy();
         this.vectorSets.clear();
         this.basemapPool?.terminate();
@@ -1066,7 +973,9 @@ export class GeoMap {
         this.engine.free();
         // Work still under way (labels being shaped, tiles arriving, timers) may call the engine after this: it finds one
         // that does nothing, and nothing is drawn again
-        this.#engine = destroyed(camera);
+        this.#engine = destroyedEngine(camera);
+        // Glyph ranges still arriving upload to it, not to the freed engine
+        this.#glyphs?.attach(this.#engine);
         this.lost = true;
         for (const control of [...this.controls.keys()])
             this.removeControl(control);