leaflet-city-mapper 0.0.3 → 0.0.5

package/src/shadows/shadowMatrix.js

@@ -1,39 +1,49 @@
-import { shadowBounds } from './shadowBounds.js';
-import { updateCamera } from '../scene/updateCamera.js';
+import { shadowBounds as sharedShadowBounds } from '../globals/shadowBounds.js';
+import { shadowCamera } from '../globals/shadowCamera.js';
+import { shadowLow } from '../globals/shadowLow.js';
+import { shadowHigh } from '../globals/shadowHigh.js';
+
+import { shadowBounds } from '../geometry/shadowBounds.js';
+import { updateCamera } from '../camera/updateSceneCamera.js';
 
 export function shadowMatrix(meshes, sunlight) {
-  const { min, max } = shadowBounds(meshes);
-  const span = [], center = [], position = [];
-  let i, corner, axis, point, coordinates, value;
+  const { min, max } = shadowBounds(meshes, sharedShadowBounds);
+  const camera = shadowCamera;
+  camera.viewTransform ||= /* alloc */ new DOMMatrix();
+  camera.projectionTransform ||= /* alloc */ new DOMMatrix();
+  camera.projectionViewTransform ||= /* alloc */ new DOMMatrix();
+  const low = shadowLow, high = shadowHigh;
+  let i, axis, x, y, z, value;
+  const radius = Math.max(100, Math.hypot(max[0] - min[0], max[1] - min[1], max[2] - min[2]));
   for (i = 0; i < 3; i++) {
-    span[i] = max[i] - min[i];
-    center[i] = (min[i] + max[i]) / 2;
+    camera.target[i] = (min[i] + max[i]) / 2;
+    camera.position[i] = camera.target[i] + sunlight.direction[i] * radius * 2;
   }
-  const radius = Math.max(100, Math.hypot(...span));
-  for (i = 0; i < 3; i++) position[i] = center[i] + sunlight.direction[i] * radius * 2;
-  const lightCamera = {
-    position,
-    target: center, up: [0, 0, -1], fov: 45, aspect: 1, near: 1, far: radius * 5,
-    viewMatrix: [], projectionMatrix: [], projectionViewMatrix: [],
-  };
-  updateCamera(lightCamera);
-  const view = new DOMMatrix(lightCamera.viewMatrix);
-  const low = [Infinity, Infinity, Infinity], high = [-Infinity, -Infinity, -Infinity];
+  camera.far = radius * 5;
+  updateCamera(camera);
+  const view = camera.viewMatrix;
+  low.fill(Infinity); high.fill(-Infinity);
   for (i = 0; i < 8; i++) {
-    corner = [];
-    for (axis = 0; axis < 3; axis++) corner[axis] = i & (1 << axis) ? max[axis] : min[axis];
-    point = new DOMPoint(...corner, 1).matrixTransform(view);
-    coordinates = [point.x, point.y, point.z];
+    x = i & 1 ? max[0] : min[0];
+    y = i & 2 ? max[1] : min[1];
+    z = i & 4 ? max[2] : min[2];
     for (axis = 0; axis < 3; axis++) {
-      value = coordinates[axis];
+      value = view[axis] * x + view[axis + 4] * y + view[axis + 8] * z + view[axis + 12];
       low[axis] = Math.min(low[axis], value - 20);
       high[axis] = Math.max(high[axis], value + 20);
     }
   }
-  for (i = 0; i < 3; i++) span[i] = high[i] - low[i];
-  const projection = new DOMMatrix([
-    2 / span[0], 0, 0, 0, 0, 2 / span[1], 0, 0, 0, 0, -1 / span[2], 0,
-    -(high[0] + low[0]) / span[0], -(high[1] + low[1]) / span[1], high[2] / span[2], 1,
-  ]);
-  return projection.multiply(view).toFloat32Array();
+  const scaleX = 2 / (high[0] - low[0]), scaleY = 2 / (high[1] - low[1]);
+  const scaleZ = -1 / (high[2] - low[2]);
+  const matrix = /* alloc */ new Float32Array(16);
+  for (i = 0; i < 16; i += 4) {
+    matrix[i] = view[i] * scaleX;
+    matrix[i + 1] = view[i + 1] * scaleY;
+    matrix[i + 2] = view[i + 2] * scaleZ;
+    matrix[i + 3] = view[i + 3];
+  }
+  matrix[12] -= (high[0] + low[0]) / (high[0] - low[0]);
+  matrix[13] -= (high[1] + low[1]) / (high[1] - low[1]);
+  matrix[14] += high[2] / (high[2] - low[2]);
+  return matrix;
 }

