leaflet-city-mapper 0.0.5 → 0.0.7

package/libs/leaflet-lens.js

@@ -8,6 +8,9 @@
 
     initialize(outerLayer, innerLayer, options) {
       L.Util.setOptions(this, options);
+      if (options?.enabled === undefined) {
+        this.options.enabled = !matchMedia('(hover: none) and (pointer: coarse)').matches;
+      }
       if (!outerLayer?.options || !innerLayer?.options || outerLayer === innerLayer) {
         throw new TypeError('Lens requires two distinct raster layers');
       }
@@ -40,14 +43,15 @@
       this._button = L.DomUtil.create('button', '', container);
       this._button.type = 'button';
       this._button.textContent = '🔍';
-      this._button.title = 'Toggle lens; move the pointer over the map to reveal the layer underneath';
+      this._button.title = 'Toggle lens; touch or move the pointer over the map to reveal the layer underneath';
       this._button.setAttribute('aria-label', 'Toggle lens');
       this._button.style.cssText = 'display:block;border:0;border-radius:2px;padding:0 8px;min-width:30px;height:30px;background:white;color:#222;font:inherit;cursor:pointer';
       L.DomEvent.disableClickPropagation(container);
       L.DomEvent.disableScrollPropagation(container);
       L.DomEvent.on(this._button, 'click', this._toggle, this);
       this._events = {
-        pointermove: this._onPointerMove.bind(this), pointerleave: this._hide.bind(this),
+        pointerdown: this._onPointerDown.bind(this), pointermove: this._onPointerMove.bind(this),
+        pointerleave: this._onPointerLeave.bind(this), pointercancel: this._hide.bind(this),
         focus: this._onFocus.bind(this), blur: this._hide.bind(this), keydown: this._onKeyDown.bind(this),
       };
       for (const [type, handler] of Object.entries(this._events)) {
@@ -111,8 +115,16 @@
       });
     },
 
+    _onPointerDown(event) {
+      if (event.pointerType === 'touch') this._onPointerMove(event);
+    },
+
+    _onPointerLeave(event) {
+      if (event.pointerType !== 'touch') this._hide();
+    },
+
     _onFocus() {
-      this._show(this._map.getSize().divideBy(2));
+      if (this._lens.hidden) this._show(this._map.getSize().divideBy(2));
     },
 
     _onKeyDown(event) {

package/libs/leaflet.js

@@ -11,7 +11,7 @@ const openlayers = new URLSearchParams(location.search).get('engine') === 'openl
 document.write((openlayers
   ? '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.6.1/ol.css">' +
     '<script src="https://cdn.jsdelivr.net/npm/ol@10.6.1/dist/ol.js"><\/script>' +
-    '<script src="https://unpkg.com/leaflet-city-mapper@0.0.5/libs/openlayers-bindings.min.js"><\/script>'
+    '<script src="https://unpkg.com/leaflet-city-mapper@0.0.7/libs/openlayers-bindings.min.js"><\/script>'
   : '<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css"><script src="https://unpkg.com/leaflet@1.9/dist/leaflet-src.js"><\/script>'));
 
 const engineStyle = document.createElement('style');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "leaflet-city-mapper",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A small 3D rendering engine for leaflet",
   "type": "module",
   "main": "dist/leaflet-city-mapper.js",

package/src/camera/setBearing.js

@@ -0,0 +1,5 @@
+import { mapSetBearing } from './mapSetBearing.js';
+
+export function setBearing(bearing, options) {
+  return mapSetBearing(this, bearing, options);
+}

package/src/camera/setPitch.js

@@ -0,0 +1,5 @@
+import { mapSetPitch } from './mapSetPitch.js';
+
+export function setPitch(pitch, options) {
+  return mapSetPitch(this, pitch, options);
+}

package/src/cog/initCog.js

@@ -1,7 +1,7 @@
 import { initRaster } from '../raster/initRaster.js';
-import { openCog } from './openCog.js';
+import { openCogInWorker } from '../workers/openCogInWorker.js';
 
 export function initCog(layer, options) {
   initRaster(layer, /* alloc */ { ariaLabel: 'COG raster', ...options,
-    archive: options.archive || openCog(/* alloc */ new URL(options.url, document.baseURI).href, options.asset) });
+    archive: options.archive || openCogInWorker(layer, options) });
 }

