isard 1.4.0 → 1.5.0

package/dist/basemap/vectortiles.js

@@ -7,167 +7,21 @@
  *
  * Any subset of the style can be drawn on its own raster layer (`raster({ layers })`), at its own place in the stack:
  * rivers from the basemap's data over a flood layer, for instance, restyled with `extraLayers`.
+ *
+ * The layers other than the raster ones are made in `vectortiles/` (one module each), from what they use of the
+ * instance (`VectorTilesContext`); the style's loading is in `vectortiles/style.ts`.
  */
-import { withHeaders } from "../engine/requests.js";
-import { IGN_ATTRIBUTION } from "../geoplateforme.js";
-import { loadSprites, readPixels } from "../layers/icons.js";
-import { latitude, longitude, mercatorX, mercatorY } from "../util/geo.js";
-import { isRecord } from "../util/guards.js";
-import { Lru } from "../util/lru.js";
-import { OPENFREEMAP_ATTRIBUTION } from "./basemaps.js";
-import { pmtiles, pmtilesUrl } from "./pmtiles.js";
-import { isWoodland, TREE_NUMBERS, treeModel, treeSpacing } from "./trees.js";
-import { evaluate, isExpression, isStyle, labelFont, vectorKind, zoomOnly, } from "./vectorstyle.js";
+import { loadSprites, spriteSources } from "../layers/icons.js";
+import { extrusions } from "./vectortiles/extrusions.js";
+import { labels, size, tileLabels } from "./vectortiles/labels.js";
+import { streetWind } from "./vectortiles/street-wind.js";
+import { loadStyle, OPENFREEMAP_STYLES, PLAN_STYLES, styleAttribution, VECTOR_BASEMAPS, } from "./vectortiles/style.js";
+import { VECTOR_MOVE_REFRESH_MS } from "./vectortiles/tiles.js";
+import { trees } from "./vectortiles/trees.js";
+import { dashes, vectors } from "./vectortiles/vectors.js";
 import { rendererKey, tilePriority } from "./workerpool.js";
