deck.gl 9.2.4 → 9.2.6

package/dist/dist.dev.js

@@ -995,7 +995,7 @@ var __exports__ = (() => {
         }
         /** The usage with which this buffer was created */
         usage;
-        /** For index buffers, whether indices are 16 or 32 bit */
+        /** For index buffers, whether indices are 8, 16 or 32 bit. Note: uint8 indices are automatically converted to uint16 for WebGPU compatibility */
         indexType;
         /** "Time" of last update, can be used to check if redraw is needed */
         updateTimestamp;
@@ -1006,6 +1006,8 @@ var __exports__ = (() => {
               deducedProps.indexType = "uint32";
             } else if (props.data instanceof Uint16Array) {
               deducedProps.indexType = "uint16";
+            } else if (props.data instanceof Uint8Array) {
+              deducedProps.indexType = "uint8";
             }
           }
           delete deducedProps.data;
@@ -1826,6 +1828,9 @@ or create a device with the 'debug: true' prop.`;
                 newProps.indexType = "uint32";
               } else if (props.data instanceof Uint16Array) {
                 newProps.indexType = "uint16";
+              } else if (props.data instanceof Uint8Array) {
+                newProps.data = new Uint16Array(props.data);
+                newProps.indexType = "uint16";
               }
             }
             if (!newProps.indexType) {
@@ -1907,7 +1912,7 @@ or create a device with the 'debug: true' prop.`;
         VERSION = (
           // Version detection using build plugin
           // @ts-expect-error no-undef
-          true ? "9.2.2" : "running from source"
+          true ? "9.2.6" : "running from source"
         );
         spector;
         preregisteredAdapters = /* @__PURE__ */ new Map();
@@ -7164,9 +7169,19 @@ ${source4}`;
           const { width, height, depth } = this;
           const { mipLevel = 0, byteOffset = 0, x: x4 = 0, y: y5 = 0, z: z4 = 0 } = options;
           const { glFormat, glType, compressed } = this;
-          const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, depth);
+          const glTarget = getWebGLCubeFaceTarget(this.glTarget, this.dimension, z4);
+          let unpackRowLength;
+          if (!this.compressed) {
+            const { bytesPerPixel } = this.device.getTextureFormatInfo(this.format);
+            if (bytesPerPixel) {
+              if (options.bytesPerRow % bytesPerPixel !== 0) {
+                throw new Error(`bytesPerRow (${options.bytesPerRow}) must be a multiple of bytesPerPixel (${bytesPerPixel}) for ${this.format}`);
+              }
+              unpackRowLength = options.bytesPerRow / bytesPerPixel;
+            }
+          }
           const glParameters = !this.compressed ? {
-            [3314]: options.bytesPerRow,
+            ...unpackRowLength !== void 0 ? { [3314]: unpackRowLength } : {},
             [32878]: options.rowsPerImage
           } : {};
           this.gl.bindTexture(glTarget, this.handle);
@@ -35247,9 +35262,10 @@ ${fragment}
      *
      * @param {Array} coords - world coordinates
      * @param {Array} pixel - [x,y] coordinates on screen
+     * @param {Array} startPixel - [x,y] screen position where pan started (optional, for delta-based panning)
      * @return {Object} props of the new viewport
      */
-    panByPosition(coords, pixel) {
+    panByPosition(coords, pixel, startPixel) {
       return null;
     }
     // INTERNAL METHODS
@@ -35475,7 +35491,7 @@ ${fragment}
     addMetersToLngLat(lngLatZ, xyz) {
       return addMetersToLngLat(lngLatZ, xyz);
     }
-    panByPosition(coords, pixel) {
+    panByPosition(coords, pixel, startPixel) {
       const fromLocation = pixelsToWorld(pixel, this.pixelUnprojectionMatrix);
       const toLocation = this.projectFlat(coords);
       const translate11 = vec2_exports.add([], toLocation, vec2_exports.negate([], fromLocation));
@@ -36393,12 +36409,12 @@ ${fragment}
         pipeline.hash = hash;
         cache3[hash] = { pipeline, useCount: 1 };
         if (this.debug) {
-          log2.warn(`${this}: ${pipeline} created, count=${cache3[hash].useCount}`)();
+          log2.log(3, `${this}: ${pipeline} created, count=${cache3[hash].useCount}`)();
         }
       } else {
         cache3[hash].useCount++;
         if (this.debug) {
-          log2.warn(`${this}: ${cache3[hash].pipeline} reused, count=${cache3[hash].useCount}, (id=${props.id})`)();
+          log2.log(3, `${this}: ${cache3[hash].pipeline} reused, count=${cache3[hash].useCount}, (id=${props.id})`)();
         }
       }
       return pipeline;
@@ -36420,12 +36436,12 @@ ${fragment}
         pipeline.hash = hash;
         cache3[hash] = { pipeline, useCount: 1 };
         if (this.debug) {
-          log2.warn(`${this}: ${pipeline} created, count=${cache3[hash].useCount}`)();
+          log2.log(3, `${this}: ${pipeline} created, count=${cache3[hash].useCount}`)();
         }
       } else {
         cache3[hash].useCount++;
         if (this.debug) {
-          log2.warn(`${this}: ${cache3[hash].pipeline} reused, count=${cache3[hash].useCount}, (id=${props.id})`)();
+          log2.log(3, `${this}: ${cache3[hash].pipeline} reused, count=${cache3[hash].useCount}, (id=${props.id})`)();
         }
       }
       return pipeline;
@@ -36441,13 +36457,13 @@ ${fragment}
       if (cache3[hash].useCount === 0) {
         this._destroyPipeline(pipeline);
         if (this.debug) {
-          log2.warn(`${this}: ${pipeline} released and destroyed`)();
+          log2.log(3, `${this}: ${pipeline} released and destroyed`)();
         }
       } else if (cache3[hash].useCount < 0) {
         log2.error(`${this}: ${pipeline} released, useCount < 0, resetting`)();
         cache3[hash].useCount = 0;
       } else if (this.debug) {
-        log2.warn(`${this}: ${pipeline} released, count=${cache3[hash].useCount}`)();
+        log2.log(3, `${this}: ${pipeline} released, count=${cache3[hash].useCount}`)();
       }
     }
     // PRIVATE
@@ -36552,12 +36568,12 @@ ${fragment}
         });
         this._cache[key] = cacheEntry = { shader, useCount: 1 };
         if (this.debug) {
-          log2.warn(`${this}: Created new shader ${shader.id}`)();
+          log2.log(3, `${this}: Created new shader ${shader.id}`)();
         }
       } else {
         cacheEntry.useCount++;
         if (this.debug) {
-          log2.warn(`${this}: Reusing shader ${cacheEntry.shader.id} count=${cacheEntry.useCount}`)();
+          log2.log(3, `${this}: Reusing shader ${cacheEntry.shader.id} count=${cacheEntry.useCount}`)();
         }
       }
       return cacheEntry.shader;
@@ -36577,13 +36593,13 @@ ${fragment}
             delete this._cache[key];
             cacheEntry.shader.destroy();
             if (this.debug) {
-              log2.warn(`${this}: Releasing shader ${shader.id}, destroyed`)();
+              log2.log(3, `${this}: Releasing shader ${shader.id}, destroyed`)();
             }
           }
         } else if (cacheEntry.useCount < 0) {
           throw new Error(`ShaderFactory: Shader ${shader.id} released too many times`);
         } else if (this.debug) {
-          log2.warn(`${this}: Releasing shader ${shader.id} count=${cacheEntry.useCount}`)();
+          log2.log(3, `${this}: Releasing shader ${shader.id} count=${cacheEntry.useCount}`)();
         }
       }
     }
@@ -40590,6 +40606,174 @@ void main() {
     }
   };
 
+  // ../core/src/viewports/globe-viewport.ts
+  var DEGREES_TO_RADIANS6 = Math.PI / 180;
+  var RADIANS_TO_DEGREES3 = 180 / Math.PI;
+  var EARTH_RADIUS = 6370972;
+  var GLOBE_RADIUS = 256;
+  function getDistanceScales2() {
+    const unitsPerMeter2 = GLOBE_RADIUS / EARTH_RADIUS;
+    const unitsPerDegree = Math.PI / 180 * GLOBE_RADIUS;
+    return {
+      unitsPerMeter: [unitsPerMeter2, unitsPerMeter2, unitsPerMeter2],
+      unitsPerMeter2: [0, 0, 0],
+      metersPerUnit: [1 / unitsPerMeter2, 1 / unitsPerMeter2, 1 / unitsPerMeter2],
+      unitsPerDegree: [unitsPerDegree, unitsPerDegree, unitsPerMeter2],
+      unitsPerDegree2: [0, 0, 0],
+      degreesPerUnit: [1 / unitsPerDegree, 1 / unitsPerDegree, 1 / unitsPerMeter2]
+    };
+  }
+  var GlobeViewport = class extends Viewport {
+    constructor(opts = {}) {
+      const {
+        longitude = 0,
+        zoom = 0,
+        // Matches Maplibre defaults
+        // https://github.com/maplibre/maplibre-gl-js/blob/f8ab4b48d59ab8fe7b068b102538793bbdd4c848/src/geo/projection/globe_transform.ts#L632-L633
+        nearZMultiplier = 0.5,
+        farZMultiplier = 1,
+        resolution = 10
+      } = opts;
+      let { latitude = 0, height, altitude = 1.5, fovy } = opts;
+      latitude = Math.max(Math.min(latitude, MAX_LATITUDE), -MAX_LATITUDE);
+      height = height || 1;
+      if (fovy) {
+        altitude = fovyToAltitude(fovy);
+      } else {
+        fovy = altitudeToFovy(altitude);
+      }
+      const scale24 = Math.pow(2, zoom - zoomAdjust(latitude));
+      const nearZ = opts.nearZ ?? nearZMultiplier;
+      const farZ = opts.farZ ?? (altitude + GLOBE_RADIUS * 2 * scale24 / height) * farZMultiplier;
+      const viewMatrix2 = new Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] });
+      viewMatrix2.rotateX(latitude * DEGREES_TO_RADIANS6);
+      viewMatrix2.rotateZ(-longitude * DEGREES_TO_RADIANS6);
+      viewMatrix2.scale(scale24 / height);
+      super({
+        ...opts,
+        // x, y, width,
+        height,
+        // view matrix
+        viewMatrix: viewMatrix2,
+        longitude,
+        latitude,
+        zoom,
+        // projection matrix parameters
+        distanceScales: getDistanceScales2(),
+        fovy,
+        focalDistance: altitude,
+        near: nearZ,
+        far: farZ
+      });
+      this.scale = scale24;
+      this.latitude = latitude;
+      this.longitude = longitude;
+      this.fovy = fovy;
+      this.resolution = resolution;
+    }
+    get projectionMode() {
+      return PROJECTION_MODE.GLOBE;
+    }
+    getDistanceScales() {
+      return this.distanceScales;
+    }
+    getBounds(options = {}) {
+      const unprojectOption = { targetZ: options.z || 0 };
+      const left = this.unproject([0, this.height / 2], unprojectOption);
+      const top = this.unproject([this.width / 2, 0], unprojectOption);
+      const right = this.unproject([this.width, this.height / 2], unprojectOption);
+      const bottom = this.unproject([this.width / 2, this.height], unprojectOption);
+      if (right[0] < this.longitude)
+        right[0] += 360;
+      if (left[0] > this.longitude)
+        left[0] -= 360;
+      return [
+        Math.min(left[0], right[0], top[0], bottom[0]),
+        Math.min(left[1], right[1], top[1], bottom[1]),
+        Math.max(left[0], right[0], top[0], bottom[0]),
+        Math.max(left[1], right[1], top[1], bottom[1])
+      ];
+    }
+    unproject(xyz, { topLeft = true, targetZ } = {}) {
+      const [x4, y5, z4] = xyz;
+      const y22 = topLeft ? y5 : this.height - y5;
+      const { pixelUnprojectionMatrix } = this;
+      let coord;
+      if (Number.isFinite(z4)) {
+        coord = transformVector2(pixelUnprojectionMatrix, [x4, y22, z4, 1]);
+      } else {
+        const coord0 = transformVector2(pixelUnprojectionMatrix, [x4, y22, -1, 1]);
+        const coord1 = transformVector2(pixelUnprojectionMatrix, [x4, y22, 1, 1]);
+        const lt2 = ((targetZ || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+        const lSqr = vec3_exports.sqrLen(vec3_exports.sub([], coord0, coord1));
+        const l0Sqr = vec3_exports.sqrLen(coord0);
+        const l1Sqr = vec3_exports.sqrLen(coord1);
+        const sSqr = (4 * l0Sqr * l1Sqr - (lSqr - l0Sqr - l1Sqr) ** 2) / 16;
+        const dSqr = 4 * sSqr / lSqr;
+        const r0 = Math.sqrt(l0Sqr - dSqr);
+        const dr = Math.sqrt(Math.max(0, lt2 * lt2 - dSqr));
+        const t5 = (r0 - dr) / Math.sqrt(lSqr);
+        coord = vec3_exports.lerp([], coord0, coord1, t5);
+      }
+      const [X2, Y2, Z2] = this.unprojectPosition(coord);
+      if (Number.isFinite(z4)) {
+        return [X2, Y2, Z2];
+      }
+      return Number.isFinite(targetZ) ? [X2, Y2, targetZ] : [X2, Y2];
+    }
+    projectPosition(xyz) {
+      const [lng, lat, Z2 = 0] = xyz;
+      const lambda = lng * DEGREES_TO_RADIANS6;
+      const phi = lat * DEGREES_TO_RADIANS6;
+      const cosPhi = Math.cos(phi);
+      const D4 = (Z2 / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+      return [Math.sin(lambda) * cosPhi * D4, -Math.cos(lambda) * cosPhi * D4, Math.sin(phi) * D4];
+    }
+    unprojectPosition(xyz) {
+      const [x4, y5, z4] = xyz;
+      const D4 = vec3_exports.len(xyz);
+      const phi = Math.asin(z4 / D4);
+      const lambda = Math.atan2(x4, -y5);
+      const lng = lambda * RADIANS_TO_DEGREES3;
+      const lat = phi * RADIANS_TO_DEGREES3;
+      const Z2 = (D4 / GLOBE_RADIUS - 1) * EARTH_RADIUS;
+      return [lng, lat, Z2];
+    }
+    projectFlat(xyz) {
+      return xyz;
+    }
+    unprojectFlat(xyz) {
+      return xyz;
+    }
+    /**
+     * Pan the globe using delta-based movement
+     * @param coords - the geographic coordinates where the pan started
+     * @param pixel - the current screen position
+     * @param startPixel - the screen position where the pan started
+     * @returns updated viewport options with new longitude/latitude
+     */
+    panByPosition([startLng, startLat, startZoom], pixel, startPixel) {
+      const scale24 = Math.pow(2, this.zoom - zoomAdjust(this.latitude));
+      const rotationSpeed = 0.25 / scale24;
+      const longitude = startLng + rotationSpeed * (startPixel[0] - pixel[0]);
+      let latitude = startLat - rotationSpeed * (startPixel[1] - pixel[1]);
+      latitude = Math.max(Math.min(latitude, MAX_LATITUDE), -MAX_LATITUDE);
+      const out = { longitude, latitude, zoom: startZoom - zoomAdjust(startLat) };
+      out.zoom += zoomAdjust(out.latitude);
+      return out;
+    }
+  };
+  GlobeViewport.displayName = "GlobeViewport";
+  function zoomAdjust(latitude) {
+    const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
+    return Math.log2(scaleAdjust);
+  }
+  function transformVector2(matrix, vector) {
+    const result = vec4_exports.transformMat4([], vector, matrix);
+    vec4_exports.scale(result, result, 1 / result[3]);
+    return result;
+  }
+
   // ../core/src/transitions/linear-interpolator.ts
   var DEFAULT_PROPS3 = ["longitude", "latitude", "zoom", "bearing", "pitch"];
   var DEFAULT_REQUIRED_PROPS = ["longitude", "latitude", "zoom"];
@@ -40617,16 +40801,21 @@ void main() {
       const result = super.initializeProps(startProps, endProps);
       const { makeViewport: makeViewport2, around } = this.opts;
       if (makeViewport2 && around) {
-        const startViewport = makeViewport2(startProps);
-        const endViewport = makeViewport2(endProps);
-        const aroundPosition = startViewport.unproject(around);
-        result.start.around = around;
-        Object.assign(result.end, {
-          around: endViewport.project(aroundPosition),
-          aroundPosition,
-          width: endProps.width,
-          height: endProps.height
-        });
+        const TestViewport = makeViewport2(startProps);
+        if (TestViewport instanceof GlobeViewport) {
+          log_default.warn("around not supported in GlobeView")();
+        } else {
+          const startViewport = makeViewport2(startProps);
+          const endViewport = makeViewport2(endProps);
+          const aroundPosition = startViewport.unproject(around);
+          result.start.around = around;
+          Object.assign(result.end, {
+            around: endViewport.project(aroundPosition),
+            aroundPosition,
+            width: endProps.width,
+            height: endProps.height
+          });
+        }
       }
       return result;
     }
@@ -41016,6 +41205,9 @@ void main() {
           isPanning: true
         }
       );
+      if (!smooth) {
+        this._setInteractionState({ isZooming: false, isPanning: false });
+      }
       return true;
     }
     _onMultiPanStart(event) {
@@ -42681,7 +42873,7 @@ void main() {
     fill: { top: 0, left: 0, bottom: 0, right: 0 }
   };
   var DEFAULT_PLACEMENT = "top-left";
-  var ROOT_CONTAINER_ID = "__root";
+  var ROOT_CONTAINER_ID = "root";
   var WidgetManager = class {
     constructor({ deck, parentElement }) {
       /** Widgets added via the imperative API */
@@ -42817,11 +43009,12 @@ void main() {
     /** Initialize new widget */
     _addWidget(widget) {
       const { viewId = null, placement = DEFAULT_PLACEMENT } = widget;
+      const container = widget.props._container ?? viewId;
       widget.widgetManager = this;
       widget.deck = this.deck;
       widget.rootElement = widget._onAdd({ deck: this.deck, viewId });
       if (widget.rootElement) {
-        this._getContainer(viewId, placement).append(widget.rootElement);
+        this._getContainer(container, placement).append(widget.rootElement);
       }
       widget.updateHTML();
     }
@@ -42836,8 +43029,11 @@ void main() {
       widget.widgetManager = void 0;
     }
     /** Get a container element based on view and placement */
-    _getContainer(viewId, placement) {
-      const containerId = viewId || ROOT_CONTAINER_ID;
+    _getContainer(viewIdOrContainer, placement) {
+      if (viewIdOrContainer && typeof viewIdOrContainer !== "string") {
+        return viewIdOrContainer;
+      }
+      const containerId = viewIdOrContainer || ROOT_CONTAINER_ID;
       let viewContainer = this.containers[containerId];
       if (!viewContainer) {
         viewContainer = document.createElement("div");
@@ -42906,7 +43102,7 @@ void main() {
   var Widget = class {
     constructor(props) {
       /**
-       * The view id that this widget is being attached to. Default `null`.
+       * The view id that this widget controls. Default `null`.
        * If assigned, this widget will only respond to events occurred inside the specific view that matches this id.
        */
       this.viewId = null;
@@ -42999,6 +43195,7 @@ void main() {
   Widget.defaultProps = {
     id: "widget",
     style: {},
+    _container: null,
     className: ""
   };
 
@@ -43575,7 +43772,12 @@ void main() {
     _createDevice(props) {
       const canvasContextUserProps = this.props.deviceProps?.createCanvasContext;
       const canvasContextProps = typeof canvasContextUserProps === "object" ? canvasContextUserProps : void 0;
-      const deviceProps = { adapters: [], ...props.deviceProps };
+      const deviceProps = {
+        adapters: [],
+        _cacheShaders: true,
+        _cachePipelines: true,
+        ...props.deviceProps
+      };
       if (!deviceProps.adapters.includes(webgl2Adapter)) {
         deviceProps.adapters.push(webgl2Adapter);
       }
@@ -47867,159 +48069,6 @@ void main(void) {
   };
   CompositeLayer.layerName = "CompositeLayer";
 
-  // ../core/src/viewports/globe-viewport.ts
-  var DEGREES_TO_RADIANS6 = Math.PI / 180;
-  var RADIANS_TO_DEGREES3 = 180 / Math.PI;
-  var EARTH_RADIUS = 6370972;
-  var GLOBE_RADIUS = 256;
-  function getDistanceScales2() {
-    const unitsPerMeter2 = GLOBE_RADIUS / EARTH_RADIUS;
-    const unitsPerDegree = Math.PI / 180 * GLOBE_RADIUS;
-    return {
-      unitsPerMeter: [unitsPerMeter2, unitsPerMeter2, unitsPerMeter2],
-      unitsPerMeter2: [0, 0, 0],
-      metersPerUnit: [1 / unitsPerMeter2, 1 / unitsPerMeter2, 1 / unitsPerMeter2],
-      unitsPerDegree: [unitsPerDegree, unitsPerDegree, unitsPerMeter2],
-      unitsPerDegree2: [0, 0, 0],
-      degreesPerUnit: [1 / unitsPerDegree, 1 / unitsPerDegree, 1 / unitsPerMeter2]
-    };
-  }
-  var GlobeViewport = class extends Viewport {
-    constructor(opts = {}) {
-      const {
-        longitude = 0,
-        zoom = 0,
-        // Matches Maplibre defaults
-        // https://github.com/maplibre/maplibre-gl-js/blob/f8ab4b48d59ab8fe7b068b102538793bbdd4c848/src/geo/projection/globe_transform.ts#L632-L633
-        nearZMultiplier = 0.5,
-        farZMultiplier = 1,
-        resolution = 10
-      } = opts;
-      let { latitude = 0, height, altitude = 1.5, fovy } = opts;
-      latitude = Math.max(Math.min(latitude, MAX_LATITUDE), -MAX_LATITUDE);
-      height = height || 1;
-      if (fovy) {
-        altitude = fovyToAltitude(fovy);
-      } else {
-        fovy = altitudeToFovy(altitude);
-      }
-      const scaleAdjust = 1 / Math.PI / Math.cos(latitude * Math.PI / 180);
-      const scale24 = Math.pow(2, zoom) * scaleAdjust;
-      const nearZ = opts.nearZ ?? nearZMultiplier;
-      const farZ = opts.farZ ?? (altitude + GLOBE_RADIUS * 2 * scale24 / height) * farZMultiplier;
-      const viewMatrix2 = new Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] });
-      viewMatrix2.rotateX(latitude * DEGREES_TO_RADIANS6);
-      viewMatrix2.rotateZ(-longitude * DEGREES_TO_RADIANS6);
-      viewMatrix2.scale(scale24 / height);
-      super({
-        ...opts,
-        // x, y, width,
-        height,
-        // view matrix
-        viewMatrix: viewMatrix2,
-        longitude,
-        latitude,
-        zoom,
-        // projection matrix parameters
-        distanceScales: getDistanceScales2(),
-        fovy,
-        focalDistance: altitude,
-        near: nearZ,
-        far: farZ
-      });
-      this.scale = scale24;
-      this.latitude = latitude;
-      this.longitude = longitude;
-      this.resolution = resolution;
-    }
-    get projectionMode() {
-      return PROJECTION_MODE.GLOBE;
-    }
-    getDistanceScales() {
-      return this.distanceScales;
-    }
-    getBounds(options = {}) {
-      const unprojectOption = { targetZ: options.z || 0 };
-      const left = this.unproject([0, this.height / 2], unprojectOption);
-      const top = this.unproject([this.width / 2, 0], unprojectOption);
-      const right = this.unproject([this.width, this.height / 2], unprojectOption);
-      const bottom = this.unproject([this.width / 2, this.height], unprojectOption);
-      if (right[0] < this.longitude)
-        right[0] += 360;
-      if (left[0] > this.longitude)
-        left[0] -= 360;
-      return [
-        Math.min(left[0], right[0], top[0], bottom[0]),
-        Math.min(left[1], right[1], top[1], bottom[1]),
-        Math.max(left[0], right[0], top[0], bottom[0]),
-        Math.max(left[1], right[1], top[1], bottom[1])
-      ];
-    }
-    unproject(xyz, { topLeft = true, targetZ } = {}) {
-      const [x4, y5, z4] = xyz;
-      const y22 = topLeft ? y5 : this.height - y5;
-      const { pixelUnprojectionMatrix } = this;
-      let coord;
-      if (Number.isFinite(z4)) {
-        coord = transformVector2(pixelUnprojectionMatrix, [x4, y22, z4, 1]);
-      } else {
-        const coord0 = transformVector2(pixelUnprojectionMatrix, [x4, y22, -1, 1]);
-        const coord1 = transformVector2(pixelUnprojectionMatrix, [x4, y22, 1, 1]);
-        const lt2 = ((targetZ || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
-        const lSqr = vec3_exports.sqrLen(vec3_exports.sub([], coord0, coord1));
-        const l0Sqr = vec3_exports.sqrLen(coord0);
-        const l1Sqr = vec3_exports.sqrLen(coord1);
-        const sSqr = (4 * l0Sqr * l1Sqr - (lSqr - l0Sqr - l1Sqr) ** 2) / 16;
-        const dSqr = 4 * sSqr / lSqr;
-        const r0 = Math.sqrt(l0Sqr - dSqr);
-        const dr = Math.sqrt(Math.max(0, lt2 * lt2 - dSqr));
-        const t5 = (r0 - dr) / Math.sqrt(lSqr);
-        coord = vec3_exports.lerp([], coord0, coord1, t5);
-      }
-      const [X2, Y2, Z2] = this.unprojectPosition(coord);
-      if (Number.isFinite(z4)) {
-        return [X2, Y2, Z2];
-      }
-      return Number.isFinite(targetZ) ? [X2, Y2, targetZ] : [X2, Y2];
-    }
-    projectPosition(xyz) {
-      const [lng, lat, Z2 = 0] = xyz;
-      const lambda = lng * DEGREES_TO_RADIANS6;
-      const phi = lat * DEGREES_TO_RADIANS6;
-      const cosPhi = Math.cos(phi);
-      const D4 = (Z2 / EARTH_RADIUS + 1) * GLOBE_RADIUS;
-      return [Math.sin(lambda) * cosPhi * D4, -Math.cos(lambda) * cosPhi * D4, Math.sin(phi) * D4];
-    }
-    unprojectPosition(xyz) {
-      const [x4, y5, z4] = xyz;
-      const D4 = vec3_exports.len(xyz);
-      const phi = Math.asin(z4 / D4);
-      const lambda = Math.atan2(x4, -y5);
-      const lng = lambda * RADIANS_TO_DEGREES3;
-      const lat = phi * RADIANS_TO_DEGREES3;
-      const Z2 = (D4 / GLOBE_RADIUS - 1) * EARTH_RADIUS;
-      return [lng, lat, Z2];
-    }
-    projectFlat(xyz) {
-      return xyz;
-    }
-    unprojectFlat(xyz) {
-      return xyz;
-    }
-    panByPosition(coords, pixel) {
-      const fromPosition = this.unproject(pixel);
-      return {
-        longitude: coords[0] - fromPosition[0] + this.longitude,
-        latitude: coords[1] - fromPosition[1] + this.latitude
-      };
-    }
-  };
-  function transformVector2(matrix, vector) {
-    const result = vec4_exports.transformMat4([], vector, matrix);
-    vec4_exports.scale(result, result, 1 / result[3]);
-    return result;
-  }
-
   // ../core/src/viewports/orbit-viewport.ts
   var DEGREES_TO_RADIANS7 = Math.PI / 180;
   function getViewMatrix2({
@@ -48079,6 +48128,11 @@ void main(void) {
         position: target2,
         zoom
       });
+      this.target = target2;
+      this.orbitAxis = orbitAxis;
+      this.rotationX = rotationX;
+      this.rotationOrbit = rotationOrbit;
+      this.fovy = fovy;
       this.projectedCenter = this.project(this.center);
     }
     unproject(xyz, { topLeft = true } = {}) {
@@ -48087,7 +48141,7 @@ void main(void) {
       const [X2, Y2, Z2] = pixelsToWorld([x4, y22, z4], this.pixelUnprojectionMatrix);
       return [X2, Y2, Z2];
     }
-    panByPosition(coords, pixel) {
+    panByPosition(coords, pixel, startPixel) {
       const p0 = this.project(coords);
       const nextCenter = [
         this.width / 2 + p0[0] - pixel[0],
@@ -48099,6 +48153,7 @@ void main(void) {
       };
     }
   };
+  OrbitViewport.displayName = "OrbitViewport";
 
   // ../core/src/viewports/orthographic-viewport.ts
   var viewMatrix = new Matrix4().lookAt({ eye: [0, 0, 1] });
@@ -48143,8 +48198,8 @@ void main(void) {
         padding = null,
         flipY = true
       } = props;
-      const zoomX = Array.isArray(zoom) ? zoom[0] : zoom;
-      const zoomY = Array.isArray(zoom) ? zoom[1] : zoom;
+      const zoomX = props.zoomX ?? (Array.isArray(zoom) ? zoom[0] : zoom);
+      const zoomY = props.zoomY ?? (Array.isArray(zoom) ? zoom[1] : zoom);
       const zoom_ = Math.min(zoomX, zoomY);
       const scale24 = Math.pow(2, zoom_);
       let distanceScales;
@@ -48173,6 +48228,10 @@ void main(void) {
         zoom: zoom_,
         distanceScales
       });
+      this.target = target2;
+      this.zoomX = zoomX;
+      this.zoomY = zoomY;
+      this.flipY = flipY;
     }
     projectFlat([X2, Y2]) {
       const { unitsPerMeter: unitsPerMeter2 } = this.distanceScales;
@@ -48183,7 +48242,7 @@ void main(void) {
       return [x4 * metersPerUnit[0], y5 * metersPerUnit[1]];
     }
     /* Needed by LinearInterpolator */
-    panByPosition(coords, pixel) {
+    panByPosition(coords, pixel, startPixel) {
       const fromLocation = pixelsToWorld(pixel, this.pixelUnprojectionMatrix);
       const toLocation = this.projectFlat(coords);
       const translate11 = vec2_exports.add([], toLocation, vec2_exports.negate([], fromLocation));
@@ -48191,6 +48250,7 @@ void main(void) {
       return { target: this.unprojectFlat(newCenter) };
     }
   };
+  OrthographicViewport.displayName = "OrthographicViewport";
 
   // ../core/src/viewports/first-person-viewport.ts
   var FirstPersonViewport = class extends Viewport {
@@ -48213,8 +48273,12 @@ void main(void) {
       });
       this.latitude = latitude;
       this.longitude = longitude;
+      this.pitch = pitch;
+      this.bearing = bearing;
+      this.up = up;
     }
   };
+  FirstPersonViewport.displayName = "FirstPersonViewport";
 
   // ../core/src/controllers/first-person-controller.ts
   var MOVEMENT_SPEED = 20;
@@ -48905,11 +48969,50 @@ void main(void) {
 
   // ../core/src/controllers/globe-controller.ts
   var GlobeState = class extends MapState {
-    // Apply any constraints (mathematical or defined by _viewportProps) to map state
+    constructor(options) {
+      const { startPanPos, ...mapStateOptions } = options;
+      super(mapStateOptions);
+      if (startPanPos !== void 0) {
+        this._state.startPanPos = startPanPos;
+      }
+    }
+    panStart({ pos }) {
+      const { latitude, longitude, zoom } = this.getViewportProps();
+      return this._getUpdatedState({
+        startPanLngLat: [longitude, latitude],
+        startPanPos: pos,
+        startZoom: zoom
+      });
+    }
+    pan({ pos, startPos }) {
+      const state = this.getState();
+      const startPanLngLat = state.startPanLngLat || this._unproject(startPos);
+      if (!startPanLngLat)
+        return this;
+      const startZoom = state.startZoom ?? this.getViewportProps().zoom;
+      const startPanPos = state.startPanPos || startPos;
+      const coords = [startPanLngLat[0], startPanLngLat[1], startZoom];
+      const viewport = this.makeViewport(this.getViewportProps());
+      const newProps = viewport.panByPosition(coords, pos, startPanPos);
+      return this._getUpdatedState(newProps);
+    }
+    panEnd() {
+      return this._getUpdatedState({
+        startPanLngLat: null,
+        startPanPos: null,
+        startZoom: null
+      });
+    }
+    zoom({ scale: scale24 }) {
+      const startZoom = this.getState().startZoom || this.getViewportProps().zoom;
+      const zoom = startZoom + Math.log2(scale24);
+      return this._getUpdatedState({ zoom });
+    }
     applyConstraints(props) {
-      const { maxZoom, minZoom, zoom } = props;
-      props.zoom = clamp(zoom, minZoom, maxZoom);
-      const { longitude, latitude } = props;
+      const { longitude, latitude, maxZoom, minZoom, zoom } = props;
+      const ZOOM0 = zoomAdjust(0);
+      const zoomAdjustment = zoomAdjust(latitude) - ZOOM0;
+      props.zoom = clamp(zoom, minZoom + zoomAdjustment, maxZoom + zoomAdjustment);
       if (longitude < -180 || longitude > 180) {
         props.longitude = mod2(longitude + 180, 360) - 180;
       }
@@ -50409,10 +50512,9 @@ void main(void) {
             this._samplerParameters || DEFAULT_SAMPLER_PARAMETERS
           );
         }
-        this.onUpdate();
+        this.onUpdate(true);
         this._canvas = this._canvas || document.createElement("canvas");
         this._loadIcons(icons);
-        this._texture?.generateMipmapsWebGL();
       }
     }
     _loadIcons(icons) {
@@ -50424,24 +50526,28 @@ void main(void) {
         load(icon.url, this._loadOptions).then((imageData) => {
           const id = getIconId(icon);
           const iconDef = this._mapping[id];
-          const { x: x4, y: y5, width: maxWidth, height: maxHeight } = iconDef;
+          const { x: initialX, y: initialY, width: maxWidth, height: maxHeight } = iconDef;
           const { image, width, height } = resizeImage(
             ctx2,
             imageData,
             maxWidth,
             maxHeight
           );
+          const x4 = initialX + (maxWidth - width) / 2;
+          const y5 = initialY + (maxHeight - height) / 2;
           this._texture?.copyExternalImage({
             image,
-            x: x4 + (maxWidth - width) / 2,
-            y: y5 + (maxHeight - height) / 2,
+            x: x4,
+            y: y5,
             width,
             height
           });
+          iconDef.x = x4;
+          iconDef.y = y5;
           iconDef.width = width;
           iconDef.height = height;
           this._texture?.generateMipmapsWebGL();
-          this.onUpdate();
+          this.onUpdate(width !== maxWidth || height !== maxHeight);
         }).catch((error) => {
           this.onError({
             url: icon.url,
@@ -50624,8 +50730,13 @@ void main(void) {
         isInstanced: true
       });
     }
-    _onUpdate() {
-      this.setNeedsRedraw();
+    _onUpdate(didFrameChange) {
+      if (didFrameChange) {
+        this.getAttributeManager()?.invalidate("getIcon");
+        this.setNeedsUpdate();
+      } else {
+        this.setNeedsRedraw();
+      }
     }
     _onError(evt) {
       const onIconError = this.getCurrentLayer()?.props.onIconError;
@@ -101971,6 +102082,33 @@ void main() {
       clearCanvas: false
     });
   }
+  function drawLayerGroup(deck, map6, group, renderParameters) {
+    let { currentViewport } = deck.userData;
+    let clearStack = false;
+    if (!currentViewport) {
+      currentViewport = getViewport(deck, map6, renderParameters);
+      deck.userData.currentViewport = currentViewport;
+      clearStack = true;
+    }
+    if (!deck.isInitialized) {
+      return;
+    }
+    deck._drawLayers("mapbox-repaint", {
+      viewports: [currentViewport],
+      layerFilter: (params) => {
+        if (deck.props.layerFilter && !deck.props.layerFilter(params)) {
+          return false;
+        }
+        const layer = params.layer;
+        if (layer.props.beforeId === group.beforeId && layer.props.slot === group.slot) {
+          return true;
+        }
+        return false;
+      },
+      clearStack,
+      clearCanvas: false
+    });
+  }
   function getProjection(map6) {
     const projection = map6.getProjection?.();
     const type = (
@@ -102205,11 +102343,92 @@ void main() {
     }
   }
 
+  // ../mapbox/src/mapbox-layer-group.ts
+  var MapboxLayerGroup = class {
+    /* eslint-disable no-this-before-super */
+    constructor(props) {
+      assert8(props.id, "id is required");
+      this.id = props.id;
+      this.type = "custom";
+      this.renderingMode = props.renderingMode || "3d";
+      this.slot = props.slot;
+      this.beforeId = props.beforeId;
+      this.map = null;
+      this.deck = null;
+    }
+    /* Mapbox custom layer methods */
+    onAdd(map6, gl) {
+      this.map = map6;
+      this.deck = getDeckInstance({ map: map6, gl });
+    }
+    render(gl, renderParameters) {
+      if (!this.deck || !this.map)
+        return;
+      drawLayerGroup(this.deck, this.map, this, renderParameters);
+    }
+  };
+
+  // ../mapbox/src/resolve-layer-groups.ts
+  var UNDEFINED_BEFORE_ID2 = "__UNDEFINED__";
+  function getLayerGroupId(layer) {
+    if (layer.props.beforeId) {
+      return `deck-layer-group-before:${layer.props.beforeId}`;
+    } else if (layer.props.slot) {
+      return `deck-layer-group-slot:${layer.props.slot}`;
+    }
+    return "deck-layer-group-last";
+  }
+  function resolveLayerGroups(map6, oldLayers, newLayers) {
+    if (!map6 || !map6.style || !map6.style._loaded) {
+      return;
+    }
+    const layers = flatten(newLayers, Boolean);
+    if (oldLayers !== newLayers) {
+      const prevLayers = flatten(oldLayers, Boolean);
+      const prevLayerGroupIds = new Set(prevLayers.map((l5) => getLayerGroupId(l5)));
+      const newLayerGroupIds = new Set(layers.map((l5) => getLayerGroupId(l5)));
+      for (const groupId of prevLayerGroupIds) {
+        if (!newLayerGroupIds.has(groupId)) {
+          if (map6.getLayer(groupId)) {
+            map6.removeLayer(groupId);
+          }
+        }
+      }
+    }
+    const layerGroups = {};
+    for (const layer of layers) {
+      const groupId = getLayerGroupId(layer);
+      const mapboxGroup = map6.getLayer(groupId);
+      if (mapboxGroup) {
+        const groupInstance = mapboxGroup.implementation || mapboxGroup;
+        layerGroups[groupId] = groupInstance;
+      } else {
+        const newGroup = new MapboxLayerGroup({
+          id: groupId,
+          slot: layer.props.slot,
+          beforeId: layer.props.beforeId
+        });
+        layerGroups[groupId] = newGroup;
+        map6.addLayer(newGroup, layer.props.beforeId);
+      }
+    }
+    const mapLayers = map6.style._order;
+    for (const [groupId, group] of Object.entries(layerGroups)) {
+      const beforeId = group.beforeId || UNDEFINED_BEFORE_ID2;
+      const expectedGroupIndex = beforeId === UNDEFINED_BEFORE_ID2 ? mapLayers.length : mapLayers.indexOf(beforeId);
+      const currentGropupIndex = mapLayers.indexOf(groupId);
+      if (currentGropupIndex !== expectedGroupIndex - 1) {
+        const moveBeforeId = beforeId === UNDEFINED_BEFORE_ID2 ? void 0 : beforeId;
+        map6.moveLayer(groupId, moveBeforeId);
+      }
+    }
+  }
+
   // ../mapbox/src/mapbox-overlay.ts
   var MapboxOverlay = class {
     constructor(props) {
       this._handleStyleChange = () => {
-        resolveLayers(this._map, this._deck, this._props.layers, this._props.layers);
+        this._resolveLayers(this._map, this._deck, this._props.layers, this._props.layers);
         if (!this._map)
           return;
         const projection = getProjection(this._map);
@@ -102303,6 +102522,7 @@ void main() {
       };
       const { interleaved = false } = props;
       this._interleaved = interleaved;
+      this._renderLayersInGroups = props._renderLayersInGroups || false;
       this._props = this.filterProps(props);
     }
     /** Filter out props to pass to Deck **/
@@ -102316,7 +102536,7 @@ void main() {
     /** Update (partial) props of the underlying Deck instance. */
     setProps(props) {
       if (this._interleaved && props.layers) {
-        resolveLayers(this._map, this._deck, this._props.layers, props.layers);
+        this._resolveLayers(this._map, this._deck, this._props.layers, props.layers);
       }
       Object.assign(this._props, this.filterProps(props));
       if (this._deck && this._map) {
@@ -102383,9 +102603,16 @@ void main() {
         })
       });
       map6.on("styledata", this._handleStyleChange);
-      resolveLayers(map6, this._deck, [], this._props.layers);
+      this._resolveLayers(map6, this._deck, [], this._props.layers);
       return document.createElement("div");
     }
+    _resolveLayers(map6, deck, prevLayers, newLayers) {
+      if (this._renderLayersInGroups) {
+        resolveLayerGroups(map6, prevLayers, newLayers);
+      } else {
+        resolveLayers(map6, deck, prevLayers, newLayers);
+      }
+    }
     /** Called when the control is removed from a map */
     onRemove() {
       const map6 = this._map;
@@ -102415,7 +102642,7 @@ void main() {
     }
     _onRemoveInterleaved(map6) {
       map6.off("styledata", this._handleStyleChange);
-      resolveLayers(map6, this._deck, this._props.layers, []);
+      this._resolveLayers(map6, this._deck, this._props.layers, []);
       removeDeckInstance(map6);
     }
     getDefaultPosition() {