leaflet-city-mapper 0.0.5 → 0.0.7

package/src/mvt/readMvtInteger.js

@@ -0,0 +1,12 @@
+import { takeMvtBytes } from './takeMvtBytes.js';
+
+export function readMvtInteger(reader) {
+  let value = 0n, i = 0, byte;
+  for (; i < 10; i++) {
+    byte = reader.bytes[takeMvtBytes(reader, 1)];
+    if (i === 9 && byte > 1) throw /* alloc */ new Error('Invalid MVT varint');
+    value |= BigInt(byte & 127) << BigInt(i * 7);
+    if (byte < 128) return value;
+  }
+  throw /* alloc */ new Error('Invalid MVT varint');
+}

package/src/mvt/readMvtKnownValue.js

@@ -0,0 +1,21 @@
+import { expectMvtWire } from './expectMvtWire.js';
+import { numericMvtValue } from './numericMvtValue.js';
+import { readMvtInteger } from './readMvtInteger.js';
+import { readMvtString } from './readMvtString.js';
+import { takeMvtBytes } from './takeMvtBytes.js';
+
+export function readMvtKnownValue(reader, field, wire) {
+  let offset, integer;
+  if (field === 1) return readMvtString(reader, wire);
+  if (field === 2 || field === 3) {
+    expectMvtWire(wire, field === 2 ? 5 : 1);
+    offset = takeMvtBytes(reader, field === 2 ? 4 : 8);
+    return field === 2 ? reader.view.getFloat32(offset, true) : reader.view.getFloat64(offset, true);
+  }
+  expectMvtWire(wire, 0);
+  integer = readMvtInteger(reader);
+  if (field === 4) return numericMvtValue(BigInt.asIntN(64, integer));
+  if (field === 5) return numericMvtValue(integer);
+  if (field === 6) return numericMvtValue((integer >> 1n) ^ -(integer & 1n));
+  return integer !== 0n;
+}

package/src/mvt/readMvtLayer.js

@@ -0,0 +1,31 @@
+import { expectMvtWire } from './expectMvtWire.js';
+import { readMvtFeature } from './readMvtFeature.js';
+import { readMvtField } from './readMvtField.js';
+import { readMvtMessage } from './readMvtMessage.js';
+import { readMvtNumber } from './readMvtNumber.js';
+import { readMvtString } from './readMvtString.js';
+import { readMvtValue } from './readMvtValue.js';
+import { skipMvtField } from './skipMvtField.js';
+
+export function readMvtLayer(reader) {
+  let name, version, extent = 4096, field, wire, value, i = 0;
+  const keys = /* alloc */ [], values = /* alloc */ [], features = /* alloc */ [];
+  while (reader.pos < reader.bytes.length) {
+    [field, wire] = readMvtField(reader);
+    if (field === 1) name = readMvtString(reader, wire);
+    else if (field === 2) features.push(readMvtMessage(reader, wire));
+    else if (field === 3) keys.push(readMvtString(reader, wire));
+    else if (field === 4) values.push(readMvtValue(readMvtMessage(reader, wire)));
+    else if (field === 5 || field === 15) {
+      expectMvtWire(wire, 0);
+      value = readMvtNumber(reader);
+      if (field === 5) extent = value;
+      else version = value;
+    } else skipMvtField(reader, wire);
+  }
+  if (!name || !/* alloc */ [1, 2].includes(version) || !extent || extent > 0xffffffff) {
+    throw /* alloc */ new Error('Invalid MVT layer metadata');
+  }
+  for (; i < features.length; i++) features[i] = readMvtFeature(features[i], keys, values);
+  return /* alloc */ { name, extent, features };
+}

package/src/mvt/readMvtMessage.js

@@ -0,0 +1,10 @@
+import { createMvtReader } from './createMvtReader.js';
+import { expectMvtWire } from './expectMvtWire.js';
+import { readMvtNumber } from './readMvtNumber.js';
+import { takeMvtBytes } from './takeMvtBytes.js';
+
+export function readMvtMessage(reader, wire) {
+  expectMvtWire(wire, 2);
+  const size = readMvtNumber(reader), start = takeMvtBytes(reader, size);
+  return createMvtReader(reader.bytes.subarray(start, start + size));
+}

