leaflet-city-mapper 0.0.3 → 0.0.4

package/src/scene/init3D.js

@@ -1,3 +1,8 @@
+import { L } from '../globals/L.js';
+import { sceneEmptyOptions } from '../globals/sceneEmptyOptions.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import { attach } from './attach.js';
 import { emptyNode } from './emptyNode.js';
 import { onAdd3DLayer } from './onAdd3DLayer.js';
@@ -9,22 +14,30 @@ import { getHeader } from '../archives/getHeader.js';
 import { loadModel } from '../models/loadModel.js';
 import { get3DEvents } from './get3DEvents.js';
 import { ready3D } from './ready3D.js';
+import { noOperation } from '../utils/noOperation.js';
+import { updateLayerCount } from './updateLayerCount.js';
 
-export function init3D(layer, options = {}) {
-  layer._3d = true;
-  L.Util.setOptions(layer, { ariaLabel: '3D scene', ...options });
-  layer.onAdd = onAdd3DLayer.bind(null, layer);
-  layer.onRemove = onRemove3DLayer.bind(null, layer);
-  layer.getEvents = get3DEvents.bind(null, layer);
-  const isModel = !layer._geojson && /\.(glb|gltf)(?:[?#]|$)/i.test(layer.options.url);
-  layer.modelUrl = isModel ? layer.options.url : null;
-  layer.url = layer.options.url && !isModel && !layer._geojson ? new URL(layer.options.url, document.baseURI).href : null;
-  layer._directories = new Map();
+export function init3D(layer, options = sceneEmptyOptions) {
+  sceneByLayer.get(layer)._3d = true;
+  L.Util.setOptions(layer, /* alloc */ { ariaLabel: '3D scene', ...options });
+  sceneByLayer.get(layer).kind = '3d';
+  const isModel = !sceneByLayer.get(layer)._geojson && /\.(glb|gltf)(?:[?#]|$)/i.test(layer.options.url);
+  sceneByLayer.get(layer).modelUrl = isModel ? layer.options.url : null;
+  sceneByLayer.get(layer).url = layer.options.url && !isModel && !sceneByLayer.get(layer)._geojson ? /* alloc */ new URL(layer.options.url, document.baseURI).href : null;
+  sceneByLayer.get(layer)._directories = /* alloc */ new Map();
   if (layer.options.center) {
-    layer.location = new L.LatLng(layer.options.center[0], layer.options.center[1]);
+    sceneByLayer.get(layer).location = /* alloc */ new L.LatLng(layer.options.center[0], layer.options.center[1]);
+  }
+  sceneByLayer.get(layer)._areas = /* alloc */ new Map();
+  sceneByLayer.get(layer)._inflight = 0;
+  if (sceneByLayer.get(layer).url || sceneByLayer.get(layer)._geojson || isModel) {
+    const status = L.DomUtil.create('small', 'layer-count');
+    status.style.cssText = 'float:right;margin-left:12px;color:#555;font-variant-numeric:tabular-nums';
+    sceneByLayer.get(layer)._countStatus = status;
+    layer.on('add error', updateLayerCount);
+    layer.on('ready progress', L.Util.throttle(updateLayerCount, 250, layer));
   }
-  layer._areas = new Map();
-  layer._inflight = 0;
-  layer._added = Promise.withResolvers();
-  queueMicrotask(ready3D.bind(null, layer));
+  sceneByLayer.get(layer)._added = Promise.withResolvers();
+  sceneByLayer.get(layer).ready = Promise.resolve().then(ready3D.bind(null, layer));
+  sceneByLayer.get(layer).ready.catch(noOperation);
 }

package/src/scene/initializeLayer.js

@@ -1,16 +1,22 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { reportError } from './reportError.js';
+
+
 export function initializeLayer(task) {
   const { layer, ready } = task;
+  if (task.error) {
+    reportError(layer, task.error);
+    return Promise.reject(task.error);
+  }
   try {
-    if (task.error) throw task.error;
     const map = layer._map;
     map?.removeLayer(layer);
-    delete layer.onAdd;
-    delete layer.onRemove;
+    delete sceneByLayer.get(layer).kind;
     task.initialize(layer, task.settings);
     map?.addLayer(layer);
-    return layer.ready === ready ? layer : layer.ready;
+    return sceneByLayer.get(layer).ready === ready ? layer : sceneByLayer.get(layer).ready;
   } catch (error) {
-    layer.fire('error', { error });
+    layer.fire('error', /* alloc */ { error });
     throw error;
   }
 }

package/src/scene/initializeRendererResources.js

@@ -0,0 +1,35 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { sceneSunlightUniforms } from '../globals/sceneSunlightUniforms.js';
+import { resizeSunlight } from '../shadows/resizeSunlight.js';
+
+export function initializeRendererResources(backend, device) {
+  const layout = device.createBindGroupLayout(/* alloc */ {
+    entries: /* alloc */ [
+      /* alloc */ { binding: 0, visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT, buffer: /* alloc */ { type: 'uniform' } },
+      /* alloc */ { binding: 1, visibility: GPUShaderStage.FRAGMENT, texture: /* alloc */ { sampleType: 'depth' } },
+      /* alloc */ { binding: 2, visibility: GPUShaderStage.FRAGMENT, sampler: /* alloc */ { type: 'comparison' } },
+      /* alloc */ { binding: 3, visibility: GPUShaderStage.FRAGMENT, buffer: /* alloc */ { type: 'read-only-storage' } },
+    ]
+  });
+  const buffer = sceneByLayer.get(backend).renderer.device.createBuffer(/* alloc */ { size: 80, usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST });
+  const sampler = sceneByLayer.get(backend).renderer.device.createSampler(/* alloc */ { compare: 'less-equal', minFilter: 'linear', magFilter: 'linear' });
+  const lights = sceneByLayer.get(backend).renderer.device.createBuffer(/* alloc */ { size: 32, usage: GPUBufferUsage.STORAGE | GPUBufferUsage.COPY_DST });
+  sceneByLayer.get(backend).renderer.sunlight = /* alloc */ { layout, buffer, sampler, lights, size: 0 };
+  sceneByLayer.get(backend).renderer.device.queue.writeBuffer(buffer, 0, sceneSunlightUniforms);
+  resizeSunlight(backend, 1);
+  const emptyImage = document.createElement('canvas');
+  emptyImage.width = 1;
+  emptyImage.height = 1;
+  sceneByLayer.get(backend).renderer.roofFallbackTexture = /* alloc */ {
+    device,
+    texture: device.createTexture(/* alloc */ {
+      size: /* alloc */ [1, 1],
+      format: 'rgba8unorm',
+      usage: GPUTextureUsage.TEXTURE_BINDING | GPUTextureUsage.COPY_DST | GPUTextureUsage.RENDER_ATTACHMENT,
+    }),
+    sampler: device.createSampler(/* alloc */ {
+      addressModeU: 'clamp-to-edge', addressModeV: 'clamp-to-edge',
+    }),
+    image: emptyImage, format: 'rgba8unorm', srgb: false, uploaded: null,
+  };
+}

package/src/scene/initializeSharedRenderer.js

@@ -0,0 +1,45 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { rendererDevices } from '../globals/rendererDevices.js';
+import { emptyNode } from './emptyNode.js';
+import { failAttachment } from './failAttachment.js';
+import { requestAdapter } from './requestAdapter.js';
+import { requestDevice } from './requestDevice.js';
+import { rendererDeviceError } from './rendererDeviceError.js';
+import { rendererDeviceLost } from './rendererDeviceLost.js';
+import { createSceneCamera } from './createSceneCamera.js';
+import { initializeRendererResources } from './initializeRendererResources.js';
+import { mountRenderer } from './mountRenderer.js';
+
+export async function initializeSharedRenderer(backend, map) {
+  const canvas = document.createElement('canvas');
+  if (!navigator.gpu) {
+    failAttachment(/* alloc */ new Error('Layer3D requires WebGPU'), backend, map);
+  }
+  const adapter = await requestAdapter(backend, map);
+  const device = await requestDevice(adapter, backend, map);
+  rendererDevices.set(device, map);
+  device.addEventListener('uncapturederror', rendererDeviceError);
+  Promise.all(/* alloc */ [device.lost, Promise.resolve(device)]).then(rendererDeviceLost);
+  const context = canvas.getContext('webgpu');
+  if (!context) {
+    device.destroy();
+    failAttachment(/* alloc */ new Error('Unable to create a WebGPU canvas context'), backend, map);
+  }
+  const format = navigator.gpu.getPreferredCanvasFormat();
+  context.configure(/* alloc */ { device, format, alphaMode: 'premultiplied' });
+  map.getContainer().querySelector('.leaflet-webgpu-warning')?.remove();
+  sceneByLayer.get(backend)._shared = backend;
+  sceneByLayer.get(backend)._layers = /* alloc */ new Set();
+  sceneByLayer.get(backend)._sceneOrigin = sceneByLayer.get(backend).location;
+  sceneByLayer.get(backend).scene = emptyNode();
+  sceneByLayer.get(backend).camera = createSceneCamera();
+  sceneByLayer.get(backend).renderer = /* alloc */ {
+    device,
+    context,
+    format,
+    canvas,
+    dpr: Math.min(window.devicePixelRatio, 2)
+  };
+  initializeRendererResources(backend, device);
+  mountRenderer(backend, map, canvas);
+}

package/src/scene/initializerFor.js

@@ -2,13 +2,15 @@ import { initializeGeoJSON } from '../sources/initializeGeoJSON.js';
 import { initRaster } from '../raster/initRaster.js';
 import { initTerrain } from '../terrain/initTerrain.js';
 import { initTraffic } from '../traffic/initTraffic.js';
+import { initCog } from '../cog/initCog.js';
 
 export function initializerFor(type) {
   switch (type) {
     case 'geojson': return initializeGeoJSON;
     case 'pmtiles': return initRaster;
+    case 'cog': return initCog;
     case 'terrain': return initTerrain;
     case 'traffic': return initTraffic;
-    default: throw new Error(`Unknown layer type: ${type}`);
+    default: return null;
   }
 }

package/src/scene/isNativeLayer.js

@@ -0,0 +1,12 @@
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+export function isNativeLayer(layer) {
+  return !sceneByLayer.get(layer)._3d && (
+    layer instanceof L.GridLayer ||
+    layer instanceof L.Polyline ||
+    layer instanceof L.CircleMarker ||
+    layer instanceof L.Marker && !(layer.options.icon instanceof L.DivIcon) ||
+    layer instanceof L.ImageOverlay && !(layer instanceof L.VideoOverlay) && !(layer instanceof L.SVGOverlay)
+  );
+}

package/src/scene/layerCountTitle.js

@@ -0,0 +1,4 @@
+export function layerCountTitle(scene, formatted, pending, error) {
+  return error ? `Unable to load: ${typeof error === 'string' ? error : error.message}` :
+    `${formatted} loaded ${scene.modelUrl ? 'models' : 'elements'} in the current area${pending ? `; ${pending} blocks loading` : ''}`;
+}

package/src/scene/layerInitialize.js

@@ -1,12 +1,23 @@
-import { indexState } from '../constants/indexState.js';
+import { L } from '../globals/L.js';
+import { sceneEmptyOptions } from '../globals/sceneEmptyOptions.js';
+import { layerProto } from '../globals/layerProto.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { pendingInitializations } from '../globals/pendingInitializations.js';
+import { loading } from '../globals/loading.js';
+
+
+
 import { init3D } from './init3D.js';
 import { noOperation } from '../utils/noOperation.js';
 import { resolveNextInitialization } from './resolveNextInitialization.js';
 import { initializeLayer } from './initializeLayer.js';
 
-export function layerInitialize(options = {}) {
-  if (Object.getPrototypeOf(this) !== L.Layer.prototype || !options.source) {
-    if (indexState.layerProto.initialize) return indexState.layerProto.initialize.apply(this, arguments);
+export function layerInitialize(options = sceneEmptyOptions) {
+  if (!sceneByLayer.has(this)) {
+    sceneByLayer.set(this, /* alloc */ {});
+  }
+  if (Object.getPrototypeOf(this) !== L.Layer.prototype || !options?.source) {
+    if (layerProto.value.initialize) return layerProto.value.initialize.apply(this, arguments);
     L.Util.setOptions(this, options);
     return;
   }
@@ -14,25 +25,24 @@ export function layerInitialize(options = {}) {
     source: {
       type = options.source.data?.type === 'FeatureCollection'
         ? 'geojson'
-        : /\.pmtiles(?:[?#]|$)/i.test(options.source.url) ? 'pmtiles' : '3d',
+        : /\.pmtiles(?:[?#]|$)/i.test(options.source.url) ? 'pmtiles'
+        : /\.tiff?(?:[?#]|$)/i.test(options.source.url) ? 'cog' : '3d',
       ...source
     },
     ...core
   } = options;
-  const settings = { ...source, ...core };
+  const settings = /* alloc */ { ...source, ...core };
   L.Util.setOptions(this, core);
-  this._type = type;
+  sceneByLayer.get(this)._type = type;
   if (type === '3d') {
     init3D(this, settings);
     return;
   }
-  this.onAdd = noOperation;
-  this.onRemove = noOperation;
-  // ponytail: type methods (setOpacity, add, ...) exist only once `ready` resolves.
-  const task = { layer: this, type, settings, ready: null };
-  indexState.pendingInitializations.push(task);
-  indexState.loading = indexState.loading.catch(noOperation).then(resolveNextInitialization);
-  const ready = this.ready = indexState.loading.then(initializeLayer);
+  sceneByLayer.get(this).kind = 'pending';
+  const task = /* alloc */ { layer: this, type, settings, ready: null };
+  pendingInitializations.push(task);
+  loading.value = loading.value.catch(noOperation).then(resolveNextInitialization);
+  const ready = sceneByLayer.get(this).ready = loading.value.then(initializeLayer);
   task.ready = ready;
   ready.catch(noOperation);
 }

package/src/scene/layerLayerAdd.js

@@ -1,21 +1,43 @@
-import { indexState } from '../constants/indexState.js';
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { layerProto } from '../globals/layerProto.js';
+
+
+
 import { initNativeGPU } from '../core/initNativeGPU.js';
+import { removeLayerEvents } from './removeLayerEvents.js';
+import { addSceneLayer } from './addSceneLayer.js';
+import { get3DEvents } from './get3DEvents.js';
+import { getRasterEvents } from '../raster/getRasterEvents.js';
+import { emptyEvents } from './emptyEvents.js';
+import { isNativeLayer } from './isNativeLayer.js';
 
 export function layerLayerAdd(event) {
-  const native = !this._3d && (
-    this instanceof L.GridLayer ||
-    this instanceof L.Polyline ||
-    this instanceof L.CircleMarker ||
-    this instanceof L.Marker && !(this.options.icon instanceof L.DivIcon) ||
-    this instanceof L.ImageOverlay && !(this instanceof L.VideoOverlay) && !(this instanceof L.SVGOverlay)
-  );
+  const native = isNativeLayer(this);
   if (native) {
     if (this instanceof L.GridLayer || this instanceof L.ImageOverlay) {
       this.options.crossOrigin ||= true;
     }
     if (this instanceof L.Marker) this.options.icon.options.crossOrigin ||= true;
   }
-  indexState.layerProto._layerAdd.call(this, event);
+  const map = event.target, state = sceneByLayer.get(this);
+  if (!map.hasLayer(this)) return;
+  if (state.kind) {
+    this._map = map;
+    this._zoomAnimated = map._zoomAnimated;
+    if (state.kind !== 'pending' && state.kind !== 'time') {
+      state.events = state.kind === 'raster' ? getRasterEvents(this) :
+        state._3d ? get3DEvents(this) : emptyEvents();
+      state.eventMap = map;
+      map.on(state.events, this);
+      this.once('remove', removeLayerEvents, this);
+    }
+    addSceneLayer(this, map);
+    this.fire('add');
+    map.fire('layeradd', /* alloc */ { layer: this });
+  } else {
+    layerProto.value._layerAdd.call(this, event);
+  }
   if (!native || !event.target.hasLayer(this)) return;
   initNativeGPU(this, event.target);
 }

package/src/scene/mountRenderer.js

@@ -0,0 +1,25 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { onMapChange } from './onMapChange.js';
+import { startZoom } from './startZoom.js';
+import { onZoomAnim } from './onZoomAnim.js';
+import { endZoom } from './endZoom.js';
+
+export function mountRenderer(backend, map, canvas) {
+  sceneByLayer.get(backend)._size = null;
+  canvas.className = 'leaflet-3d';
+  canvas.style.cssText = 'position:absolute;top:0;left:0;pointer-events:none';
+  canvas.setAttribute('role', 'img');
+  canvas.setAttribute('aria-label', backend.options.ariaLabel ?? '3D scene');
+  let pane = map.getPane('webgpuPane');
+  if (!pane) {
+    pane = map.createPane('webgpuPane', map.getContainer());
+    // The pitch sky uses 0 and may be inserted after this pane.
+    pane.style.zIndex = 1;
+    pane.style.pointerEvents = 'none';
+  }
+  pane.append(canvas);
+  map.on('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange, backend);
+  map.on('zoomstart', startZoom, backend);
+  map.on('zoomanim', onZoomAnim, backend);
+  map.on('zoomend', endZoom, backend);
+}

package/src/scene/onAdd3DLayer.js

@@ -1,3 +1,7 @@
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+
+
 import * as attach from './attach.js';
 import * as onClick from '../picking/onClick.js';
 import * as onPointerLeave from '../picking/onPointerLeave.js';
@@ -9,27 +13,27 @@ import { attachLayer } from './attachLayer.js';
 
 /** Attach interaction immediately; initialization may finish before or after onAdd. */
 export function onAdd3DLayer(backend, map) {
-  if (!backend.location) {
+  if (!sceneByLayer.get(backend).location) {
     const center = map.getCenter();
-    backend.location = new L.LatLng(center.lat, center.lng);
+    sceneByLayer.get(backend).location = /* alloc */ new L.LatLng(center.lat, center.lng);
   }
-  if (backend.url || backend._geojson || backend.options.tooltip || backend.modelUrl) {
-    backend.container = map.getContainer();
-    backend._pointerEvents ||= {
+  if (sceneByLayer.get(backend).url || sceneByLayer.get(backend)._geojson || backend.options.tooltip || sceneByLayer.get(backend).modelUrl) {
+    sceneByLayer.get(backend).container = map.getContainer();
+    sceneByLayer.get(backend)._pointerEvents ||= /* alloc */ {
       mousemove: pointerMove,
       click: pointerClick,
       mouseleave: pointerLeave,
     };
     if (backend.options.tooltip) {
-      backend._tooltip = L.DomUtil.create('div', 'leaflet-3d-tooltip', backend.container);
-      backend._tooltip.hidden = true;
-      backend._tooltip.setAttribute('role', 'tooltip');
-      backend._tooltip.setAttribute('aria-live', 'polite');
-      backend._tooltip.style.cssText = 'position:absolute;z-index:600;max-width:220px;padding:10px 12px;border:1px solid #6b5140;border-radius:6px;background:#fffaf0;box-shadow:0 3px 12px #0005;color:#30251d;font:13px/1.45 sans-serif;pointer-events:none';
+      sceneByLayer.get(backend)._tooltip = L.DomUtil.create('div', 'leaflet-3d-tooltip', sceneByLayer.get(backend).container);
+      sceneByLayer.get(backend)._tooltip.hidden = true;
+      sceneByLayer.get(backend)._tooltip.setAttribute('role', 'tooltip');
+      sceneByLayer.get(backend)._tooltip.setAttribute('aria-live', 'polite');
+      sceneByLayer.get(backend)._tooltip.style.cssText = 'position:absolute;z-index:600;max-width:220px;padding:10px 12px;border:1px solid #6b5140;border-radius:6px;background:#fffaf0;box-shadow:0 3px 12px #0005;color:#30251d;font:13px/1.45 sans-serif;pointer-events:none';
     }
-    L.DomEvent.on(backend.container, backend._pointerEvents, backend);
+    L.DomEvent.on(sceneByLayer.get(backend).container, sceneByLayer.get(backend)._pointerEvents, backend);
   }
-  if (backend.root) {
+  if (sceneByLayer.get(backend).root) {
     attachLayer(backend, map);
   }
 }

package/src/scene/onMapChange.js

@@ -1,16 +1,18 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { pendingMapChanges } from '../globals/pendingMapChanges.js';
+
+
 import { update } from './update.js';
 import { render } from "../rendering/render.js";
-import { onMapChangeState } from '../constants/onMapChangeState.js';
+
 import { renderPendingMapChange } from './renderPendingMapChange.js';
 
 /** Map movement: render within the frame of Leaflet's CSS transforms, coalescing same-tick events. */
 
-onMapChangeState.pendingMapChanges = [];
-
 export function onMapChange() {
   const layer = this;
-  if (layer._queued) return;
-  layer._queued = true;
-  onMapChangeState.pendingMapChanges.push(layer);
+  if (sceneByLayer.get(layer)._queued) return;
+  sceneByLayer.get(layer)._queued = true;
+  pendingMapChanges.push(layer);
   queueMicrotask(renderPendingMapChange);
 }

package/src/scene/onRemove3DLayer.js

@@ -1,5 +1,10 @@
-import { cityMapper } from '../constants/cityMapper.js';
-import * as destroyTexture from '../rendering/destroyTexture.js';
+import { L } from '../globals/L.js';
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { sceneTransferFields } from '../globals/sceneTransferFields.js';
+import { renderers } from '../globals/renderers.js';
+
+
+
 import * as endZoom from './endZoom.js';
 import * as onMapChange from './onMapChange.js';
 import * as onPointerLeave from '../picking/onPointerLeave.js';
@@ -10,60 +15,49 @@ import { setParent } from './setParent.js';
 import * as startZoom from './startZoom.js';
 import { cancelUpdate } from './cancelUpdate.js';
 import { update } from './update.js';
-import { releaseRenderer } from './releaseRenderer.js';
+import { releaseSharedScene } from './releaseSharedScene.js';
 
 /** Release source meshes/UI; retain manually added objects and model CPU data. */
 export function onRemove3DLayer(backend, map) {
-  backend._added = Promise.withResolvers();
-  if (backend.container) {
+  sceneByLayer.get(backend)._added = Promise.withResolvers();
+  if (sceneByLayer.get(backend).container) {
     onPointerLeave.onPointerLeave(backend);
-    L.DomEvent.off(backend.container, backend._pointerEvents, backend);
-    backend.container = null;
+    L.DomEvent.off(sceneByLayer.get(backend).container, sceneByLayer.get(backend)._pointerEvents, backend);
+    sceneByLayer.get(backend).container = null;
   }
-  let area, key, layer, animation;
-  for (area of backend._areas.values()) releaseArea(backend, area);
-  backend._areas.clear();
-  backend._tooltip?.remove();
-  backend._tooltip = null;
-  if (backend.url || backend._geojson) updateStatus(backend, false);
-  const shared = backend._shared;
+  let area, key, layer;
+  for (area of sceneByLayer.get(backend)._areas.values()) releaseArea(backend, area);
+  sceneByLayer.get(backend)._areas.clear();
+  sceneByLayer.get(backend)._tooltip?.remove();
+  sceneByLayer.get(backend)._tooltip = null;
+  if (sceneByLayer.get(backend).url || sceneByLayer.get(backend)._geojson) updateStatus(backend, false);
+  const shared = sceneByLayer.get(backend)._shared;
   if (!shared) return;
-  setParent(backend.root, null);
-  shared._layers.delete(backend);
+  setParent(sceneByLayer.get(backend).root, null);
+  sceneByLayer.get(shared)._layers.delete(backend);
   if (shared === backend) {
     map.off('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange.onMapChange, backend);
     map.off('zoomstart', startZoom.startZoom, backend);
     map.off('zoomanim', onZoomAnim.onZoomAnim, backend);
     map.off('zoomend', endZoom.endZoom, backend);
     cancelUpdate(backend);
-    if (backend._layers.size) {
+    if (sceneByLayer.get(backend)._layers.size) {
       // Keep the original scene origin and GPU resources when ownership changes.
-      const next = backend._layers.values().next().value;
-      for (key of ['_layers', '_sceneOrigin', '_size', '_zoomLevel', '_zoomTransitions', '_zoomView', '_cursor', '_roofRaster']) {
-        next[key] = backend[key];
-        delete backend[key];
+      const next = sceneByLayer.get(backend)._layers.values().next().value;
+      for (key of sceneTransferFields) {
+        sceneByLayer.get(next)[key] = sceneByLayer.get(backend)[key];
+        delete sceneByLayer.get(backend)[key];
       }
-      for (layer of next._layers) layer._shared = next;
-      cityMapper.renderers.set(map, next);
+      for (layer of sceneByLayer.get(next)._layers) sceneByLayer.get(layer)._shared = next;
+      renderers.set(map, next);
       map.on('move zoom rotate pitch resize viewreset layeradd layerremove', onMapChange.onMapChange, next);
       map.on('zoomstart', startZoom.startZoom, next);
       map.on('zoomanim', onZoomAnim.onZoomAnim, next);
       map.on('zoomend', endZoom.endZoom, next);
       update(next);
     } else {
-      if (backend._roofRaster) destroyTexture.destroyTexture(backend, backend._roofRaster.texture.texture);
-      backend._roofRaster = null;
-      for (animation of backend._zoomTransitions?.keys() || []) animation.play();
-      backend._zoomTransitions = null;
-      backend._zoomView = null;
-      delete map._cameraView;
-      map.getContainer().classList.remove('leaflet-camera-zoom');
-      const renderer = backend.renderer;
-      renderer.canvas.remove();
-      releaseRenderer(renderer, backend);
-      cityMapper.renderers.delete(map);
-      for (key of ['_layers', '_sceneOrigin', '_size', '_zoomLevel', '_cursor']) delete backend[key];
+      releaseSharedScene(backend, map);
     }
   } else update(shared);
-  backend._shared = backend.renderer = backend.scene = backend.camera = null;
+  sceneByLayer.get(backend)._shared = sceneByLayer.get(backend).renderer = sceneByLayer.get(backend).scene = sceneByLayer.get(backend).camera = null;
 }

package/src/scene/onZoomAnim.js

@@ -1,16 +1,18 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { pendingZoomAnimations } from '../globals/pendingZoomAnimations.js';
+
+
 import { render } from "../rendering/render.js";
-import { onZoomAnimState } from '../constants/onZoomAnimState.js';
-import { renderPendingZoomAnimation } from './renderPendingZoomAnimation.js';
 
-onZoomAnimState.pendingZoomAnimations = [];
+import { renderPendingZoomAnimation } from './renderPendingZoomAnimation.js';
 
 export function onZoomAnim(event) {
   const map = this._map;
-  if (event && !this._zoomView) {
-    this._zoomView = { from: map.getCenter(), zoom: map.getZoom(), to: event.center,
+  if (event && !sceneByLayer.get(this)._zoomView) {
+    sceneByLayer.get(this)._zoomView = /* alloc */ { from: map.getCenter(), zoom: map.getZoom(), to: event.center,
       targetZoom: event.zoom, start: performance.now() };
     map.getContainer().classList.add('leaflet-camera-zoom');
   }
-  onZoomAnimState.pendingZoomAnimations.push(this);
+  pendingZoomAnimations.push(this);
   queueMicrotask(renderPendingZoomAnimation);
 }

package/src/scene/placeEntry.js

@@ -1,9 +1,11 @@
+import { L } from '../globals/L.js';
+import { placeEntryElement } from './placeEntryElement.js';
 export function placeEntry(map, layer, element) {
   let input, entry;
   for (input of map.getContainer().querySelectorAll('.leaflet-control-layers-selector')) {
     entry = map._layers[input.layerId];
     if (input.layerId === L.Util.stamp(layer) || entry instanceof L.LayerGroup && entry.hasLayer(layer)) {
-      input.closest('label').after(element);
+      placeEntryElement(input, layer, element);
       return true;
     }
   }

package/src/scene/placeEntryElement.js

@@ -0,0 +1,22 @@
+import { L } from '../globals/L.js';
+
+export function placeEntryElement(input, layer, element) {
+  const label = input.closest('label');
+  if (element.classList.contains('layer-count')) {
+    if (!input.hasAttribute('aria-label')) input.setAttribute('aria-label', label.textContent.trim());
+    element.id = `leaflet-layer-count-${L.Util.stamp(layer)}`;
+    input.setAttribute('aria-describedby', element.id);
+    label.append(element);
+  }
+  else if (element.classList.contains('traffic-status')) {
+    let group = label.nextElementSibling;
+    if (!group?.classList.contains('traffic-status-group')) {
+      group = L.DomUtil.create('div', 'traffic-status-group');
+      group.style.cssText = 'display:flex;flex-wrap:wrap;gap:4px 8px;max-width:200px;margin:2px 0 6px 20px;';
+      group.setAttribute('role', 'group');
+      group.setAttribute('aria-label', 'Traffic counts');
+      label.after(group);
+    }
+    group.append(element);
+  } else label.after(element);
+}

package/src/scene/ready.js

@@ -0,0 +1,9 @@
+import { sceneByLayer } from '../globals/sceneByLayer.js';
+import { cameraByMap } from '../globals/cameraByMap.js';
+
+
+
+export function ready(instance) {
+  return sceneByLayer.get(instance)?.ready ||
+    cameraByMap.get(instance)?.cameraReady || Promise.resolve(instance);
+}