@deck.gl/widgets 9.4.0-beta.1 → 9.4.0-beta.3

package/dist/index.cjs

@@ -15,7 +15,7 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
 
 // dist/index.js
 var index_exports = {};
@@ -126,6 +126,10 @@ var import_core = require("@math.gl/core");
 function createMat4() {
   return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
 }
+function mod(value, divisor) {
+  const modulus = value % divisor;
+  return modulus < 0 ? divisor + modulus : modulus;
+}
 function getCameraPosition(viewMatrixInverse) {
   return [viewMatrixInverse[12], viewMatrixInverse[13], viewMatrixInverse[14]];
 }
@@ -246,8 +250,8 @@ var _Viewport = class _Viewport {
     }
     return PROJECTION_MODE.IDENTITY;
   }
-  // Two viewports are equal if width and height are identical, and if
-  // their view and projection matrices are (approximately) equal.
+  // Two viewports are equal if their dimensions, common-space scale, and
+  // view and projection matrices are (approximately) equal.
   equals(viewport) {
     if (!(viewport instanceof _Viewport)) {
       return false;
@@ -255,7 +259,7 @@ var _Viewport = class _Viewport {
     if (this === viewport) {
       return true;
     }
-    return viewport.width === this.width && viewport.height === this.height && viewport.scale === this.scale && (0, import_core2.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core2.equals)(viewport.viewMatrix, this.viewMatrix);
+    return viewport.width === this.width && viewport.height === this.height && viewport.scale === this.scale && viewport.projectionMode === this.projectionMode && viewport.resolution === this.resolution && (0, import_core2.equals)(viewport.distanceScales.unitsPerMeter, this.distanceScales.unitsPerMeter) && (0, import_core2.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core2.equals)(viewport.viewMatrix, this.viewMatrix);
   }
   /**
    * Projects xyz (possibly latitude and longitude) to pixel coordinates in window
@@ -592,6 +596,10 @@ var _WebMercatorViewport = class _WebMercatorViewport extends Viewport {
     }
     return this._subViewports;
   }
+  /** Returns whether two Web Mercator viewports use the same projection settings. */
+  equals(viewport) {
+    return viewport instanceof _WebMercatorViewport && viewport._pseudoMeters === this._pseudoMeters && super.equals(viewport);
+  }
   projectPosition(xyz) {
     if (this._pseudoMeters) {
       return super.projectPosition(xyz);
@@ -1310,185 +1318,7 @@ var TransitionInterpolator = class {
 };
 
 // ../core/src/transitions/linear-interpolator.ts
-var import_core7 = require("@math.gl/core");
-
-// ../core/src/viewports/globe-viewport.ts
 var import_core5 = require("@math.gl/core");
-var import_web_mercator3 = require("@math.gl/web-mercator");
-var import_core6 = require("@math.gl/core");
-var import_web_mercator4 = require("@math.gl/web-mercator");
-var DEGREES_TO_RADIANS2 = Math.PI / 180;
-var RADIANS_TO_DEGREES = 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,
-      bearing = 0,
-      pitch = 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, 90), -90);
-    height = height || 1;
-    if (fovy) {
-      altitude = (0, import_web_mercator3.fovyToAltitude)(fovy);
-    } else {
-      fovy = (0, import_web_mercator3.altitudeToFovy)(altitude);
-    }
-    const scaleLatitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
-    const scale = Math.pow(2, zoom - zoomAdjust(scaleLatitude));
-    const pitchRadians = pitch * DEGREES_TO_RADIANS2;
-    const nearZ = opts.nearZ ?? nearZMultiplier;
-    const farZ = opts.farZ ?? (altitude + GLOBE_RADIUS * 2 * scale / height / Math.max(Math.cos(pitchRadians), 0.1)) * farZMultiplier;
-    const viewMatrix2 = new import_core5.Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] }).rotateX(-pitchRadians).rotateY(-bearing * DEGREES_TO_RADIANS2).rotateX(latitude * DEGREES_TO_RADIANS2).rotateZ(-longitude * DEGREES_TO_RADIANS2).scale(scale / 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 = scale;
-    this.latitude = latitude;
-    this.longitude = longitude;
-    this.bearing = bearing;
-    this.pitch = pitch;
-    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 [x, y, z] = xyz;
-    const y2 = topLeft ? y : this.height - y;
-    const { pixelUnprojectionMatrix } = this;
-    let coord;
-    if (Number.isFinite(z)) {
-      coord = transformVector(pixelUnprojectionMatrix, [x, y2, z, 1]);
-    } else {
-      const coord0 = transformVector(pixelUnprojectionMatrix, [x, y2, -1, 1]);
-      const coord1 = transformVector(pixelUnprojectionMatrix, [x, y2, 1, 1]);
-      const lt = ((targetZ || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
-      const lSqr = import_core6.vec3.sqrLen(import_core6.vec3.sub([], coord0, coord1));
-      const l0Sqr = import_core6.vec3.sqrLen(coord0);
-      const l1Sqr = import_core6.vec3.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, lt * lt - dSqr));
-      const t = (r0 - dr) / Math.sqrt(lSqr);
-      coord = import_core6.vec3.lerp([], coord0, coord1, t);
-    }
-    const [X, Y, Z] = this.unprojectPosition(coord);
-    if (Number.isFinite(z)) {
-      return [X, Y, Z];
-    }
-    return Number.isFinite(targetZ) ? [X, Y, targetZ] : [X, Y];
-  }
-  projectPosition(xyz) {
-    const [lng, lat, Z = 0] = xyz;
-    const lambda = lng * DEGREES_TO_RADIANS2;
-    const phi = lat * DEGREES_TO_RADIANS2;
-    const cosPhi = Math.cos(phi);
-    const D = (Z / EARTH_RADIUS + 1) * GLOBE_RADIUS;
-    return [Math.sin(lambda) * cosPhi * D, -Math.cos(lambda) * cosPhi * D, Math.sin(phi) * D];
-  }
-  unprojectPosition(xyz) {
-    const [x, y, z] = xyz;
-    const D = import_core6.vec3.len(xyz);
-    const phi = Math.asin(z / D);
-    const lambda = Math.atan2(x, -y);
-    const lng = lambda * RADIANS_TO_DEGREES;
-    const lat = phi * RADIANS_TO_DEGREES;
-    const Z = (D / GLOBE_RADIUS - 1) * EARTH_RADIUS;
-    return [lng, lat, Z];
-  }
-  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 scale = Math.pow(2, this.zoom - zoomAdjust(this.latitude));
-    const rotationSpeed = 0.25 / scale;
-    const longitude = startLng + rotationSpeed * (startPixel[0] - pixel[0]);
-    let latitude = startLat - rotationSpeed * (startPixel[1] - pixel[1]);
-    latitude = Math.max(Math.min(latitude, 90), -90);
-    const out = { longitude, latitude, zoom: startZoom - zoomAdjust(startLat) };
-    out.zoom += zoomAdjust(out.latitude);
-    return out;
-  }
-};
-GlobeViewport.displayName = "GlobeViewport";
-function zoomAdjust(latitude, clampToPoles) {
-  if (clampToPoles) {
-    latitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
-  }
-  const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
-  return Math.log2(scaleAdjust);
-}
-function transformVector(matrix, vector) {
-  const result = import_core6.vec4.transformMat4([], vector, matrix);
-  import_core6.vec4.scale(result, result, 1 / result[3]);
-  return result;
-}
-
-// ../core/src/transitions/linear-interpolator.ts
 var DEFAULT_PROPS = ["longitude", "latitude", "zoom", "bearing", "pitch"];
 var DEFAULT_REQUIRED_PROPS = ["longitude", "latitude", "zoom"];
 var LinearInterpolator = class extends TransitionInterpolator {
@@ -1515,28 +1345,23 @@ var LinearInterpolator = class extends TransitionInterpolator {
     const result = super.initializeProps(startProps, endProps);
     const { makeViewport, around } = this.opts;
     if (makeViewport && around) {
-      const TestViewport = makeViewport(startProps);
-      if (TestViewport instanceof GlobeViewport) {
-        log_default.warn("around not supported in GlobeView")();
-      } else {
-        const startViewport = makeViewport(startProps);
-        const endViewport = makeViewport(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 startViewport = makeViewport(startProps);
+      const endViewport = makeViewport(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;
   }
   interpolateProps(startProps, endProps, t) {
     const propsInTransition = {};
     for (const key of this._propsToExtract) {
-      propsInTransition[key] = (0, import_core7.lerp)(startProps[key] || 0, endProps[key] || 0, t);
+      propsInTransition[key] = (0, import_core5.lerp)(startProps[key] || 0, endProps[key] || 0, t);
     }
     if (endProps.aroundPosition && this.opts.makeViewport) {
       const viewport = this.opts.makeViewport({ ...endProps, ...propsInTransition });
@@ -1545,7 +1370,7 @@ var LinearInterpolator = class extends TransitionInterpolator {
         viewport.panByPosition(
           endProps.aroundPosition,
           // anchor point in current screen coordinates
-          (0, import_core7.lerp)(startProps.around, endProps.around, t)
+          (0, import_core5.lerp)(startProps.around, endProps.around, t)
         )
       );
     }
@@ -1554,6 +1379,7 @@ var LinearInterpolator = class extends TransitionInterpolator {
 };
 
 // ../core/src/controllers/controller.ts
+var import_web_mercator3 = require("@math.gl/web-mercator");
 var NO_TRANSITION_PROPS = {
   transitionDuration: 0
 };
@@ -1602,6 +1428,7 @@ var Controller = class {
     this.touchRotate = false;
     this.multiTouchDrag = null;
     this.trackpadGesture = false;
+    this.zoomAround = "pointer";
     this.keyboard = true;
     this.transitionManager = new TransitionManager({
       ...opts,
@@ -1696,6 +1523,15 @@ var Controller = class {
     const { offsetCenter } = event;
     return [offsetCenter.x - x, offsetCenter.y - y];
   }
+  /** Resolves the zoom anchor for pointer-based controls. */
+  getZoomPosition(position) {
+    if (this.zoomAround === "pointer") {
+      return position;
+    }
+    const viewport = this.makeViewport(this.controllerState.getViewportProps());
+    const [centerX, centerY] = (0, import_web_mercator3.worldToPixels)(viewport.center, viewport.pixelProjectionMatrix);
+    return [centerX, centerY];
+  }
   isPointInBounds(pos, event) {
     const { width, height } = this.props;
     if (event && event.handled) {
@@ -1753,6 +1589,7 @@ var Controller = class {
       touchRotate = false,
       multiTouchDrag = touchRotate ? "rotate" : null,
       trackpadGesture = false,
+      zoomAround = "pointer",
       keyboard = true
     } = props;
     const isInteractive = Boolean(this.onViewStateChange);
@@ -1775,6 +1612,7 @@ var Controller = class {
     this.touchRotate = multiTouchDrag === "rotate";
     this.multiTouchDrag = multiTouchDrag;
     this.trackpadGesture = trackpadGesture;
+    this.zoomAround = zoomAround;
     this.keyboard = keyboard;
     const constraintChanged = !oldProps || oldProps.height !== props.height || oldProps.width !== props.width || oldProps.maxBounds !== props.maxBounds || oldProps.maxBoundsPadding !== props.maxBoundsPadding;
     if (constraintChanged && props.maxBounds) {
@@ -2008,8 +1846,9 @@ var Controller = class {
     if (delta < 0 && scale !== 0) {
       scale = 1 / scale;
     }
-    const transitionProps = smooth ? { ...this._getTransitionProps({ around: pos }), transitionDuration: 250 } : NO_TRANSITION_PROPS;
-    const newControllerState = this.controllerState.zoom({ pos, scale });
+    const zoomPosition = this.getZoomPosition(pos);
+    const transitionProps = smooth ? { ...this._getTransitionProps({ around: zoomPosition }), transitionDuration: 250 } : NO_TRANSITION_PROPS;
+    const newControllerState = this.controllerState.zoom({ pos: zoomPosition, scale });
     this.updateViewport(newControllerState, transitionProps, {
       isZooming: true,
       isPanning: true
@@ -2095,7 +1934,7 @@ var Controller = class {
     if (!this.isPointInBounds(pos, event)) {
       return false;
     }
-    const newControllerState = this.controllerState.zoomStart({ pos }, this._getConstraintContext("zoom", "start")).rotateStart({ pos }, this._getConstraintContext("rotate", "start"));
+    const newControllerState = this.controllerState.zoomStart({ pos: this.getZoomPosition(pos) }, this._getConstraintContext("zoom", "start")).rotateStart({ pos }, this._getConstraintContext("rotate", "start"));
     pinchEventWorkaround._startPinchRotation = event.rotation;
     pinchEventWorkaround._lastPinchEvent = event;
     this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
@@ -2114,7 +1953,7 @@ var Controller = class {
       const { scale } = event;
       const pos = this.getCenter(event);
       newControllerState = newControllerState.zoom(
-        { pos, scale },
+        { pos: this.getZoomPosition(pos), scale },
         this._getConstraintContext("zoom", "update")
       );
     }
@@ -2142,15 +1981,16 @@ var Controller = class {
     const { _lastPinchEvent } = pinchEventWorkaround;
     if (this.touchZoom && inertia && _lastPinchEvent && event.scale !== _lastPinchEvent.scale) {
       const pos = this.getCenter(event);
+      const zoomPosition = this.getZoomPosition(pos);
       let newControllerState = this.controllerState.rotateEnd();
       const z = Math.log2(event.scale);
       const velocityZ = (z - Math.log2(_lastPinchEvent.scale)) / (event.deltaTime - _lastPinchEvent.deltaTime);
       const endScale = Math.pow(2, z + velocityZ * inertia / 2);
-      newControllerState = newControllerState.zoom({ pos, scale: endScale }).zoomEnd();
+      newControllerState = newControllerState.zoom({ pos: zoomPosition, scale: endScale }).zoomEnd();
       this.updateViewport(
         newControllerState,
         {
-          ...this._getTransitionProps({ around: pos }),
+          ...this._getTransitionProps({ around: zoomPosition }),
           transitionDuration: inertia,
           transitionEasing: INERTIA_EASING
         },
@@ -2195,8 +2035,12 @@ var Controller = class {
       return false;
     }
     const isZoomOut = this.isFunctionKeyPressed(event);
-    const newControllerState = this.controllerState.zoom({ pos, scale: isZoomOut ? 0.5 : 2 });
-    this.updateViewport(newControllerState, this._getTransitionProps({ around: pos }), {
+    const zoomPosition = this.getZoomPosition(pos);
+    const newControllerState = this.controllerState.zoom({
+      pos: zoomPosition,
+      scale: isZoomOut ? 0.5 : 2
+    });
+    this.updateViewport(newControllerState, this._getTransitionProps({ around: zoomPosition }), {
       isZooming: true,
       isPanning: true
     });
@@ -2213,14 +2057,14 @@ var Controller = class {
       this._doubleClickDragAnchor = null;
       return false;
     }
-    this._doubleClickDragAnchor = pos;
+    this._doubleClickDragAnchor = this.getZoomPosition(pos);
     let newControllerState = this.controllerState.zoomStart(
-      { pos },
+      { pos: this._doubleClickDragAnchor },
       this._getConstraintContext("zoom", "start")
     );
     if (event.scale !== 1) {
       newControllerState = newControllerState.zoom(
-        { pos, scale: event.scale },
+        { pos: this._doubleClickDragAnchor, scale: event.scale },
         this._getConstraintContext("zoom", "update")
       );
     }
@@ -2528,10 +2372,279 @@ Widget.defaultProps = {
   className: ""
 };
 
+// ../core/src/viewports/globe-viewport.ts
+var import_core6 = require("@math.gl/core");
+var import_web_mercator4 = require("@math.gl/web-mercator");
+var DEGREES_TO_RADIANS2 = Math.PI / 180;
+var RADIANS_TO_DEGREES = 180 / Math.PI;
+var NORTH_UP_BEARING_THRESHOLD = 1;
+var EARTH_RADIUS = 6370972;
+var GLOBE_RADIUS = 256;
+var GLOBE_ZOOM_ANCHOR_DAMPING_START_RATIO = 0.75;
+var GLOBE_ZOOM_ANCHOR_MAX_DISTANCE_RATIO = 1.15;
+function isGlobeNorthUp(bearing) {
+  const normalizedBearing = mod(bearing + 180, 360) - 180;
+  return Math.abs(normalizedBearing) < NORTH_UP_BEARING_THRESHOLD;
+}
+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,
+      bearing = 0,
+      pitch = 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, 90), -90);
+    height = height || 1;
+    if (fovy) {
+      altitude = (0, import_web_mercator4.fovyToAltitude)(fovy);
+    } else {
+      fovy = (0, import_web_mercator4.altitudeToFovy)(altitude);
+    }
+    const scaleLatitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+    const scale = Math.pow(2, zoom - zoomAdjust(scaleLatitude));
+    const pitchRadians = pitch * DEGREES_TO_RADIANS2;
+    const nearZ = opts.nearZ ?? nearZMultiplier;
+    const farZ = opts.farZ ?? (altitude + GLOBE_RADIUS * 2 * scale / height / Math.max(Math.cos(pitchRadians), 0.1)) * farZMultiplier;
+    const viewMatrix2 = new import_core6.Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] }).rotateX(-pitchRadians).rotateY(-bearing * DEGREES_TO_RADIANS2).rotateX(latitude * DEGREES_TO_RADIANS2).rotateZ(-longitude * DEGREES_TO_RADIANS2).scale(scale / 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 = scale;
+    this.latitude = latitude;
+    this.longitude = longitude;
+    this.bearing = bearing;
+    this.pitch = pitch;
+    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])
+    ];
+  }
+  /**
+   * Builds the screen-pixel → globe-center ray and the intermediate ray/sphere
+   * math reused by `unproject` and anchored zoom. One function so the same
+   * pixelUnprojectionMatrix work isn't duplicated.
+   */
+  _getRayToGlobe(screenPosition, { topLeft = true, targetZ } = {}) {
+    const [screenX, screenY] = screenPosition;
+    const adjustedScreenY = topLeft ? screenY : this.height - screenY;
+    const { pixelUnprojectionMatrix } = this;
+    const rayStartPosition = transformVector(pixelUnprojectionMatrix, [
+      screenX,
+      adjustedScreenY,
+      -1,
+      1
+    ]);
+    const rayEndPosition = transformVector(pixelUnprojectionMatrix, [
+      screenX,
+      adjustedScreenY,
+      1,
+      1
+    ]);
+    const radius = ((targetZ || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+    const rayLengthSquared = import_core6.vec3.sqrLen(import_core6.vec3.sub([], rayStartPosition, rayEndPosition));
+    const rayStartDistanceSquared = import_core6.vec3.sqrLen(rayStartPosition);
+    const rayEndDistanceSquared = import_core6.vec3.sqrLen(rayEndPosition);
+    const triangleAreaSquared = (4 * rayStartDistanceSquared * rayEndDistanceSquared - (rayLengthSquared - rayStartDistanceSquared - rayEndDistanceSquared) ** 2) / 16;
+    const distanceToCenterSquared = 4 * triangleAreaSquared / rayLengthSquared;
+    return {
+      rayStartPosition,
+      rayEndPosition,
+      radius,
+      rayLengthSquared,
+      rayStartDistanceSquared,
+      distanceToCenterSquared
+    };
+  }
+  _getRayDistanceToGlobeCenterRatio(screenPosition, options) {
+    const { distanceToCenterSquared, radius } = this._getRayToGlobe(screenPosition, options);
+    return Math.sqrt(Math.max(0, distanceToCenterSquared)) / radius;
+  }
+  /**
+   * Returns how strongly a screen position should anchor zoom on the visible globe.
+   * A value of `0` means that the controller should fall back to center zoom.
+   * @param screenPosition - Screen position to evaluate.
+   * @returns Anchor strength from `0` to `1`.
+   */
+  getZoomAnchorStrength(screenPosition) {
+    const distanceRatio = this._getRayDistanceToGlobeCenterRatio(screenPosition);
+    if (distanceRatio >= GLOBE_ZOOM_ANCHOR_MAX_DISTANCE_RATIO) {
+      return 0;
+    }
+    const edgeProgress = Math.max(
+      0,
+      Math.min(
+        1,
+        (distanceRatio - GLOBE_ZOOM_ANCHOR_DAMPING_START_RATIO) / (GLOBE_ZOOM_ANCHOR_MAX_DISTANCE_RATIO - GLOBE_ZOOM_ANCHOR_DAMPING_START_RATIO)
+      )
+    );
+    const smoothProgress = edgeProgress * edgeProgress * (3 - 2 * edgeProgress);
+    return 1 - smoothProgress;
+  }
+  unproject(xyz, { topLeft = true, targetZ } = {}) {
+    const [x, y, z] = xyz;
+    const y2 = topLeft ? y : this.height - y;
+    const { pixelUnprojectionMatrix } = this;
+    let coord;
+    if (Number.isFinite(z)) {
+      coord = transformVector(pixelUnprojectionMatrix, [x, y2, z, 1]);
+    } else {
+      const {
+        rayStartPosition,
+        rayEndPosition,
+        radius,
+        rayLengthSquared,
+        rayStartDistanceSquared,
+        distanceToCenterSquared
+      } = this._getRayToGlobe(xyz, { topLeft, targetZ });
+      const rayStartToClosestApproach = Math.sqrt(
+        rayStartDistanceSquared - distanceToCenterSquared
+      );
+      const closestApproachToIntersection = Math.sqrt(
+        Math.max(0, radius * radius - distanceToCenterSquared)
+      );
+      const intersectionRatio = (rayStartToClosestApproach - closestApproachToIntersection) / Math.sqrt(rayLengthSquared);
+      coord = import_core6.vec3.lerp([], rayStartPosition, rayEndPosition, intersectionRatio);
+    }
+    const [X, Y, Z] = this.unprojectPosition(coord);
+    if (Number.isFinite(z)) {
+      return [X, Y, Z];
+    }
+    return Number.isFinite(targetZ) ? [X, Y, targetZ] : [X, Y];
+  }
+  projectPosition(xyz) {
+    const [lng, lat, Z = 0] = xyz;
+    const lambda = lng * DEGREES_TO_RADIANS2;
+    const phi = lat * DEGREES_TO_RADIANS2;
+    const cosPhi = Math.cos(phi);
+    const D = (Z / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+    return [Math.sin(lambda) * cosPhi * D, -Math.cos(lambda) * cosPhi * D, Math.sin(phi) * D];
+  }
+  unprojectPosition(xyz) {
+    const [x, y, z] = xyz;
+    const D = import_core6.vec3.len(xyz);
+    const phi = Math.asin(z / D);
+    const lambda = Math.atan2(x, -y);
+    const lng = lambda * RADIANS_TO_DEGREES;
+    const lat = phi * RADIANS_TO_DEGREES;
+    const Z = (D / GLOBE_RADIUS - 1) * EARTH_RADIUS;
+    return [lng, lat, Z];
+  }
+  projectFlat(xyz) {
+    return xyz;
+  }
+  unprojectFlat(xyz) {
+    return xyz;
+  }
+  /**
+   * Pan the globe to place geographic coordinates at a screen pixel.
+   * When `dragStartPosition` is supplied, applies the delta-based movement used by globe dragging.
+   * @param coordinates - Geographic anchor, or the starting longitude, latitude and zoom.
+   * @param screenPosition - Current screen position.
+   * @param dragStartPosition - Screen position where a drag started.
+   * @returns Updated viewport options.
+   */
+  panByPosition(coordinates, screenPosition, dragStartPosition) {
+    if (!dragStartPosition) {
+      let anchorStrength = this.getZoomAnchorStrength(screenPosition);
+      if (anchorStrength === 0) {
+        return { longitude: this.longitude, latitude: this.latitude };
+      }
+      const currentCoordinates = this.unproject(screenPosition);
+      const longitudeDelta = mod(coordinates[0] - currentCoordinates[0] + 180, 360) - 180;
+      const latitudeDelta = coordinates[1] - currentCoordinates[1];
+      const crossesPole = Math.abs(currentCoordinates[1]) > import_web_mercator4.MAX_LATITUDE || Math.abs(longitudeDelta) > 90;
+      if (isGlobeNorthUp(this.bearing) && crossesPole) {
+        return { longitude: this.longitude, latitude: this.latitude };
+      }
+      if (isGlobeNorthUp(this.bearing) && latitudeDelta !== 0) {
+        const latitudeLimit = latitudeDelta > 0 ? import_web_mercator4.MAX_LATITUDE : -import_web_mercator4.MAX_LATITUDE;
+        const latitudeConstraintStrength = (latitudeLimit - this.latitude) / latitudeDelta;
+        anchorStrength = Math.min(anchorStrength, Math.max(0, latitudeConstraintStrength));
+      }
+      const longitude2 = this.longitude + longitudeDelta * anchorStrength;
+      const latitude2 = Math.max(Math.min(this.latitude + latitudeDelta * anchorStrength, 90), -90);
+      return { longitude: longitude2, latitude: latitude2 };
+    }
+    const [startLongitude, startLatitude, startZoom] = coordinates;
+    const scale = Math.pow(2, this.zoom - zoomAdjust(this.latitude));
+    const rotationSpeed = 0.25 / scale;
+    const longitude = startLongitude + rotationSpeed * (dragStartPosition[0] - screenPosition[0]);
+    let latitude = startLatitude - rotationSpeed * (dragStartPosition[1] - screenPosition[1]);
+    latitude = Math.max(Math.min(latitude, 90), -90);
+    const nextViewState = { longitude, latitude, zoom: startZoom - zoomAdjust(startLatitude) };
+    nextViewState.zoom += zoomAdjust(nextViewState.latitude);
+    return nextViewState;
+  }
+};
+GlobeViewport.displayName = "GlobeViewport";
+function zoomAdjust(latitude, clampToPoles) {
+  if (clampToPoles) {
+    latitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+  }
+  const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
+  return Math.log2(scaleAdjust);
+}
+function transformVector(matrix, vector) {
+  const result = import_core6.vec4.transformMat4([], vector, matrix);
+  import_core6.vec4.scale(result, result, 1 / result[3]);
+  return result;
+}
+
 // ../core/src/viewports/orthographic-viewport.ts
-var import_core8 = require("@math.gl/core");
+var import_core7 = require("@math.gl/core");
 var import_web_mercator5 = require("@math.gl/web-mercator");
-var viewMatrix = new import_core8.Matrix4().lookAt({ eye: [0, 0, 1] });
+var viewMatrix = new import_core7.Matrix4().lookAt({ eye: [0, 0, 1] });
 function getProjectionMatrix({
   width,
   height,
@@ -2545,14 +2658,14 @@ function getProjectionMatrix({
   let top = height / 2;
   if (padding) {
     const { left: l = 0, right: r = 0, top: t = 0, bottom: b = 0 } = padding;
-    const offsetX = (0, import_core8.clamp)((l + width - r) / 2, 0, width) - width / 2;
-    const offsetY = (0, import_core8.clamp)((t + height - b) / 2, 0, height) - height / 2;
+    const offsetX = (0, import_core7.clamp)((l + width - r) / 2, 0, width) - width / 2;
+    const offsetY = (0, import_core7.clamp)((t + height - b) / 2, 0, height) - height / 2;
     left -= offsetX;
     right -= offsetX;
     bottom += offsetY;
     top += offsetY;
   }
-  return new import_core8.Matrix4().ortho({
+  return new import_core7.Matrix4().ortho({
     left,
     right,
     bottom,
@@ -2620,15 +2733,15 @@ var OrthographicViewport = class extends Viewport {
   panByPosition(coords, pixel, startPixel) {
     const fromLocation = (0, import_web_mercator5.pixelsToWorld)(pixel, this.pixelUnprojectionMatrix);
     const toLocation = this.projectFlat(coords);
-    const translate = import_core8.vec2.add([], toLocation, import_core8.vec2.negate([], fromLocation));
-    const newCenter = import_core8.vec2.add([], this.center, translate);
+    const translate = import_core7.vec2.add([], toLocation, import_core7.vec2.negate([], fromLocation));
+    const newCenter = import_core7.vec2.add([], this.center, translate);
     return { target: this.unprojectFlat(newCenter) };
   }
 };
 OrthographicViewport.displayName = "OrthographicViewport";
 
 // ../core/src/controllers/orthographic-controller.ts
-var import_core9 = require("@math.gl/core");
+var import_core8 = require("@math.gl/core");
 var ZOOM_RUBBER_BAND_RANGE = 1;
 function normalizeZoom({
   zoom = 0,
@@ -2647,7 +2760,7 @@ function getAxisBounds(maxBounds, index, negativeExtent, positiveExtent, target)
     minimum,
     maximum,
     midpoint,
-    settledTarget: Number.isFinite(negativeExtent) && Number.isFinite(positiveExtent) && minimum <= maximum ? (0, import_core9.clamp)(target, minimum, maximum) : midpoint
+    settledTarget: Number.isFinite(negativeExtent) && Number.isFinite(positiveExtent) && minimum <= maximum ? (0, import_core8.clamp)(target, minimum, maximum) : midpoint
   };
 }
 var OrthographicState = class extends ViewState {
@@ -2965,7 +3078,7 @@ var OrthographicState = class extends ViewState {
           constrainedTarget[index] = midpoint;
           continue;
         }
-        const constrained = rubberBand ? settledTarget : (0, import_core9.clamp)(target[index], minimum, maximum);
+        const constrained = rubberBand ? settledTarget : (0, import_core8.clamp)(target[index], minimum, maximum);
         constrainedTarget[index] = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? target[index] : shouldRubberBand ? applyRubberBand(
           target[index],
           constrained,
@@ -3000,10 +3113,10 @@ var OrthographicState = class extends ViewState {
     }
     switch (zoomAxis) {
       case "X":
-        zoomX = (0, import_core9.clamp)(zoomX, minZoomX, maxZoomX);
+        zoomX = (0, import_core8.clamp)(zoomX, minZoomX, maxZoomX);
         break;
       case "Y":
-        zoomY = (0, import_core9.clamp)(zoomY, minZoomY, maxZoomY);
+        zoomY = (0, import_core8.clamp)(zoomY, minZoomY, maxZoomY);
         break;
       default:
         let delta = Math.min(maxZoomX - zoomX, maxZoomY - zoomY, 0);
@@ -3055,7 +3168,7 @@ var OrthographicView = class extends View {
 OrthographicView.displayName = "OrthographicView";
 
 // ../core/src/transitions/fly-to-interpolator.ts
-var import_core10 = require("@math.gl/core");
+var import_core9 = require("@math.gl/core");
 var import_web_mercator6 = require("@math.gl/web-mercator");
 var LINEARLY_INTERPOLATED_PROPS = {
   bearing: 0,
@@ -3078,7 +3191,7 @@ var FlyToInterpolator = class extends TransitionInterpolator {
   interpolateProps(startProps, endProps, t) {
     const viewport = (0, import_web_mercator6.flyToViewport)(startProps, endProps, t, this.opts);
     for (const key in LINEARLY_INTERPOLATED_PROPS) {
-      viewport[key] = (0, import_core10.lerp)(
+      viewport[key] = (0, import_core9.lerp)(
         startProps[key] || LINEARLY_INTERPOLATED_PROPS[key],
         endProps[key] || LINEARLY_INTERPOLATED_PROPS[key],
         t
@@ -6188,7 +6301,7 @@ LoadingWidget.defaultProps = {
 
 // dist/stats-widget.js
 var import_jsx_runtime27 = require("preact/jsx-runtime");
-var import_core34 = require("@luma.gl/core");
+var import_core33 = require("@luma.gl/core");
 var import_preact20 = require("preact");
 var import_hooks8 = require("preact/hooks");
 var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
@@ -6296,7 +6409,7 @@ var StatsWidget = class extends Widget {
         const metrics = ((_a = this.deck) == null ? void 0 : _a.metrics) ?? {};
         return Object.entries(metrics);
       case "luma":
-        return Array.from(import_core34.luma.stats.stats.values())[0];
+        return Array.from(import_core33.luma.stats.stats.values())[0];
       case "device":
         const device = (_b = this.deck) == null ? void 0 : _b.device;
         const stats = device == null ? void 0 : device.statsManager.stats.values();