-/** OpenFreeMap's styles: OpenStreetMap data in the OpenMapTiles schema, worldwide, free and without a key */
-export const OPENFREEMAP_STYLES = {
-    positron: 'https://tiles.openfreemap.org/styles/positron',
-    liberty: 'https://tiles.openfreemap.org/styles/liberty',
-    bright: 'https://tiles.openfreemap.org/styles/bright',
-    dark: 'https://tiles.openfreemap.org/styles/dark',
-    fiord: 'https://tiles.openfreemap.org/styles/fiord',
-};
-/** PLAN.IGN vector styles of the Géoplateforme (France) */
-export const PLAN_STYLES = {
-    standard: 'https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json',
-    grey: 'https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/gris.json',
-};
-/** Vector basemaps by name (see `BasemapName`) */
-export const VECTOR_BASEMAPS = {
-    'osm-positron': OPENFREEMAP_STYLES.positron,
-    'osm-liberty': OPENFREEMAP_STYLES.liberty,
-    'osm-bright': OPENFREEMAP_STYLES.bright,
-    'osm-dark': OPENFREEMAP_STYLES.dark,
-    'ign-plan-vector': PLAN_STYLES.standard,
-    'ign-plan-grey-vector': PLAN_STYLES.grey,
-};
-/** The credits of a known style: OpenFreeMap's, PLAN.IGN's */
-export const styleAttribution = (style) => {
-    if (typeof style !== 'string')
-        return undefined;
-    if (Object.values(OPENFREEMAP_STYLES).some((s) => s === style))
-        return OPENFREEMAP_ATTRIBUTION;
-    if (Object.values(PLAN_STYLES).some((s) => s === style))
-        return IGN_ATTRIBUTION;
-    return undefined;
-};
-/** Text or icon size of a style (a number, legacy stops, or the stops of a zoom expression made by the worker) as a
- * size for the symbol layer */
-export const size = (value, fallback = 16) => {
-    const stop = (s) => {
-        const [z, v] = Array.isArray(s) ? s : [];
-        return [Number(z), Number(v)];
-    };
-    if (typeof value === 'number')
-        return value;
-    if (Array.isArray(value) && value.length > 0 && value.every(Array.isArray))
-        return value.map(stop);
-    if (isRecord(value) && Array.isArray(value.stops))
-        return value.stops.map(stop);
-    return fallback;
-};
-/** The anchors of the symbol layer */
-const ANCHORS = new Set([
-    'center',
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'top-left',
-    'top-right',
-    'bottom-left',
-    'bottom-right',
-]);
-const isAnchor = (value) => value !== undefined && ANCHORS.has(value);
-/** A style's anchor (`text-anchor`, `icon-anchor`) for the symbol layer: `center` if it is none */
-const anchor = (value) => (isAnchor(value) ? value : 'center');
-/** Fetches a JSON document (a style, a TileJSON) */
-const json = async (url) => {
-    const response = await fetch(url, withHeaders(url));
-    if (!response.ok)
-        throw new Error(`${url}: ${response.status}`);
-    return response.json();
-};
-/** A style fetched: a MapLibre style, or an error */
-const fetchStyle = async (url) => {
-    const style = await json(url);
-    if (!isStyle(style))
-        throw new Error(`${url}: not a MapLibre style`);
-    return style;
-};
-const isTileJson = (value) => isRecord(value) &&
-    Array.isArray(value.tiles) &&
-    value.tiles.every((t) => typeof t === 'string') &&
-    (value.maxzoom === undefined || typeof value.maxzoom === 'number');
-/** A TileJSON fetched, or an error */
-const fetchTileJson = async (url) => {
-    const tilejson = await json(url);
-    if (!isTileJson(tilejson))
-        throw new Error(`${url}: not a TileJSON`);
-    return tilejson;
-};
-/**
- * A style source's tiles and deepest level: a `pmtiles://` archive (its `url`, or a `tiles` template) read for its
- * header, its tiles then named `pmtiles://<absolute archive URL>/{z}/{x}/{y}` for the workers; other sources as they are
- */
-const resolveSource = async (source) => {
-    const given = source.url ?? source.tiles?.[0] ?? '';
-    const archive = pmtilesUrl(given.replace(/\/\{z\}\/\{x\}\/\{y\}$/, ''));
-    if (!archive)
-        return {
-            ...(source.tiles ? { tiles: source.tiles } : {}),
-            ...(source.maxzoom === undefined ? {} : { maxzoom: source.maxzoom }),
-        };
-    const header = await pmtiles(archive).header();
-    return { tiles: [`pmtiles://${archive}/{z}/{x}/{y}`], maxzoom: source.maxzoom ?? header.maxZoom };
-};
-/** Pause before the labels of tiles that failed are asked for again, when no move brings an update (ms) */
-const RETRY_LABELS_MS = 3000;
-/** The style layers of buildings, by default: PLAN IGN's `bati_surf` (not its built-up areas nor its parks), the
- * OpenMapTiles' `building` */
-const isBuildings = (layer) => ['bati_surf', 'building'].includes(layer['source-layer'] ?? '');
-/**
- * The tiles of level `z` in view, within a window around the center (a tilted view's bounds reach far), the
- * `maxTiles` nearest to the center first
- */
-const tilesAround = (map, camera, z, maxTiles) => {
-    const n = 2 ** z;
-    const [west, south, east, north] = map.getBounds();
-    const tx = (lon) => Math.floor(mercatorX(lon) * n);
-    const ty = (lat) => Math.floor(mercatorY(lat) * n);
-    const [cx, cy] = [mercatorX(camera.center[0]) * n, mercatorY(camera.center[1]) * n];
-    const reach = Math.ceil(Math.sqrt(maxTiles)) + 2;
-    const [x0, x1] = [Math.max(0, tx(west), Math.floor(cx) - reach), Math.min(n - 1, tx(east), Math.floor(cx) + reach)];
-    const [y0, y1] = [Math.max(0, ty(north), Math.floor(cy) - reach), Math.min(n - 1, ty(south), Math.floor(cy) + reach)];
-    const wanted = Array.from({ length: Math.max(0, y1 - y0 + 1) }, (_, j) => y0 + j).flatMap((y) => Array.from({ length: Math.max(0, x1 - x0 + 1) }, (_, i) => [x0 + i, y]));
-    wanted.sort((a, b) => Math.hypot(a[0] + 0.5 - cx, a[1] + 0.5 - cy) - Math.hypot(b[0] + 0.5 - cx, b[1] + 0.5 - cy));
-    return wanted.slice(0, maxTiles);
-};
-/** A tile's label candidates as features, by style layer */
-export const tileLabels = (candidates) => {
-    const byLayer = new Map();
-    candidates.forEach((p) => {
-        const feature = {
-            type: 'Feature',
-            properties: p,
-            geometry: p.along
-                ? {
-                    type: 'LineString',
-                    coordinates: [
-                        [p.lon - p.along[0] / 2, p.lat - p.along[1] / 2],
-                        [p.lon + p.along[0] / 2, p.lat + p.along[1] / 2],
-                    ],
-                }
-                : { type: 'Point', coordinates: [p.lon, p.lat] },
-        };
-        const list = byLayer.get(p.layer);
-        if (list)
-            list.push(feature);
-        else
-            byLayer.set(p.layer, [feature]);
-    });
-    return [...byLayer].sort((a, b) => b[0] - a[0]);
-};
+// The names the package and its tests import from here, now made in `vectortiles/`
+export { dashes, OPENFREEMAP_STYLES, PLAN_STYLES, size, styleAttribution, tileLabels, VECTOR_BASEMAPS };
 export class VectorTiles {
     map;
     pool;
@@ -186,6 +40,8 @@ export class VectorTiles {
     layers = [];
     /** Its first raster layer: the ground its labels follow */
     ground;
+    /** What its layers made in `vectortiles/` use of it */
+    context;
     /** The style once loaded, with its source resolved */
     ready;
     /**
@@ -200,57 +56,49 @@ export class VectorTiles {
         this.namespace = pool.namespace();
         const style = options.style ?? OPENFREEMAP_STYLES.positron;
         this.attribution = options.attribution ?? styleAttribution(style);
-        this.ready = this.load(style);
+        this.ready = loadStyle(style);
         // Reported once here; `ready`, the raster tiles and the labels fail with it
         this.ready.catch((error) => {
             if (!this.destroyed)
                 console.warn('isard: vector tiles', error);
         });
-    }
-    async load(input) {
-        const style = typeof input === 'string' ? await fetchStyle(input) : input;
-        const [name, source] = Object.entries(style.sources).find(([, s]) => s.type === 'vector') ?? [];
-        if (!name || !source)
-            throw new Error('the style has no vector source');
-        const resolved = await resolveSource(source);
-        const tilejson = !resolved.tiles && source.url ? await fetchTileJson(source.url) : undefined;
-        const tiles = tilejson === undefined ? resolved.tiles : tilejson.tiles;
-        const maxzoom = resolved.maxzoom ?? tilejson?.maxzoom;
-        const template = tiles?.[0];
-        if (!template)
-            throw new Error(`source ${name} has no tiles`);
-        // Its raster sources of tiles, drawn into the same images (the shaded relief of a style at low zoom)
-        const rasters = {};
-        for (const [key, s] of Object.entries(style.sources)) {
-            if (s.type !== 'raster')
-                continue;
-            const r = await resolveSource(s);
-            const url = r.tiles?.[0];
-            if (url)
-                rasters[key] = { tiles: url, maxzoom: r.maxzoom ?? 22, tileSize: s.tileSize ?? 512 };
-        }
-        // Only the layers of those sources (and the background); other types (hillshade, heatmap…) are left out. The
-        // application's style object stays as it is
-        const layers = style.layers.filter((l) => l.type === 'background' ||
-            (l.source === name && l.type !== 'raster') ||
-            (l.type === 'raster' && l.source !== undefined && rasters[l.source] !== undefined));
-        return { style: { ...style, layers }, tiles: template, maxzoom: maxzoom ?? 14, rasters };
-    }
-    /** The fonts of the style's labels, for its glyphs (the first of each `text-font`, as the workers take it) */
-    static fonts(style) {
-        const fonts = new Set();
-        style.layers.forEach((layer) => {
-            const font = layer.layout?.['text-font'];
-            if (layer.type === 'symbol' && Array.isArray(font) && typeof font[0] === 'string')
-                fonts.add(labelFont(font[0]));
-        });
-        return [...fonts];
+        this.context = {
+            map,
+            ready: this.ready,
+            layers: this.layers,
+            cleanup: this.cleanup,
+            iconPrefix: this.iconPrefix,
+            destroyed: () => this.destroyed,
+            ground: () => this.ground,
+            broadcast: (message) => {
+                this.pool.broadcast(message);
+            },
+            request: (vz, vx, vy, work, signal) => this.request(vz, vx, vy, work, signal),
+            renderer: (select, extra, again) => this.renderer(select, extra, again),
+            loadSprites: (sprite) => this.loadSprites(sprite),
+            followView: (update, requests, moving) => {
+                this.followView(update, requests, moving);
+            },
+        };
     }
     /** The style's sprites (their JSON and their images), loaded once, for the fill patterns and the icons */
     sprites;
+    /** The style's sprites, kept once all of them came: one that failed is asked for again by the next layer */
     loadSprites(sprite) {
-        this.sprites ??= loadSprites(sprite).catch(() => []);
-        return this.sprites;
+        if (this.sprites)
+            return this.sprites;
+        const wanted = spriteSources(sprite).length;
+        const loading = loadSprites(sprite)
+            .catch(() => [])
+            .then((loaded) => {
+            if (loaded.length < wanted && this.sprites === loading) {
+                console.warn(`isard: ${wanted - loaded.length} of the style's sprites not loaded, its icons and patterns missing`);
+                this.sprites = undefined;
+            }
+            return loaded;
+        });
+        this.sprites = loading;
+        return loading;
     }
     /** Prefix of the names of its sprites' images among the map's icons */
     get iconPrefix() {
@@ -317,51 +165,7 @@ export class VectorTiles {
      * leaving the view are dropped.
      */
     extrusions(options = {}) {
-        const { layers = isBuildings, minZoom = 15, maxTiles = 36, ...style } = options;
-        const extrusions = this.map.addExtrusions(style);
-        const renderer = this.renderer((l) => (l.type === 'fill' || l.type === 'fill-extrusion') && layers(l), []);
-        renderer.catch(() => undefined);
-        this.layers.push(extrusions);
-        /** The tiles held or asked for, by key */
-        const held = new Map();
-        const update = async () => {
-            if (this.destroyed)
-                return;
-            const { key, maxzoom } = await renderer;
-            const camera = this.map.getCamera();
-            const z = maxzoom;
-            const wanted = camera.zoom < minZoom ? [] : tilesAround(this.map, camera, z, maxTiles);
-            const keys = new Set(wanted.map(([x, y]) => `${z}/${x}/${y}`));
-            // Out of view: dropped, or no longer asked for
-            [...held].forEach(([k, controller]) => {
-                if (keys.has(k))
-                    return;
-                controller.abort();
-                held.delete(k);
-                extrusions.removeTile(k);
-            });
-            wanted.forEach(([x, y], index) => {
-                const k = `${z}/${x}/${y}`;
-                if (held.has(k))
-                    return;
-                const controller = new AbortController();
-                const work = { type: 'polygons', key, z, x, y, priority: index < 4 ? 'auto' : 'low' };
-                held.set(k, controller);
-                this.request(z, x, y, work, controller.signal).then((r) => {
-                    if (controller.signal.aborted || !('polygons' in r))
-                        return;
-                    const tile = r.polygons;
-                    // The features' properties as the style reads them
-                    extrusions.setTile(k, { arrays: tile.arrays, properties: tile.properties });
-                }, () => {
-                    // A failure is asked for again on the next update
-                    if (held.get(k) === controller)
-                        held.delete(k);
-                });
-            });
-        };
-        this.followView(update, held, update);
-        return extrusions;
+        return extrusions(this.context, options);
     }
     /**
      * The wind through the streets around the view, as particles at street level (`height`, default 3 metres) between
@@ -375,114 +179,7 @@ export class VectorTiles {
      * layer's (`addFlow`)
      */
     streetWind(options = {}) {
-        const { size = 1200, cell = 4, iterations = 300, layers = isBuildings, minZoom = 15, ...flow } = options;
-        const renderer = this.renderer((l) => (l.type === 'fill' || l.type === 'fill-extrusion') && layers(l), []);
-        const [lon, lat] = this.map.getCamera().center;
-        // Nothing yet: a field of no value, where no particle is born
-        const empty = { width: 2, height: 2, u: [NaN, NaN, NaN, NaN], v: [NaN, NaN, NaN, NaN] };
-        const layer = this.map.addFlow({
-            height: 3,
-            ...flow,
-            field: { ...empty, bounds: [lon, lat, lon + 1e-4, lat + 1e-4] },
-        });
-        const state = { wind: options.wind ?? [3, 2], asked: 0, wait: 1000 };
-        /** The flow of the wind far away: `u` times the flow towards the east plus `v` times the one towards the north */
-        const send = () => {
-            const { flows, grid, wind } = state;
-            if (!flows || !grid)
-                return;
-            const [wu, wv] = wind;
-            const u = flows.eastU.map((e, i) => wu * e + wv * (flows.northU[i] ?? 0));
-            const v = flows.eastV.map((e, i) => wu * e + wv * (flows.northV[i] ?? 0));
-            layer.setField({ ...grid, u, v });
-        };
-        const held = new Map();
-        const first = {};
-        const computed = new Promise((resolve) => {
-            first.resolve = resolve;
-        });
-        const update = async () => {
-            if (this.destroyed)
-                return;
-            const camera = this.map.getCamera();
-            const [x, y] = [mercatorX(camera.center[0]), mercatorY(camera.center[1])];
-            // Half the square in Mercator, at its latitude
-            const half = size / 2 / (40_075_016.686 * Math.cos((camera.center[1] * Math.PI) / 180));
-            const square = state.square;
-            // Off street level, or still in the square's middle: nothing to compute
-            if (camera.zoom < minZoom)
-                return;
-            if (square &&
-                Math.abs(x - (square[0] + square[2]) / 2) < half / 3 &&
-                Math.abs(y - (square[1] + square[3]) / 2) < half / 3) {
-                return;
-            }
-            const { key, maxzoom } = await renderer;
-            const bounds = [x - half, y - half, x + half, y + half];
-            const n = 2 ** maxzoom;
-            const tiles = [];
-            for (let ty = Math.floor(bounds[1] * n); ty <= Math.floor(bounds[3] * n); ty++) {
-                for (let tx = Math.floor(bounds[0] * n); tx <= Math.floor(bounds[2] * n); tx++)
-                    tiles.push(tx, ty);
-            }
-            const sides = Math.max(8, Math.round(size / cell));
-            const work = {
-                type: 'street',
-                key,
-                module: this.map.gridUrl,
-                z: maxzoom,
-                tiles,
-                bounds,
-                width: sides,
-                height: sides,
-                iterations,
-            };
-            const asked = ++state.asked;
-            held.forEach((c) => {
-                c.abort();
-            });
-            held.clear();
-            const controller = new AbortController();
-            held.set('square', controller);
-            state.square = bounds;
-            const answer = await this.request(maxzoom, Math.floor(x * n), Math.floor(y * n), work, controller.signal).catch((error) => ({ error }));
-            if (asked !== state.asked || controller.signal.aborted)
-                return;
-            // Failed (a tile or the grid module not fetched, a worker of an older build): the square asked for again later,
-            // a while after each failure
-            if (!('street' in answer)) {
-                console.warn("isard: the streets' wind not computed, tried again", 'error' in answer ? answer.error : answer);
-                state.square = undefined;
-                clearTimeout(state.retry);
-                state.retry = window.setTimeout(() => {
-                    update().catch(() => undefined);
-                }, state.wait);
-                state.wait = Math.min(state.wait * 2, 30_000);
-                return;
-            }
-            state.wait = 1000;
-            state.flows = answer.street;
-            state.grid = {
-                width: sides,
-                height: sides,
-                bounds: [longitude(bounds[0]), latitude(bounds[3]), longitude(bounds[2]), latitude(bounds[1])],
-            };
-            send();
-            first.resolve?.();
-        };
-        renderer.catch(() => undefined);
-        this.layers.push(layer);
-        this.followView(update, held, () => undefined);
-        this.cleanup.push(() => {
-            clearTimeout(state.retry);
-        });
-        return Object.assign(layer, {
-            computed,
-            setWind: (wind) => {
-                state.wind = wind;
-                send();
-            },
-        });
+        return streetWind(this.context, options);
     }
     /**
      * Trees on the style's woods, forests and grass (or the fill layers `layers` keeps) as 3D models, from street level
@@ -495,87 +192,7 @@ export class VectorTiles {
      * engine with 3D Tiles.
      */
     trees(options = {}) {
-        const { layers = isWoodland, spacing = treeSpacing, minZoom = 15, maxTiles = 9, maxTrees = 30000, maxInstances = 25000, } = options;
-        const model = options.url ? { url: options.url } : { data: options.data ?? treeModel(options.colors) };
-        const trees = this.map.addModels({
-            ...model,
-            instances: [],
-            ...(options.before ? { before: options.before } : {}),
-        });
-        const renderer = this.renderer((l) => l.type === 'fill' && layers(l), []);
-        renderer.catch(() => undefined);
-        this.layers.push(trees);
-        /** The tiles held or asked for, by key, and the trees of those that came */
-        const held = new Map();
-        const found = new Map();
-        /** The trees drawn to the engine (longitude, latitude, altitude, heading, pitch, roll, scale each): all of them
-         * near the view's center, past `near` metres those of a rank under (near / distance)², at most `maxInstances` */
-        const send = () => {
-            const { center, zoom } = this.map.getCamera();
-            const near = TREES_NEAR_METRES * 2 ** (16 - zoom);
-            const metresPerDegree = 111320;
-            const cos = Math.cos((center[1] * Math.PI) / 180);
-            const chosen = [];
-            found.forEach((t) => {
-                for (let i = 0; i < t.length / TREE_NUMBERS; i += 1) {
-                    const dx = ((t[i * TREE_NUMBERS] ?? 0) - center[0]) * metresPerDegree * cos;
-                    const dy = ((t[i * TREE_NUMBERS + 1] ?? 0) - center[1]) * metresPerDegree;
-                    const far = (dx * dx + dy * dy) / (near * near);
-                    const score = (t[i * TREE_NUMBERS + 4] ?? 0) * Math.max(1, far);
-                    if (score < 1)
-                        chosen.push([score, t, i]);
-                }
-            });
-            if (chosen.length > maxInstances)
-                chosen.sort((a, b) => a[0] - b[0]).splice(maxInstances);
-            const out = new Float64Array(chosen.length * 7);
-            chosen.forEach(([, t, i], k) => {
-                const at = i * TREE_NUMBERS;
-                out.set([t[at] ?? 0, t[at + 1] ?? 0, 0, t[at + 3] ?? 0, 0, 0, t[at + 2] ?? 1], k * 7);
-            });
-            trees.setInstanceNumbers(out);
-        };
-        const update = async () => {
-            if (this.destroyed)
-                return;
-            const { key, maxzoom, layers: list } = await renderer;
-            const camera = this.map.getCamera();
-            const z = maxzoom;
-            const wanted = camera.zoom < minZoom ? [] : tilesAround(this.map, camera, z, maxTiles);
-            const keys = new Set(wanted.map(([x, y]) => `${z}/${x}/${y}`));
-            const metres = list.map((l) => (typeof spacing === 'number' ? spacing : spacing(l)));
-            const dropped = [...held.keys()].filter((k) => !keys.has(k));
-            // Out of view: dropped, or no longer asked for
-            dropped.forEach((k) => {
-                held.get(k)?.abort();
-                held.delete(k);
-                found.delete(k);
-            });
-            // Dense around the new center
-            send();
-            wanted.forEach(([x, y], index) => {
-                const k = `${z}/${x}/${y}`;
-                if (held.has(k))
-                    return;
-                const controller = new AbortController();
-                const priority = index < 4 ? 'auto' : 'low';
-                const work = { type: 'trees', key, z, x, y, spacing: metres, maxTrees, priority };
-                held.set(k, controller);
-                this.request(z, x, y, work, controller.signal).then((r) => {
-                    if (controller.signal.aborted || !('trees' in r))
-                        return;
-                    found.set(k, r.trees);
-                    send();
-                }, () => {
-                    // A failure is asked for again on the next update
-                    if (held.get(k) === controller)
-                        held.delete(k);
-                });
-            });
-        };
-        // While the camera moves, the trees drawn follow its center (dense near it)
-        this.followView(update, held, send);
-        return trees;
+        return trees(this.context, options);
     }
     /**
      * A layer drawing the style's fills, lines and buildings (or those `layers` keeps; backgrounds as fills, the
@@ -593,146 +210,7 @@ export class VectorTiles {
      * a road, not its casing, a railway, a path or a tunnel).
      */
     vectors(options = {}) {
-        const { layers = () => true, streets = isStreet, before } = options;
-        const vector = this.map.addVectorLayer(before);
-        const state = { renderer: this.renderer((l) => vectorKind(l) !== undefined && layers(l), []), update: 0, style: 0 };
-        state.renderer.catch(() => undefined);
-        this.layers.push(vector);
-        const sublayers = (list) => {
-            const zoom = this.map.getCamera().zoom;
-            return list.map((l) => ({
-                id: l.id,
-                sourceLayer: l['source-layer'],
-                kind: vectorKind(l) ?? 'fill',
-                minZoom: l.minzoom ?? 0,
-                maxZoom: l.maxzoom ?? 24,
-                visible: l.layout?.visibility !== 'none',
-                opacity: zoomOnly(l.paint?.[`${l.type}-opacity`], 1) ?? 1,
-                cap: lineCap(l.layout?.['line-cap'], zoom),
-                lit: l.type === 'line' && streets(l),
-                dash: l.type === 'line' ? dashes(l.paint?.['line-dasharray'], zoom) : [0, 0, 0, 0],
-            }));
-        };
-        /** The tiles held or asked for, by `z/x/y` */
-        const held = new Map();
-        /** A tile's geometry, or its styles alone, asked of the worker of its tile of the source's level (which keeps the
-         * decoded tile its deeper tiles are cut from) */
-        const ask = ({ key, maxzoom }, [z = 0, x = 0, y = 0], styles, priority, signal) => {
-            const d = Math.max(0, z - maxzoom);
-            const work = { type: 'vectors', key, z, x, y, deepest: deepestLevel(maxzoom), priority };
-            // The geometry made ready for the GPU in the workers, with the prisms the relief needs
-            return this.request(z - d, Math.floor(x / 2 ** d), Math.floor(y / 2 ** d), styles ? { ...work, styles } : { ...work, prism: this.map.hasRelief }, signal);
-        };
-        // The workers tessellate the tiles (the main thread only uploads them), once they know the module
-        this.pool.broadcast({ type: 'tess', url: this.map.tessUrl });
-        /** The styles of a tile held asked for again, the tile kept as it is */
-        const restyleTile = async (renderer, k) => {
-            const r = await ask(renderer, k.split('/').map(Number), true, 'auto').catch(() => undefined);
-            if (r && 'styles' in r)
-                vector.setTileStyles(k, r.styles);
-        };
-        const update = async () => {
-            if (this.destroyed)
-                return;
-            const generation = ++state.update;
-            const { key, maxzoom, layers: list } = await state.renderer;
-            vector.setSublayers(sublayers(state.own ?? list));
-            const view = this.map.engine.vectorTilesInView(0, deepestLevel(maxzoom));
-            const wanted = Array.from({ length: Math.floor(view.length / 3) }, (_, i) => [
-                ...view.subarray(i * 3, i * 3 + 3),
-            ]);
-            const keys = new Set(wanted.map((t) => t.join('/')));
-            const loads = wanted.flatMap((t, index) => {
-                const k = t.join('/');
-                if (held.has(k))
-                    return [];
-                const controller = new AbortController();
-                const style = state.style;
-                held.set(k, controller);
-                return [
-                    ask({ key, maxzoom }, t, false, index < 4 ? 'high' : 'auto', controller.signal).then(async (r) => {
-                        if (controller.signal.aborted || !('vectors' in r))
-                            return;
-                        vector.setTile(k, r.vectors);
-                        // Cut under a style changed since: its styles asked for again
-                        if (style !== state.style)
-                            await restyleTile(await state.renderer, k);
-                    }, () => {
-                        // A failure is asked for again on the next update
-                        if (held.get(k) === controller)
-                            held.delete(k);
-                    }),
-                ];
-            });
-            // Out of view: those still asked for go at once, those drawn once their replacements are there (no hole)
-            const drop = (drawn) => {
-                const shown = new Set(vector.tileKeys);
-                [...held].forEach(([k, controller]) => {
-                    if (keys.has(k) || shown.has(k) !== drawn)
-                        return;
-                    controller.abort();
-                    held.delete(k);
-                    vector.removeTile(k);
-                });
-            };
-            drop(false);
-            await Promise.all(loads);
-            // A later update (the view moved again meanwhile) drops for its own view: these keys are no longer the view
-            if (!this.destroyed && generation === state.update)
-                drop(true);
-        };
-        const refresh = () => {
-            update().catch(() => undefined);
-        };
-        /** The style layers changed: the workers' copy, then the styles of the tiles held */
-        const restyle = async (list) => {
-            state.own = list;
-            state.style++;
-            state.renderer = state.renderer.then(({ key }) => this.renderer(() => false, list, key));
-            const renderer = await state.renderer;
-            vector.setSublayers(sublayers(list));
-            await Promise.all(vector.tileKeys.map((k) => restyleTile(renderer, k)));
-        };
-        vector.restyle = (id, group, name, value) => {
-            state.renderer
-                .then(({ layers: list }) => {
-                const next = (state.own ?? list).map((l) => l.id === id ? { ...l, [group]: { ...l[group], [name]: value } } : l);
-                // Visibility and dashes are the engine's: the tiles stay as they are
-                if ((group === 'layout' && name === 'visibility') || name === 'line-dasharray') {
-                    state.own = next;
-                    vector.setSublayers(sublayers(next));
-                    return undefined;
-                }
-                // An outline added or taken away: a feature more or less in each tile, cut again
-                if (name === 'fill-outline-color' || name === 'fill-antialias') {
-                    state.own = next;
-                    state.style++;
-                    state.renderer = state.renderer.then(({ key }) => this.renderer(() => false, next, key));
-                    vector.setSublayers(sublayers(next));
-                    vector.recut?.();
-                    return undefined;
-                }
-                return restyle(next);
-            })
-                .catch(() => undefined);
-        };
-        vector.recut = () => {
-            held.forEach((controller) => {
-                controller.abort();
-            });
-            held.clear();
-            refresh();
-        };
-        vector.styled = state.renderer.then(({ layers: list }) => {
-            if (!this.destroyed)
-                vector.setSublayers(sublayers(state.own ?? list));
-        });
-        // Reported by the style's `ready`
-        vector.styled.catch(() => undefined);
-        // While the camera moves, the tiles follow it (as the labels do: a long drag or flight does not leave the view of
-        // its start drawn)
-        this.followView(update, held, update);
-        return vector;
+        return vectors(this.context, options);
     }
     /**
      * A symbol layer with the labels of the style's symbol layers (or those `layers` keeps), updated as the view
@@ -742,166 +220,13 @@ export class VectorTiles {
      * the center at the zoom of the view. It stays above the layers added after it unless one is moved over it.
      */
     labels(options = {}) {
-        const { layers = () => true, maxTiles = 36 } = options;
-        const symbol = this.map.addSymbols({
-            data: [],
-            text: (p) => p.text,
-            font: (p) => p.font,
-            size: (p) => size(p.size),
-            color: (p) => p.color,
-            haloColor: (p) => p.haloColor,
-            haloWidth: (p) => p.haloWidth,
-            anchor: (p) => anchor(p.anchor),
-            offset: (p) => p.offset,
-            maxWidth: (p) => p.maxWidth,
-            lineHeight: (p) => p.lineHeight,
-            overlap: (p) => p.overlap,
-            placement: (p) => (p.textAlong ? 'line' : 'point'),
-            textOptional: (p) => p.textOptional === true,
-            icon: (p) => (p.icon ? this.iconPrefix + p.icon.image : ''),
-            iconSize: (p) => size(p.icon?.size ?? 1, 1),
-            iconAnchor: (p) => anchor(p.icon?.anchor),
-            iconOffset: (p) => p.icon?.offset ?? [0, 0],
-            iconRotate: (p) => p.icon?.rotate ?? 0,
-            iconRotationAlignment: (p) => p.icon?.alignment ?? 'viewport',
-            iconOverlap: (p) => p.icon?.overlap ?? false,
-            iconOptional: (p) => p.icon?.optional ?? false,
-            iconTextFit: (p) => p.icon?.fit ?? 'none',
-            iconTextFitPadding: (p) => p.icon?.padding ?? [0, 0, 0, 0],
-            iconColor: (p) => p.icon?.color ?? '#000',
-            iconOpacity: (p) => p.icon?.opacity ?? 1,
-        });
-        this.map.keepOnTop(symbol);
-        this.layers.push(symbol);
-        const renderer = this.ready.then(async ({ style }) => {
-            // The style's fonts from its own glyphs
-            if (style.glyphs)
-                this.map.glyphs.register(style.glyphs, VectorTiles.fonts(style));
-            // Its icons from its sprites, before the first labels
-            const icons = style.layers.some((l) => l.type === 'symbol' && l.layout?.['icon-image'] !== undefined);
-            if (icons && style.sprite) {
-                (await this.loadSprites(style.sprite)).forEach((sprite) => {
-                    if (!this.destroyed)
-                        this.map.icons.addSprite(this.iconPrefix, sprite.icons, () => readPixels(sprite.image));
-                });
-            }
-            return this.renderer((l) => l.type === 'symbol' && layers(l), []);
-        });
-        renderer.catch(() => undefined);
-        /** The labels of the tiles, as features by style layer, the higher layers first: each list is given to the symbol
-         * layer as a group, shaped once while the tile is kept */
-        const tiles = new Lru(256);
-        let generation = 0;
-        /** The tiles whose labels are shown */
-        let shown = '';
-        /** The update asked again after tiles failed */
-        let retry = 0;
-        const update = async () => {
-            if (this.destroyed)
-                return;
-            const { key, maxzoom } = await renderer;
-            const run = ++generation;
-            const camera = this.map.getCamera();
-            const zoom = Math.max(0, Math.min(Math.floor(camera.zoom), 24));
-            const ground = this.ground && this.map.hasLayer(this.ground) ? this.map.engine.wantedTiles(this.ground.id) : [];
-            const keys = [];
-            if (ground.length > 0) {
-                // The ground's tiles, the nearest first: a tile so many levels coarser than the finest in view has its
-                // labels of a zoom as many under the view's, past the source's deepest level those of that level at the zoom
-                const groundTiles = Array.from({ length: Math.ceil(ground.length / 3) }, (_, k) => [
-                    ground[3 * k] ?? 0,
-                    ground[3 * k + 1] ?? 0,
-                    ground[3 * k + 2] ?? 0,
-                ]);
-                const top = groundTiles.reduce((t, [z]) => Math.max(t, z), 0);
-                groundTiles.forEach(([z, x, y]) => {
-                    if (keys.length >= maxTiles)
-                        return;
-                    const at = Math.max(0, zoom - (top - z));
-                    const tz = Math.min(at, maxzoom, z);
-                    const shift = 2 ** (z - tz);
-                    const key = `${tz}/${Math.floor(x / shift)}/${Math.floor(y / shift)}${at > tz ? `@${at}` : ''}`;
-                    if (!keys.includes(key))
-                        keys.push(key);
-                });
-            }
-            else {
-                const z = Math.min(zoom, maxzoom);
-                const wanted = tilesAround(this.map, camera, z, maxTiles);
-                // Past the source's deepest level, its tiles' labels at the zoom of the view (the layers of the deeper zooms)
-                keys.push(...wanted.map(([x, y]) => `${z}/${x}/${y}${zoom > z ? `@${zoom}` : ''}`));
-            }
-            // The same tiles as the labels shown: nothing to do
-            const set = keys.join(' ');
-            if (set === shown)
-                return;
-            const lists = await Promise.all(keys.map((k, index) => {
-                const cached = tiles.get(k);
-                if (cached)
-                    return cached;
-                const [tile, deeper] = k.split('@');
-                const [tz = 0, x = 0, y = 0] = (tile ?? '').split('/').map(Number);
-                // The nearest tiles first: the others wait for the raster tiles
-                const priority = index < 4 ? 'auto' : 'low';
-                const work = {
-                    type: 'labels',
-                    key,
-                    z: tz,
-                    x,
-                    y,
-                    priority,
-                    ...(deeper === undefined ? {} : { zoom: Number(deeper) }),
-                };
-                const p = this.request(tz, x, y, work).then((r) => tileLabels('labels' in r ? r.labels : []), () => {
-                    // A network error is not kept: the tile is asked for again on the next update
-                    tiles.delete(k);
-                    return [];
-                });
-                // A bounded cache of tiles' labels, the least recently used dropped
-                tiles.set(k, p);
-                return p;
-            }));
-            if (run !== generation || this.destroyed)
-                return;
-            // A tile that failed is missing: the next update asks for it again, after a pause if no move brings one
-            shown = keys.every((k) => tiles.has(k)) ? set : '';
-            if (shown === '' && !retry) {
-                retry = window.setTimeout(() => {
-                    retry = 0;
-                    refresh();
-                }, RETRY_LABELS_MS);
-            }
-            // The labels of the higher style layers first: they win the collisions; for each style layer, the tiles nearest
-            // to the center first
-            const layerIds = [...new Set(lists.flatMap((list) => list.map(([layer]) => layer)))].sort((a, b) => b - a);
-            const groups = layerIds.flatMap((layer) => lists.map((list) => list.find(([l]) => l === layer)?.[1]).filter((group) => group !== undefined));
-            symbol.setGroups(groups);
-        };
-        // The style failed to load: reported by `ready`
-        const refresh = () => {
-            update().catch(() => undefined);
-        };
-        let timer = 0;
-        const schedule = () => {
-            if (timer)
-                return;
-            timer = window.setTimeout(() => {
-                timer = 0;
-                refresh();
-            }, 250);
-        };
-        this.cleanup.push(this.map.on('move', schedule), this.map.on('moveend', refresh), () => {
-            clearTimeout(timer);
-            clearTimeout(retry);
-        });
-        refresh();
-        return symbol;
+        return labels(this.context, options);
     }
     /**
      * Makes a layer's tiles follow the view: `update` now and where the camera stops (`moveend`), `moving` every
-     * `VECTOR_MOVE_REFRESH_MS` while it moves; the requests `held` aborted when destroyed
+     * `VECTOR_MOVE_REFRESH_MS` while it moves; the `requests` aborted when destroyed
      */
-    followView(update, held, moving) {
+    followView(update, requests, moving) {
         const refresh = () => {
             update().catch(() => undefined);
         };
@@ -916,10 +241,7 @@ export class VectorTiles {
         };
         this.cleanup.push(this.map.on('move', follow), this.map.on('moveend', refresh), () => {
             clearTimeout(pace.timer);
-            held.forEach((controller) => {
-                controller.abort();
-            });
-            held.clear();
+            requests.abortAll();
         });
         refresh();
     }
@@ -960,34 +282,4 @@ export class VectorTiles {
         this.renderers.length = 0;
     }
 }
-/**
- * A `line-dasharray` as the engine takes it: two dashes and gaps in line widths (an odd count repeated, as the
- * canvas's `setLineDash`; past four, the first four), zeros for a solid line
- */
-export const dashes = (value, zoom) => {
-    const v = isExpression(value) ? evaluate(value, { zoom, properties: {}, type: 'Unknown' }) : value;
-    const list = Array.isArray(v) ? v.map(Number).filter((d) => Number.isFinite(d) && d >= 0) : [];
-    const even = list.length % 2 === 1 ? [...list, ...list] : list;
-    const [a = 0, b = 0, c = 0, d = 0] = even.length >= 2 && even.some((x) => x > 0) ? even : [];
-    return [a, b, c, d];
-};
-/** Metres around the view's center where every tree is drawn at zoom 16 (twice as far a zoom level out) */
-const TREES_NEAR_METRES = 350;
-/** Whether a style layer draws streets, which glow at night: its id names a road (OpenMapTiles' styles, PLAN IGN's),
- * not its casing, a railway, a path or a tunnel */
-const isStreet = (layer) => /road|highway|street|motorway|trunk|primary|secondary|tertiary|minor|routier/i.test(layer.id) &&
-    !/casing|outline|rail|path|track|ferry|tunnel|pier|area|pattern|label/i.test(layer.id);
-/** A `line-cap` as the engine draws it, at the camera's zoom (MapLibre's default: butt) */
-const lineCap = (value, zoom) => {
-    const v = isExpression(value) ? evaluate(value, { zoom, properties: {}, type: 'Unknown' }) : value;
-    return v === 'round' || v === 'square' ? v : 'butt';
-};
-/** The deepest level `vectors()` cuts its tiles at: past the source's deepest level, its tiles cut again into deeper
- * ones (overzoom, as MapLibre does) down to level 18, their filters and styles those of their level, smaller tiles
- * drawn in a closer view; past it, the tiles of that level stretched */
-const OVERZOOM_LEVEL = 18;
-/** The deepest level of the tiles of `vectors()` over a source whose deepest is `maxzoom` */
-const deepestLevel = (maxzoom) => Math.max(maxzoom, OVERZOOM_LEVEL);
-/** Milliseconds between two updates of the tiles of `vectors()` while the camera moves */
-const VECTOR_MOVE_REFRESH_MS = 250;
 //# sourceMappingURL=vectortiles.js.map