isard 1.1.0 → 1.3.0

package/dist/map.js

@@ -2,154 +2,97 @@
  * 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.
+ * the camera animations in animation.ts; the parts of the map with a state of their own (the drawing order of the
+ * layers, the overlays and controls, the frame loop, the hover picking, the workers…) in map/.
  */
-import { BASEMAPS, HILLSHADE, RENAMED_BASEMAPS, SEA } from "./basemap/basemaps.js";
-import { equirectangularGrid, gridLoader, gridZooms, resolveGrid } from "./basemap/grid.js";
-import { encodedTerrainLoader } from "./basemap/terrain.js";
-import { BasemapWorkers, defaultWorkerCount, defaultWorkerUrl, pmtilesLayer, pmtilesRasterLoader, VECTOR_BASEMAPS, VectorTiles, } from "./basemap/vectortiles.js";
-import { headerRules, onHeaderRules } from "./engine/requests.js";
-import { destroyedEngine, engineUrl, loadEngine, loadFullEngineLater, preloadFullEngine, startTileLoader, } from "./engine-loader.js";
+import { SEA } from "./basemap/basemaps.js";
+import { pmtilesLayer } from "./basemap/pmtileslayer.js";
+import { VectorTiles } from "./basemap/vectortiles.js";
+import { defaultWorkerUrl } from "./basemap/workerpool.js";
+import { onHeaderRules } from "./engine/requests.js";
+import { destroyedEngine, engineUrl, loadEngine, tessUrl } from "./engine-loader.js";
 import { IGN_PRESETS } from "./geoplateforme.js";
 import { ExtrusionLayer, extrusionStyle } from "./layers/extrusions.js";
 import { CircleLayer, circleStyle, FillLayer, fillStyle, LineLayer, lineStyle, } from "./layers/features.js";
-import { Glyphs } from "./layers/glyphs.js";
-import { Icons, readPixels } from "./layers/icons.js";
 import { CustomLayer, GroundLayer, ModelLayer, NetworkLayer, RasterLayer, Tiles3dLayer, } from "./layers/layers.js";
 import { loadPanoramas } from "./layers/panoramas.js";
 import { PointCloudLayer } from "./layers/pointclouds.js";
 import { SymbolLayer, symbolStyle } from "./layers/symbols.js";
-import { atmosphereSettings, bodySettings, haloSettings, rgb, terrainSettings, } from "./settings.js";
+import { VectorLayer } from "./layers/vectors.js";
+import { BasemapLayers } from "./map/basemap-layers.js";
+import { createCanvas, labelCanvas, watchContext, watchPixelRatio } from "./map/canvas.js";
+import { checkBasemap, report, validateNetwork } from "./map/checks.js";
+import { Credits } from "./map/credits.js";
+import { mapSettings, sendHeaders } from "./map/engine-settings.js";
+import { MapEngines } from "./map/engines.js";
+import { MapListeners } from "./map/events.js";
+import { FrameLoop } from "./map/frame-loop.js";
+import { HoverPick } from "./map/hover-pick.js";
+import { addSpec } from "./map/layer-spec.js";
+import { LayerStack } from "./map/layer-stack.js";
+import { OverlayHost } from "./map/overlay-host.js";
+import { panoramaHost } from "./map/panorama-host.js";
+import { rasterSource } from "./map/raster-source.js";
+import { SymbolAtlases } from "./map/symbol-atlases.js";
+import { applyViewshed } from "./map/viewshed.js";
+import { MapWorkers } from "./map/workers.js";
+import { atmosphereSettings, rgb, terrainSettings } from "./settings.js";
 import { AttributionControl } from "./ui/controls.js";
 import { Interaction } from "./ui/interaction.js";
-import { injectStyle } from "./ui/style.js";
 import { easeTo, flyTo } from "./util/animation.js";
