leaflet-city-mapper 0.0.5 → 0.0.7

package/src/native/syncGridLayer.js

@@ -1,22 +1,58 @@
 import { L } from '../globals/L.js';
 import { coreWhite } from '../globals/coreWhite.js';
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
 
 import { styleNativeMesh } from './styleNativeMesh.js';
 import { quadNativeMesh } from './quadNativeMesh.js';
 import { boundsQuad } from '../geometry/boundsQuad.js';
+import { loadGridTerrain } from './loadGridTerrain.js';
+import { terrainGridMesh } from './terrainGridMesh.js';
 
 
 export function syncGridLayer(state) {
   const { source, textures, meshes } = state;
-  let key, tile, opacity, retained, mesh, nw, se;
+  const stream = streamTerrainByMap.get(state.map);
+  if (state.terrainStream !== stream) {
+    state.terrainStream = stream;
+    state.terrainRequests = stream ? /* alloc */ new Map() : null;
+  }
+  let key, tile, opacity, retained, mesh, nw, se, request, pending = false;
+  if (state.terrainRequests) {
+    for (key of state.terrainRequests.keys()) {
+      if (!source._tiles[key]) state.terrainRequests.delete(key);
+    }
+  }
   for (key in source._tiles) {
     if (!Object.hasOwn(source._tiles, key)) continue;
     tile = source._tiles[key];
-    if (!tile.loaded || tile.el instanceof HTMLImageElement && !tile.el.naturalWidth) continue;
+    if (!tile.loaded || tile.el instanceof HTMLImageElement && !tile.el.naturalWidth) {
+      if (stream) pending = true;
+      continue;
+    }
     opacity = (source.options.opacity ?? 1) * (tile._gpuOpacity ?? 1);
     retained = textures.get(key);
     mesh = meshes.get(key);
-    if (mesh && retained?.image === tile.el && retained.url === (tile.el.currentSrc || tile.el.src)) {
+    if (state.terrainRequests) {
+      request = state.terrainRequests.get(key);
+      if (!request || request.tile !== tile) {
+        request = /* alloc */ { tile, stream };
+        state.terrainRequests.set(key, request);
+        loadGridTerrain(state, key, tile, request);
+      }
+      if (!request.tiles) {
+        pending = true;
+        if (mesh && retained?.image === tile.el) {
+          retained.used = true;
+          styleNativeMesh(state, mesh, coreWhite, opacity);
+        }
+        continue;
+      }
+      if (mesh && mesh._terrainRequest === request && retained?.image === tile.el &&
+        retained.url === (tile.el.currentSrc || tile.el.src)) {
+        retained.used = true;
+        styleNativeMesh(state, mesh, coreWhite, opacity);
+      } else mesh = terrainGridMesh(state, key, tile, request, opacity);
+    } else if (mesh && !mesh._terrainRequest && retained?.image === tile.el && retained.url === (tile.el.currentSrc || tile.el.src)) {
       retained.used = true;
       styleNativeMesh(state, mesh, coreWhite, opacity);
     } else {
@@ -26,4 +62,13 @@ export function syncGridLayer(state) {
     }
     if (mesh) mesh.renderOrder += tile.coords.z / 100;
   }
+  if (stream && (pending || !Object.keys(source._tiles).length)) {
+    for ([key, mesh] of meshes) {
+      if (source._tiles[key] || !mesh._terrainRequest) continue;
+      retained = textures.get(key);
+      if (!retained) continue;
+      retained.used = true;
+      mesh._nativeUsed = true;
+    }
+  }
 }

package/src/native/syncNativeStrokeAnchors.js

@@ -0,0 +1,12 @@
+export function syncNativeStrokeAnchors(state, stroke) {
+  const { source } = state;
+  if (state.strokeAnchors?.length === stroke.length && stroke.length) {
+    if (source.options.interactive === false) state.strokeCoordinates = stroke;
+    else {
+      state.strokeCoordinates = /* alloc */ new Float64Array(stroke);
+      state.strokeAnchors = /* alloc */ new Float64Array(state.strokeAnchors);
+    }
+    state.strokeZoom = state.map.getZoom();
+    state.strokeWeight = Number(source.options.weight);
+  } else state.strokeAnchors = null;
+}

package/src/native/syncNativeStrokeZoom.js

@@ -0,0 +1,29 @@
+import { styleNativeMesh } from './styleNativeMesh.js';
+import { parseColor } from '../colors/parseColor.js';
+
+export function syncNativeStrokeZoom(state) {
+  const { source, meshes, strokeCoordinates, strokeAnchors } = state;
+  const mesh = meshes.get('stroke');
+  let i, r, g, b, fill;
+  if (mesh) {
+    const factor = 2 ** (state.strokeZoom - state.map.getZoom()) *
+      Number(source.options.weight) / state.strokeWeight;
+    const attribute = mesh.geometry.attributes.position;
+    if (mesh.program.uniforms.strokeScale) {
+      mesh.program.uniforms.strokeScale.value = factor;
+    } else {
+      for (i = 0; i < strokeCoordinates.length; i++) {
+        attribute.data[i] = strokeAnchors[i] + (strokeCoordinates[i] - strokeAnchors[i]) * factor;
+      }
+      attribute.needsUpdate = true;
+      mesh.geometry.bounds = null;
+    }
+    ({ r, g, b } = parseColor(source.options.color));
+    styleNativeMesh(state, mesh, /* alloc */ [r, g, b], source.options.opacity ?? 1);
+  }
+  fill = meshes.get('fill');
+  if (fill) {
+    ({ r, g, b } = parseColor(source.options.fillColor || source.options.color));
+    styleNativeMesh(state, fill, /* alloc */ [r, g, b], source.options.fillOpacity ?? 1);
+  }
+}

package/src/native/syncVectorLayer.js

@@ -1,22 +1,19 @@
-import { geometryPixelStates } from '../globals/geometryPixelStates.js';
-
-
-import { nativeGeometry } from '../geometry/nativeGeometry.js';
-import { localPixelForGeometry } from '../projections/localPixelForGeometry.js';
 import { parseColor } from '../colors/parseColor.js';
 import { putNativeMesh } from './putNativeMesh.js';
+import { syncNativeStrokeZoom } from './syncNativeStrokeZoom.js';
+import { nativeVectorGeometry } from './nativeVectorGeometry.js';
+import { syncNativeStrokeAnchors } from './syncNativeStrokeAnchors.js';
 
 export function syncVectorLayer(state) {
   const { source } = state;
-  geometryPixelStates.push(state);
-  let geometry;
-  try {
-    geometry = nativeGeometry(source, state.map, localPixelForGeometry);
-  } finally {
-    geometryPixelStates.pop();
+  if (state.zoomOnly) {
+    syncNativeStrokeZoom(state);
+    state.zoomOnly = false;
+    return;
   }
-  const { fill, stroke } = geometry;
-  let i, key, positions, color, opacity, r, g, b;
+  const { fill, stroke } = nativeVectorGeometry(state);
+  syncNativeStrokeAnchors(state, stroke);
+  let i, key, positions, color, opacity, r, g, b, attributes;
   for (i = 0; i < 2; i++) {
     key = i ? 'stroke' : 'fill';
     positions = i ? stroke : fill;
@@ -25,5 +22,10 @@ export function syncVectorLayer(state) {
     if (!positions.length) continue;
     ({ r, g, b } = parseColor(color));
     putNativeMesh(state, key, positions, /* alloc */ [r, g, b], opacity ?? 1);
+    if (key === 'stroke' && source.options.interactive === false && state.strokeCoordinates) {
+      attributes = state.meshes.get(key).geometry.attributes;
+      state.strokeCoordinates = attributes.position.data;
+      state.strokeAnchors = attributes.normal.data;
+    }
   }
 }

package/src/native/terrainGridMesh.js

@@ -0,0 +1,34 @@
+import { rootByLayer } from '../weakmaps/rootByLayer.js';
+import { coreWhite } from '../globals/coreWhite.js';
+import { textureFor } from '../textures/nativeTextureFor.js';
+import { terrainElevation } from '../terrain/terrainElevation.js';
+import { localPosition } from '../projections/localPosition.js';
+import { putNativeMesh } from './putNativeMesh.js';
+
+export function terrainGridMesh(state, key, tile, request, opacity) {
+  const texture = textureFor(state, key, tile.el);
+  if (!texture) return;
+  const { x, y, z } = tile.coords, divisions = 32;
+  const northwest = localPosition(state, state.map.unproject(/* alloc */ [x * 256, y * 256], z));
+  const southeast = localPosition(state, state.map.unproject(/* alloc */ [(x + 1) * 256, (y + 1) * 256], z));
+  const vertices = /* alloc */ [], position = /* alloc */ [], uv = /* alloc */ [];
+  const base = rootByLayer.get(state.backend).position[1];
+  let row, col, u, v, elevation, a, b, c, d, index;
+  for (row = 0; row <= divisions; row++) for (col = 0; col <= divisions; col++) {
+    u = col / divisions; v = row / divisions;
+    elevation = terrainElevation(/* alloc */ { x: (x + u) * 256, y: (y + v) * 256 }, request.tiles);
+    if (!Number.isFinite(elevation)) throw /* alloc */ new Error(`Missing elevation sample in ${z}/${x}/${y}`);
+    vertices.push(/* alloc */ [northwest[0] + (southeast[0] - northwest[0]) * u, elevation - base,
+      northwest[2] + (southeast[2] - northwest[2]) * v, u, v]);
+  }
+  for (row = 0; row < divisions; row++) for (col = 0; col < divisions; col++) {
+    a = row * (divisions + 1) + col; b = a + 1; c = a + divisions + 1; d = c + 1;
+    for (index of /* alloc */ [a, c, b, b, c, d]) {
+      position.push(vertices[index][0], vertices[index][1], vertices[index][2]);
+      uv.push(vertices[index][3], vertices[index][4]);
+    }
+  }
+  const mesh = putNativeMesh(state, key, position, coreWhite, opacity, texture, uv, true);
+  mesh._terrainRequest = request;
+  return mesh;
+}

package/src/native/updateNativeStrokeRadius.js

@@ -0,0 +1,9 @@
+export function updateNativeStrokeRadius(mesh) {
+  const attributes = mesh.geometry.attributes, positions = attributes.position.data, anchors = attributes.normal.data;
+  let i, radius = 0;
+  for (i = 0; i < positions.length; i += 3) {
+    radius = Math.max(radius, Math.hypot(positions[i] - anchors[i],
+      positions[i + 1] - anchors[i + 1], positions[i + 2] - anchors[i + 2]));
+  }
+  mesh.geometry.nativeStrokeRadius = radius;
+}

package/src/projections/displayContainerPoint.js

@@ -1,3 +1,23 @@
-export function displayPoint(map, point) {
-  return map.layerPointToContainerPoint(point).subtract(map._getMapPanePos());
-}
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
+import { renderers } from '../weakmaps/renderers.js';
+import { sceneOriginByLayer } from '../weakmaps/sceneOriginByLayer.js';
+import { cameraViewByMap } from '../weakmaps/cameraViewByMap.js';
+import { mapMethods } from '../globals/mapMethods.js';
+import { radians } from '../globals/radians.js';
+import { earthCirc } from '../globals/earthCirc.js';
+import { mapElevationOf } from '../terrain/mapElevationOf.js';
+import { animationPoint } from './transformZoomAnimationPoint.js';
+import { project } from './projectCameraPoint.js';
+
+export function displayPoint(map, point, location) {
+  const shared = renderers.get(map), origin = shared && sceneOriginByLayer.get(shared);
+  if (!streamTerrainByMap.get(map) || !origin) {
+    return map.layerPointToContainerPoint(point).subtract(map._getMapPanePos());
+  }
+  const elevation = mapElevationOf(map, location || map.layerPointToLatLng(point)) ?? 0;
+  const center = mapElevationOf(map, map.getCenter()) ?? 0;
+  const zoom = cameraViewByMap.get(map)?.zoom ?? map.getZoom();
+  const height = (elevation - center) * map.options.crs.scale(zoom) / (earthCirc * Math.cos(origin.lat * radians));
+  const raw = animationPoint(map, mapMethods.value.layerPointToContainerPoint.call(map, point));
+  return project(map, raw, false, false, height).subtract(map._getMapPanePos());
+}

package/src/projections/groundBounds.js

@@ -4,7 +4,7 @@ import { pointOf } from './toPoint.js';
 import { project } from './projectCameraPoint.js';
 
 
-export function groundBounds(map, padding = cameraZeroPadding) {
+export function groundBounds(map, padding = cameraZeroPadding, height = 0) {
   const min = pointOf(padding).divideBy(2), max = map.getSize().subtract(min);
   const bounds = /* alloc */ new L.Bounds();
   const minX = min.x, minY = min.y;
@@ -12,7 +12,7 @@ export function groundBounds(map, padding = cameraZeroPadding) {
   for (i = 0; i < 4; i++) {
     min.x = i % 2 ? max.x : minX;
     min.y = i < 2 ? minY : max.y;
-    bounds.extend(project(map, min, true, true));
+    bounds.extend(project(map, min, true, true, height));
   }
   return bounds;
 }

package/src/projections/localPixel.js

@@ -1,5 +1,10 @@
 import { localPosition } from './localPosition.js';
 
-export function localPixel(state, point) {
-  return localPosition(state, state.map.unproject(point));
+export function localPixel(state, point) {
+  if (state.pixelProjection) {
+    const { transformation, scale, origin, metres } = state.pixelProjection;
+    const projected = transformation.untransform(point, scale);
+    return /* alloc */ [(projected.x - origin.x) * metres, 0, -(projected.y - origin.y) * metres];
+  }
+  return localPosition(state, state.map.unproject(point));
 }

package/src/projections/localPixelForGeometry.js

@@ -2,6 +2,8 @@ import { geometryPixelStates } from '../globals/geometryPixelStates.js';
 
 import { localPixel } from './localPixel.js';
 
-export function localPixelForGeometry(point) {
-  return localPixel(geometryPixelStates[geometryPixelStates.length - 1], point);
+export function localPixelForGeometry(point, anchor) {
+  const state = geometryPixelStates[geometryPixelStates.length - 1];
+  if (anchor && state.strokeAnchors) state.strokeAnchors.push(...localPixel(state, anchor));
+  return localPixel(state, point);
 }

package/src/projections/projectCameraPoint.js

@@ -3,7 +3,7 @@ import { pointOf } from './toPoint.js';
 import { angles } from './cameraAngles.js';
 
 
-export function project(map, point, inverse = false, limit = false) {
+export function project(map, point, inverse = false, limit = false, height = 0) {
   const size = map.getSize(), halfX = size.x / 2, halfY = size.y / 2, distance = size.y * 1.5;
   const result = pointOf(point);
   if (!distance) return result;
@@ -12,16 +12,17 @@ export function project(map, point, inverse = false, limit = false) {
   if (inverse) {
     const far = size.y * map.options.pitchMaxDistance;
     const denominator = tilt * distance + rise * y;
-    let v = denominator * tilt > 0 ? y * distance / denominator : -far;
+    let v = denominator * tilt > 0
+      ? (y * (distance - tilt * height) + distance * rise * height) / denominator : -far;
     if (limit) v = Math.max(-far, Math.min(far, v));
-    const u = x * (distance - rise * v) / distance;
+    const u = x * (distance - rise * v - tilt * height) / distance;
     result.x = cos * u + sin * v + halfX;
     result.y = -sin * u + cos * v + halfY;
     return result;
   }
   const u = cos * x - sin * y, v = sin * x + cos * y;
-  const scale = distance / (distance - rise * v);
+  const scale = distance / (distance - rise * v - tilt * height);
   result.x = u * scale + halfX;
-  result.y = tilt * v * scale + halfY;
+  result.y = (tilt * v - rise * height) * scale + halfY;
   return result;
 }

package/src/raster/setRasterOpacity.js

@@ -9,7 +9,7 @@ export function setRasterOpacity(layer, opacity) {
   let tile, terrainMesh;
   for (tile of rasterTilesByLayer.get(layer).values()) {
     if (tile.mesh) tile.mesh.opacity = opacity;
-    terrainMesh = rasterTilesByLayer.get(terrain3DByLayer.get(layer)).get(tile);
+    terrainMesh = rasterTilesByLayer.get(terrain3DByLayer.get(layer))?.get(tile);
     if (terrainMesh) terrainMesh.opacity = opacity;
   }
   update(layer);

package/src/raster/setRasterZIndex.js

@@ -9,7 +9,7 @@ export function setRasterZIndex(layer, zIndex) {
   let tile, terrainMesh;
   for (tile of rasterTilesByLayer.get(layer).values()) {
     if (tile.mesh) tile.mesh.renderOrder = zIndex;
-    terrainMesh = rasterTilesByLayer.get(terrain3DByLayer.get(layer)).get(tile);
+    terrainMesh = rasterTilesByLayer.get(terrain3DByLayer.get(layer))?.get(tile);
     if (terrainMesh) terrainMesh.renderOrder = zIndex;
   }
   update(layer);

package/src/rendering/collectVisibleMesh.js

@@ -1,4 +1,5 @@
 import { computeBounds } from '../geometry/computeBounds.js';
+import { nativeStrokeExpansion } from './nativeStrokeExpansion.js';
 
 export function collectVisibleMesh(mesh, projection, frustum, frustumLengths, candidates) {
   if (!mesh.geometry.bounds) computeBounds(mesh.geometry);
@@ -12,16 +13,18 @@ export function collectVisibleMesh(mesh, projection, frustum, frustumLengths, ca
     sphere.x = world[0] * center[0] + world[4] * center[1] + world[8] * center[2] + world[12];
     sphere.y = world[1] * center[0] + world[5] * center[1] + world[9] * center[2] + world[13];
     sphere.z = world[2] * center[0] + world[6] * center[1] + world[10] * center[2] + world[14];
-    sphere.radius = bounds.radius * Math.max(
+    sphere.scale = Math.max(
       Math.hypot(world[0], world[1], world[2]),
       Math.hypot(world[4], world[5], world[6]),
       Math.hypot(world[8], world[9], world[10])
     );
+    sphere.radius = bounds.radius * sphere.scale;
     sphere.bounds = bounds;
     sphere.matrix = world;
     sphere.version = mesh._worldMatrixVersion;
   }
-  const { x, y, z, radius } = sphere;
+  const { x, y, z } = sphere;
+  const radius = sphere.radius + nativeStrokeExpansion(mesh) * sphere.scale;
   const clipZ = projection[2] * x + projection[6] * y + projection[10] * z + projection[14];
   const clipW = projection[3] * x + projection[7] * y + projection[11] * z + projection[15];
   mesh._sortDepth = clipZ / clipW;

package/src/rendering/drawSceneMeshes.js

@@ -9,11 +9,13 @@ import { drawGeometry } from './drawGeometry.js';
 export function drawSceneMeshes(layer, encoder, meshes) {
   const renderer = rendererByLayer.get(layer);
   const pass = encoder.beginRenderPass((
-    scenePass.colorAttachments[0].view = renderer.context.getCurrentTexture().createView(),
+    scenePass.colorAttachments[0].view = renderer.colorTexture.createView(),
+    scenePass.colorAttachments[0].resolveTarget = renderer.context.getCurrentTexture().createView(),
     scenePass.depthStencilAttachment.view = renderer.depthTexture.createView(),
     scenePass
   ));
   scenePass.colorAttachments[0].view = null;
+  scenePass.colorAttachments[0].resolveTarget = null;
   scenePass.depthStencilAttachment.view = null;
   pass.setViewport(0, 0, renderer.canvas.width, renderer.canvas.height, 0, 1);
   pass.setBindGroup(1, renderer.sunlight.bindGroup);

package/src/rendering/nativeStrokeExpansion.js

@@ -0,0 +1,4 @@
+export function nativeStrokeExpansion(mesh) {
+  const strokeScale = mesh.program?.uniforms?.strokeScale?.value ?? 1;
+  return Math.max(0, strokeScale - 1) * (mesh.geometry.nativeStrokeRadius || 0);
+}

package/src/rendering/prepareMeshUniforms.js

@@ -20,6 +20,8 @@ export function prepareMeshUniforms(renderer, mesh) {
   data[base + 34] = mesh.program.nightSparkle ? data[55] : 0;
   data[base + 35] = mesh.ground ? 1 : mesh._appearance ?? 1;
   prepareMeshCutout(renderer, mesh, base);
+  data[base + 40] = uniforms.strokeScale?.value ?? 1;
+  data[base + 41] = data[base + 42] = data[base + 43] = 0;
   return offset;
 }
 import { prepareMeshCutout } from '../materials/prepareMeshCutout.js';

package/src/rendering/resizeRenderer.js

@@ -2,6 +2,7 @@ import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
 import { sizeByLayer } from '../weakmaps/sizeByLayer.js';
 
 import { depthTexture as sharedDepthTexture } from '../globals/depthTexture.js';
+import { colorTexture as sharedColorTexture } from '../globals/colorTexture.js';
 
 
 import { destroyTexture } from '../textures/destroyTexture.js';
@@ -15,6 +16,14 @@ export function resizeRenderer(layer, size) {
     rendererByLayer.get(layer).canvas.style.width = `${size.x}px`;
     rendererByLayer.get(layer).canvas.style.height = `${size.y}px`;
     if (rendererByLayer.get(layer).depthTexture) destroyTexture(layer, rendererByLayer.get(layer).depthTexture);
+    rendererByLayer.get(layer).colorTexture?.destroy();
+    rendererByLayer.get(layer).colorTexture = rendererByLayer.get(layer).device.createTexture((
+      sharedColorTexture.size[0] = rendererByLayer.get(layer).canvas.width,
+      sharedColorTexture.size[1] = rendererByLayer.get(layer).canvas.height,
+      sharedColorTexture.format = rendererByLayer.get(layer).format,
+      sharedColorTexture.usage = GPUTextureUsage.RENDER_ATTACHMENT,
+      sharedColorTexture
+    ));
     rendererByLayer.get(layer).depthTexture = rendererByLayer.get(layer).device.createTexture((
       sharedDepthTexture.size[0] = rendererByLayer.get(layer).canvas.width,
       sharedDepthTexture.size[1] = rendererByLayer.get(layer).canvas.height,

package/src/scene/initializerFor.js

@@ -1,14 +1,12 @@
-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) {
+export function initializerFor(type, options = {}) {
   switch (type) {
-    case 'geojson': return initializeGeoJSON;
-    case 'pmtiles': return initRaster;
-    case 'cog': return initCog;
+    case 'raster': return options.asset !== undefined || /\.tiff?(?:[?#]|$)/i.test(options.url)
+      ? initCog : initRaster;
     case 'terrain': return initTerrain;
     case 'traffic': return initTraffic;
     default: return null;

package/src/scene/layerInitialize.js

@@ -12,6 +12,9 @@ import { loading } from '../globals/loading.js';
 
 
 import { init3D } from './init3D.js';
+import { initializeGeoJSON } from '../sources/initializeGeoJSON.js';
+import { isVectorTileSource } from '../sources/isVectorTileSource.js';
+import { initVectorTiles } from '../sources/initVectorTiles.js';
 import { noOperation } from '../utils/noOperation.js';
 import { resolveNextInitialization } from './resolveNextInitialization.js';
 import { initializeLayer } from './initializeLayer.js';
@@ -25,21 +28,20 @@ export function layerInitialize(options = sceneEmptyOptions) {
     L.Util.setOptions(this, options);
     return;
   }
-  const {
-    source: {
-      type = options.source.data?.type === 'FeatureCollection'
-        ? 'geojson'
-        : /\.pmtiles(?:[?#]|$)/i.test(options.source.url) ? 'pmtiles'
-        : /\.tiff?(?:[?#]|$)/i.test(options.source.url) ? 'cog' : '3d',
-      ...source
-    },
-    ...core
-  } = options;
+  const { source: { type = /\.pmtiles(?:[?#]|$)|\.tiff?(?:[?#]|$)/i.test(options.source.url)
+    ? 'raster' : 'vector', ...source }, ...core } = options;
   const settings = /* alloc */ { ...source, ...core };
   L.Util.setOptions(this, core);
   typeByLayer.set(this, type);
-  if (type === '3d') {
-    init3D(this, settings);
+  if (type === 'vector') {
+    if (isVectorTileSource(settings)) {
+      initVectorTiles(this, settings);
+    } else if (settings.data !== undefined ||
+        settings.url && !/\.(?:pmtiles|glb|gltf)(?:[?#]|$)/i.test(settings.url)) {
+      initializeGeoJSON(this, settings);
+    } else {
+      init3D(this, settings);
+    }
     return;
   }
   kindByLayer.set(this, 'pending');

package/src/scene/resolveNextInitialization.js

@@ -5,7 +5,7 @@ import { initializerFor } from './initializerFor.js';
 
 export function resolveNextInitialization() {
   const task = pendingInitializations.shift();
-  task.initialize = initializerFor(task.type);
+  task.initialize = initializerFor(task.type, task.settings);
   if (!task.initialize) {
     task.error = /* alloc */ new Error(`Unknown layer type: ${task.type}`);
   }

package/src/shaders/materialShaders.js

@@ -30,6 +30,7 @@ export function materialShaders(material = defaultMaterial, sparkle = false, ele
       terrain: vec4<f32>,
       highlight: vec4<f32>,
       cutout: vec4<f32>,
+      nativeStroke: vec4<f32>,
     };
     struct Frame {
       viewMatrix: mat4x4<f32>,

package/src/shaders/materialVertexShader.js

@@ -1,7 +1,9 @@
 import { roofVertexShader } from './roofVertexShader.js';
+import { nativeStrokeShader } from './nativeStrokeShader.js';
 
 export function materialVertexShader(material, sparkle, elevationWGSL, hasTerrain, textured, hasRoof) {
   const instanceOffset = material.instanced ? ' + input.instanceOffset.xyz' : '';
+  const stroke = nativeStrokeShader(material);
   return /* wgsl */ `
     struct Mesh {
       worldMatrix: mat4x4<f32>,
@@ -11,6 +13,7 @@ export function materialVertexShader(material, sparkle, elevationWGSL, hasTerrai
       terrain: vec4<f32>,
       highlight: vec4<f32>,
       cutout: vec4<f32>,
+      nativeStroke: vec4<f32>,
     };
     struct Frame {
       viewMatrix: mat4x4<f32>,
@@ -46,6 +49,7 @@ export function materialVertexShader(material, sparkle, elevationWGSL, hasTerrai
     @vertex fn vertexMain(input: VertexInput, @builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
       var output: VertexOutput;
       var position = input.position${instanceOffset};
+      ${stroke.position}
       ${hasTerrain ? 'position.y = elevation(u.terrain.xy + input.uv * u.terrain.z, u.terrain.w) - u.terrain.w;' : ''}
       let featureVertex = f32(vertexIndex)${material.instanced ? ' + input.instanceOffset.w' : ''};
       let highlighted = featureVertex >= u.highlight.x && featureVertex < u.highlight.y;
@@ -54,8 +58,9 @@ export function materialVertexShader(material, sparkle, elevationWGSL, hasTerrai
       : 'u.baseColor.rgb'};
       // Inverse-transpose from cofactors; the camera view matrix is orthonormal.
       let m = mat3x3<f32>(u.worldMatrix[0].xyz, u.worldMatrix[1].xyz, u.worldMatrix[2].xyz);
-      let normal = (cross(m[1], m[2]) * input.normal.x + cross(m[2], m[0]) * input.normal.y +
-        cross(m[0], m[1]) * input.normal.z) / determinant(m);
+      ${stroke.normal}
+      let normal = (cross(m[1], m[2]) * sourceNormal.x + cross(m[2], m[0]) * sourceNormal.y +
+        cross(m[0], m[1]) * sourceNormal.z) / determinant(m);
       output.normal = (frame.viewMatrix * vec4<f32>(normal, 0.0)).xyz;
       let world = u.worldMatrix * vec4<f32>(position, 1.0);
       output.shadowPosition = solar.matrix * world;

package/src/shaders/nativeStrokeShader.js

@@ -0,0 +1,6 @@
+export function nativeStrokeShader(material) {
+  return /* alloc */ {
+    position: material.nativeStroke ? 'position = input.normal + (input.position - input.normal) * u.nativeStroke.x;' : '',
+    normal: material.nativeStroke ? 'let sourceNormal = vec3<f32>(0.0, 1.0, 0.0);' : 'let sourceNormal = input.normal;',
+  };
+}

package/src/sources/attachAreaMesh.js

@@ -9,7 +9,6 @@ import { createProgram } from '../materials/createProgram.js';
 
 import { setParent } from '../scene/setParent.js';
 import { update } from '../scene/scheduleSceneUpdate.js';
-import { instanceAreaGeometry } from '../geometry/instanceAreaGeometry.js';
 
 export function attachAreaMesh(context) {
   const { backend: layer, area } = context;
@@ -18,15 +17,15 @@ export function attachAreaMesh(context) {
     return;
   }
   const device = rendererByLayer.get(layer).device;
-  const data = context.preparedGeometry || instanceAreaGeometry(context);
+  const data = context.preparedGeometry;
   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) },
+    position: /* alloc */ { size: 3, data: data.positions },
+    normal: /* alloc */ { size: 3, data: data.normals },
+    color: /* alloc */ { size: 3, data: 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),
+    size: 2, data: data.uvs,
   };
   let name, attribute;
   for (name in attributes) {

package/src/sources/buildArea.js

@@ -3,15 +3,14 @@ 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 './pumpSourceAreas.js';
 import { buildAreaInWorker } from '../workers/buildAreaInWorker.js';
+import { buildAreaFeatures } from './buildAreaFeatures.js';
 
 export async function buildArea(layer, area, map) {
-  let feature;
   try {
     await /* alloc */ new Promise(requestAnimationFrame);
     await cameraViewByMap.get(map);
@@ -24,22 +23,13 @@ export async function buildArea(layer, area, map) {
     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 */ [];
-    }
-    let deadline = performance.now() + 4;
-    for (feature of data.features) {
-      if (area.request.signal.aborted) return;
-      if (performance.now() >= deadline) {
-        await /* alloc */ new Promise(requestAnimationFrame);
-        if (area.request.signal.aborted) return;
-        deadline = performance.now() + 4;
-      }
-      buildAreaFeature(context, feature);
+    if (layer.options.worker === false) {
+      throw /* alloc */ new Error('worker: false is no longer supported; GeoJSON geometry requires Web Workers');
     }
-    if (context.jobs) await buildAreaInWorker(context, area.request.signal);
+    const context = sourceAreaContext(layer, area, map);
+    await buildAreaFeatures(context, area, data.features);
+    if (area.request.signal.aborted) return;
+    await buildAreaInWorker(context, area.request.signal);
     if (area.request.signal.aborted) return;
     attachAreaMesh(context);
   } catch (error) {