leaflet-city-mapper 0.0.1 → 0.0.3

package/src/types/pmtiles.js

@@ -1,143 +0,0 @@
-import './3d.js';
-import { read, getHeader, getZxy } from '../scene/pmtiles.js';
-import { decompress } from '../utils/pmtiles.js';
-
-/** A raster TileLayer backed by the shared PMTiles reader. */
-L.Layer.types.pmtiles = L.TileLayer.extend({
-  _read(offset, length, signal) { return read(this, offset, length, signal); },
-  _decompress(data, compression) { return decompress(data, compression); },
-  getHeader() { return getHeader(this); },
-  getZxy(z, x, y, signal) { return getZxy(this, z, x, y, signal); },
-
-  initialize(options) {
-    L.TileLayer.prototype.initialize.call(this, options.url, options);
-    this.url = new URL(options.url, document.baseURI).href;
-    this._directories = new Map();
-    this.on('tileunload', this._releaseTile, this);
-    this.on('load tileunload', () => L.Layer.types['3d']._renderers.get(this._map)?.update());
-    this.ready = Promise.resolve(this.options.archive || this).then(async archive => {
-      const header = await archive.getHeader();
-      this.options.archive = archive;
-      this.header = header;
-      if (this.options.maxNativeZoom === undefined) this.options.maxNativeZoom = header.maxZoom;
-      this.fire('ready');
-      return this;
-    }).catch(error => {
-      this.fire('error', { error });
-      throw error;
-    });
-  },
-
-  onAdd(map) {
-    if (this.header) {
-      L.TileLayer.prototype.onAdd.call(this, map);
-      this._setTerrain3D(map._terrain3D);
-    } else {
-      this.ready = this.ready.then(layer => {
-        if (this._map === map && map.hasLayer(this) && !this._container) {
-          L.TileLayer.prototype.onAdd.call(this, map);
-          this._setTerrain3D(map._terrain3D);
-        }
-        return layer;
-      });
-    }
-  },
-
-  onRemove(map) {
-    this._setTerrain3D(null);
-    if (this._container) L.TileLayer.prototype.onRemove.call(this, map);
-  },
-
-  setOpacity(opacity) {
-    L.TileLayer.prototype.setOpacity.call(this, opacity);
-    L.Layer.types['3d']._renderers.get(this._map)?.update();
-    return this;
-  },
-
-  setZIndex(zIndex) {
-    L.TileLayer.prototype.setZIndex.call(this, zIndex);
-    L.Layer.types['3d']._renderers.get(this._map)?.update();
-    return this;
-  },
-
-  createTile(coords, done) {
-    const tile = document.createElement('img');
-    tile.alt = '';
-    if (this.options.crossOrigin || this.options.crossOrigin === '') {
-      tile.crossOrigin = this.options.crossOrigin === true ? '' : this.options.crossOrigin;
-    }
-    if (typeof this.options.referrerPolicy === 'string') tile.referrerPolicy = this.options.referrerPolicy;
-    tile.request = new AbortController();
-    this.ready.then(() => {
-      if (tile.request.signal.aborted) return;
-      return this.options.archive.getZxy(coords.z, coords.x, coords.y, tile.request.signal);
-    }).then(async result => {
-      if (tile.request.signal.aborted) return;
-      if (!result) throw new Error(`Tile ${coords.z}/${coords.x}/${coords.y} is not in the offline archive`);
-      await new Promise((resolve, reject) => {
-        const finish = error => {
-          tile.request.signal.removeEventListener('abort', abort);
-          tile.onload = tile.onerror = null;
-          this._releaseURL(tile);
-          if (error) reject(error);
-          else resolve();
-        };
-        const abort = () => finish();
-        tile.request.signal.addEventListener('abort', abort, { once: true });
-        tile.objectURL = URL.createObjectURL(new Blob([result.data]));
-        tile.onload = () => finish();
-        tile.onerror = () => finish(new Error(`Unable to decode tile ${coords.z}/${coords.x}/${coords.y}`));
-        tile.src = tile.objectURL;
-      });
-      if (tile.request.signal.aborted) return;
-      tile.done = true;
-      this._registerTerrainTile(coords, tile);
-      done(null, tile);
-    }).catch(error => {
-      if (tile.request.signal.aborted) return;
-      tile.error = error.message;
-      this._tileOnError(done, tile, error);
-    });
-    return tile;
-  },
-
-  _abortLoading() {
-    // Requests can still be pending while an image with no src reports complete.
-    for (const { coords, el } of Object.values(this._tiles)) {
-      if (coords.z !== this._tileZoom) this._releaseTile({ tile: el });
-    }
-    L.TileLayer.prototype._abortLoading.call(this);
-  },
-
-  _setTerrain3D(terrain) {
-    if (this._terrain3D === terrain) return;
-    for (const { el } of Object.values(this._tiles || {})) this._terrain3D?.removeRasterTile(el);
-    this._terrain3D = terrain || null;
-    if (this._terrain3D) {
-      for (const { coords, el } of Object.values(this._tiles || {})) {
-        if (el.done) this._registerTerrainTile(coords, el);
-      }
-    }
-  },
-
-  _registerTerrainTile(coords, tile) {
-    if (!this._terrain3D) return;
-    const terrain = this._terrain3D;
-    terrain.addRasterTile(this, coords, tile).catch(error => {
-      if (this._terrain3D === terrain && tile.isConnected) this.fire('tileerror', { tile, coords, error });
-    });
-  },
-
-  _releaseURL(tile) {
-    if (tile.objectURL) {
-      URL.revokeObjectURL(tile.objectURL);
-      tile.objectURL = null;
-    }
-  },
-
-  _releaseTile({ tile }) {
-    this._terrain3D?.removeRasterTile(tile);
-    tile.request.abort();
-    this._releaseURL(tile);
-  },
-});