package/src/shadows/shadowMeshMatches.js

@@ -0,0 +1,11 @@
+export function shadowMeshMatches(cache, mesh) {
+  const previous = cache.meshes.get(mesh), range = mesh.geometry.drawRange;
+  if (!(previous && previous.world === mesh._worldMatrixVersion && previous.geometry === mesh.geometry &&
+    previous.start === range.start && previous.count === range.count &&
+    previous.appearance === (mesh._appearance ?? 1))) return false;
+  let attribute;
+  for (attribute of Object.values(mesh.geometry.attributes)) {
+    if (attribute.needsUpdate) return false;
+  }
+  return true;
+}

package/src/sources/attachAreaMesh.js

@@ -1,58 +1,69 @@
-import { emptyNode } from '../scene/emptyNode.js';
-import { createProgram } from '../rendering/createProgram.js';
-import { cityMapper } from '../constants/cityMapper.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+
+import { nextId } from '../globals/nextId.js';
+
+
+import { emptyNode } from '../scene/createSceneNode.js';
+import { createProgram } from '../materials/createProgram.js';
+
 import { setParent } from '../scene/setParent.js';
-import { update } from '../scene/update.js';
-import { instanceAreaGeometry } from './instanceAreaGeometry.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
+import { instanceAreaGeometry } from '../geometry/instanceAreaGeometry.js';
 
 export function attachAreaMesh(context) {
-  const { backend, area } = context;
+  const { backend: layer, area } = context;
   if (!context.positions.length) {
-    Object.assign(area, { mesh: null, buildings: 0, skipped: context.skipped, done: true });
+    area.mesh = null, area.buildings = 0, area.skipped = context.skipped, area.done = true;
     return;
   }
-  const device = backend.renderer.device;
-  const data = instanceAreaGeometry(context);
-  const attributes = {
-    position: { size: 3, data: new Float32Array(data.positions) },
-    normal: { size: 3, data: new Float32Array(data.normals) },
-    color: { size: 3, data: new Float32Array(data.colors) },
+  const device = rendererByLayer.get(layer).device;
+  const data = context.preparedGeometry || instanceAreaGeometry(context);
+  const attributes = /* alloc */ {
+    position: /* alloc */ { size: 3, data: data.positions instanceof Float32Array ? data.positions : /* alloc */ new Float32Array(data.positions) },
+    normal: /* alloc */ { size: 3, data: data.normals instanceof Float32Array ? data.normals : /* alloc */ new Float32Array(data.normals) },
+    color: /* alloc */ { size: 3, data: data.colors instanceof Float32Array ? data.colors : /* alloc */ new Float32Array(data.colors) },
+  };
+  if (data.instanceOffsets) attributes.instanceOffset = /* alloc */ { size: 4, data: data.instanceOffsets };
+  if (layer.options.nightLight) attributes.uv = /* alloc */ {
+    size: 2, data: context.uvs instanceof Float32Array ? context.uvs : /* alloc */ new Float32Array(context.uvs),
   };
-  if (data.instanceOffsets) attributes.instanceOffset = { size: 4, data: data.instanceOffsets };
-  if (backend.options.nightLight) attributes.uv = { size: 2, data: new Float32Array(context.uvs) };
   let name, attribute;
-  for ([name, attribute] of Object.entries(attributes)) {
+  for (name in attributes) {
+    attribute = attributes[name];
     attribute.count = attribute.data.length / attribute.size;
-    attribute.buffer = device.createBuffer({
+    attribute.buffer = device.createBuffer(/* alloc */ {
       size: Math.max(4, attribute.data.byteLength),
       usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST,
     });
     device.queue.writeBuffer(attribute.buffer, 0, attribute.data);
   }
-  const meshGeometry = {
+  const meshGeometry = /* alloc */ {
     device,
+    bounds: data.bounds,
     attributes,
-    drawRange: { start: 0, count: attributes.position.count },
+    drawRange: /* alloc */ { start: 0, count: attributes.position.count },
   };
-  Object.assign(area, {
-    mesh: {
+  area.mesh = /* alloc */ {
       ...emptyNode(),
       device,
       geometry: meshGeometry,
-      program: createProgram(backend, {
+      program: createProgram(layer, /* alloc */ {
         instanced: Boolean(data.instanceOffsets),
-        vertexColors: true, roofTexture: Boolean(backend.options.roofTexture),
-        ...(backend.options.nightLight ? { nightLight: true, alphaMode: 'BLEND', doubleSided: true } : {}),
+        vertexColors: true, roofTexture: layer.options.roofTexture,
+        wallTexture: layer.options.wallTexture,
+        nightLight: Boolean(layer.options.nightLight),
+        alphaMode: layer.options.nightLight ? 'BLEND' : undefined,
+        doubleSided: Boolean(layer.options.nightLight),
       }),
-      id: cityMapper.nextId++,
+      id: nextId.value++,
       renderOrder: 0,
       fadeDuration: 250,
-      extras: { featureFaces: context.featureFaces, lights: context.lights },
-    },
-    buildings: context.featureFaces.length,
-    skipped: context.skipped,
-    done: true,
-  });
-  setParent(area.mesh, backend.root);
-  update(backend);
+      extras: /* alloc */ { featureFaces: context.featureFaces, lights: context.lights },
+    };
+  area.buildings = context.featureFaces.length;
+  area.skipped = context.skipped;
+  area.done = true;
+  setParent(area.mesh, rootByLayer.get(layer));
+  update(layer);
 }

package/src/sources/buildArea.js

@@ -1,42 +1,54 @@
+import { geojsonByLayer } from '../weakmaps/geojsonByLayer.js';
+import { inflightByLayer } from '../weakmaps/inflightByLayer.js';
+import { cameraViewByMap } from '../weakmaps/cameraViewByMap.js';
+
+
 import { buildAreaFeature } from './buildAreaFeature.js';
 import { attachAreaMesh } from './attachAreaMesh.js';
 import { loadSource } from '../archives/loadSource.js';
 import { sourceAreaContext } from './sourceAreaContext.js';
-import { pump } from './pump.js';
+import { pump } from './pumpSourceAreas.js';
+import { buildAreaInWorker } from '../workers/buildAreaInWorker.js';
 
-export async function buildArea(backend, area, map) {
+export async function buildArea(layer, area, map) {
   let feature;
   try {
-    await new Promise(requestAnimationFrame);
-    await map._terrain3D?._terrainPromise;
+    await /* alloc */ new Promise(requestAnimationFrame);
+    await cameraViewByMap.get(map);
     if (area.request.signal.aborted) return;
-    const data = await loadSource(backend, area);
+    const data = await loadSource(layer, area);
     if (area.request.signal.aborted) return;
     if (data?.type !== 'FeatureCollection' || !Array.isArray(data.features)) {
-      throw new Error('Invalid GeoJSON response');
+      throw /* alloc */ new Error('Invalid GeoJSON response');
     }
-    if (backend._geojson && typeof backend.options.style !== 'function') {
-      throw new Error('style must be a function');
+    if (geojsonByLayer.get(layer) && typeof layer.options.style !== 'function') {
+      throw /* alloc */ new Error('style must be a function');
+    }
+    const context = sourceAreaContext(layer, area, map);
+    // ponytail: feature-count cutoff avoids startup overhead; count vertices if giant single polygons matter.
+    if (layer.options.worker !== false && typeof Worker !== 'undefined' && data.features.length >= 64) {
+      context.jobs = /* alloc */ [];
     }
-    const context = sourceAreaContext(backend, area, map);
     let deadline = performance.now() + 4;
     for (feature of data.features) {
       if (area.request.signal.aborted) return;
       if (performance.now() >= deadline) {
-        await new Promise(requestAnimationFrame);
+        await /* alloc */ new Promise(requestAnimationFrame);
         if (area.request.signal.aborted) return;
         deadline = performance.now() + 4;
       }
       buildAreaFeature(context, feature);
     }
+    if (context.jobs) await buildAreaInWorker(context, area.request.signal);
+    if (area.request.signal.aborted) return;
     attachAreaMesh(context);
   } catch (error) {
     if (!area.request.signal.aborted) {
       area.error = error.message;
-      backend.fire('error', { error });
+      layer.fire('error', /* alloc */ { error });
     }
   } finally {
-    backend._inflight--;
-    pump(backend, map);
+    inflightByLayer.set(layer, inflightByLayer.get(layer) - 1);
+    pump(layer, map);
   }
 }

package/src/sources/buildAreaFeature.js

@@ -1,39 +1,43 @@
+import { L } from '../globals/L.js';
 import { buildAreaPoint } from './buildAreaPoint.js';
-import { buildAreaPolygon } from './buildAreaPolygon.js';
-import { parseColor } from '../utils/parseColor.js';
+import { buildAreaPolygon } from '../geometry/buildExtrudedPolygon.js';
+import { parseColor } from '../colors/parseColor.js';
+import { featureAnchor } from './featureAnchor.js';
+import { extrusionStyle } from './extrusionStyle.js';
+import { prepareAreaGeometryJob } from './prepareAreaGeometryJob.js';
 
 export function buildAreaFeature(context, feature) {
-  const { backend, area, map } = context;
+  const { backend: layer, area, map } = context;
   const coords = area.coords;
-  const geometry = feature?.geometry;
-  const isTree = geometry?.type === 'Point';
-  if (backend.options.nightLight && !isTree) throw new Error('Night lights require Point geometry');
-  const polygons = geometry?.type === 'Polygon' ? [geometry.coordinates] :
-    geometry?.type === 'MultiPolygon' ? geometry.coordinates : null;
-  if (!polygons && !isTree) throw new Error('Unsupported GeoJSON geometry');
-  const [lon, lat] = (isTree ? geometry.coordinates : polygons[0]?.[0]?.[0]) ?? [];
-  if (!Number.isFinite(lon) || !Number.isFinite(lat)) throw new Error('Invalid GeoJSON coordinates');
+  const coordinates = featureAnchor(feature, layer.options.nightLight);
+  const geometry = feature.geometry, isTree = geometry.type === 'Point';
+  const lon = coordinates[0], lat = coordinates[1];
   if (coords) {
-    const anchor = map.project(new L.LatLng(lat, lon), coords.z);
+    const anchor = map.project(/* alloc */ new L.LatLng(lat, lon), coords.z);
     if (Math.floor(anchor.x / 256) !== coords.x || Math.floor(anchor.y / 256) !== coords.y) return;
   }
-  const style = backend.options.style(feature);
+  const style = extrusionStyle(layer, feature);
   if (style === null) {
     context.skipped++;
     return;
   }
-  if (!style || typeof style !== 'object') throw new Error('style must return an extrusion style or null');
   const { top, bottom = 0, color = 0xd9b38c } = style;
-  if (!Number.isFinite(top) || !Number.isFinite(bottom) || bottom < 0 || top <= bottom) {
-    throw new Error('Invalid extrusion heights: expected top > bottom >= 0');
-  }
   const baseColor = parseColor(color);
+  if (context.jobs) {
+    prepareAreaGeometryJob(context, feature, lon, lat, style, baseColor);
+    context.featureFaces.push(/* alloc */ {
+      id: feature.id ?? feature.properties?.objectid ?? JSON.stringify(geometry),
+      properties: feature.properties, baseColor,
+    });
+    return;
+  }
   const vertexStart = context.positions.length / 3;
   if (isTree) buildAreaPoint(context, feature, lon, lat, style, baseColor);
-  let rings;
-  for (rings of polygons || []) buildAreaPolygon(context, rings, top, bottom, baseColor);
+  let polygon;
+  if (geometry.type === 'Polygon') buildAreaPolygon(context, geometry.coordinates, top, bottom, baseColor);
+  else if (geometry.type === 'MultiPolygon') for (polygon of geometry.coordinates) buildAreaPolygon(context, polygon, top, bottom, baseColor);
   const vertexEnd = context.positions.length / 3;
-  context.featureFaces.push({
+  context.featureFaces.push(/* alloc */ {
     id: feature.id ?? feature.properties?.objectid ?? JSON.stringify(geometry),
     properties: feature.properties, baseColor,
     faceStart: vertexStart / 3, faceEnd: vertexEnd / 3, vertexStart, vertexEnd,

package/src/sources/buildAreaPoint.js

@@ -1,25 +1,7 @@
-import { projectedTree } from './projectedTree.js';
-import { generateTreeGeometry } from './generateTreeGeometry.js';
-import { lampPostGeometry } from '../geometry/lampPostGeometry.js';
-import { lightGeometry } from '../geometry/lightGeometry.js';
-import { treeGeometry } from '../geometry/treeGeometry.js';
+import { projectedTree } from '../projections/projectTreePoint.js';
+import { buildProjectedPoint } from '../geometry/buildProjectedPoint.js';
 
 export function buildAreaPoint(context, feature, lon, lat, style, baseColor) {
-  const { backend } = context;
-  const { top } = style;
   const projected = projectedTree(context, lon, lat);
-  if (backend.options.nightLight) {
-    if (!Number.isFinite(style.lightFlux) || style.lightFlux <= 0) throw new Error('Invalid light flux');
-    const support = feature.properties?.cod_ouvrag || `${lon},${lat}`;
-    if (style.poleRadius > 0 && !context.supports.has(support)) {
-      generateTreeGeometry(context, lampPostGeometry, projected, style);
-      context.supports.add(support);
-    }
-    generateTreeGeometry(context, lightGeometry, projected, style);
-    context.lights.push({
-      position: [projected.x, projected.ground + top, -projected.y],
-      radius: Math.hypot(top, style.lightRadius), color: [baseColor.r, baseColor.g, baseColor.b],
-      flux: style.lightFlux,
-    });
-  } else generateTreeGeometry(context, treeGeometry, projected, style);
+  buildProjectedPoint(context, projected, style, baseColor, feature.properties?.cod_ouvrag || `${lon},${lat}`);
 }

package/src/sources/compareAreaDistance.js

@@ -1,4 +1,3 @@
 export function compareAreaDistance(a, b) {
-  return Math.hypot(a[1].x - a[2].x, a[1].y - a[2].y) -
-    Math.hypot(b[1].x - b[2].x, b[1].y - b[2].y);
+  return a.distance - b.distance;
 }

package/src/sources/extrusionStyle.js

@@ -0,0 +1,10 @@
+export function extrusionStyle(layer, feature) {
+  const style = layer.options.style(feature);
+  if (style === null) return null;
+  if (!style || typeof style !== 'object') throw /* alloc */ new Error('style must return an extrusion style or null');
+  const { top, bottom = 0 } = style;
+  if (!Number.isFinite(top) || !Number.isFinite(bottom) || bottom < 0 || top <= bottom) {
+    throw /* alloc */ new Error('Invalid extrusion heights: expected top > bottom >= 0');
+  }
+  return style;
+}

package/src/sources/featureAnchor.js

@@ -0,0 +1,9 @@
+export function featureAnchor(feature, nightLight) {
+  const geometry = feature?.geometry, point = geometry?.type === 'Point';
+  if (nightLight && !point) throw /* alloc */ new Error('Night lights require Point geometry');
+  if (geometry?.type !== 'Polygon' && geometry?.type !== 'MultiPolygon' && !point) throw /* alloc */ new Error('Unsupported GeoJSON geometry');
+  const coordinates = point ? geometry.coordinates :
+    geometry.type === 'Polygon' ? geometry.coordinates[0]?.[0] : geometry.coordinates[0]?.[0]?.[0];
+  if (!Number.isFinite(coordinates?.[0]) || !Number.isFinite(coordinates?.[1])) throw /* alloc */ new Error('Invalid GeoJSON coordinates');
+  return coordinates;
+}

package/src/sources/initializeGeoJSON.js

@@ -1,8 +1,11 @@
+import { geojsonByLayer } from '../weakmaps/geojsonByLayer.js';
+
+
+
 import { setGeoJSONLayerData } from './setGeoJSONLayerData.js';
 import { init3D } from '../scene/init3D.js';
 
 export function initializeGeoJSON(layer, options) {
-  layer._geojson = true;
-  layer.setData = setGeoJSONLayerData;
+  geojsonByLayer.set(layer, true);
   init3D(layer, options);
 }

package/src/sources/pendingSourceAreas.js

@@ -0,0 +1,21 @@
+import { areasByLayer } from '../weakmaps/areasByLayer.js';
+
+import { compareDistance } from '../utils/compareDistance.js';
+
+export function pendingSourceAreas(layers, map) {
+  const pending = /* alloc */ [];
+  let layer, area, center;
+  for (layer of layers) {
+    for (area of areasByLayer.get(layer).values()) {
+      if (area.started || area.request.signal.aborted) continue;
+      center = area.coords && map.project(map.getCenter(), area.coords.z).divideBy(256);
+      pending.push(/* alloc */ {
+        layer, area,
+        distance: center
+          ? Math.hypot(area.coords.x + 0.5 - center.x, area.coords.y + 0.5 - center.y) / 2 ** area.coords.z : 0,
+      });
+    }
+  }
+  pending.sort(compareDistance);
+  return pending;
+}

package/src/sources/prepareAreaGeometryJob.js

@@ -0,0 +1,33 @@
+import { projectedTree } from '../projections/projectTreePoint.js';
+import { projectRing } from '../projections/projectRing.js';
+import { parseColor } from '../colors/parseColor.js';
+
+export function prepareAreaGeometryJob(context, feature, lon, lat, style, baseColor) {
+  const geometry = feature.geometry;
+  const polygons = /* alloc */ [];
+  const rings = geometry.type === 'Polygon' ? /* alloc */ [geometry.coordinates]
+    : geometry.type === 'MultiPolygon' ? geometry.coordinates : /* alloc */ [];
+  let polygon, ring, paths;
+  for (polygon of rings) {
+    if (!polygon.length) throw /* alloc */ new Error('Empty GeoJSON polygon');
+    paths = /* alloc */ [];
+    for (ring of polygon) paths.push(projectRing(context, ring));
+    polygons.push(paths);
+  }
+  const point = geometry.type === 'Point' ? projectedTree(context, lon, lat) : null;
+  const nightLight = context.backend.options.nightLight;
+  const crownColor = point ? parseColor(style.color ?? (nightLight ? undefined : 0x4f823b)) : baseColor;
+  const trunkColor = point && !nightLight ? parseColor(style.trunkColor ?? 0x72513a) : null;
+  context.jobs.push(/* alloc */ {
+    point, polygons, baseColor: /* alloc */ { r: baseColor.r, g: baseColor.g, b: baseColor.b },
+    support: feature.properties?.cod_ouvrag || `${lon},${lat}`,
+    style: /* alloc */ {
+      top: style.top, bottom: style.bottom ?? 0,
+      color: /* alloc */ { r: crownColor.r, g: crownColor.g, b: crownColor.b },
+      trunkColor: trunkColor ? /* alloc */ { r: trunkColor.r, g: trunkColor.g, b: trunkColor.b } : undefined,
+      trunkRadius: style.trunkRadius, crownRadius: style.crownRadius,
+      crownBottom: style.crownBottom, crownShape: style.crownShape,
+      poleRadius: style.poleRadius, lightRadius: style.lightRadius, lightFlux: style.lightFlux,
+    },
+  });
+}

package/src/sources/pumpSourceAreas.js

@@ -0,0 +1,37 @@
+import { areasByLayer } from '../weakmaps/areasByLayer.js';
+import { geojsonByLayer } from '../weakmaps/geojsonByLayer.js';
+import { inflightByLayer } from '../weakmaps/inflightByLayer.js';
+import { layersByLayer } from '../weakmaps/layersByLayer.js';
+import { urlByLayer } from '../weakmaps/urlByLayer.js';
+
+import { renderers } from '../weakmaps/renderers.js';
+
+
+
+import { updateStatus } from './updateSourceStatus.js';
+
+import { buildArea } from './buildArea.js';
+import { pendingSourceAreas } from './pendingSourceAreas.js';
+
+/** Share four load/build slots across source layers, nearest ground blocks first. */
+export function pump(layer, map = layer._map) {
+  const shared = map && renderers.get(map);
+  if (!shared) return;
+  const layers = /* alloc */ [];
+  let sourceLayer, area, areaBackend;
+  for (sourceLayer of layersByLayer.get(shared)) {
+    if (Number.isFinite(inflightByLayer.get(sourceLayer)) && areasByLayer.get(sourceLayer) && (urlByLayer.get(sourceLayer) || geojsonByLayer.get(sourceLayer))) layers.push(sourceLayer);
+  }
+  const pending = pendingSourceAreas(layers, map);
+  let inflight = 0;
+  for (sourceLayer of layers) inflight += inflightByLayer.get(sourceLayer);
+  for ({ layer: areaBackend, area } of pending) {
+    if (inflight >= 4) break;
+    if (inflightByLayer.get(areaBackend) >= 2) continue;
+    area.started = true;
+    inflightByLayer.set(areaBackend, inflightByLayer.get(areaBackend) + 1);
+    inflight++;
+    buildArea(areaBackend, area, map);
+  }
+  for (sourceLayer of layers) updateStatus(sourceLayer);
+}

package/src/sources/releaseArea.js

@@ -1,20 +1,25 @@
+import { highlightedFeatureByLayer } from '../weakmaps/highlightedFeatureByLayer.js';
+import { hoveredFeatureByLayer } from '../weakmaps/hoveredFeatureByLayer.js';
+
+
+
 import { setHighlight } from '../picking/setHighlight.js';
 import { showFeature } from '../picking/showFeature.js';
 import { setParent } from '../scene/setParent.js';
-import { update } from '../scene/update.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
 
 /** Cancel pending work and dispose this block's GPU data, including any hover highlight. */
-export function releaseArea(backend, area) {
+export function releaseArea(layer, area) {
   area.request.abort();
   let attribute;
   if (area.mesh) {
-    if (backend.highlightedFeature?.mesh === area.mesh) {
-      setHighlight(backend, null);
-      backend.hoveredFeature = null;
-      showFeature(backend, null);
+    if (highlightedFeatureByLayer.get(layer)?.mesh === area.mesh) {
+      setHighlight(layer, null);
+      hoveredFeatureByLayer.set(layer, null);
+      showFeature(layer, null);
     }
     setParent(area.mesh, null);
-    update(backend);
+    update(layer);
     const geometry = area.mesh.geometry;
     for (attribute of Object.values(geometry.attributes)) attribute.buffer.destroy();
     area.mesh.program.pipelineCache.clear();

package/src/sources/setGeoJSONData.js

@@ -1,3 +1,7 @@
+import { areasByLayer } from '../weakmaps/areasByLayer.js';
+
+
+
 import { releaseArea } from './releaseArea.js';
 import { updateArea } from './updateArea.js';
 
@@ -5,8 +9,8 @@ export function setGeoJSONData(layer, data) {
   layer.options.data = data;
   delete layer.options.url;
   let area;
-  for (area of layer._areas.values()) releaseArea(layer, area);
-  layer._areas.clear();
+  for (area of areasByLayer.get(layer).values()) releaseArea(layer, area);
+  areasByLayer.get(layer).clear();
   updateArea(layer);
   return layer;
 }

package/src/sources/sourceAreaContext.js

@@ -1,9 +1,20 @@
-export function sourceAreaContext(backend, area, map) {
-  const crs = map.options.crs, origin = crs.project(backend.location);
-  return {
-    backend, area, map, crs, origin,
-    metres: Math.cos(backend.location.lat * Math.PI / 180),
-    positions: [], normals: [], colors: [], uvs: [], featureFaces: [], lights: [],
-    supports: new Set(), skipped: 0,
-  };
+import { locationByLayer } from '../weakmaps/locationByLayer.js';
+
+import { radians } from '../globals/radians.js';
+
+
+export function sourceAreaContext(layer, area, map) {
+  const crs = map.options.crs, origin = crs.project(locationByLayer.get(layer));
+  return /* alloc */ {
+    backend: layer, area, map, crs, origin,
+    metres: Math.cos(locationByLayer.get(layer).lat * radians),
+    positions: /* alloc */ [],
+    normals: /* alloc */ [],
+    colors: /* alloc */ [],
+    uvs: /* alloc */ [],
+    featureFaces: /* alloc */ [],
+    lights: /* alloc */ [],
+    supports: /* alloc */ new Set(),
+    skipped: 0,
+  };
 }