leaflet-city-mapper 0.0.7 → 0.0.8

package/src/camera/updateMapCamera.js

@@ -33,17 +33,19 @@ export function updateMapCamera(layer, size) {
   const targetZ = (size.y / 2 - origin.y) / pixelsPerMeter;
   const pitch = mapGetPitch(map) * radians;
   const bearing = mapGetBearing(map) * radians;
+  const sinPitch = Math.sin(pitch), cosPitch = Math.cos(pitch);
+  const sinBearing = Math.sin(bearing), cosBearing = Math.cos(bearing);
   const camera = cameraByLayer.get(layer);
   camera.fov = cameraFov;
   camera.aspect = size.x / size.y;
   camera.near = Math.max(0.1, distance / 10000);
   camera.far = Math.max(10000, distance * 10);
-  camera.position[0] = targetX + Math.sin(bearing) * Math.sin(pitch) * distance;
-  camera.position[1] = targetY + Math.cos(pitch) * distance;
-  camera.position[2] = targetZ + Math.cos(bearing) * Math.sin(pitch) * distance;
-  camera.up[0] = -Math.sin(bearing) * Math.cos(pitch);
-  camera.up[1] = Math.sin(pitch);
-  camera.up[2] = -Math.cos(bearing) * Math.cos(pitch);
+  camera.position[0] = targetX + sinBearing * sinPitch * distance;
+  camera.position[1] = targetY + cosPitch * distance;
+  camera.position[2] = targetZ + cosBearing * sinPitch * distance;
+  camera.up[0] = -sinBearing * cosPitch;
+  camera.up[1] = sinPitch;
+  camera.up[2] = -cosBearing * cosPitch;
   camera.target[0] = targetX; camera.target[1] = targetY; camera.target[2] = targetZ;
   // Refresh the camera view, projection and combined projection-view matrices.
   updateCamera(camera);

package/src/controls/cameraControls.js

@@ -36,37 +36,42 @@ import { changeCameraTouch } from './changeCameraTouch.js';
 import { cleanupCameraTouch } from './cleanupCameraTouch.js';
 import { endAllCameraTouches } from './endAllCameraTouches.js';
 import { addCameraHandler } from './addCameraHandler.js';
+import { extendLeafletClass } from '../core/extendLeafletClass.js';
 
-Compass.value = L.Handler.extend({
-  addHooks: compassAddHooks,
-  removeHooks: compassRemoveHooks,
-});
+class CompassHandler extends extendLeafletClass(L.Handler) {}
+Object.assign(CompassHandler.prototype, { addHooks: compassAddHooks, removeHooks: compassRemoveHooks });
+Compass.value = CompassHandler;
 
-ContainerResize.value = L.Handler.extend({
-  addHooks: containerResizeAddHooks,
-  removeHooks: containerResizeRemoveHooks,
+class ContainerResizeHandler extends extendLeafletClass(L.Handler) {}
+Object.assign(ContainerResizeHandler.prototype, {
+  addHooks: containerResizeAddHooks, removeHooks: containerResizeRemoveHooks,
 });
+ContainerResize.value = ContainerResizeHandler;
 
-PitchDrag.value = L.Handler.extend({
-  addHooks: pitchDragAddHooks,
-  removeHooks: pitchDragRemoveHooks,
-});
+class PitchDragHandler extends extendLeafletClass(L.Handler) {}
+Object.assign(PitchDragHandler.prototype, { addHooks: pitchDragAddHooks, removeHooks: pitchDragRemoveHooks });
+PitchDrag.value = PitchDragHandler;
 
-ShiftRotate.value = L.Handler.extend({
-  addHooks: shiftRotateAddHooks,
-  removeHooks: shiftRotateRemoveHooks,
+class ShiftRotateHandler extends extendLeafletClass(L.Handler) {}
+Object.assign(ShiftRotateHandler.prototype, {
+  addHooks: shiftRotateAddHooks, removeHooks: shiftRotateRemoveHooks,
 });
+ShiftRotate.value = ShiftRotateHandler;
 
-TouchMode.value = L.Handler.extend({
-  addHooks: notifyCameraTouchChange,
-  removeHooks: notifyCameraTouchChange,
+class TouchModeHandler extends extendLeafletClass(L.Handler) {}
+Object.assign(TouchModeHandler.prototype, {
+  addHooks: notifyCameraTouchChange, removeHooks: notifyCameraTouchChange,
 });
+TouchMode.value = TouchModeHandler;
 
-L.Control.Rotate = L.Control.extend({
-  options: { position: 'topleft', closeOnZeroBearing: true, visualizePitch: true },
-  onAdd: rotateOnAdd,
-  onRemove: rotateOnRemove,
-});
+class RotateControl extends extendLeafletClass(L.Control) {
+  static defaultOptions = { position: 'topleft', closeOnZeroBearing: true, visualizePitch: true };
+}
+Object.assign(RotateControl.prototype, { onAdd: rotateOnAdd, onRemove: rotateOnRemove });
+if (L.version.startsWith('1.')) {
+  RotateControl.prototype.options = Object.assign(Object.create(L.Control.prototype.options), RotateControl.defaultOptions);
+}
+L.Control.Rotate = RotateControl;
 
 if (L.control) L.control.rotate = rotateControl;
 

package/src/core/cameraCircleBounds.js

@@ -1,7 +1,8 @@
 import { boundsMethods } from '../weakmaps/boundsMethods.js';
+import { projectNativePath } from './projectNativePath.js';
 
 
 export function cameraCircleBounds() {
-  this._project();
+  if (this._map) projectNativePath(this);
   return boundsMethods.get(this).call(this);
 }

package/src/core/closestCameraLayerPoint.js

@@ -1,8 +1,9 @@
 import { closestMethods } from '../weakmaps/closestMethods.js';
+import { projectNativePath } from './projectNativePath.js';
 
 
 export function closestCameraLayerPoint(point) {
-  this._project();
+  projectNativePath(this);
   this._parts = this._rings;
   return closestMethods.get(this).call(this, point);
 }

package/src/core/constructLayer.js

@@ -0,0 +1,9 @@
+import { leafletLayer } from '../globals/leafletLayer.js';
+import { layerInitialize } from '../scene/layerInitialize.js';
+
+export function constructLayer(options) {
+  const layer = Reflect.construct(leafletLayer, /* alloc */ [], new.target);
+  layerInitialize.call(layer, options);
+  layer.callInitHooks();
+  return layer;
+}

package/src/core/extendLeafletClass.js

@@ -0,0 +1,5 @@
+import { L } from '../globals/L.js';
+
+export function extendLeafletClass(parent) {
+  return L.version.startsWith('2.') ? parent : parent.extend(/* alloc */ {});
+}

package/src/core/extendTerrainPixelBounds.js

@@ -0,0 +1,31 @@
+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 { groundBounds } from '../projections/groundBounds.js';
+import { animationPoint } from '../projections/transformZoomAnimationPoint.js';
+
+export function extendTerrainPixelBounds(layer, result, stream, origin) {
+  const map = layer._map;
+  let minimum = Infinity, maximum = -Infinity, key, entry;
+  for ([key, entry] of stream.terrainCache) {
+    if (!key.startsWith(`${layer._tileZoom}/`) || !entry.range) continue;
+    minimum = Math.min(minimum, entry.range[0]);
+    maximum = Math.max(maximum, entry.range[1]);
+  }
+  if (!Number.isFinite(minimum) || !Number.isFinite(maximum)) return result;
+  const zoom = cameraViewByMap.get(map)?.zoom ?? map.getZoom();
+  const scale = map.options.crs.scale(zoom) / (earthCirc * Math.cos(origin.lat * radians));
+  const target = mapElevationOf(map, map.getCenter()) ?? 0;
+  let i, j, footprint, point, raw;
+  for (i = 0; i < 2; i++) {
+    footprint = groundBounds(map, undefined, ((i ? maximum : minimum) - target) * scale);
+    for (j = 0; j < 2; j++) {
+      point = j ? footprint.max : footprint.min;
+      raw = mapMethods.value.containerPointToLayerPoint.call(map, animationPoint(map, point, true));
+      result.extend(map.project(map.layerPointToLatLng(raw), layer._tileZoom));
+    }
+  }
+  return result;
+}

package/src/core/gridlayerGetTiledPixelBounds.js

@@ -6,13 +6,7 @@ import { mapGetPitch } from '../camera/mapGetPitch.js';
 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 { groundBounds } from '../projections/groundBounds.js';
-import { animationPoint } from '../projections/transformZoomAnimationPoint.js';
+import { extendTerrainPixelBounds } from './extendTerrainPixelBounds.js';
 
 export function gridlayerGetTiledPixelBounds(center) {
   const map = this._map, stream = streamTerrainByMap.get(map);
@@ -22,24 +16,5 @@ export function gridlayerGetTiledPixelBounds(center) {
     map.project(bounds.getSouthEast(), this._tileZoom));
   const shared = renderers.get(map), origin = shared && sceneOriginByLayer.get(shared);
   if (!stream || !origin) return result;
-  let minimum = Infinity, maximum = -Infinity, key, entry;
-  for ([key, entry] of stream.terrainCache) {
-    if (!key.startsWith(`${this._tileZoom}/`) || !entry.range) continue;
-    minimum = Math.min(minimum, entry.range[0]);
-    maximum = Math.max(maximum, entry.range[1]);
-  }
-  if (!Number.isFinite(minimum) || !Number.isFinite(maximum)) return result;
-  const zoom = cameraViewByMap.get(map)?.zoom ?? map.getZoom();
-  const scale = map.options.crs.scale(zoom) / (earthCirc * Math.cos(origin.lat * radians));
-  const target = mapElevationOf(map, map.getCenter()) ?? 0;
-  let i, j, footprint, point, raw;
-  for (i = 0; i < 2; i++) {
-    footprint = groundBounds(map, undefined, ((i ? maximum : minimum) - target) * scale);
-    for (j = 0; j < 2; j++) {
-      point = j ? footprint.max : footprint.min;
-      raw = mapMethods.value.containerPointToLayerPoint.call(map, animationPoint(map, point, true));
-      result.extend(map.project(map.layerPointToLatLng(raw), this._tileZoom));
-    }
-  }
-  return result;
+  return extendTerrainPixelBounds(this, result, stream, origin);
 }

package/src/core/layerAddInitHook.js

@@ -0,0 +1,7 @@
+import { L } from '../globals/L.js';
+import { leafletLayer } from '../globals/leafletLayer.js';
+
+export function layerAddInitHook() {
+  leafletLayer.addInitHook.apply(this === L.Layer ? leafletLayer : this, arguments);
+  return this;
+}

package/src/core/layerCallInitHooks.js

@@ -1,15 +1,15 @@
 import { sceneLayers } from '../weakmaps/sceneLayers.js';
 
-import { layerCallInitHooks as sharedLayerCallInitHooks } from '../globals/layerCallInitHooks.js';
-
-
-import { initializeNativeLayer } from './initializeNativeLayer.js';
-
-export function layerCallInitHooks() {
-  if (!sceneLayers.has(this)) {
-    sceneLayers.add(this);
-  }
-  const initialized = this._initHooksCalled;
-  sharedLayerCallInitHooks.value.call(this);
-  if (!initialized) initializeNativeLayer.call(this);
-}
+import { L } from '../globals/L.js';
+import { layerProto } from '../globals/layerProto.js';
+
+import { initializeNativeLayer } from './initializeNativeLayer.js';
+
+export function layerCallInitHooks() {
+  const initialized = this._initHooksCalled;
+  if (!L.version.startsWith('2.')) layerProto.value.callInitHooks.call(this);
+  if (L.version.startsWith('2.') || !initialized) {
+    sceneLayers.add(this);
+    initializeNativeLayer.call(this);
+  }
+}

package/src/core/layerMergeOptions.js

@@ -0,0 +1,7 @@
+import { L } from '../globals/L.js';
+import { leafletLayer } from '../globals/leafletLayer.js';
+
+export function layerMergeOptions(options) {
+  leafletLayer.mergeOptions.call(this === L.Layer ? leafletLayer : this, options);
+  return this;
+}

package/src/core/projectNativePath.js

@@ -0,0 +1,23 @@
+import { L } from '../globals/L.js';
+import { pathProjectionByMap } from '../weakmaps/pathProjectionByMap.js';
+
+export function projectNativePath(source) {
+  if (!L.version.startsWith('2.')) return source._project();
+  const map = source._map, renderer = source._renderer;
+  let projection = pathProjectionByMap.get(map);
+  if (!projection) {
+    // Leaflet 2 projects against a renderer view, even when no DOM renderer is mounted.
+    projection = Object.create(L.Renderer.prototype);
+    projection._map = map;
+    pathProjectionByMap.set(map, projection);
+  }
+  projection._pathZoom = map.getZoom();
+  projection._pathOrigin = map.getPixelOrigin();
+  source._renderer = projection;
+  try {
+    source._project();
+  } finally {
+    if (renderer) source._renderer = renderer;
+    else delete source._renderer;
+  }
+}

package/src/geometry/circleGeometry.js

@@ -3,18 +3,19 @@ import { disk } from './disk.js';
 import { circleAt } from './circleAt.js';
 import { line } from './line.js';
 import { triangle } from './appendNativeTriangle.js';
+import { projectNativePath } from '../core/projectNativePath.js';
 
 export function circleGeometry(source, context) {
   const { map, point, fill, stroke, options, dash, width } = context;
   const center = map.project(source.getLatLng());
   let radius = source.getRadius(), radiusY = radius, index, i;
   if (source instanceof L.Circle) {
-    source._project();
+    projectNativePath(source);
     const projected = source._point.add(map.getPixelOrigin());
     center.x = projected.x;
     center.y = projected.y;
-    radius = source._radius;
-    radiusY = source._radiusY || radius;
+    radius = source._pxRadius ?? source._radius;
+    radiusY = source._pxRadiusY ?? source._radiusY ?? radius;
   }
   if (options.fill) disk(point, center, radius, fill, radiusY);
   const count = Math.max(12, Math.min(128, Math.ceil(Math.PI * Math.sqrt(Math.max(radius, radiusY)))));

package/src/globals/layerControlAddItem.js

@@ -0,0 +1,3 @@
+import { L } from './L.js';
+
+export const layerControlAddItem = L?.LayersControl?.prototype._addItem;

package/src/globals/leafletLayer.js

@@ -0,0 +1,3 @@
+import { L } from './L.js';
+
+export const leafletLayer = L?.Layer;

package/src/globals/workerCogSource.js

@@ -1 +1 @@
-export const workerCogSource = { key: null, archive: null };
+export const workerCogSource = new Map();

package/src/gpu/initializeRendererResources.js

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

package/src/index.js

@@ -1,6 +1,5 @@
 import { L } from './globals/L.js';
 import { layerProto } from './globals/layerProto.js';
-import { layerCallInitHooks as sharedLayerCallInitHooks } from './globals/layerCallInitHooks.js';
 import { removeLayer as sharedRemoveLayer } from './globals/removeLayer.js';
 
 import './camera/mapCamera.js';
@@ -16,6 +15,10 @@ import { setPitch } from './camera/setPitch.js';
 import { setBearing } from './camera/setBearing.js';
 import { setRotation } from './core/setRotation.js';
 import { layerCallInitHooks } from './core/layerCallInitHooks.js';
+import { leafletLayer } from './globals/leafletLayer.js';
+import { constructLayer } from './core/constructLayer.js';
+import { layerAddInitHook } from './core/layerAddInitHook.js';
+import { layerMergeOptions } from './core/layerMergeOptions.js';
 
 /**
  * `new L.Layer({ source: { type, url, ...settings }, pane, attribution })`: layers with a `source`
@@ -37,8 +40,26 @@ import { layerCallInitHooks } from './core/layerCallInitHooks.js';
  * When `type` is omitted, *.pmtiles and *.tif/*.tiff URLs use 'raster'; other sources use 'vector'.
  */
 
-layerProto.value = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Layer.prototype));
-sharedLayerCallInitHooks.value = L.Layer.prototype.callInitHooks;
+layerProto.value = Object.defineProperties({}, Object.getOwnPropertyDescriptors(leafletLayer.prototype));
+layerProto.value._layerAdd = leafletLayer.prototype._layerAdd;
+layerProto.value.callInitHooks = leafletLayer.prototype.callInitHooks;
+
+if (L.version.startsWith('2.')) {
+  // Keep the native prototype and instanceof contract, but finish options before init hooks.
+  Object.setPrototypeOf(constructLayer, leafletLayer);
+  constructLayer.prototype = leafletLayer.prototype;
+  constructLayer.initHooks = true;
+  constructLayer.addInitHook = layerAddInitHook;
+  constructLayer.mergeOptions = layerMergeOptions;
+  L.Layer = constructLayer;
+  leafletLayer.prototype.constructor = L.Layer;
+  leafletLayer.addInitHook(layerCallInitHooks);
+} else {
+  leafletLayer.prototype.initialize = layerInitialize;
+  leafletLayer.prototype.callInitHooks = layerCallInitHooks;
+}
+
+Object.assign(leafletLayer.prototype, { _layerAdd: layerLayerAdd });
 
 /**
  * The 'vector' layer type: native WebGPU scene synchronized with the map camera.
@@ -95,12 +116,6 @@ sharedLayerCallInitHooks.value = L.Layer.prototype.callInitHooks;
  * @param {Layer3DOptions} [options] World origin comes from center or the first map centre.
  */
 
-L.Layer.include({
-  initialize: layerInitialize,
-  _layerAdd: layerLayerAdd,
-  callInitHooks: layerCallInitHooks,
-});
-
 sharedRemoveLayer.value = L.Map.prototype.removeLayer;
-L.Map.include({ removeLayer, getPitch, getBearing, setPitch, setBearing });
-L.Marker.include({ setRotation });
+Object.assign(L.Map.prototype, { removeLayer, getPitch, getBearing, setPitch, setBearing });
+Object.assign(L.Marker.prototype, { setRotation });

package/src/layer-controls/layerControlInputId.js

@@ -0,0 +1,11 @@
+import { L } from '../globals/L.js';
+import { layerControlAddItem } from '../globals/layerControlAddItem.js';
+
+// Leaflet 2 stores layer associations on its control, not on the input.
+if (layerControlAddItem && !L.Control.Layers) L.LayersControl.prototype._addItem = addLayerControlInputId;
+
+export function addLayerControlInputId(entry) {
+  const label = layerControlAddItem.call(this, entry);
+  label.querySelector('.leaflet-control-layers-selector').layerId = L.Util.stamp(entry.layer);
+  return label;
+}

package/src/layer-controls/placeEntry.js

@@ -1,5 +1,7 @@
 import { L } from '../globals/L.js';
 import { placeEntryElement } from './placeEntryElement.js';
+import './layerControlInputId.js';
+
 export function placeEntry(map, layer, element) {
   let input, entry;
   for (input of map.getContainer().querySelectorAll('.leaflet-control-layers-selector')) {

package/src/materials/createProgram.js

@@ -19,17 +19,18 @@ import { materialShaders } from '../shaders/materialShaders.js';
 import { reportCompilation } from '../gpu/reportShaderCompilation.js';
 
 export function createProgram(layer, material = defaultMaterial) {
+  const renderer = rendererByLayer.get(layer), { device } = renderer;
   const shaders = materialShaders(
     material,
     !!layer.options.nightSparkle,
     material.terrain ? elevationWGSL : ''
   );
-  const vertex = rendererByLayer.get(layer).device.createShaderModule((
+  const vertex = device.createShaderModule((
     vertexShader.code = shaders.vertex,
     vertexShader
   ));
   vertexShader.code = null;
-  const fragment = rendererByLayer.get(layer).device.createShaderModule((
+  const fragment = device.createShaderModule((
     fragmentShader.code = shaders.fragment,
     fragmentShader
   ));
@@ -45,17 +46,17 @@ export function createProgram(layer, material = defaultMaterial) {
     shaders.textured ? uVLayout : null,
   ];
   if (material.instanced) vertexBuffers.push(instanceLayout);
-  const bindGroupLayout = createProgramLayout(rendererByLayer.get(layer).device, shaders);
-  const pipelineLayout = rendererByLayer.get(layer).device.createPipelineLayout((
+  const bindGroupLayout = createProgramLayout(device, shaders);
+  const pipelineLayout = device.createPipelineLayout((
     sharedPipelineLayout.bindGroupLayouts[0] = bindGroupLayout,
-    sharedPipelineLayout.bindGroupLayouts[1] = rendererByLayer.get(layer).sunlight.layout,
+    sharedPipelineLayout.bindGroupLayouts[1] = renderer.sunlight.layout,
     sharedPipelineLayout
   ));
   sharedPipelineLayout.bindGroupLayouts[0] = null;
   sharedPipelineLayout.bindGroupLayouts[1] = null;
   const uniforms = createProgramUniforms(material);
   return /* alloc */ {
-    device: rendererByLayer.get(layer).device,
+    device,
     vertex,
     fragment,
     bindings: shaders.bindings,

package/src/native/gridTerrainElevation.js

@@ -1,23 +1,19 @@
 import { terrainElevation } from '../terrain/terrainElevation.js';
-import { nativeGPUByLayer } from '../weakmaps/nativeGPUByLayer.js';
+import { nativeTerrainElevation } from './nativeTerrainElevation.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;
+  let point, limit, x, y, index, dx, dy, tx, ty, entry, elevation;
   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;
-    }
+    elevation = nativeTerrainElevation(state, point, x, y, z);
+    if (Number.isFinite(elevation)) return elevation;
     tiles.clear();
-    for (dy = -1; dy <= 1; dy++) for (dx = -1; dx <= 1; dx++) {
+    for (index = 0; index < 9; index++) {
+      dx = index % 3 - 1;
+      dy = Math.floor(index / 3) - 1;
       tx = ((x + dx) % limit + limit) % limit;
       ty = Math.max(0, Math.min(limit - 1, y + dy));
       entry = state.terrainCache.get(`${z}/${tx}/${ty}`);

package/src/native/nativeTerrainElevation.js

@@ -0,0 +1,16 @@
+import { terrainElevation } from '../terrain/terrainElevation.js';
+import { nativeGPUByLayer } from '../weakmaps/nativeGPUByLayer.js';
+
+export function nativeTerrainElevation(state, point, x, y, z) {
+  let layer, native, request, elevation;
+  const key = `${x}:${y}:${z}`;
+  for (layer of Object.values(state.map._layers)) {
+    native = nativeGPUByLayer.get(layer);
+    if (native?.disposed || native?.terrainStream !== state) continue;
+    request = native.terrainRequests?.get(key);
+    if (!request?.tiles || layer._tiles[key] !== request.tile) continue;
+    elevation = terrainElevation(point, request.tiles);
+    if (Number.isFinite(elevation)) return elevation;
+  }
+  return null;
+}

package/src/native/prepareGridTerrainRequests.js

@@ -0,0 +1,16 @@
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
+
+export function prepareGridTerrainRequests(state) {
+  const stream = streamTerrainByMap.get(state.map);
+  if (state.terrainStream !== stream) {
+    state.terrainStream = stream;
+    state.terrainRequests = stream ? /* alloc */ new Map() : null;
+  }
+  if (state.terrainRequests) {
+    let key;
+    for (key of state.terrainRequests.keys()) {
+      if (!state.source._tiles[key]) state.terrainRequests.delete(key);
+    }
+  }
+  return stream;
+}

package/src/native/retainGridTerrain.js

@@ -0,0 +1,10 @@
+export function retainGridTerrain(state) {
+  let key, mesh, retained;
+  for ([key, mesh] of state.meshes) {
+    if (state.source._tiles[key] || !mesh._terrainRequest) continue;
+    retained = state.textures.get(key);
+    if (!retained) continue;
+    retained.used = true;
+    mesh._nativeUsed = true;
+  }
+}