leaflet-city-mapper 0.0.6 → 0.0.7

package/src/native/canScaleNativeStyle.js

@@ -0,0 +1,17 @@
+import { L } from '../globals/L.js';
+import { nativeScalableStyleKeys } from '../globals/nativeScalableStyleKeys.js';
+
+export function canScaleNativeStyle(name, state, args) {
+  const { source } = state;
+  if (name !== 'setStyle' || source.options.interactive !== false || state.dirty && !state.zoomOnly) return false;
+  const stroke = state.strokeCoordinates && state.meshes.get('stroke')?.program.uniforms.strokeScale;
+  const fill = source instanceof L.Polygon && !source.options.stroke && state.meshes.has('fill');
+  if (!stroke && !fill) return false;
+  let key;
+  if (args[0]) {
+    for (key of Object.keys(args[0])) {
+      if (!nativeScalableStyleKeys.has(key)) return false;
+    }
+  }
+  return true;
+}

package/src/native/createNativeMesh.js

@@ -0,0 +1,31 @@
+import { L } from '../globals/L.js';
+import { disposeMesh } from '../rendering/disposeMesh.js';
+import { createMesh } from '../rendering/createMesh.js';
+import { nativeProgram } from './nativeProgram.js';
+
+export function createNativeMesh(state, key, position, color, opacity, texture, uv, terrain, nativeStroke) {
+  const { backend: layer, source, meshes } = state;
+  // Unlit, noninteractive strokes use the normal slot for stationary anchors.
+  const normal = nativeStroke ? state.strokeAnchors : /* alloc */ [];
+  let index, mesh = meshes.get(key);
+  if (!nativeStroke) {
+    for (index = 0; index < position.length; index++) normal.push(index % 3 === 1 ? 1 : 0);
+  }
+  const data = /* alloc */ { position, normal };
+  if (uv) data.uv = uv;
+  const material = /* alloc */ {
+    vertexColors: false, color, opacity, unlit: true, alphaMode: 'BLEND', depthWrite: terrain, nativeStroke,
+  };
+  if (texture) material.baseTexture = texture;
+  if (mesh) disposeMesh(layer, mesh);
+  mesh = createMesh(layer, data, material, 0, source instanceof L.GridLayer
+    ? (terrain ? state.terrainRasterProgram : state.rasterProgram) || nativeProgram(layer, material)
+    : nativeProgram(layer, material));
+  if (source instanceof L.GridLayer) {
+    if (terrain) state.terrainRasterProgram ||= mesh.program;
+    else state.rasterProgram ||= mesh.program;
+    mesh.texture = texture;
+  }
+  meshes.set(key, mesh);
+  return mesh;
+}

package/src/native/disposeNativeLayer.js