package/src/types/sunlight.js

@@ -1,142 +0,0 @@
-import { atmosphere, moonPosition, solarPosition, projectCelestialBody } from '../utils/sun.js';
-import { underEntry } from '../utils/control.js';
-
-function installSunlight(map) {
-  const L = globalThis.L;
-  const control = new L.Control({ position: 'bottomright' });
-  control.live = true;
-  let date, slider, output, status, timer;
-  const originalSky = map.getContainer().style.getPropertyValue('--leaflet-sky-background');
-  const disc = 'position:absolute;width:18px;height:18px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;';
-  const sunDisc = L.DomUtil.create('div', 'sunlight-sun');
-  const moonDisc = L.DomUtil.create('div', 'sunlight-moon');
-  sunDisc.style.cssText = disc + 'background:#fff3bd;box-shadow:0 0 18px 7px #ffd27699;';
-  moonDisc.style.cssText = disc + 'background:#dce5f2;box-shadow:0 0 10px 2px #cbdcff55;';
-  sunDisc.setAttribute('role', 'img'); sunDisc.setAttribute('aria-label', 'Sun');
-  moonDisc.setAttribute('role', 'img'); moonDisc.setAttribute('aria-label', 'Moon');
-  const updateSky = () => {
-    const sun = map._sunlight, sky = map._pitchSky;
-    if (sun) map.getContainer().style.setProperty('--leaflet-sky-background', sun.background);
-    else if (originalSky) map.getContainer().style.setProperty('--leaflet-sky-background', originalSky);
-    else map.getContainer().style.removeProperty('--leaflet-sky-background');
-    const size = map.getSize(), pitch = map.getPitch() * Math.PI / 180, bearing = map.getBearing() * Math.PI / 180;
-    for (const [disc, body] of [[sunDisc, sun], [moonDisc, sun?.moon]]) {
-      disc.hidden = true;
-      if (!sky || !body || body.altitude <= 0 || !sun) continue;
-      if (disc.parentNode !== sky) sky.append(disc);
-      const point = projectCelestialBody(body.direction, size, pitch, bearing);
-      if (!point) continue;
-      const { left, top } = point;
-      disc.hidden = left < 0 || left > size.x || top < 0 || top > sky.clientHeight || sky.style.display === 'none';
-      disc.style.left = `${left}px`; disc.style.top = `${top}px`;
-    }
-  };
-  const render = () => L.Layer.types['3d']?._renderers.get(map)?.update();
-  const update = () => {
-    try {
-      if (control.live) control.time = new Date();
-      const time = control.time.toISOString();
-      date.value = time.slice(0, 10);
-      slider.value = String(control.time.getUTCHours() * 60 + control.time.getUTCMinutes());
-      output.textContent = `${time.slice(11, 16)} UTC${control.live ? ' · now' : ''}`;
-      const center = map.getCenter();
-      const sun = map._sunlight = solarPosition(control.time, center.lat, center.lng);
-      Object.assign(sun, atmosphere(sun.altitude));
-      sun.moon = moonPosition(control.time, center.lat, center.lng);
-      status.textContent = sun.altitude <= 0 ? 'Night · no direct sunlight' :
-        sun.altitude < 3 ? 'Low sun · shadows paused' : `Sun altitude ${sun.altitude.toFixed(1)}°`;
-      map.fire('simulationtimechange', { time: new Date(control.time), live: control.live });
-      updateSky(); render();
-    } catch (error) {
-      delete map._sunlight;
-      updateSky();
-      render();
-      status.textContent = `Error: ${error.message}`;
-      console.error('Solar simulation', error);
-    }
-  };
-  const selectTime = () => {
-    control.live = false;
-    if (!date.value || !date.validity.valid) {
-      control.time = new Date(NaN);
-      map.fire('simulationtimechange', { time: null, live: false });
-      delete map._sunlight;
-      updateSky();
-      render();
-      status.textContent = 'Error: choose a valid solar date';
-      return;
-    }
-    control.time = new Date(`${date.value}T00:00:00Z`);
-    control.time.setUTCMinutes(Number(slider.value));
-    update();
-  };
-  control.onAdd = () => {
-    const container = L.DomUtil.create('div', 'sunlight-control');
-    container.style.cssText = 'color:#222;width:min(200px,calc(100vw - 60px));font:12px/1.4 sans-serif;';
-    date = document.createElement('input');
-    date.type = 'date';
-    date.style.cssText = 'width:100%;box-sizing:border-box;';
-    date.setAttribute('aria-label', 'Solar date (UTC)');
-    slider = document.createElement('input');
-    slider.type = 'range';
-    slider.style.cssText = 'width:100%;box-sizing:border-box;margin:10px 0 4px;cursor:pointer;';
-    slider.min = '0'; slider.max = '1439'; slider.step = '1';
-    slider.setAttribute('aria-label', 'Time of day (UTC)');
-    output = document.createElement('output');
-    output.style.cssText = 'font-weight:bold;font-variant-numeric:tabular-nums;';
-    output.setAttribute('aria-live', 'off');
-    const now = document.createElement('button');
-    now.type = 'button'; now.textContent = 'Now';
-    now.onclick = () => { control.live = true; update(); };
-    const timeRow = document.createElement('div');
-    timeRow.className = 'sunlight-time';
-    timeRow.style.cssText = 'display:flex;justify-content:space-between;align-items:center;';
-    timeRow.append(output, now);
-    status = document.createElement('div');
-    status.className = 'sunlight-status';
-    status.style.marginTop = '5px';
-    status.setAttribute('role', 'status');
-    const note = document.createElement('small');
-    note.style.color = '#555';
-    note.textContent = 'Indicative · loaded geometry only. Streetlight illumination is estimated, not measured lux.';
-    container.append(date, slider, timeRow, status, note);
-    slider.oninput = selectTime;
-    date.onchange = selectTime;
-    L.DomEvent.disableClickPropagation(container);
-    L.DomEvent.disableScrollPropagation(container);
-    update();
-    timer = setInterval(() => { if (control.live) update(); }, 60000);
-    map.on('moveend', update);
-    map.on('move rotate pitch resize', updateSky);
-    return container;
-  };
-  control.onRemove = () => {
-    clearInterval(timer);
-    map.fire('simulationtimechange', { time: null, live: false });
-    map.off('moveend', update);
-    map.off('move rotate pitch resize', updateSky);
-    delete map._sunlight;
-    updateSky();
-    sunDisc.remove(); moonDisc.remove();
-    render();
-  };
-  return control;
-}
-
-// Sun/moon clock control and sky colours; the control is created on first add (`layer.control`).
-L.Layer.types.sunlight = L.Layer.extend({
-  onAdd(map) {
-    this.control = this.control || installSunlight(map);
-    if (!this.control._map) this.control.addTo(map);
-    // Shown under this layer's entry in the layers control; a standalone control without one.
-    const container = this.control.getContainer(), nested = underEntry(this, container);
-    container.classList.toggle('leaflet-control', !nested);
-    container.classList.toggle('leaflet-bar', !nested);
-    Object.assign(container.style, nested
-      ? { background: '', padding: '2px 0 6px 20px', margin: '0' }
-      : { background: '#fff', padding: '8px', margin: '' });
-  },
-  onRemove() {
-    this.control.remove();
-  },
-});

