leaflet-city-mapper 0.0.6 → 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/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/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

@@ -3,10 +3,18 @@ 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 { extendTerrainPixelBounds } from './extendTerrainPixelBounds.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;
+  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/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/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/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/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/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
   }
 };

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/meshPipeline.js

@@ -19,6 +19,7 @@ export const meshPipeline = {
     cullMode: null,
     frontFace: null
   },
+  multisample: { count: 4 },
   depthStencil: {
     format: 'depth24plus',
     depthWriteEnabled: null,

package/src/globals/mvtTextDecoder.js

@@ -0,0 +1 @@
+export const mvtTextDecoder = new TextDecoder('utf-8', { fatal: true });

package/src/globals/nativeScalableStyleKeys.js

@@ -0,0 +1 @@
+export const nativeScalableStyleKeys = new Set(['color', 'opacity', 'weight', 'fillColor', 'fillOpacity']);

package/src/globals/scenePass.js

@@ -1,6 +1,7 @@
 export const scenePass = {
   colorAttachments: [{
     view: null,
+    resolveTarget: null,
     clearValue: {
       r: 0,
       g: 0,

package/src/globals/vectorStyleNamedColors.js

@@ -0,0 +1,8 @@
+export const vectorStyleNamedColors = {
+  black: [0, 0, 0, 1],
+  white: [255, 255, 255, 1],
+  gray: [128, 128, 128, 1],
+  blue: [0, 0, 255, 1],
+  red: [255, 0, 0, 1],
+  green: [0, 128, 0, 1]
+};

package/src/globals/vectorTileEvents.js

@@ -0,0 +1 @@
+export const vectorTileEvents = 'move zoom rotate pitch resize viewreset';

package/src/globals/workerCogSource.js

@@ -0,0 +1 @@
+export const workerCogSource = new Map();