package/src/mvt/readMvtNumber.js

@@ -0,0 +1,9 @@
+import { readMvtInteger } from './readMvtInteger.js';
+
+export function readMvtNumber(reader) {
+  const value = readMvtInteger(reader);
+  if (value > BigInt(Number.MAX_SAFE_INTEGER)) {
+    throw /* alloc */ new Error('MVT integer exceeds safe range');
+  }
+  return Number(value);
+}

package/src/mvt/readMvtNumbers.js

@@ -0,0 +1,11 @@
+import { readMvtMessage } from './readMvtMessage.js';
+import { readMvtNumber } from './readMvtNumber.js';
+
+export function readMvtNumbers(reader, wire, target) {
+  let packed;
+  if (wire === 0) target.push(readMvtNumber(reader));
+  else {
+    packed = readMvtMessage(reader, wire);
+    while (packed.pos < packed.bytes.length) target.push(readMvtNumber(packed));
+  }
+}

package/src/mvt/readMvtString.js

@@ -0,0 +1,6 @@
+import { mvtTextDecoder } from '../globals/mvtTextDecoder.js';
+import { readMvtMessage } from './readMvtMessage.js';
+
+export function readMvtString(reader, wire) {
+  return mvtTextDecoder.decode(readMvtMessage(reader, wire).bytes);
+}

package/src/mvt/readMvtValue.js

@@ -0,0 +1,19 @@
+import { readMvtField } from './readMvtField.js';
+import { skipMvtField } from './skipMvtField.js';
+import { readMvtKnownValue } from './readMvtKnownValue.js';
+
+export function readMvtValue(reader) {
+  let value, found = false, field, wire;
+  while (reader.pos < reader.bytes.length) {
+    [field, wire] = readMvtField(reader);
+    if (field < 1 || field > 7) {
+      skipMvtField(reader, wire);
+      continue;
+    }
+    if (found) throw /* alloc */ new Error('Multiple MVT value types');
+    found = true;
+    value = readMvtKnownValue(reader, field, wire);
+  }
+  if (!found) throw /* alloc */ new Error('Empty MVT value');
+  return value;
+}

package/src/mvt/skipMvtField.js

@@ -0,0 +1,14 @@
+import { expectMvtWire } from './expectMvtWire.js';
+import { readMvtInteger } from './readMvtInteger.js';
+import { readMvtNumber } from './readMvtNumber.js';
+import { takeMvtBytes } from './takeMvtBytes.js';
+
+export function skipMvtField(reader, wire) {
+  switch (wire) {
+    case 0: readMvtInteger(reader); break;
+    case 1: takeMvtBytes(reader, 8); break;
+    case 2: takeMvtBytes(reader, readMvtNumber(reader)); break;
+    case 5: takeMvtBytes(reader, 4); break;
+    default: throw /* alloc */ new Error('Unsupported MVT wire type');
+  }
+}

package/src/mvt/sortMvtActiveEdges.js

@@ -0,0 +1,15 @@
+import { mergeMvtActiveEdges } from './mergeMvtActiveEdges.js';
+
+export function sortMvtActiveEdges(active) {
+  const sorted = /* alloc */ new Array(active.length);
+  let width = 1, left, mid, right, i;
+  while (width < active.length) {
+    for (left = 0; left < active.length; left += width * 2) {
+      mid = Math.min(left + width, active.length);
+      right = Math.min(left + width * 2, active.length);
+      mergeMvtActiveEdges(active, sorted, left, mid, right);
+    }
+    for (i = 0; i < active.length; i++) active[i] = sorted[i];
+    width *= 2;
+  }
+}

package/src/mvt/sortedMvtLevels.js