package/src/types/terrain.js

@@ -1,331 +0,0 @@
-import { bridgeElevation, terrainElevation, terrainGrid, terrainAtlas } from '../utils/terrain.js';
-import { triangulate } from '../utils/geometry.js';
-import './3d.js';
-import './pmtiles.js';
-
-/**
- * Renders IGN Float32 DEM tiles and PMTiles raster basemaps in the shared WebGPU scene.
- * Source options: `url` (single-zoom Float32 PMTiles DEM); `bridges` (optional GeoJSON deck polygons with Z, see _addBridges).
- */
-L.Layer.types.terrain = L.Layer.types['3d'].extend({
-  initialize(options = {}) {
-    const terrainSource = options.url;
-    const layerOptions = { ...options };
-    delete layerOptions.url;
-    L.Layer.types['3d'].prototype.initialize.call(this, layerOptions);
-    this.terrainSource = terrainSource;
-    this._terrainTiles = new Map();
-    this._rasterTiles = new Map();
-    this._terrainReady = false;
-  },
-
-  onAdd(map) {
-    if (map._terrain3D && map._terrain3D !== this) throw new Error('Only one terrain layer can be active per map');
-    map._terrain3D = this;
-    L.Layer.types['3d'].prototype.onAdd.call(this, map);
-    this._terrainPromise = this.root
-      ? this._loadTerrain()
-      : new Promise(resolve => this.once('ready', () => this._loadTerrain().then(resolve), this));
-    map.eachLayer(layer => layer._setTerrain3D?.(this));
-    map.fire('terrainchange');
-  },
-
-  onRemove(map) {
-    this._terrainController?.abort();
-    this._terrainLoading = false;
-    this._terrainReady = false;
-    map.eachLayer(layer => layer._setTerrain3D?.(null));
-    for (const tile of this._rasterTiles.keys()) this.removeRasterTile(tile);
-    if (map._terrain3D === this) delete map._terrain3D;
-    for (const layer of Object.values(map._layers)) layer._setTerrainHeight?.();
-    map.fire('terrainchange');
-    this._terrainTiles.clear();
-    this._terrainOriginElevation = 0;
-    this._terrainPromise = null;
-    if (this._rasterProgram) this._removeProgram(this._rasterProgram);
-    this._rasterProgram = null;
-    if (this._dem) this._destroyTexture(this._dem.texture);
-    this._dem = null;
-    for (const grid of this._terrainGrids?.values() || []) {
-      for (const attribute of Object.values(grid)) this._destroyTexture(attribute.buffer);
-    }
-    this._terrainGrids = null;
-    this._bridges = null;
-    this._disposeMesh(this._bridgeMesh);
-    this._bridgeMesh = null;
-    L.Layer.types['3d'].prototype.onRemove.call(this, map);
-  },
-
-  async _loadTerrain() {
-    if (this._terrainLoading || !this._map) return;
-    this._terrainLoading = true;
-    this._terrainReady = false;
-    const controller = this._terrainController = new AbortController();
-    try {
-      if (!this.terrainSource) throw new Error('Terrain layer requires a PMTiles elevation archive');
-      const archive = this._terrainArchive = new L.Layer({ source: { type: 'pmtiles', url: this.terrainSource } });
-      await archive.ready;
-      const header = archive.header;
-      if (header.tileType !== 0 || header.minZoom !== header.maxZoom) {
-        throw new Error('Expected a single-zoom Float32 PMTiles terrain archive');
-      }
-      this._terrainZoom = header.maxZoom;
-      const map = this._map;
-      const northwest = map.project([header.maxLat, header.minLon], this._terrainZoom).divideBy(256).floor();
-      const southeast = map.project([header.minLat, header.maxLon], this._terrainZoom).divideBy(256).floor();
-      this._terrainBounds = new L.Bounds(northwest, southeast);
-      const tiles = [];
-      for (let x = northwest.x; x <= southeast.x; x++) {
-        for (let y = northwest.y; y <= southeast.y; y++) tiles.push({ z: this._terrainZoom, x, y });
-      }
-      let next = 0;
-      await Promise.all(Array.from({ length: Math.min(4, tiles.length) }, async () => {
-        while (next < tiles.length) {
-          controller.signal.throwIfAborted();
-          const coords = tiles[next++];
-          const result = await archive.getZxy(coords.z, coords.x, coords.y, controller.signal);
-          if (!result || result.data.byteLength !== 256 * 256 * 4) {
-            throw new Error(`Missing or invalid Float32 terrain tile ${coords.z}/${coords.x}/${coords.y}`);
-          }
-          this._terrainTiles.set(`${coords.x}/${coords.y}`, new Float32Array(result.data));
-        }
-      }));
-      const bridges = this.options.bridges && await fetch(this.options.bridges, { signal: controller.signal })
-        .then(response => { if (!response.ok) throw new Error(`Bridges: HTTP ${response.status}`); return response.json(); });
-      if (controller.signal.aborted || this._map !== map) return;
-      this._terrainReady = true;
-      this._terrainOriginElevation = this._getElevation(this.location) ?? 0;
-      for (const layer of Object.values(map._layers)) layer._setTerrainHeight?.();
-      if (bridges) this._addBridges(bridges);
-      map.fire('terrainchange');
-      this.update();
-      this.fire('terrainready');
-      return true;
-    } catch (error) {
-      if (!controller.signal.aborted) this.fire('error', { error });
-      return false;
-    } finally {
-      this._terrainLoading = false;
-    }
-  },
-
-  /** @param {L.LatLng|L.Point} location LatLng, or a pixel point at the terrain zoom. */
-  _getElevation(location) {
-    if (!this._map || !this._terrainReady) return null;
-    const point = location instanceof L.Point ? location : this._map.project(location, this._terrainZoom);
-    return bridgeElevation(point, this._bridges) ?? terrainElevation(point, this._terrainTiles);
-  },
-
-  /**
-   * Bare-earth DEMs drop bridges: `_getElevation` returns the deck height inside these polygons (GeoJSON
-   * Polygon/MultiPolygon with Z, e.g. IGN BD TOPO), and one mesh draws the 1.2 m thick decks.
-   * ponytail: anything under a deck (quays, boats asking `_getElevation`) also gets the deck height.
-   */
-  _addBridges(geojson) {
-    const map = this._map, crs = map.options.crs, zoom = this._terrainZoom;
-    const origin = crs.project(this.location), metres = Math.cos(this.location.lat * Math.PI / 180);
-    const base = this.root.position[1], position = [], normal = [], color = [];
-    const local = ([lng, lat, z]) => {
-      const p = crs.project(new L.LatLng(lat, lng));
-      return [(p.x - origin.x) * metres, z - base, -(p.y - origin.y) * metres];
-    };
-    const push = (p, n) => { position.push(...p); normal.push(...n); color.push(0.6, 0.58, 0.54); };
-    this._bridges = new Map();
-    for (const { geometry } of geojson.features) {
-      const polygons = geometry.type === 'Polygon' ? [geometry.coordinates] : geometry.type === 'MultiPolygon' ? geometry.coordinates : [];
-      for (const polygon of polygons) {
-        const rings = polygon.map(ring => ring.slice(0, -1)).filter(ring => ring.length >= 3);
-        if (!rings.length) continue;
-        const pixels = rings.flat().map(([lng, lat, z]) => { const p = map.project([lat, lng], zoom); return [p.x, p.y, z]; });
-        const points = rings.flat().map(local);
-        let triangles;
-        try {
-          const starts = rings.map((ring, r) => rings.slice(0, r).reduce((sum, previous) => sum + previous.length, 0));
-          const [contour, ...holes] = rings.map((ring, r) => ring.map((c, i) => ({ x: pixels[starts[r] + i][0], y: pixels[starts[r] + i][1] })));
-          triangles = triangulate(contour, holes);
-        } catch { continue; }
-        const bridge = {
-          triangles: triangles.map(t => t.map(i => pixels[i])),
-          min: [Math.min(...pixels.map(p => p[0])), Math.min(...pixels.map(p => p[1]))],
-          max: [Math.max(...pixels.map(p => p[0])), Math.max(...pixels.map(p => p[1]))],
-        };
-        for (let x = Math.floor(bridge.min[0] / 64); x <= Math.floor(bridge.max[0] / 64); x++) {
-          for (let y = Math.floor(bridge.min[1] / 64); y <= Math.floor(bridge.max[1] / 64); y++) {
-            const key = `${x}/${y}`;
-            this._bridges.set(key, [...this._bridges.get(key) || [], bridge]);
-          }
-        }
-        const below = p => [p[0], p[1] - 1.2, p[2]];
-        for (let [a, b, c] of triangles) {
-          // Counter-clockwise seen from above, so double-sided shading keeps the top lit.
-          const [pa, pb, pc] = [points[a], points[b], points[c]];
-          if ((pb[2] - pa[2]) * (pc[0] - pa[0]) - (pb[0] - pa[0]) * (pc[2] - pa[2]) < 0) [b, c] = [c, b];
-          for (const i of [a, b, c]) push(points[i], [0, 1, 0]);
-          for (const i of [a, c, b]) push(below(points[i]), [0, -1, 0]);
-        }
-        let start = 0;
-        for (const ring of rings) {
-          for (let i = 0; i < ring.length; i++) {
-            const p = points[start + i], q = points[start + (i + 1) % ring.length];
-            const length = Math.hypot(q[0] - p[0], q[2] - p[2]) || 1, n = [(q[2] - p[2]) / length, 0, -(q[0] - p[0]) / length];
-            for (const corner of [p, q, below(q), p, below(q), below(p)]) push(corner, n);
-          }
-          start += ring.length;
-        }
-      }
-    }
-    if (position.length) this._bridgeMesh = this._createMesh({ position, normal, color });
-  },
-
-  async addRasterTile(layer, coords, tile) {
-    const [ready, bitmap] = await Promise.all([this._terrainPromise, createImageBitmap(tile)]);
-    if (!ready || !this._map || this._map._terrain3D !== this || layer._terrain3D !== this ||
-      tile.request.signal.aborted || !tile.isConnected || this._rasterTiles.has(tile)) {
-      bitmap.close();
-      return;
-    }
-    // Match DEM pixel spacing, capped at 64 subdivisions per tile.
-    const divisions = Math.max(1, Math.min(64, 256 / 2 ** (coords.z - this._terrainZoom)));
-    const map = this._map, crs = map.options.crs;
-    const origin = crs.project(this.location), metres = Math.cos(this.location.lat * Math.PI / 180);
-    // Tile pixels map linearly to projected metres: one scaled unit grid per tile, elevation in the vertex shader.
-    const scale = crs.scale(coords.z), terrainScale = 2 ** (this._terrainZoom - coords.z);
-    const corner = crs.transformation.untransform(new L.Point(coords.x * 256, coords.y * 256), scale);
-    const opposite = crs.transformation.untransform(new L.Point((coords.x + 1) * 256, (coords.y + 1) * 256), scale);
-    const device = this.renderer.device;
-    const texture = {
-      device,
-      texture: device.createTexture({
-        size: [tile.width, tile.height],
-        format: 'rgba8unorm',
-        usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
-      }),
-      sampler: device.createSampler({ addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge' }),
-      samplerOptions: { addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge' },
-      image: tile, format: 'rgba8unorm', srgb: false, flipY: false, uploaded: tile,
-    };
-    device.queue.copyExternalImageToTexture({ source: bitmap }, { texture: texture.texture }, [tile.width, tile.height]);
-    bitmap.close();
-    if (!this._rasterProgram || this._rasterProgram.device !== device) {
-      // DEM atlas over the archive's tile grid; invalid or missing samples become -1e9 (the shader's no-data).
-      // ponytail: one texture, capped by maxTextureDimension2D (32×32 DEM tiles at 8192 px); split it for larger archives.
-      const bounds = this._terrainBounds, columns = bounds.max.x - bounds.min.x + 1, rows = bounds.max.y - bounds.min.y + 1;
-      const { elevations, low, high } = terrainAtlas(this._terrainTiles, bounds);
-      if (this._dem) this._destroyTexture(this._dem.texture);
-      this._dem = {
-        texture: device.createTexture({
-          size: [columns * 256, rows * 256],
-          format: 'r32float',
-          usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST,
-        }),
-        low: Number.isFinite(low) ? low : this._terrainOriginElevation,
-        high: Number.isFinite(high) ? high : this._terrainOriginElevation,
-      };
-      device.queue.writeTexture({ texture: this._dem.texture }, elevations,
-        { bytesPerRow: columns * 1024 }, [columns * 256, rows * 256]);
-      this._terrainGrids = new Map();
-      this._rasterProgram = this._createProgram({
-        baseTexture: texture,
-        unlit: true,
-        alphaMode: 'BLEND',
-        terrain: this._dem,
-      });
-    }
-    let attributes = this._terrainGrids.get(divisions);
-    if (!attributes) {
-      attributes = terrainGrid(divisions);
-      for (const [name, attribute] of Object.entries(attributes)) {
-        attribute.size ||= 1;
-        attribute.count = attribute.data.length / attribute.size;
-        attribute.indexFormat = 'uint16';
-        attribute.buffer = device.createBuffer({
-          size: Math.max(4, attribute.data.byteLength),
-          usage: name === 'index'
-            ? GPUBufferUsage.INDEX | GPUBufferUsage.COPY_DST
-            : GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
-        });
-        device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
-      }
-      this._terrainGrids.set(divisions, attributes);
-    }
-    const base = this._terrainOriginElevation;
-    const bottom = Math.min(this._dem.low, base) - base, top = Math.max(this._dem.high, base) - base;
-    const sizeX = (opposite.x - corner.x) * metres, sizeZ = -(opposite.y - corner.y) * metres;
-    // ponytail: ray picking sees the flat unit grid; read the DEM back if terrain must be pickable.
-    const geometry = {
-      device,
-      attributes,
-      drawRange: { start: 0, count: attributes.index.count },
-      // Local bounds whose radius, scaled by the largest axis, still covers the displaced tile.
-      bounds: {
-        min: [0, bottom, 0], max: [1, top, 1], center: [0.5, (bottom + top) / 2, 0.5],
-        radius: Math.hypot(sizeX, top - bottom, sizeZ) / 2 / Math.max(sizeX, 1, sizeZ),
-      },
-    };
-    const mesh = {
-      position:    [(corner.x - origin.x) * metres, 0, -(corner.y - origin.y) * metres],
-      rotation:    [0, 0, 0],
-      scale:       [sizeX, 1, sizeZ],
-      worldMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1],
-      children:    [],
-      visible:     true,
-      device,
-      geometry,
-      program:      this._rasterProgram,
-      texture,
-      // DEM pixel of the tile's corner, DEM pixels per tile, and the elevation at the layer origin.
-      terrain:      [
-        coords.x * 256 * terrainScale - this._terrainBounds.min.x * 256,
-        coords.y * 256 * terrainScale - this._terrainBounds.min.y * 256,
-        256 * terrainScale,
-        base,
-      ],
-      tile,
-      opacity:      layer.options.opacity ?? 1,
-      id:           L.Layer.types['3d']._nextId++,
-      renderOrder: -1,
-    };
-    this.add(mesh);
-    this._rasterTiles.set(tile, mesh);
-    tile._terrainVisibility = tile.style.visibility;
-  },
-
-  removeRasterTile(tile) {
-    tile._terrainRequest?.abort();
-    const mesh = this._rasterTiles.get(tile);
-    if (!mesh) return;
-    this.remove(mesh);
-    this._destroyTexture(mesh.texture.texture);
-    this._rasterTiles.delete(tile);
-    tile.style.visibility = tile._terrainVisibility;
-    delete tile._terrainVisibility;
-  },
-});
-
-/**
- * WGSL twin of _getElevation for the vertex shader: bilinear DEM pixels, or the first valid
- * neighbour near no-data (stored as -1e9), else `base`. Expects `dem: texture_2d<f32>`.
- */
-L.Layer.types.terrain.elevationWGSL = `
-  fn demSample(pixel: vec2<i32>) -> f32 {
-    if (any(pixel < vec2<i32>(0)) || any(pixel >= vec2<i32>(textureDimensions(dem)))) { return -1e9; }
-    return textureLoad(dem, pixel, 0).r;
-  }
-  fn elevation(pixel: vec2<f32>, base: f32) -> f32 {
-    let p = pixel - vec2<f32>(0.5);
-    let f = fract(p);
-    let i = vec2<i32>(floor(p));
-    let v00 = demSample(i);
-    let v10 = demSample(i + vec2<i32>(1, 0));
-    let v01 = demSample(i + vec2<i32>(0, 1));
-    let v11 = demSample(i + vec2<i32>(1, 1));
-    if (v00 > -1000.0 && v10 > -1000.0 && v01 > -1000.0 && v11 > -1000.0) {
-      return mix(mix(v00, v10, f.x), mix(v01, v11, f.x), f.y);
-    }
-    if (v00 > -1000.0) { return v00; }
-    if (v10 > -1000.0) { return v10; }
-    if (v01 > -1000.0) { return v01; }
-    if (v11 > -1000.0) { return v11; }
-    return base;
-  }
-`;