-/** Reports an error without throwing it here: the console shows it, as an uncaught one */
-function report(error) {
-    if (typeof reportError === 'function')
-        reportError(error);
-    else
-        queueMicrotask(() => {
-            throw error;
-        });
-}
-/** 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)
-        throw new Error(`isard: network nodes must be lon, lat pairs (length ${nodes.length})`);
-    if (edges.length % 2 !== 0)
-        throw new Error(`isard: network edges must be node index pairs (length ${edges.length})`);
-    const count = nodes.length / 2;
-    for (let i = 0; i < edges.length; i += 1) {
-        const node = edges[i];
-        if (node >= count)
-            throw new Error(`isard: network edge ${i >> 1} refers to node ${node}, of ${count} nodes`);
-    }
-}
-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 renamed = RENAMED_BASEMAPS[basemap];
-    if (renamed)
-        throw new Error(`isard: the basemap '${basemap}' is now named '${renamed}'`);
-    if (basemap !== 'none' && !(basemap in VECTOR_BASEMAPS) && !(basemap in BASEMAPS)) {
-        throw new Error(`isard: unknown basemap '${basemap}'`);
-    }
-    return basemap;
-}
+import { sunPosition } from "./util/sun.js";
+/** A layer whose picked features come back with their properties (lines, circles, fills, extrusions, 3D Tiles…) */
+const hasFeatures = (layer) => 'featureAt' in layer && typeof layer.featureAt === 'function';
 /** A map (see `GeoMap.create`); layers take it as their host */
 export class GeoMap {
     canvas;
-    #glyphs;
-    #icons;
-    /** Layers new layers go under */
-    onTop = new Set();
-    /** The vector basemap, if any: its tiles' workers and its labels */
-    vector;
-    glyphsUrl;
-    basemapWorkerUrl;
-    /** Texture size of the vector basemap's tiles */
-    basemapTileSize;
-    container;
-    /** Markers and popups, over the canvas */
-    overlay;
-    corners;
-    controls = new Map();
-    positioned = new Set();
-    /** Canvas size in CSS pixels, kept on resize so placing overlays never reads the layout */
-    size = [0, 0];
     #engine;
-    /** Layers in drawing order (bottom first), to recreate them after a context loss */
-    layers = [];
+    /** The engine class (core, or with 3D Tiles) and the engine with 3D Tiles loaded when needed */
+    engines;
+    /** The layers in drawing order and those kept on top */
+    stack = new LayerStack(() => this.#engine);
+    /** The basemap and the hillshade */
+    basemaps;
+    /** The glyphs and icons of the symbol layers */
+    atlases;
+    /** The workers of the vector tiles, the relief and the reprojected rasters */
+    workers;
+    container;
+    /** The canvas in the container, the markers and popups over it, the controls in its corners */
+    overlays;
     settings;
+    /** @internal Where the basemap workers load the tessellation module from (`isard_tess_bg.wasm`) */
+    tessUrl;
     /** The WebGL context is lost: nothing is drawn until it is restored */
     lost = false;
-    listeners = {
-        movestart: new Set(),
-        move: new Set(),
-        moveend: new Set(),
-        resize: new Set(),
-        hover: new Set(),
-        hoverfeature: new Set(),
-        click: new Set(),
-        render: new Set(),
-        idle: new Set(),
-        leave: new Set(),
-    };
+    gone = false;
+    listeners = new MapListeners();
+    /** Frames drawn on demand, with their events */
+    frames;
     resizeObserver;
     interaction;
-    loader;
-    /** The class of the engine: without 3D Tiles until a 3D Tiles layer is added, unless asked for from the start */
-    engineClass;
-    /** The module of the engine with 3D Tiles once it runs this map (the decoding workers run it too) */
-    tiles3dModule;
-    /** The engine with 3D Tiles is loading, for the 3D Tiles layers added on the core engine */
-    upgrading;
-    /** What loading the engine with 3D Tiles and its workers needs */
-    tiles3dOptions;
-    gone = false;
     /** The map is of the Earth: a basemap by default */
     earth;
     /** The body, as the option named it */
     body;
-    basemap;
-    hillshade;
-    /** Called when the credits of the layers or relief change (the attribution controls) */
-    attributionListeners = new Set();
-    /** Credits of the raster layers that have some (basemaps, hillshade, the Géoplateforme's rasters…) */
-    rasterCredits = new Map();
-    animation;
-    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;
+    /** Credits of the raster layers that have some, and the attribution controls told when they change */
+    credits = new Credits();
+    /** The picking for 'hoverfeature', its answer emitted on a later frame */
+    hoverPick = new HoverPick(() => this.engine, () => this.lost, (result) => this.emit('hoverfeature', {
+        point: [result.x, result.y],
+        lonLat: result.lonLat,
+        hit: result.hit && this.featureHit(result.hit),
+    }));
     /** What 'hoverfeature' looks for: within `radius` CSS pixels, in `layers` only if given */
     hoverPicking = {};
-    frameRequest = 0;
-    lastCamera = '';
-    /** The camera moved since the last 'moveend' */
-    moving = false;
-    /** The last frame found everything loaded ('idle' sent) */
-    settled = false;
-    inFrame = false;
-    /** The camera of the frame being drawn: what `getCamera` gives the custom layers while the engine is busy */
-    frameCamera;
     /** Vector tiles made by `vectorTiles()`, destroyed with the map */
     vectorSets = new Set();
-    /** The workers drawing vector tiles, shared by every `VectorTiles` of the map; created on first use */
-    basemapPool;
     /** Stops watching the device pixel ratio */
     unwatchRatio;
     /** Stops following the page's request headers (`setRequestHeaders`) */
     unwatchHeaders = () => undefined;
     /** 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, given = {}) {
         // A preset under the options given
@@ -167,85 +110,56 @@ export class GeoMap {
         return map;
     }
     constructor(container, options, engineClass, tiles3dModule) {
-        this.engineClass = engineClass;
-        this.tiles3dModule = tiles3dModule;
-        this.tiles3dOptions = { ...options };
-        this.glyphsUrl = options.glyphs;
-        this.basemapWorkerUrl = options.basemapWorkerUrl ?? defaultWorkerUrl(options.assetsUrl);
-        this.basemapTileSize = options.basemapTileSize;
+        this.engines = new MapEngines(engineClass, tiles3dModule, options, () => this.gone);
+        const workerUrl = options.basemapWorkerUrl ?? defaultWorkerUrl(options.assetsUrl);
+        this.tessUrl = tessUrl(options);
+        this.workers = new MapWorkers(workerUrl, options.workers, () => this.gone, this);
+        this.basemaps = new BasemapLayers(this, this.stack, workerUrl, options.basemapTileSize);
         this.container = container;
-        this.canvas = document.createElement('canvas');
-        Object.assign(this.canvas.style, { display: 'block', width: '100%', height: '100%', touchAction: 'none' });
-        // Overlays and controls are positioned against the container
-        injectStyle(container.ownerDocument);
-        if (getComputedStyle(container).position === 'static')
-            container.style.position = 'relative';
-        container.classList.add('isard-map');
-        this.overlay = document.createElement('div');
-        this.overlay.className = 'isard-overlay';
-        const corner = (position) => {
-            const element = document.createElement('div');
-            element.className = `isard-ctrl-${position}`;
-            return element;
-        };
-        this.corners = {
-            'top-left': corner('top-left'),
-            'top-right': corner('top-right'),
-            'bottom-left': corner('bottom-left'),
-            'bottom-right': corner('bottom-right'),
-        };
-        container.append(this.canvas, this.overlay, ...CORNERS.map((position) => this.corners[position]));
+        this.canvas = createCanvas();
+        this.atlases = new SymbolAtlases(this.canvas, options.glyphs, () => this.#engine);
+        this.overlays = new OverlayHost(container, this.canvas, this);
         this.earth = (options.body ?? 'earth') === 'earth';
         this.body = options.body;
-        const body = bodySettings(options.body);
-        this.settings = {
-            body,
-            zoomRange: [options.minZoom ?? 0, options.maxZoom ?? 22],
-            maxPitch: options.maxPitch ?? 70,
-            globe: (options.projection ?? 'globe') === 'globe',
-            sky: options.sky ?? true,
-            atmosphere: atmosphereSettings(options.atmosphere),
-            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.settings = mapSettings(options, this.earth, this.workers.terrainLoader);
+        this.frames = new FrameLoop({
+            engine: () => this.engine,
+            camera: () => this.getCamera(),
+            lost: () => this.lost,
+            interacting: () => this.interaction?.active === true,
+            customLayers: () => this.layers.some((layer) => layer instanceof CustomLayer),
+            upgrading: () => this.engines.upgrading !== undefined,
+            drawn: (hovered) => {
+                // The picking pass sees the frame just drawn; its answer comes on a later frame
+                if (hovered && this.listeners.has('hoverfeature'))
+                    this.hoverPick.request(hovered, this.hoverPicking);
+                // Overlays follow the frame just drawn
+                this.overlays.positionAll();
+            },
+        }, this.listeners);
         this.#engine = this.createEngine();
         // Once it has an engine: a map whose creation failed before is not left following them
         this.unwatchHeaders = onHeaderRules((rules) => sendHeaders(this.#engine, rules));
         // The browser may take the GPU away (driver reset, background tab on mobile): the map waits, then rebuilds
-        const lost = (event) => {
-            event.preventDefault();
+        this.unwatchContext = watchContext(this.canvas, () => {
             this.lost = true;
-            cancelAnimationFrame(this.frameRequest);
-            this.frameRequest = 0;
-        };
-        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);
-        };
+            this.frames.cancel();
+        }, () => this.restore());
         const start = this.earth
             ? { center: [2.4246, 48.8457], zoom: 13, pitch: 0, bearing: 0 }
             : { center: [0, 0], zoom: 2, pitch: 0, bearing: 0 };
         this.setCamera({ ...start, ...options });
         this.setBasemap(options.basemap ?? (this.earth ? 'osm-positron' : 'none'), options.hillshade ?? 0);
+        if (options.sun)
+            this.setSun(options.sun);
         this.resizeObserver = new ResizeObserver(() => this.resize());
         this.resizeObserver.observe(container);
-        this.watchRatio();
+        this.unwatchRatio = watchPixelRatio(() => this.resize());
         this.resize();
         const interactive = options.interactive ?? true;
         const keyboard = interactive && (options.keyboard ?? true);
         this.interaction = interactive ? new Interaction(this, { keyboard }) : undefined;
-        // Reached with Tab when the keys move it; named for screen readers either way
-        this.canvas.classList.add('isard-canvas');
-        this.canvas.setAttribute('role', keyboard ? 'application' : 'region');
-        this.canvas.setAttribute('aria-roledescription', 'map');
-        this.canvas.setAttribute('aria-label', options.ariaLabel ?? 'Map');
-        if (keyboard)
-            this.canvas.tabIndex = 0;
+        labelCanvas(this.canvas, keyboard, options.ariaLabel ?? 'Map');
         const attribution = options.attributionControl ?? true;
         if (attribution !== false) {
             this.addControl(new AttributionControl(attribution === true ? {} : attribution), 'bottom-right');
@@ -262,48 +176,26 @@ export class GeoMap {
     get engine() {
         return this.#engine;
     }
+    /** Layers in drawing order (bottom first) */
+    get layers() {
+        return this.stack.layers;
+    }
+    /** Layers new layers go under */
+    get onTop() {
+        return this.stack.onTop;
+    }
     createEngine() {
-        const engine = new this.engineClass(this.canvas, () => this.requestRender());
-        // The body first: the layers' shaders may take its size
-        const { radius, flattening, atmosphere: air, relief } = this.settings.body;
-        engine.setBody(radius, flattening, haloSettings(air), ...relief);
-        sendHeaders(engine, headerRules());
-        const { zoomRange, maxPitch, globe, sky, atmosphere, terrain, loading, background, globeColor } = this.settings;
-        engine.setZoomRange(...zoomRange);
-        engine.setMaxPitch(maxPitch);
-        engine.setGlobe(globe);
-        engine.setSky(sky);
-        engine.setAtmosphere(atmosphere);
-        engine.setTerrain(terrain?.url, terrain?.exaggeration ?? 1, terrain?.maxZoom, terrain?.geoid, terrain?.loader);
-        engine.setImmediateLoading(loading === 'immediate');
-        engine.setBackground(...background);
-        engine.setGlobeColor(...globeColor);
-        this.loader ??= this.startLoader(engine);
-        if (this.loader)
-            engine.setTileLoader(this.loader);
-        return engine;
-    }
-    /** The decoding workers of 3D Tiles, with the engine that has them (they run its module) and unless turned off */
-    startLoader(engine) {
-        return this.tiles3dModule && startTileLoader(this.tiles3dModule, this.tiles3dOptions, engine);
+        return this.engines.create(this.canvas, () => this.requestRender(), this.settings);
     }
     /** A 3D Tiles layer or a model 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() {
-        this.upgrading ??= loadFullEngineLater(engineUrl('full', this.tiles3dOptions)).then(({ module, Engine }) => {
-            this.upgrading = undefined;
-            if (this.gone)
-                return;
-            this.engineClass = Engine;
-            this.tiles3dModule = module;
+        this.engines.upgrade(() => {
             // A lost context: the engine is rebuilt on it once restored
             if (!this.lost)
                 this.restore();
         }, (error) => {
             // The 3D Tiles layers stay empty; the next one added tries again
-            this.upgrading = undefined;
-            if (this.gone)
-                return;
             report(error);
             this.requestRender();
         });
@@ -311,14 +203,12 @@ export class GeoMap {
     /** 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();
+        if (this.frames.settled)
+            this.engines.preload();
         else {
             const off = this.on('idle', () => {
                 off();
-                later();
+                this.engines.preload();
             });
         }
     }
@@ -326,51 +216,28 @@ export class GeoMap {
     restore() {
         if (this.gone)
             return;
-        this.cancelHoverPick();
+        this.hoverPick.cancel();
         const camera = this.getCamera();
         this.#engine.free();
         this.#engine = this.createEngine();
         this.lost = false;
         this.setCamera(camera);
-        this.#glyphs?.attach(this.#engine);
-        this.#icons?.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.forgetEngine();
-        for (const layer of this.layers) {
-            // Still waiting for the engine with 3D Tiles (loading, or failed): created with it
-            if (layer.needsFullEngine && !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.atlases.attach(this.#engine);
+        // Those still waiting for the engine with 3D Tiles (loading, or failed) are created with it
+        this.stack.reattach(this.#engine, (layer) => layer.needsFullEngine && !this.engines.tiles3d);
         this.applySwipe();
         // A street-level eye stays one in the new engine
         if (this.#firstPerson)
             this.setFirstPerson(this.#firstPerson);
-        // What the old engine drew over the scene: the viewshed, the panoramas shown
+        // What the old engine drew over the scene: the viewshed, the sun's shadows, the panoramas shown
         if (this.viewshed)
             this.setViewshed(this.viewshed);
-        for (const set of this.panoramaSets)
+        if (this.sun)
+            this.setSun(this.sun);
+        this.panoramaSets.forEach((set) => {
             if (set.current)
                 void set.show(set.current.index).catch(report);
+        });
         this.resize();
     }
     /** The street-level eye, while there is one (`setFirstPerson`) */
@@ -392,13 +259,8 @@ export class GeoMap {
                 this.setCamera({ center: was.lonLat, zoom: 18, pitch: 60, bearing: was.bearing });
             return;
         }
-        const eye = {
-            height: 1.7,
-            pitch: 90,
-            fov: 75,
-            ...view,
-            lonLat: [view.lonLat[0], view.lonLat[1]],
-        };
+        const lonLat = [view.lonLat[0], view.lonLat[1]];
+        const eye = { height: 1.7, pitch: 90, fov: 75, ...view, lonLat };
         eye.pitch = Math.max(1, Math.min(179, eye.pitch));
         eye.fov = Math.max(10, Math.min(140, eye.fov));
         eye.bearing = ((eye.bearing % 360) + 360) % 360;
@@ -411,47 +273,41 @@ export class GeoMap {
     /**
      * Compares two states of a place: `layers` shown on one side of a vertical line only, at `position` CSS pixels
      * from the left of the map (left of it by default, `side: 'right'` for the other), the layers beneath them on the
-     * other side. Set again as the line moves (a slider, a drag); undefined stops
+     * other side; `other`: layers shown on the other side only (two meshes of a place, each on its side). Set again as
+     * the line moves (a slider, a drag); undefined stops
      */
     setSwipe(options) {
-        this.swipe = options && options.layers.length > 0 ? { ...options, layers: [...options.layers] } : undefined;
+        const used = options && (options.layers.length > 0 || (options.other?.length ?? 0) > 0);
+        this.swipe = used ? { ...options, layers: [...options.layers], other: [...(options.other ?? [])] } : undefined;
         this.applySwipe();
         this.requestRender();
     }
     applySwipe() {
         const s = this.swipe;
-        const ids = Uint32Array.from((s?.layers ?? []).filter((l) => l.id >= 0), (l) => l.id);
-        this.engine.setSwipe(s && ids.length > 0 ? s.position : Number.NaN, s?.side === 'right', ids);
+        const idsOf = (layers) => Uint32Array.from((layers ?? []).filter((l) => l.id >= 0), (l) => l.id);
+        const ids = idsOf(s?.layers);
+        const others = idsOf(s?.other);
+        const shown = ids.length > 0 || others.length > 0;
+        this.engine.setSwipe(s && shown ? s.position : Number.NaN, s?.side === 'right', ids, others);
     }
     /** @internal Forgets a removed layer */
     detach(layer) {
-        this.unlist(layer);
-        this.onTop.delete(layer);
-        if (this.rasterCredits.delete(layer))
-            this.attributionChanged();
+        this.stack.forget(layer);
+        this.credits.forget(layer);
     }
     /** @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);
-        if (index >= 0)
-            this.layers.splice(index, 1);
+        return !this.gone && this.stack.has(layer);
     }
     addLayer(layer) {
         // On the core engine, a 3D Tiles layer or a model waits for the engine with 3D Tiles: it is created with the
         // others on it
-        if (layer.needsFullEngine && !this.tiles3dModule)
+        if (layer.needsFullEngine && !this.engines.tiles3d)
             this.upgrade();
         else
             layer.attach(this.engine);
-        this.layers.push(layer);
         // Under the layers kept on top (the basemap's labels)
-        const top = this.layers.find((l) => this.onTop.has(l) && l !== layer);
-        if (top)
-            this.moveLayer(layer, top);
+        this.stack.add(layer);
         this.requestRender();
         return layer;
     }
@@ -461,54 +317,21 @@ export class GeoMap {
     }
     /** @internal Moves a layer under `before`, or on top of all */
     moveLayer(layer, before) {
-        const handle = layer;
-        this.unlist(handle);
-        const index = before ? this.layers.indexOf(before) : -1;
-        const at = index < 0 ? this.layers.length : index;
-        this.layers.splice(at, 0, handle);
-        if (handle.id >= 0)
-            this.engine.moveLayer(handle.id, this.engineIndex(at));
+        this.stack.move(layer, before);
         this.requestRender();
     }
     /** @internal See `LayerHost.replaceLayer` */
     replaceLayer(layer, old) {
-        this.engine.removeLayer(old);
-        const index = this.layers.indexOf(layer);
-        if (index >= 0)
-            this.engine.moveLayer(layer.id, this.engineIndex(index));
-    }
-    /** Index in the engine of the layer at `index`: the layers waiting for the engine with 3D Tiles are not in it yet */
-    engineIndex(index) {
-        let count = 0;
-        for (let i = 0; i < index; i += 1)
-            if ((this.layers[i]?.id ?? -1) >= 0)
-                count += 1;
-        return count;
-    }
-    /** Moves a layer under all the others */
-    toBottom(layer) {
-        this.engine.moveLayer(layer.id, 0);
-        this.unlist(layer);
-        this.layers.unshift(layer);
+        this.stack.replace(layer, old);
     }
     // ── Events ──
     /** Listens to an event; returns the function that stops listening */
     on(type, listener) {
-        const listeners = this.listeners[type];
-        listeners.add(listener);
-        return () => listeners.delete(listener);
+        return this.listeners.on(type, listener);
     }
     /** @internal Calls the listeners; one that throws is reported and does not stop the others nor the frame */
     emit(type, event) {
-        const listeners = this.listeners[type];
-        for (const listener of listeners) {
-            try {
-                listener(event);
-            }
-            catch (error) {
-                report(error);
-            }
-        }
+        this.listeners.emit(type, event);
     }
     // ── Camera ──
     /**
@@ -537,13 +360,14 @@ export class GeoMap {
         elevationAt: (lonLat) => this.elevationAt(lonLat),
         metersPerPixel: (point) => this.metersPerPixel(point),
     };
-    /** What is drawn over the scene, together: `viewshed` (`setViewshed`), `swipe` (`setSwipe`) */
+    /** What is drawn over the scene, together: `viewshed` (`setViewshed`), `sun` (`setSun`), `swipe` (`setSwipe`) */
     effects = {
         viewshed: (options) => this.setViewshed(options),
+        sun: (options) => this.setSun(options),
         swipe: (options) => this.setSwipe(options),
     };
     getCamera() {
-        return this.frameCamera ?? this.engine.camera();
+        return this.frames.camera ?? this.engine.camera();
     }
     setCamera(camera) {
         const c = { ...this.getCamera(), ...camera };
@@ -614,57 +438,67 @@ export class GeoMap {
         this.engine.setSky(enabled);
         this.requestRender();
     }
+    /** The viewshed set, set again in a new engine */
+    viewshed;
+    /** The sun set, set again in a new engine */
+    sun;
+    /**
+     * The sun casting shadows: the buildings, trees, models, 3D Tiles and the relief shade the ground and one another,
+     * the walls turned away from it are in their own shade; the labels stay over them. The sun stands where it is at
+     * `date` over the map's center (now by default), or at `azimuth` and `altitude`. As it sets the night falls (`night`
+     * to set it by hand): the scene tinted in its blue, the windows of the buildings and the streets of `vectors()` lit,
+     * the labels light on dark.
+     * The shadows cover the ground around the view's center, fading out away from it, and cost two more depth passes
+     * of the solid scene each frame. Undefined removes them
+     */
+    setSun(options) {
+        this.sun = options;
+        if (!options) {
+            this.engine.setSun(Number.NaN, Number.NaN, 0, 0);
+            this.requestRender();
+            return;
+        }
+        const { azimuth, altitude } = options.azimuth !== undefined && options.altitude !== undefined
+            ? { azimuth: options.azimuth, altitude: options.altitude }
+            : sunPosition(options.date ?? new Date(), this.getCamera().center);
+        // The twilight: from 6° above the horizon to 6° under it, smoothly
+        const dusk = Math.min(1, Math.max(0, (6 - altitude) / 12));
+        const night = Math.min(1, Math.max(0, options.night ?? dusk * dusk * (3 - 2 * dusk)));
+        // The shadows fade with the sun's light
+        const opacity = Math.min(1, Math.max(0, options.opacity ?? 0.35)) * (1 - night);
+        this.engine.setSun(azimuth, altitude, opacity, night);
+        this.requestRender();
+    }
     /** Tints what can be seen from a point and what is hidden from it, within a range, all around or within a cone
      * (`direction`): the relief, extrusions, 3D Tiles and models hide what lies behind them (only what the map has
      * loaded for its view). Several observers (16 at most): what any of them sees is seen, what is hidden from all those
      * that reach it is hidden, in the colors and opacity of the first. Undefined or none removes it */
-    /** The viewshed set, set again in a new engine */
-    viewshed;
     setViewshed(options) {
         this.viewshed = options;
-        let observers = [];
-        if (options)
-            observers = 'position' in options ? [options] : options;
-        const [first] = observers;
-        if (!first) {
-            this.engine.clearViewshed();
-            return;
-        }
-        this.engine.setViewshed(new Float64Array(observers.flatMap((o) => [
-            o.position[0],
-            o.position[1],
-            o.height ?? 1.7,
-            o.range ?? 1000,
-            ...(o.direction === undefined
-                ? [Number.NaN, 0, 0, 0]
-                : [o.direction, o.tilt ?? 0, o.fov ?? 60, o.verticalFov ?? 40]),
-        ])), new Float32Array(rgb(first.visibleColor ?? '#2f9e44')), new Float32Array(rgb(first.hiddenColor ?? '#e03131')), first.opacity ?? 0.7, new Float32Array(first.coneColor ? rgb(first.coneColor) : []));
-        this.requestRender();
+        if (applyViewshed(this.engine, options))
+            this.requestRender();
     }
     /** Relief under the basemap: true for the body's terrain model (on the Earth the worldwide Terrain Tiles, NASA's
      * 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.terrainLoader);
+        this.settings.terrain = terrainSettings(terrain, this.body, this.settings.body.radius, this.workers.terrainLoader);
         const t = this.settings.terrain;
         this.engine.setTerrain(t?.url, t?.exaggeration ?? 1, t?.maxZoom, t?.geoid, t?.loader);
-        this.attributionChanged();
+        this.credits.changed();
         this.requestRender();
     }
+    /** @internal Whether a relief is under the basemap: the fills of vector tiles drawn as geometry need their prisms */
+    get hasRelief() {
+        return this.settings.terrain !== undefined;
+    }
     /** @internal The credits of the raster layers (the basemap first) and of the relief in use, each once */
     attributions() {
-        const layers = this.layers.map((layer) => this.rasterCredits.get(layer));
-        const credits = [...layers, this.settings.terrain?.attribution];
-        return [...new Set(credits.filter((c) => c !== undefined))];
+        return this.credits.of(this.layers, this.settings.terrain?.attribution);
     }
     /** @internal Calls `listener` when the credits change; returns what stops it */
     onAttributionChange(listener) {
-        this.attributionListeners.add(listener);
-        return () => this.attributionListeners.delete(listener);
-    }
-    attributionChanged() {
-        for (const listener of this.attributionListeners)
-            listener();
+        return this.credits.onChange(listener);
     }
     /** Color behind the map, a CSS color (its alpha ignored) */
     setBackground(color) {
@@ -699,47 +533,9 @@ export class GeoMap {
         const layer = this.layers.find((l) => l.id === hit.layer);
         if (!layer)
             return undefined;
-        const feature = 'featureAt' in layer && typeof layer.featureAt === 'function'
-            ? layer.featureAt(hit.index)
-            : undefined;
+        const feature = hasFeatures(layer) ? layer.featureAt(hit.index) : undefined;
         return { layer, index: hit.index, feature };
     }
-    /** Asks the engine what is under the pointer; its answer, read without waiting for the GPU, comes on a later frame */
-    requestHoverPick(point) {
-        const { radius = 0, layers } = this.hoverPicking;
-        const only = layers && Uint32Array.from(layers.map((l) => l.id));
-        // 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;
-        }
-        // 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;
-        if (this.lost)
-            return;
-        const result = this.engine.pollPick();
-        if (!result) {
-            // 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', {
-            point: [result.x, result.y],
-            lonLat: result.lonLat,
-            hit: result.hit && this.featureHit(result.hit),
-        });
-    };
-    cancelHoverPick() {
-        cancelAnimationFrame(this.hoverPoll);
-        this.hoverPoll = 0;
-    }
     /** Screen point (CSS pixels) of a position on the ground (the relief), or `height` metres above it, undefined
      * behind the camera */
     project(lonLat, height = 0) {
@@ -755,41 +551,13 @@ export class GeoMap {
      */
     async addPanoramas(options) {
         // Drawn by the engine with 3D Tiles: loaded first if needed
-        if (!this.tiles3dModule) {
+        if (!this.engines.tiles3d) {
             this.upgrade();
-            await this.upgrading;
-            if (!this.tiles3dModule)
+            await this.engines.upgrading;
+            if (!this.engines.tiles3d)
                 throw new Error('isard: panoramas need the engine with 3D Tiles, which failed to load');
         }
-        const host = {
-            setPanorama: (...args) => {
-                this.engine.setPanorama(...args);
-                this.requestRender();
-            },
-            setPanoramaImage: (index, image) => this.engine.setPanoramaImage(index, image),
-            clearPanorama: () => this.engine.clearPanorama(),
-            geoidHeight: (lon, lat) => this.engineClass.geoidHeight(lon, lat),
-            firstPerson: () => this.firstPerson,
-            setFirstPerson: (view) => this.setFirstPerson(view),
-            elevationAt: (lonLat) => this.elevationAt(lonLat),
-            listen: (click, key, wheel) => {
-                const off = this.on('click', ({ lonLat }) => click(lonLat));
-                const container = this.getContainer();
-                // Before the map's own wheel (its zoom, the eye's field of view)
-                const onWheel = (e) => {
-                    e.preventDefault();
-                    e.stopImmediatePropagation();
-                    wheel(e);
-                };
-                container.addEventListener('keydown', key);
-                container.addEventListener('wheel', onWheel, { capture: true, passive: false });
-                return () => {
-                    off();
-                    container.removeEventListener('keydown', key);
-                    container.removeEventListener('wheel', onWheel, { capture: true });
-                };
-            },
-        };
+        const host = panoramaHost(this, (lon, lat) => this.engines.geoidHeight(lon, lat));
         const panoramas = await loadPanoramas(host, options);
         this.panoramaSets.add(panoramas);
         return panoramas;
@@ -836,106 +604,47 @@ export class GeoMap {
     // ── Overlays and controls ──
     /** Adds a control in a corner of the map; controls stack from the corner inward */
     addControl(control, position = 'top-right') {
-        if (this.controls.has(control))
-            return this;
-        const element = control.onAdd(this);
-        element.classList.add('isard-ctrl');
-        // In the bottom corners the first control added stays lowest, as in MapLibre
-        if (position.startsWith('bottom'))
-            this.corners[position].prepend(element);
-        else
-            this.corners[position].append(element);
-        this.controls.set(control, element);
+        this.overlays.addControl(control, position);
         return this;
     }
     removeControl(control) {
-        const element = this.controls.get(control);
-        if (!element)
-            return this;
-        this.controls.delete(control);
-        control.onRemove(this);
-        element.remove();
+        this.overlays.removeControl(control);
         return this;
     }
     /** @internal Shows a marker or popup, placed after every frame from now on */
     attachOverlay(item, element) {
-        this.overlay.append(element);
-        this.positioned.add(item);
-        item.position(this.size);
+        this.overlays.attach(item, element);
     }
     /** @internal */
     detachOverlay(item, element) {
-        this.positioned.delete(item);
-        element.remove();
+        this.overlays.detach(item, element);
     }
     /** @internal Places one overlay now (it moved), without drawing a frame */
     positionOverlay(item) {
-        if (this.positioned.has(item))
-            item.position(this.size);
+        this.overlays.position(item);
     }
     // ── Layers ──
     /** Replaces the basemap and the IGN hillshade, under the other layers (hillshade by default: 0, none). The former
      * names of the Géoplateforme basemaps throw, naming the new ones */
     setBasemap(basemap, hillshade = 0) {
         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.basemapTileSize ? { size: this.basemapTileSize } : {});
-            this.vector = { tiles, labels: tiles.labels() };
-        }
-        else {
-            this.basemap = name === 'none' ? undefined : this.addRaster(BASEMAPS[name]);
-        }
+        this.basemaps.replace(name);
         // Off the Earth, the body's own color
         if (this.earth)
             this.settings.globeColor = SEA[name];
         this.engine.setGlobeColor(...this.settings.globeColor);
-        this.hillshade = hillshade > 0 ? this.addRaster({ ...HILLSHADE, opacity: hillshade }) : undefined;
-        if (this.hillshade)
-            this.toBottom(this.hillshade);
-        if (this.basemap)
-            this.toBottom(this.basemap);
-        this.attributionChanged();
+        this.basemaps.addHillshade(hillshade);
+        this.credits.changed();
     }
     /** 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', opacity = 1, saturation = 1, size, before } = options;
-        let { minZoom = 0, maxZoom = 19 } = options;
-        // A PMTiles archive (`pmtiles://…`): its tiles read by range requests
-        let loader = options.loader ?? pmtilesRasterLoader(url, size ?? 256);
-        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 { url, opacity = 1, saturation = 1, size, before } = options;
+        const { loader, minZoom, maxZoom } = rasterSource(options, this.workers.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);
-            this.attributionChanged();
-        }
+        if (options.attribution)
+            this.credits.set(layer, options.attribution);
         return layer;
     }
     /**
@@ -961,32 +670,7 @@ export class GeoMap {
      * another layer. The layer's `ready` resolves once the map has drawn it
      */
     add(spec) {
-        switch (spec.type) {
-            case 'lines':
-                return this.addLines(spec);
-            case 'circles':
-                return this.addCircles(spec);
-            case 'fills':
-                return this.addFills(spec);
-            case 'symbols':
-                return this.addSymbols(spec);
-            case 'extrusions':
-                return this.addExtrusions(spec);
-            case 'raster':
-                return this.addRaster(spec);
-            case 'ground':
-                return this.addGround(spec);
-            case 'network':
-                return this.addNetwork(spec);
-            case 'tiles3d':
-                return this.addTiles3d(spec);
-            case 'pointcloud':
-                return this.addPointCloud(spec);
-            case 'models':
-                return this.addModels(spec);
-            default:
-                throw new Error(`isard: no layer of type ${String(spec.type)}`);
-        }
+        return addSpec(this, spec);
     }
     /** @internal A layer made anew from its description, in the place of `old` in the drawing order (old removed) */
     rebuildLayer(old, spec) {
@@ -1007,7 +691,7 @@ export class GeoMap {
                 off();
                 resolve();
             });
-            this.requestRender();
+            this.frames.requestIdle();
         });
     }
     /** Lines from GeoJSON (line strings, and polygon outlines), styled per feature */
@@ -1036,24 +720,11 @@ export class GeoMap {
     }
     /** @internal The glyphs of the symbol layers, loaded on first use */
     get glyphs() {
-        if (!this.#glyphs) {
-            // The engine's context: the atlas stays within its texture size limit
-            const gl = this.canvas.getContext('webgl2');
-            const max = gl?.getParameter(gl.MAX_TEXTURE_SIZE);
-            this.#glyphs = new Glyphs(this.glyphsUrl, typeof max === 'number' ? max : undefined);
-            this.#glyphs.attach(this.engine);
-        }
-        return this.#glyphs;
+        return this.atlases.glyphs;
     }
     /** @internal The icons of the symbol layers: the application's images and the vector basemaps' sprites */
     get icons() {
-        if (!this.#icons) {
-            const gl = this.canvas.getContext('webgl2');
-            const max = gl?.getParameter(gl.MAX_TEXTURE_SIZE);
-            this.#icons = new Icons(typeof max === 'number' ? max : undefined);
-            this.#icons.attach(this.engine);
-        }
-        return this.#icons;
+        return this.atlases.icons;
     }
     /**
      * An image for the symbol layers' icons (`icon: name`), as MapLibre's `addImage`: its pixels (an image, a canvas,
@@ -1062,31 +733,32 @@ export class GeoMap {
      * text. An image of the same name is replaced
      */
     addImage(name, image, options = {}) {
-        const pixels = 'data' in image ? image : readPixels(image);
-        if (!pixels)
-            throw new Error(`isard: the image ${name} has no pixels`);
-        this.icons.add(name, pixels, options);
+        this.atlases.addImage(name, image, options);
     }
     hasImage(name) {
-        return this.#icons?.has(name) ?? false;
+        return this.atlases.hasImage(name);
     }
     removeImage(name) {
-        this.#icons?.remove(name);
+        this.atlases.removeImage(name);
     }
     /**
      * Vector tiles with a MapLibre style (OpenFreeMap's Positron by default): `tiles.raster(…)` draws its fills and lines
-     * (or a subset) as a raster layer, `tiles.labels(…)` its labels. `setBasemap('osm-positron')` does both for the
-     * basemap.
+     * (or a subset) as a raster layer, `tiles.vectors(…)` as geometry, `tiles.labels(…)` its labels.
+     * `setBasemap('osm-positron')` draws the basemap with a raster layer and the labels.
      */
     vectorTiles(options = {}) {
         const tiles = new VectorTiles(this, {
-            ...(this.basemapWorkerUrl ? { workerUrl: this.basemapWorkerUrl } : {}),
+            ...(this.workers.url ? { workerUrl: this.workers.url } : {}),
             ...options,
         });
         // Its workers stop with the map
         this.vectorSets.add(tiles);
         return tiles;
     }
+    /** @internal The geometry of a `VectorTiles` (`vectors`), under `before` if given */
+    addVectorLayer(before) {
+        return this.place(new VectorLayer(this), before);
+    }
     /** @internal Forgets a destroyed `VectorTiles` */
     dropVectorTiles(tiles) {
         this.vectorSets.delete(tiles);
@@ -1096,40 +768,8 @@ export class GeoMap {
      * when it asks for another count or URL
      */
     basemapWorkers(count, url) {
-        const sharedUrl = this.basemapWorkerUrl;
-        const shared = defaultWorkerCount();
-        const workers = Math.max(1, count ?? shared);
-        const workerUrl = url ?? sharedUrl;
-        if (workers === shared && String(workerUrl) === String(sharedUrl)) {
-            this.basemapPool ??= new BasemapWorkers(shared, sharedUrl);
-            return { pool: this.basemapPool, own: false };
-        }
-        return { pool: new BasemapWorkers(workers, workerUrl), own: true };
+        return this.workers.pool(count, url);
     }
-    /**
-     * 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.addLayer(layer);
@@ -1163,126 +803,31 @@ export class GeoMap {
      * WebGL, three.js… with the matrices of the frame (`frame.matrixAt`); under `before` if given
      */
     addCustomLayer(layer, options = {}) {
-        const custom = new CustomLayer(this, layer, this.canvas, this, (lon, lat, altitude) => this.engineClass.customMatrix(lon, lat, altitude), () => this.getCamera());
+        const custom = new CustomLayer(this, layer, this.canvas, this, (lon, lat, altitude) => this.engines.customMatrix(lon, lat, altitude), () => this.getCamera());
         return this.place(custom, options.before);
     }
     // ── Frames ──
     /** Asks for a frame; several calls before the next frame draw it once */
     requestRender() {
-        // Changes made by listeners during a frame are drawn by that frame; nothing is drawn without a context
-        if (this.inFrame || this.lost)
-            return;
-        this.frameRequest ||= requestAnimationFrame((now) => this.frame(now));
+        this.frames.request();
     }
     /** @internal Runs `step` every frame until it returns false; replaces the running animation */
     animate(step) {
-        // A flight cut short no longer needs its destination
-        if (this.animation)
-            this.engine.clearPreload();
-        this.animation = step;
-        this.requestRender();
+        this.frames.animate(step);
     }
     /** @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) {
         if (!point) {
-            this.hoverPoint = undefined;
-            this.cancelHoverPick();
+            this.frames.hover(undefined);
+            this.hoverPick.cancel();
             return;
         }
-        if (this.listeners.hover.size === 0 && this.listeners.hoverfeature.size === 0)
+        if (!this.listeners.has('hover') && !this.listeners.has('hoverfeature'))
             return;
-        this.hoverPoint = point;
+        this.frames.hover(point);
         this.requestRender();
     }
-    frame(now) {
-        this.frameRequest = 0;
-        try {
-            this.inFrame = true;
-            this.drawFrame(now);
-        }
-        finally {
-            // Whatever throws in a frame, the next ones are still drawn
-            this.inFrame = false;
-        }
-    }
-    drawFrame(now) {
-        if (this.animation && !this.animation(now))
-            this.animation = undefined;
-        const camera = this.getCamera();
-        const key = `${camera.center}|${camera.zoom}|${camera.pitch}|${camera.bearing}`;
-        const moved = key !== this.lastCamera;
-        if (moved) {
-            // The first frame is no move
-            if (!this.moving && this.lastCamera !== '') {
-                this.moving = true;
-                this.emit('movestart', camera);
-            }
-            this.lastCamera = key;
-            this.emit('move', camera);
-        }
-        else if (this.moving && !this.animation && !this.interaction?.active) {
-            this.moving = false;
-            this.emit('moveend', camera);
-        }
-        // Values for the pointer position are computed before drawing, in the same frame
-        let hovered;
-        if (this.hoverPoint) {
-            const point = this.hoverPoint;
-            hovered = point;
-            this.hoverPoint = undefined;
-            // 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
-        this.inFrame = false;
-        // As the engine has it now (a listener may have moved it), for the custom layers drawn in the frame
-        this.frameCamera = this.layers.some((layer) => layer instanceof CustomLayer) ? this.engine.camera() : undefined;
-        let loading;
-        try {
-            loading = this.engine.render();
-        }
-        finally {
-            this.frameCamera = undefined;
-        }
-        this.inFrame = true;
-        // The picking pass sees the frame just drawn; its answer comes on a later frame
-        if (hovered && this.listeners.hoverfeature.size > 0)
-            this.requestHoverPick(hovered);
-        // Overlays follow the frame just drawn (camera, relief altitudes): all in one pass, transforms only
-        for (const item of this.positioned)
-            item.position(this.size);
-        this.emit('render', { ms: performance.now() - t0 });
-        this.inFrame = false;
-        // A move goes on until a frame finds the camera still: that frame sends 'moveend'
-        if (this.animation || (moved && this.moving))
-            this.requestRender();
-        // Idle: nothing loading (the engine with 3D Tiles neither), no animation, no frame asked for (uploads waiting,
-        // fades, listeners)
-        if (loading || this.upgrading || this.animation || this.frameRequest !== 0) {
-            this.settled = false;
-        }
-        else if (!this.settled) {
-            this.settled = true;
-            this.emit('idle', {});
-        }
-    }
-    /** Resizes when the device pixel ratio changes (browser zoom, a window moved to another screen) */
-    watchRatio() {
-        if (typeof matchMedia !== 'function')
-            return;
-        const query = matchMedia(`(resolution: ${window.devicePixelRatio || 1}dppx)`);
-        const changed = () => {
-            // A query for the new ratio
-            this.unwatchRatio?.();
-            this.watchRatio();
-            this.resize();
-        };
-        query.addEventListener('change', changed, { once: true });
-        this.unwatchRatio = () => query.removeEventListener('change', changed);
-    }
     resize() {
         if (this.lost)
             return;
@@ -1291,11 +836,10 @@ export class GeoMap {
         this.canvas.width = Math.round(width * ratio);
         this.canvas.height = Math.round(height * ratio);
         this.engine.resize(width, height, ratio);
-        this.size = [width, height];
+        this.overlays.size = [width, height];
         this.emit('resize', { width, height });
         // Draw at once: a resized canvas is cleared, waiting one frame would flash
-        cancelAnimationFrame(this.frameRequest);
-        this.frame(performance.now());
+        this.frames.drawNow();
     }
     destroy() {
         if (this.gone)
@@ -1304,45 +848,30 @@ export class GeoMap {
         // 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])
+        this.frames.stop();
+        this.hoverPick.cancel();
+        this.basemaps.destroy();
+        [...this.vectorSets].forEach((tiles) => {
             tiles.destroy();
+        });
         this.vectorSets.clear();
-        this.basemapPool?.terminate();
-        this.basemapPool = undefined;
-        this.unwatchRatio?.();
-        this.unwatchRatio = undefined;
+        this.workers.terminate();
+        this.unwatchRatio();
         this.unwatchHeaders();
         this.resizeObserver.disconnect();
         this.interaction?.destroy();
-        this.loader?.destroy();
+        this.engines.destroy();
         // Custom layers free their WebGL objects, models their data, while the context is there
-        for (const layer of this.layers)
-            layer.dispose();
+        this.stack.dispose();
         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 = destroyedEngine(camera);
         // Glyph ranges still arriving upload to it, not to the freed engine
-        this.#glyphs?.attach(this.#engine);
-        this.#icons?.attach(this.#engine);
+        this.atlases.attach(this.#engine);
         this.lost = true;
-        for (const control of [...this.controls.keys()])
-            this.removeControl(control);
-        this.positioned.clear();
-        this.canvas.remove();
-        this.overlay.remove();
-        for (const position of CORNERS)
-            this.corners[position].remove();
-        this.container.classList.remove('isard-map');
-        for (const listeners of Object.values(this.listeners))
-            listeners.clear();
+        this.overlays.destroy();
+        this.listeners.clear();
     }
 }
-/** The page's request headers to an engine (its own requests: raster tiles, tilesets, point clouds) */
-function sendHeaders(engine, rules) {
-    engine.setRequestHeaders(rules.map(([prefix]) => prefix), Uint32Array.from(rules, ([, headers]) => Object.keys(headers).length), rules.flatMap(([, headers]) => Object.entries(headers).flat()));
-}
 //# sourceMappingURL=map.js.map