@@ -0,0 +1,22 @@
+export function sortedMvtLevels(levels) {
+  const sorted = /* alloc */ [];
+  let y, gap = 0, i = 0, j, value, count = 0;
+  for (y of levels) sorted.push(y);
+  gap = Math.floor(sorted.length / 2);
+  for (; gap > 0; gap = Math.floor(gap / 2)) {
+    for (i = gap; i < sorted.length; i++) {
+      value = sorted[i];
+      j = i;
+      while (j >= gap && sorted[j - gap] > value) {
+        sorted[j] = sorted[j - gap];
+        j -= gap;
+      }
+      sorted[j] = value;
+    }
+  }
+  for (i = 0; i < sorted.length; i++) {
+    if (!count || sorted[i] - sorted[count - 1] > 1e-8) sorted[count++] = sorted[i];
+  }
+  sorted.length = count;
+  return sorted;
+}

package/src/mvt/takeMvtBytes.js

@@ -0,0 +1,8 @@
+export function takeMvtBytes(reader, size) {
+  if (!Number.isSafeInteger(size) || size < 0 || size > reader.bytes.length - reader.pos) {
+    throw /* alloc */ new Error('Truncated MVT field');
+  }
+  const start = reader.pos;
+  reader.pos += size;
+  return start;
+}

package/src/mvt/tessellateVectorRings.js

@@ -0,0 +1,19 @@
+import { addMvtCrossings } from './addMvtCrossings.js';
+import { appendMvtBandTriangles } from './appendMvtBandTriangles.js';
+import { collectMvtEdges } from './collectMvtEdges.js';
+import { sortedMvtLevels } from './sortedMvtLevels.js';
+
+export function tessellateVectorRings(rings) {
+  const edges = /* alloc */ [], levels = /* alloc */ new Set(), triangles = /* alloc */ [];
+  let sorted, i = 1, top, bottom;
+  collectMvtEdges(rings, edges, levels);
+  addMvtCrossings(edges, levels);
+  sorted = sortedMvtLevels(levels);
+  // ponytail: quadratic edge scan; use a sweep-line index for large datasets.
+  for (; i < sorted.length; i++) {
+    top = sorted[i - 1];
+    bottom = sorted[i];
+    if (bottom > top) appendMvtBandTriangles(edges, top, bottom, triangles);
+  }
+  return triangles;
+}

package/src/mvt/triangulateVectorRings.js

@@ -0,0 +1,19 @@
+import { appendMvtPolygonTriangles } from './appendMvtPolygonTriangles.js';
+import { groupMvtPolygons } from './groupMvtPolygons.js';
+import { mvtPathsVertices } from './mvtPathsVertices.js';
+import { mvtPolygonPaths } from './mvtPolygonPaths.js';
+
+/**
+ * Reuse City Mapper's triangulator in tile space, with even-odd tessellation
+ * for quantized touching/crossing rings. Output triangles omit their closure.
+ */
+export function triangulateVectorRings(rings) {
+  const polygons = groupMvtPolygons(rings), triangles = /* alloc */ [];
+  let polygon, paths, vertices;
+  for (polygon of polygons) {
+    paths = mvtPolygonPaths(polygon);
+    vertices = mvtPathsVertices(paths);
+    appendMvtPolygonTriangles(polygon, paths, vertices, triangles);
+  }
+  return triangles;
+}

package/src/native/beforeNativeRender.js

@@ -1,8 +1,14 @@
 import { synchronizeNativeLayer } from './synchronizeNativeLayer.js';
+import { cameraViewByMap } from '../weakmaps/cameraViewByMap.js';
 
 export function beforeNativeRender(state) {
   try {
     synchronizeNativeLayer(state);
+    const uniform = state.meshes.get('stroke')?.program.uniforms.strokeScale;
+    if (uniform) {
+      const zoom = cameraViewByMap.get(state.map)?.zoom ?? state.map.getZoom();
+      uniform.value = 2 ** (state.strokeZoom - zoom) * Number(state.source.options.weight) / state.strokeWeight;
+    }
   } catch (error) {
     state.failed = true;
     state.source.fire('error', /* alloc */ { error });

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;