@@ -17,7 +17,7 @@ export function disposeNativeLayer() {
   const { source, map, backend: layer, meshes, textures, images } = state;
   const events = 'load tileload tileunload move drag';
   source.off(events, refreshNativeEvent, state);
-  map.off('zoomend', refreshNativeEvent, state);
+  map.off('zoomend terrainchange', refreshNativeEvent, state);
   if (state.marker) map.off('move zoom rotate pitch resize viewreset', updateNativeLayerView, state);
   removeNativeEvents(state);
   let name, methods, mesh, texture, image;

package/src/native/getGridTerrainTile.js

@@ -0,0 +1,34 @@
+export async function getGridTerrainTile(state, z, x, y) {
+  const limit = 2 ** z;
+  x = ((x % limit) + limit) % limit;
+  y = Math.max(0, Math.min(limit - 1, y));
+  const key = `${z}/${x}/${y}`;
+  let entry = state.terrainCache.get(key);
+  if (!entry) {
+    entry = /* alloc */ { promise: state.layer.options.getTile(z, x, y, state.terrainController.signal) };
+    state.terrainCache.set(key, entry);
+  } else {
+    state.terrainCache.delete(key);
+    state.terrainCache.set(key, entry);
+  }
+  try {
+    if (!entry.data) entry.data = await entry.promise;
+    if (!(entry.data instanceof Float32Array) || entry.data.length !== 65536) {
+      throw /* alloc */ new Error(`Invalid elevation tile ${key}: expected 256x256 Float32Array`);
+    }
+    if (!entry.range) {
+      let minimum = Infinity, maximum = -Infinity, elevation;
+      for (elevation of entry.data) {
+        if (!Number.isFinite(elevation) || elevation <= -1000) continue;
+        minimum = Math.min(minimum, elevation);
+        maximum = Math.max(maximum, elevation);
+      }
+      entry.range = /* alloc */ [minimum, maximum];
+    }
+  } catch (error) {
+    if (state.terrainCache.get(key) === entry) state.terrainCache.delete(key);
+    throw error;
+  }
+  while (state.terrainCache.size > 256) state.terrainCache.delete(state.terrainCache.keys().next().value);
+  return entry.data;
+}

package/src/native/gridTerrainElevation.js

@@ -0,0 +1,30 @@
+import { terrainElevation } from '../terrain/terrainElevation.js';
+import { nativeGPUByLayer } from '../weakmaps/nativeGPUByLayer.js';
+
+export function gridTerrainElevation(state, location) {
+  let z = Math.max(0, Math.min(24, Math.round(state.map.getZoom())));
+  const tiles = /* alloc */ new Map();
+  let point, limit, x, y, dx, dy, tx, ty, entry, elevation, layer, native, request;
+  for (; z >= 0; z--) {
+    point = state.map.project(location, z), limit = 2 ** z;
+    x = Math.floor(point.x / 256), y = Math.floor(point.y / 256);
+    for (layer of Object.values(state.map._layers)) {
+      native = nativeGPUByLayer.get(layer);
+      if (native?.disposed || native?.terrainStream !== state) continue;
+      request = native.terrainRequests?.get(`${x}:${y}:${z}`);
+      if (!request?.tiles || layer._tiles[`${x}:${y}:${z}`] !== request.tile) continue;
+      elevation = terrainElevation(point, request.tiles);
+      if (Number.isFinite(elevation)) return elevation;
+    }
+    tiles.clear();
+    for (dy = -1; dy <= 1; dy++) for (dx = -1; dx <= 1; dx++) {
+      tx = ((x + dx) % limit + limit) % limit;
+      ty = Math.max(0, Math.min(limit - 1, y + dy));
+      entry = state.terrainCache.get(`${z}/${tx}/${ty}`);
+      if (entry?.data) tiles.set(`${x + dx}/${y + dy}`, entry.data);
+    }
+    elevation = terrainElevation(point, tiles);
+    if (Number.isFinite(elevation)) return elevation;
+  }
+  return null;
+}

package/src/native/loadGridTerrain.js

@@ -0,0 +1,26 @@
+import { getGridTerrainTile } from './getGridTerrainTile.js';
+import { refreshNativeLayer } from './refreshNativeLayer.js';
+
+export async function loadGridTerrain(state, key, tile, request) {
+  const { x, y, z } = tile.coords, stream = request.stream;
+  const jobs = /* alloc */ [], tiles = /* alloc */ new Map();
+  let dx, dy, i = 0;
+  try {
+    for (dy = -1; dy <= 1; dy++) for (dx = -1; dx <= 1; dx++) {
+      jobs.push(getGridTerrainTile(stream, z, x + dx, y + dy));
+    }
+    const values = await Promise.all(jobs);
+    if (state.disposed || stream.terrainController.signal.aborted ||
+      state.source._tiles[key] !== tile || state.terrainRequests.get(key) !== request) return;
+    for (dy = -1; dy <= 1; dy++) for (dx = -1; dx <= 1; dx++) tiles.set(`${x + dx}/${y + dy}`, values[i++]);
+    request.tiles = tiles;
+    refreshNativeLayer(state);
+    state.map.fire('terrainchange');
+    state.source._update();
+  } catch (error) {
+    if (!state.disposed && !stream.terrainController.signal.aborted && state.source._tiles[key] === tile) {
+      request.error = error;
+      stream.layer.fire('error', /* alloc */ { error, coords: tile.coords });
+    }
+  }
+}

package/src/native/nativeLayer.js

@@ -25,7 +25,7 @@ import { synchronizeNativeLayer } from './synchronizeNativeLayer.js';
 export async function nativeLayer(state) {
   const { source, map } = state;
   const layer = state.backend = createLayer(/* alloc */ {
-    source: /* alloc */ { type: '3d' },
+    source: /* alloc */ { type: 'vector' },
   });
   state.meshes = /* alloc */ new Map();
   state.textures = /* alloc */ new Map();
@@ -43,7 +43,7 @@ export async function nativeLayer(state) {
   state.disposed = false;
   const currentEvents = 'load tileload tileunload move drag';
   source.on(currentEvents, refreshNativeEvent, state);
-  map.on('zoomend', refreshNativeEvent, state);
+  map.on('zoomend terrainchange', refreshNativeEvent, state);
   if (state.marker) map.on('move zoom rotate pitch resize viewreset', updateNativeLayerView, state);
   nativeEvents(state);
   let name, own, original;

package/src/native/nativeLayerMethod.js

@@ -3,25 +3,15 @@ import { nativeGPUBackByMap } from '../weakmaps/nativeGPUBackByMap.js';
 import { nativeGPUOrderByMap } from '../weakmaps/nativeGPUOrderByMap.js';
 
 
-import { L } from '../globals/L.js';
-
-
 import { refreshNativeLayer } from './refreshNativeLayer.js';
+import { canScaleNativeStyle } from './canScaleNativeStyle.js';
+import { orderNativeGridLayer } from './orderNativeGridLayer.js';
 
 export function nativeLayerMethod(name, source, args) {
   const state = nativeGPUByLayer.get(source), original = state.methods.get(name).original;
+  const scalable = canScaleNativeStyle(name, state, args);
   const result = original.apply(source, args);
-  let layer, zIndex;
-  if ((name === 'bringToFront' || name === 'bringToBack') && source instanceof L.GridLayer) {
-    let extreme = name === 'bringToFront' ? -Infinity : Infinity;
-    for (layer of Object.values(state.map._layers)) {
-      if (layer === source || !(layer instanceof L.GridLayer) || layer.getPane() !== source.getPane()) continue;
-      zIndex = layer.options.zIndex || 0;
-      extreme = name === 'bringToFront' ? Math.max(extreme, zIndex) : Math.min(extreme, zIndex);
-    }
-    const edge = name === 'bringToFront' ? extreme + 1 : extreme - 1;
-    if (Number.isFinite(edge)) source.setZIndex(edge);
-  }
+  orderNativeGridLayer(state, name);
   if (name === 'bringToFront') {
     state.order = nativeGPUOrderByMap.get(state.map) + 1;
     nativeGPUOrderByMap.set(state.map, state.order);
@@ -31,5 +21,6 @@ export function nativeLayerMethod(name, source, args) {
     nativeGPUBackByMap.set(state.map, state.order);
   }
   refreshNativeLayer(state);
+  if (scalable && (!source.options.stroke || Number(source.options.weight) > 0)) state.zoomOnly = true;
   return result;
 }

package/src/native/nativeProgram.js

@@ -0,0 +1,20 @@
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+import { nativeProgramsByRenderer } from '../weakmaps/nativeProgramsByRenderer.js';
+import { createProgram } from '../materials/createProgram.js';
+import { createProgramUniforms } from '../materials/createProgramUniforms.js';
+
+export function nativeProgram(layer, material) {
+  const renderer = rendererByLayer.get(layer);
+  let programs = nativeProgramsByRenderer.get(renderer);
+  if (!programs) {
+    programs = /* alloc */ new Map();
+    nativeProgramsByRenderer.set(renderer, programs);
+  }
+  const key = `${Boolean(material.baseTexture)}:${Boolean(material.nativeStroke)}:${Boolean(material.depthWrite)}`;
+  let template = programs.get(key);
+  if (!template) {
+    template = createProgram(layer, /* alloc */ { doubleSided: true, ...material });
+    programs.set(key, template);
+  }
+  return /* alloc */ { ...template, uniforms: createProgramUniforms(material), _layerMaterial: material };
+}

package/src/native/nativeVectorGeometry.js

@@ -0,0 +1,23 @@
+import { geometryPixelStates } from '../globals/geometryPixelStates.js';
+import { nativeGeometry } from '../geometry/nativeGeometry.js';
+import { localPixelForGeometry } from '../projections/localPixelForGeometry.js';
+import { locationByLayer } from '../weakmaps/locationByLayer.js';
+import { radians } from '../globals/radians.js';
+import { L } from '../globals/L.js';
+
+export function nativeVectorGeometry(state) {
+  const { source } = state;
+  state.strokeCoordinates = null;
+  state.strokeAnchors = source instanceof L.Polyline && !source.options.dashArray ? /* alloc */ [] : null;
+  const crs = state.map.options.crs, origin = locationByLayer.get(state.backend);
+  state.pixelProjection = /* alloc */ {
+    transformation: crs.transformation, scale: crs.scale(state.map.getZoom()),
+    origin: crs.project(origin), metres: Math.cos(origin.lat * radians),
+  };
+  geometryPixelStates.push(state);
+  try {
+    return nativeGeometry(source, state.map, localPixelForGeometry);
+  } finally {
+    geometryPixelStates.pop();
+  }
+}

package/src/native/orderNativeGridLayer.js

@@ -0,0 +1,14 @@
+import { L } from '../globals/L.js';
+
+export function orderNativeGridLayer(state, name) {
+  const { source } = state;
+  if (!(source instanceof L.GridLayer) || name !== 'bringToFront' && name !== 'bringToBack') return;
+  let extreme = name === 'bringToFront' ? -Infinity : Infinity, layer, zIndex;
+  for (layer of Object.values(state.map._layers)) {
+    if (layer === source || !(layer instanceof L.GridLayer) || layer.getPane() !== source.getPane()) continue;
+    zIndex = layer.options.zIndex || 0;
+    extreme = name === 'bringToFront' ? Math.max(extreme, zIndex) : Math.min(extreme, zIndex);
+  }
+  const edge = name === 'bringToFront' ? extreme + 1 : extreme - 1;
+  if (Number.isFinite(edge)) source.setZIndex(edge);
+}

package/src/native/putNativeMesh.js

@@ -1,36 +1,30 @@
 import { L } from '../globals/L.js';
-import { disposeMesh } from '../rendering/disposeMesh.js';
-import { createMesh } from '../rendering/createMesh.js';
 import { styleNativeMesh } from './styleNativeMesh.js';
+import { createNativeMesh } from './createNativeMesh.js';
+import { updateNativeStrokeRadius } from './updateNativeStrokeRadius.js';
 
-export function putNativeMesh(state, key, position, color, opacity, texture, uv) {
-  const { backend: layer, source, meshes } = state;
+export function putNativeMesh(state, key, position, color, opacity, texture, uv, terrain = false) {
+  const { source, meshes } = state;
   if (!position.length) return;
+  const nativeStroke = key === 'stroke' && Boolean(state.strokeCoordinates) && source.options.interactive === false;
   let mesh = meshes.get(key);
   if (!mesh || mesh.geometry.attributes.position.data.length !== position.length ||
-    mesh.program.uniforms.baseTexture?.value !== texture) {
-    const normal = /* alloc */ [];
-    let index;
-    for (index = 0; index < position.length; index++) normal.push(index % 3 === 1 ? 1 : 0);
-    const data = /* alloc */ { position, normal };
-    if (uv) data.uv = uv;
-    const material = /* alloc */ {
-      vertexColors: false, color, opacity, unlit: true, alphaMode: 'BLEND',
-    };
-    if (texture) material.baseTexture = texture;
-    if (mesh) disposeMesh(layer, mesh);
-    mesh = createMesh(layer, data, material, 0, source instanceof L.GridLayer ? state.rasterProgram : undefined);
-    if (source instanceof L.GridLayer) {
-      state.rasterProgram ||= mesh.program;
-      mesh.texture = texture;
-    }
-    meshes.set(key, mesh);
+    (source instanceof L.GridLayer && mesh.program.depthWrite !== terrain) ||
+    mesh.program.uniforms.baseTexture?.value !== texture ||
+    Boolean(mesh.program._layerMaterial.nativeStroke) !== nativeStroke) {
+    mesh = createNativeMesh(state, key, position, color, opacity, texture, uv, terrain, nativeStroke);
   } else {
     const attribute = mesh.geometry.attributes.position;
     attribute.data.set(position);
     attribute.needsUpdate = true;
     mesh.geometry.bounds = null;
+    if (nativeStroke) {
+      mesh.geometry.attributes.normal.data.set(state.strokeAnchors);
+      mesh.geometry.attributes.normal.needsUpdate = true;
+    }
   }
+  if (nativeStroke) updateNativeStrokeRadius(mesh);
+  if (mesh.program.uniforms.strokeScale) mesh.program.uniforms.strokeScale.value = 1;
   styleNativeMesh(state, mesh, color, opacity);
   return mesh;
 }

package/src/native/refreshNativeEvent.js

@@ -1,5 +1,16 @@
 import { refreshNativeLayer } from './refreshNativeLayer.js';
+import { L } from '../globals/L.js';
+import { update } from '../scene/scheduleSceneUpdate.js';
 
-export function refreshNativeEvent() {
-  refreshNativeLayer(this);
+export function refreshNativeEvent(event) {
+  if (event?.type === 'zoomend' && this.source instanceof L.Polyline &&
+    (!this.source.options.stroke || !(Number(this.source.options.weight) > 0))) return;
+  if (event?.type === 'zoomend' && this.strokeCoordinates && (!this.dirty || this.zoomOnly)) {
+    this.zoomOnly = true;
+    this.dirty = true;
+    update(this.backend);
+    return;
+  }
+  if (event?.type === 'terrainchange' && this.marker) this.source.update();
+  refreshNativeLayer(this);
 }

package/src/native/refreshNativeLayer.js

@@ -10,6 +10,7 @@ import { update } from '../scene/scheduleSceneUpdate.js';
 import { hideTargets } from './hideTargets.js';
 
 export function refreshNativeLayer(state = this) {
+  state.zoomOnly = false;
   state.dirty = true;
   state.viewDirty = true;
   state.failed = false;

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);
 }