package/src/collision/collectIntersections.js

@@ -0,0 +1,16 @@
+import { CELL } from '../globals/CELL.js';
+import { horizontalRay } from './horizontalRay.js';
+
+export function collectIntersections(shape, x, y, z, seen, hits, end, iz) {
+  let ix, cell, triangle, distance;
+  for (ix = Math.floor(x / CELL); ix <= end; ix++) {
+    cell = shape.cells.get(`${ix},${iz}`);
+    if (!cell) continue;
+    for (triangle of cell) {
+      if (seen.has(triangle)) continue;
+      seen.add(triangle);
+      distance = horizontalRay(shape.tri, triangle, x, y, z, 1, 0);
+      if (distance > 1e-4) hits.push(distance);
+    }
+  }
+}

package/src/collision/collider.js

@@ -1,14 +1,15 @@
 import { colliders } from '../weakmaps/colliders.js';
 import { indexTriangle } from './indexTriangle.js';
 import { readTriangle } from './readTriangle.js';
+import { vertexCount } from './vertexCount.js';
 
 
 export function collider(mesh) {
   let c = colliders.get(mesh.geometry);
   if (c) return c;
-  const m = mesh.worldMatrix, { position: { data: p }, index, normal, uv, instanceOffset } = mesh.geometry.attributes;
+  const m = mesh.worldMatrix, { position, index, normal, uv, instanceOffset } = mesh.geometry.attributes;
 
-  const vertices = index ? index.count : p.length / 3;
+  const vertices = vertexCount(position, index);
   const count = vertices * (instanceOffset?.count ?? 1);
   const tri = /* alloc */ [];
   const nrm = /* alloc */ [];

package/src/collision/countCrossings.js

@@ -0,0 +1,15 @@
+export function countCrossings(hits) {
+  let ix, j, distance;
+  for (ix = 1; ix < hits.length; ix++) {
+    distance = hits[ix];
+    j = ix - 1;
+    while (j >= 0 && hits[j] > distance) hits[j + 1] = hits[j--];
+    hits[j + 1] = distance;
+  }
+  let crossings = 0, previous = -Infinity;
+  for (distance of hits) {
+    if (distance - previous > 1e-4) crossings++;
+    previous = distance;
+  }
+  return crossings;
+}

package/src/collision/insideMesh.js

@@ -1,8 +1,9 @@
 import { CELL } from '../globals/CELL.js';
 
 import { collider } from './collider.js';
-import { horizontalRay } from './horizontalRay.js';
 import { computeBounds } from '../geometry/computeBounds.js';
+import { collectIntersections } from './collectIntersections.js';
+import { countCrossings } from './countCrossings.js';
 
 export function insideMesh(mesh, x, y, z, seen, intersections) {
   const geometry = mesh.geometry;
@@ -27,27 +28,6 @@ export function insideMesh(mesh, x, y, z, seen, intersections) {
   const hits = intersections;
   hits.length = 0;
   seen.clear();
-  let ix, cell, triangle, distance;
-  for (ix = Math.floor(x / CELL); ix <= end; ix++) {
-    cell = shape.cells.get(`${ix},${iz}`);
-    if (!cell) continue;
-    for (triangle of cell) {
-      if (seen.has(triangle)) continue;
-      seen.add(triangle);
-      distance = horizontalRay(shape.tri, triangle, x, y, z, 1, 0);
-      if (distance > 1e-4) hits.push(distance);
-    }
-  }
-  for (ix = 1; ix < hits.length; ix++) {
-    distance = hits[ix];
-    let j = ix - 1;
-    while (j >= 0 && hits[j] > distance) hits[j + 1] = hits[j--];
-    hits[j + 1] = distance;
-  }
-  let crossings = 0, previous = -Infinity;
-  for (distance of hits) {
-    if (distance - previous > 1e-4) crossings++;
-    previous = distance;
-  }
-  return crossings % 2 === 1;
+  collectIntersections(shape, x, y, z, seen, hits, end, iz);
+  return countCrossings(hits) % 2 === 1;
 }

package/src/collision/insideWalker.js

@@ -20,7 +20,7 @@ export function insideWalker(context) {
   const y = root.position[1] + feet[1] * root.scale[1];
   const z = root.position[2] + feet[2] * root.scale[2];
   const layers = layersByLayer.get(shared);
-  let other, node, child;
+  let other, node, child, nodes;
   for (other of layers) {
     if (other === layer || kindByLayer.get(other) === 'terrain') continue;
     if (kindByLayer.get(other) === 'traffic') {
@@ -29,7 +29,7 @@ export function insideWalker(context) {
       if (trafficCollision(other, x, y, z, 0, 0, 0, hitData)) return true;
       continue;
     }
-    const nodes = hitData.nodes;
+    nodes = hitData.nodes;
     nodes.length = 0;
     if (rootByLayer.get(other)) nodes.push(rootByLayer.get(other));
     while (nodes.length) {

package/src/collision/readTriangle.js

@@ -1,14 +1,17 @@
+import { vertexCount } from './vertexCount.js';
+
 export function readTriangle(mesh, i, a, b, c) {
   const { position, index, instanceOffset } = mesh.geometry.attributes;
-  const vertices = index?.count || position.count;
+  const size = position.size ?? 3;
+  const vertices = vertexCount(position, index);
   const vertex = instanceOffset ? i % vertices : i;
   const offset = instanceOffset ? Math.floor(i / vertices) * instanceOffset.size : 0;
   const x = instanceOffset?.data[offset] ?? 0;
   const y = instanceOffset?.data[offset + 1] ?? 0;
   const z = instanceOffset?.data[offset + 2] ?? 0;
-  const ai = (index ? index.data[vertex] : vertex) * position.size;
-  const bi = (index ? index.data[vertex + 1] : vertex + 1) * position.size;
-  const ci = (index ? index.data[vertex + 2] : vertex + 2) * position.size;
+  const ai = (index ? index.data[vertex] : vertex) * size;
+  const bi = (index ? index.data[vertex + 1] : vertex + 1) * size;
+  const ci = (index ? index.data[vertex + 2] : vertex + 2) * size;
   a[0] = position.data[ai]; a[1] = position.data[ai + 1]; a[2] = position.data[ai + 2];
   b[0] = position.data[bi]; b[1] = position.data[bi + 1]; b[2] = position.data[bi + 2];
   c[0] = position.data[ci]; c[1] = position.data[ci + 1]; c[2] = position.data[ci + 2];

package/src/collision/setTrafficNormal.js

@@ -0,0 +1,9 @@
+export function setTrafficNormal(data, x, z, distance, dx, dz) {
+  if (distance < 1e-6) {
+    data.normal[0] = -dx;
+    data.normal[1] = -dz;
+  } else {
+    data.normal[0] = x / distance;
+    data.normal[1] = z / distance;
+  }
+}

package/src/collision/trafficCollision.js

@@ -2,13 +2,14 @@ import { rootByLayer } from '../weakmaps/rootByLayer.js';
 import { trafficByLayer } from '../weakmaps/trafficByLayer.js';
 
 import { locateTraffic } from '../traffic/locateTraffic.js';
+import { setTrafficNormal } from './setTrafficNormal.js';
 
 export function trafficCollision(layer, x, y, z, dx, dz, reach, data) {
   const state = trafficByLayer.get(layer);
   if (!state?.mesh || !state.trips.length) return false;
   let bounds = state.collisionBounds;
   if (!bounds) {
-    bounds = state.collisionBounds = { radius: 0, minY: Infinity, maxY: -Infinity };
+    bounds = state.collisionBounds = /* alloc */ { radius: 0, minY: Infinity, maxY: -Infinity };
     let i, px, py, pz;
     for (i = 0; i < state.template.position.length; i += 3) {
       px = state.template.position[i];
@@ -19,7 +20,7 @@ export function trafficCollision(layer, x, y, z, dx, dz, reach, data) {
       bounds.maxY = Math.max(bounds.maxY, py);
     }
   }
-  const root = rootByLayer.get(layer), position = state.position ||= {};
+  const root = rootByLayer.get(layer), position = state.position ||= /* alloc */ {};
   const scale = Math.max(root.scale[0], root.scale[1], root.scale[2]);
   const radius = bounds.radius * scale + 0.35;
   let trip, projection, closest, rx, rz, perpendicular, entry, distance, bottom, top, px, pz;
@@ -48,13 +49,7 @@ export function trafficCollision(layer, x, y, z, dx, dz, reach, data) {
     data.best = entry;
     data.found = true;
     distance = Math.hypot(x + entry * dx - px, z + entry * dz - pz);
-    if (distance < 1e-6) {
-      data.normal[0] = -dx;
-      data.normal[1] = -dz;
-    } else {
-      data.normal[0] = (x + entry * dx - px) / distance;
-      data.normal[1] = (z + entry * dz - pz) / distance;
-    }
+    setTrafficNormal(data, x + entry * dx - px, z + entry * dz - pz, distance, dx, dz);
   }
   return data.found;
 }

package/src/collision/vertexCount.js

@@ -0,0 +1,3 @@
+export function vertexCount(position, index) {
+  return index?.count ?? index?.data.length ?? position.count ?? position.data.length / (position.size ?? 3);
+}

package/src/controls/cameraControls.js

@@ -1,5 +1,8 @@
 import { cameraTouchStateByMap } from '../weakmaps/cameraTouchStateByMap.js';
+import { cameraHandlersByMap } from '../weakmaps/cameraHandlersByMap.js';
 import { rotateControlByMap } from '../weakmaps/rotateControlByMap.js';
+import { touchPitchByMap } from '../weakmaps/touchPitchByMap.js';
+import { touchRotateByMap } from '../weakmaps/touchRotateByMap.js';
 
 import { L } from '../globals/L.js';
 import { Compass } from '../globals/Compass.js';
@@ -75,6 +78,8 @@ export function cameraControls(map) {
   addCameraHandler(map, 'compassBearing', Compass.value);
   addCameraHandler(map, 'touchRotate', TouchMode.value);
   addCameraHandler(map, 'touchPitch', TouchMode.value);
+  touchRotateByMap.set(map, cameraHandlersByMap.get(map).get('touchRotate'));
+  touchPitchByMap.set(map, cameraHandlersByMap.get(map).get('touchPitch'));
   const container = map.getContainer();
   const state = /* alloc */ { map, container, touch: null, nativeZoom: undefined };
   cameraTouchStateByMap.set(map, state);
@@ -86,6 +91,7 @@ export function cameraControls(map) {
   container.addEventListener('touchcancel', endCameraTouchEvent, true);
   window.addEventListener('blur', endAllCameraTouches);
   map.on('cameratouchchange', changeCameraTouch, map);
+  changeCameraTouch.call(map);
   if (map.options.rotateControl) {
     rotateControlByMap.set(map, /* alloc */ new L.Control.Rotate(typeof map.options.rotateControl === 'object' ? map.options.rotateControl : cameraEmptyOptions));
     rotateControlByMap.get(map).addTo(map);

package/src/core/gridlayerGetTiledPixelBounds.js

@@ -3,10 +3,43 @@ import { tiledBounds } from '../globals/tiledBounds.js';
 
 import { mapGetBearing } from '../camera/mapGetBearing.js';
 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';
 
 export function gridlayerGetTiledPixelBounds(center) {
-  if (!mapGetBearing(this._map) && !mapGetPitch(this._map)) return tiledBounds.value.call(this, center);
-  const bounds = this._map.getBounds();
-  return /* alloc */ new L.Bounds(this._map.project(bounds.getNorthWest(), this._tileZoom),
-    this._map.project(bounds.getSouthEast(), this._tileZoom));
+  const map = this._map, stream = streamTerrainByMap.get(map);
+  if (!stream && !mapGetBearing(map) && !mapGetPitch(map)) return tiledBounds.value.call(this, center);
+  const bounds = map.getBounds();
+  const result = /* alloc */ new L.Bounds(map.project(bounds.getNorthWest(), this._tileZoom),
+    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;
 }

package/src/core/markerSetPos.js

@@ -5,7 +5,7 @@ import { markerCameraIconPoint } from '../projections/markerCameraIconPoint.js';
 import { displayPoint } from '../projections/displayContainerPoint.js';
 
 export function markerSetPos(point) {
-  markerMethods.value._setPos.call(this, displayPoint(this._map, point));
+  markerMethods.value._setPos.call(this, displayPoint(this._map, point, this.getLatLng()));
   let i, element, key, direction, options, anchor;
   for (i = 0; i < 2; i++) {
     element = i ? this._shadow : this._icon;

package/src/core/popupGetEvents.js

@@ -3,6 +3,6 @@ import { popupEvents } from '../globals/popupEvents.js';
 
 export function popupGetEvents() {
   const events = popupEvents.value.call(this);
-  events.rotate = events.pitch = events.move = this._updatePosition;
+  events.rotate = events.pitch = events.move = events.terrainchange = this._updatePosition;
   return events;
 }

package/src/core/popupUpdatePosition.js

@@ -5,13 +5,13 @@ import { popupPosition } from '../globals/popupPosition.js';
 import { displayPoint } from '../projections/displayContainerPoint.js';
 
 export function popupUpdatePosition() {
-  popupPosition.value.call(this);
-  if (!this._map) return;
-  const point = this._map.latLngToLayerPoint(this._latlng), delta = displayPoint(this._map, point).subtract(point);
-  if (this._zoomAnimated) {
-    L.DomUtil.setPosition(this._container, L.DomUtil.getPosition(this._container).add(delta));
-  } else {
-    this._container.style.left = `${this._containerLeft + delta.x}px`;
-    this._container.style.bottom = `${this._containerBottom - delta.y}px`;
+  popupPosition.value.call(this);
+  if (!this._map) return;
+  const point = this._map.latLngToLayerPoint(this._latlng), delta = displayPoint(this._map, point, this._latlng).subtract(point);
+  if (this._zoomAnimated) {
+    L.DomUtil.setPosition(this._container, L.DomUtil.getPosition(this._container).add(delta));
+  } else {
+    this._container.style.left = `${this._containerLeft + delta.x}px`;
+    this._container.style.bottom = `${this._containerBottom - delta.y}px`;
   }
 }

package/src/core/tooltipGetEvents.js

@@ -3,6 +3,6 @@ import { tooltipEvents } from '../globals/tooltipEvents.js';
 
 export function tooltipGetEvents() {
   const events = tooltipEvents.value.call(this);
-  events.rotate = events.pitch = events.move = this._updatePosition;
+  events.rotate = events.pitch = events.move = events.terrainchange = this._updatePosition;
   return events;
 }

package/src/core/tooltipSetPosition.js

@@ -5,7 +5,7 @@ import { tooltipPosition } from '../globals/tooltipPosition.js';
 import { displayPoint } from '../projections/displayContainerPoint.js';
 
 export function tooltipSetPosition(point) {
-  tooltipPosition.value.call(this, point);
-  const delta = displayPoint(this._map, point).subtract(point);
+  tooltipPosition.value.call(this, point);
+  const delta = displayPoint(this._map, point, this._latlng).subtract(point);
   L.DomUtil.setPosition(this._container, L.DomUtil.getPosition(this._container).add(delta));
 }

package/src/geometry/appendNativeTriangle.js

@@ -1,3 +1,3 @@
-export function triangle(point, target, a, b, c) {
-  return target.push(...point(a), ...point(b), ...point(c));
+export function triangle(point, target, a, b, c, anchorA, anchorB, anchorC) {
+  return target.push(...point(a, anchorA), ...point(b, anchorB), ...point(c, anchorC));
 }

package/src/geometry/createModelGeometry.js

@@ -1,14 +1,8 @@
-import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
-
-import { vertexNormals } from './vertexNormals.js';
+import { rendererByLayer } from '../weakmaps/rendererByLayer.js';
+
 import { createProgram } from '../materials/createProgram.js';
 
 export function createModelGeometry(context, primitive, attributes) {
-  let normals;
-  if (!attributes.normal) {
-    normals = vertexNormals(attributes.position.data, attributes.index?.data);
-    attributes.normal = /* alloc */ { size: 3, data: normals };
-  }
   const style = context.materials[primitive.material] || /* alloc */ {
     color: /* alloc */ [1, 1, 1], metallic: 1,
   };
@@ -18,7 +12,6 @@ export function createModelGeometry(context, primitive, attributes) {
   const program = createProgram(context.backend, style);
   context.resources.push(program);
   const device = rendererByLayer.get(context.backend).device;
-  if (attributes.index?.data instanceof Uint8Array) attributes.index.data = Uint16Array.from(attributes.index.data);
   let name, attribute;
   for ([name, attribute] of Object.entries(attributes)) {
     attribute.size ||= 1;

package/src/geometry/dashedSegment.js

@@ -2,15 +2,20 @@ import { segment } from './segment.js';
 
 export function dashedSegment(context, a, b, length, distance, period) {
   const dash = context.dash;
-  let offset = 0, phase, index, end, delta;
+  let offset = 0, phase = ((distance % period) + period) % period, index = 0, end, delta, skipped = 0;
+  while (index < dash.length - 1 && phase >= dash[index]) phase -= dash[index++];
+  let remaining = Math.max(0, dash[index] - phase);
   while (offset < length) {
-    phase = ((distance + offset) % period + period) % period, index = 0;
-    while (phase >= dash[index]) phase -= dash[index++];
-    end = Math.min(length, offset + dash[index] - phase);
-    if (index % 2 === 0) {
+    end = Math.min(length, offset + remaining);
+    if (end > offset && index % 2 === 0) {
       delta = b.subtract(a).divideBy(length);
       segment(context, a.add(delta.multiplyBy(offset)), a.add(delta.multiplyBy(end)), true, true);
     }
+    if (end <= offset) {
+      if (++skipped >= dash.length) throw /* alloc */ new Error('Leaflet dashArray is too small for these coordinates');
+    } else skipped = 0;
     offset = end;
+    index = (index + 1) % dash.length;
+    remaining = dash[index];
   }
 }

package/src/geometry/disk.js

@@ -6,6 +6,6 @@ export function disk(point, center, radius, target, radiusY = radius) {
   const count = Math.max(12, Math.min(128, Math.ceil(Math.PI * Math.sqrt(radius))));
   let i;
   for (i = 0; i < count; i++) {
-    triangle(point, target, center, diskAt(center, radius, radiusY, count, i), diskAt(center, radius, radiusY, count, i + 1));
+    triangle(point, target, center, diskAt(center, radius, radiusY, count, i), diskAt(center, radius, radiusY, count, i + 1), center, center, center);
   }
 }

package/src/geometry/fillNativePolygon.js

@@ -0,0 +1,20 @@
+import { triangle } from './appendNativeTriangle.js';
+import { triangulate } from '../triangulation/triangulate.js';
+
+export function fillNativePolygon(context, projected) {
+  const { options, fill, point } = context;
+  if (options.triangulated) {
+    if (projected.length !== 1 || projected[0].length !== 3) {
+      throw /* alloc */ new Error('triangulated polygons require three vertices per polygon and no holes');
+    }
+    triangle(point, fill, projected[0][0], projected[0][1], projected[0][2]);
+    return;
+  }
+  const valid = /* alloc */ [];
+  let ring, indices;
+  for (ring of projected) if (ring.length >= 3) valid.push(ring);
+  const vertices = valid.flat();
+  for (indices of triangulate(valid[0], valid.slice(1))) {
+    triangle(point, fill, vertices[indices[0]], vertices[indices[1]], vertices[indices[2]]);
+  }
+}

package/src/geometry/lineJoin.js

@@ -19,8 +19,8 @@ export function lineJoin(context, points, i, b, length) {
   const from = a.add(n1.multiplyBy(radius)), to = a.add(n2.multiplyBy(radius));
   const denominator = 1 + n1.x * n2.x + n1.y * n2.y;
   const miter = denominator > 0 ? n1.add(n2).multiplyBy(radius / denominator) : null;
-  triangle(point, stroke, from, a, to);
+  triangle(point, stroke, from, a, to, a, a, a);
   if (options.lineJoin === 'miter' && miter && Math.hypot(miter.x, miter.y) <= radius * 4) {
-    triangle(point, stroke, from, a.add(miter), to);
+    triangle(point, stroke, from, a.add(miter), to, a, a, a);
   }
 }

package/src/geometry/markerQuadCorners.js

@@ -8,11 +8,17 @@ import { localPosition } from '../projections/localPosition.js';
 
 import { transformNativePoint } from '../transforms/transformNativePoint.js';
 import { markerImageBounds } from './markerImageBounds.js';
+import { streamTerrainByMap } from '../weakmaps/streamTerrainByMap.js';
+import { mapElevationOf } from '../terrain/mapElevationOf.js';
 
 export function markerQuadCorners(state, key, image) {
   const { source, map, backend: layer } = state;
 
   const position = localPosition(state, source.getLatLng());
+  if (streamTerrainByMap.get(map)) {
+    const root = rootByLayer.get(layer), elevation = mapElevationOf(map, source.getLatLng());
+    if (Number.isFinite(elevation)) position[1] = (elevation - root.position[1]) / root.scale[1];
+  }
   const size = map.getSize();
   const matrices = state.markerMatrices ||= /* alloc */ {
     root: /* alloc */ new DOMMatrix(),

package/src/geometry/nativeGeometry.js

@@ -3,7 +3,7 @@ import { visit } from './visitNativeCoordinates.js';
 import { dashValues } from './dashValues.js';
 import { circleGeometry } from './circleGeometry.js';
 
-/** Leaflet paths become flat triangles; pixel-sized strokes are rebuilt on zoom. */
+/** Leaflet paths become flat triangles; solid strokes retain stationary zoom anchors. */
 export function nativeGeometry(source, map, point) {
   const fill = /* alloc */ [];
   const stroke = /* alloc */ [];

package/src/geometry/polygon.js

@@ -1,23 +1,17 @@
-import { triangle } from './appendNativeTriangle.js';
 import { line } from './line.js';
-import { triangulate } from '../triangulation/triangulate.js';
+import { fillNativePolygon } from './fillNativePolygon.js';
 
 export function polygon(context, rings, closed) {
-  const { options, fill, point, map } = context;
+  const { options, map } = context;
   const projected = /* alloc */ [];
-  let ring, path, latlng, indices;
+  let ring, path, latlng;
   for (ring of rings) {
     path = /* alloc */ [];
     for (latlng of ring) path.push(map.project(latlng));
     projected.push(path);
   }
   if (closed && options.fill && projected[0]?.length >= 3) {
-    const valid = /* alloc */ [];
-    for (ring of projected) if (ring.length >= 3) valid.push(ring);
-    const vertices = valid.flat();
-    for (indices of triangulate(valid[0], valid.slice(1))) {
-      triangle(point, fill, vertices[indices[0]], vertices[indices[1]], vertices[indices[2]]);
-    }
+    fillNativePolygon(context, projected);
   }
   for (ring of projected) line(context, ring, closed);
 }

package/src/geometry/segment.js

@@ -1,10 +1,11 @@
-import { L } from '../globals/L.js';
+import { L } from '../globals/L.js';
 import { triangle } from './appendNativeTriangle.js';
 import { disk } from './disk.js';
 
 export function segment(context, a, b, startCap, endCap) {
   const { options, width, stroke, point } = context;
   const radius = width / 2;
+  const anchorA = a, anchorB = b;
   const length = a.distanceTo(b);
   if (!length) return;
   const direction = b.subtract(a).divideBy(length);
@@ -13,8 +14,8 @@ export function segment(context, a, b, startCap, endCap) {
     if (startCap) a = a.subtract(direction.multiplyBy(radius));
     if (endCap) b = b.add(direction.multiplyBy(radius));
   }
-  triangle(point, stroke, a.add(normal), a.subtract(normal), b.add(normal));
-  triangle(point, stroke, b.add(normal), a.subtract(normal), b.subtract(normal));
+  triangle(point, stroke, a.add(normal), a.subtract(normal), b.add(normal), anchorA, anchorA, anchorB);
+  triangle(point, stroke, b.add(normal), a.subtract(normal), b.subtract(normal), anchorB, anchorA, anchorB);
   if (options.lineCap === 'round') {
     if (startCap) disk(point, a, radius, stroke);
     if (endCap) disk(point, b, radius, stroke);

package/src/globals/colorTexture.js

@@ -0,0 +1,6 @@
+export const colorTexture = {
+  size: [null, null],
+  format: null,
+  sampleCount: 4,
+  usage: null
+};

package/src/globals/depthTexture.js

@@ -1,5 +1,6 @@
 export const depthTexture = {
   size: [null, null],
   format: 'depth24plus',
+  sampleCount: 4,
   usage: null
 };

package/src/globals/drawMeshEntry.js

@@ -2,6 +2,6 @@ export const drawMeshEntry = {
   binding: 0,
   resource: {
     buffer: null,
-    size: 160
+    size: 176
   }
 };