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

package/dist/index.cjs

@@ -820,7 +820,7 @@ fn project_mercator_(lnglat: vec2<f32>) -> vec2<f32> {
   let y = clamp(lnglat.y, -89.9, 89.9);
   return vec2<f32>(
     radians(x) + PI,
-    PI + log(tan(PI * 0.25 + radians(y) * 0.5))
+    PI + log(tan_fp32(PI * 0.25 + radians(y) * 0.5))
   ) * WORLD_SCALE;
 }
 
@@ -2433,8 +2433,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;
@@ -2442,7 +2442,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_core7.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core7.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_core7.equals)(viewport.distanceScales.unitsPerMeter, this.distanceScales.unitsPerMeter) && (0, import_core7.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core7.equals)(viewport.viewMatrix, this.viewMatrix);
   }
   /**
    * Projects xyz (possibly latitude and longitude) to pixel coordinates in window
@@ -2779,6 +2779,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);
@@ -4161,7 +4165,7 @@ var View = class {
 };
 
 // ../core/src/controllers/map-controller.ts
-var import_core14 = require("@math.gl/core");
+var import_core12 = require("@math.gl/core");
 
 // ../core/src/transitions/transition.ts
 var Transition = class {
@@ -4473,185 +4477,7 @@ var TransitionInterpolator = class {
 };
 
 // ../core/src/transitions/linear-interpolator.ts
-var import_core13 = require("@math.gl/core");
-
-// ../core/src/viewports/globe-viewport.ts
 var import_core11 = require("@math.gl/core");
-var import_web_mercator4 = require("@math.gl/web-mercator");
-var import_core12 = require("@math.gl/core");
-var import_web_mercator5 = 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 unitsPerMeter3 = GLOBE_RADIUS / EARTH_RADIUS;
-  const unitsPerDegree = Math.PI / 180 * GLOBE_RADIUS;
-  return {
-    unitsPerMeter: [unitsPerMeter3, unitsPerMeter3, unitsPerMeter3],
-    unitsPerMeter2: [0, 0, 0],
-    metersPerUnit: [1 / unitsPerMeter3, 1 / unitsPerMeter3, 1 / unitsPerMeter3],
-    unitsPerDegree: [unitsPerDegree, unitsPerDegree, unitsPerMeter3],
-    unitsPerDegree2: [0, 0, 0],
-    degreesPerUnit: [1 / unitsPerDegree, 1 / unitsPerDegree, 1 / unitsPerMeter3]
-  };
-}
-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_mercator5.MAX_LATITUDE), -import_web_mercator5.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 viewMatrix = new import_core11.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,
-      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_core12.vec3.sqrLen(import_core12.vec3.sub([], coord0, coord1));
-      const l0Sqr = import_core12.vec3.sqrLen(coord0);
-      const l1Sqr = import_core12.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_core12.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_core12.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_mercator5.MAX_LATITUDE), -import_web_mercator5.MAX_LATITUDE);
-  }
-  const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
-  return Math.log2(scaleAdjust);
-}
-function transformVector(matrix, vector) {
-  const result = import_core12.vec4.transformMat4([], vector, matrix);
-  import_core12.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 {
@@ -4678,28 +4504,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_core13.lerp)(startProps[key] || 0, endProps[key] || 0, t);
+      propsInTransition[key] = (0, import_core11.lerp)(startProps[key] || 0, endProps[key] || 0, t);
     }
     if (endProps.aroundPosition && this.opts.makeViewport) {
       const viewport = this.opts.makeViewport({ ...endProps, ...propsInTransition });
@@ -4708,7 +4529,7 @@ var LinearInterpolator = class extends TransitionInterpolator {
         viewport.panByPosition(
           endProps.aroundPosition,
           // anchor point in current screen coordinates
-          (0, import_core13.lerp)(startProps.around, endProps.around, t)
+          (0, import_core11.lerp)(startProps.around, endProps.around, t)
         )
       );
     }
@@ -4717,6 +4538,7 @@ var LinearInterpolator = class extends TransitionInterpolator {
 };
 
 // ../core/src/controllers/controller.ts
+var import_web_mercator4 = require("@math.gl/web-mercator");
 var NO_TRANSITION_PROPS = {
   transitionDuration: 0
 };
@@ -4765,6 +4587,7 @@ var Controller = class {
     this.touchRotate = false;
     this.multiTouchDrag = null;
     this.trackpadGesture = false;
+    this.zoomAround = "pointer";
     this.keyboard = true;
     this.transitionManager = new TransitionManager({
       ...opts,
@@ -4859,6 +4682,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_mercator4.worldToPixels)(viewport.center, viewport.pixelProjectionMatrix);
+    return [centerX, centerY];
+  }
   isPointInBounds(pos, event) {
     const { width, height } = this.props;
     if (event && event.handled) {
@@ -4916,6 +4748,7 @@ var Controller = class {
       touchRotate = false,
       multiTouchDrag = touchRotate ? "rotate" : null,
       trackpadGesture = false,
+      zoomAround = "pointer",
       keyboard = true
     } = props;
     const isInteractive = Boolean(this.onViewStateChange);
@@ -4938,6 +4771,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) {
@@ -5171,8 +5005,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
@@ -5258,7 +5093,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 });
@@ -5277,7 +5112,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")
       );
     }
@@ -5305,15 +5140,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
         },
@@ -5358,8 +5194,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
     });
@@ -5376,14 +5216,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")
       );
     }
@@ -5552,7 +5392,7 @@ function getMaxBoundsExtents(viewport, target, rect) {
 }
 
 // ../core/src/controllers/map-controller.ts
-var import_web_mercator6 = require("@math.gl/web-mercator");
+var import_web_mercator5 = require("@math.gl/web-mercator");
 var PITCH_MOUSE_THRESHOLD = 5;
 var PITCH_ACCEL = 1.2;
 var WEB_MERCATOR_TILE_SIZE = 512;
@@ -5566,11 +5406,11 @@ function lngLatToWorld2([lng, lat]) {
     lat = Math.sign(lat) * 90;
   }
   if (Number.isFinite(lng)) {
-    const [x, y2] = (0, import_web_mercator6.lngLatToWorld)([lng, lat]);
-    return [x, (0, import_core14.clamp)(y2, 0, WEB_MERCATOR_TILE_SIZE)];
+    const [x, y2] = (0, import_web_mercator5.lngLatToWorld)([lng, lat]);
+    return [x, (0, import_core12.clamp)(y2, 0, WEB_MERCATOR_TILE_SIZE)];
   }
-  const [, y] = (0, import_web_mercator6.lngLatToWorld)([0, lat]);
-  return [lng, (0, import_core14.clamp)(y, 0, WEB_MERCATOR_TILE_SIZE)];
+  const [, y] = (0, import_web_mercator5.lngLatToWorld)([0, lat]);
+  return [lng, (0, import_core12.clamp)(y, 0, WEB_MERCATOR_TILE_SIZE)];
 }
 var MapState = class extends ViewState {
   constructor(options) {
@@ -5879,7 +5719,7 @@ var MapState = class extends ViewState {
         props.bearing = mod(bearing + 180, 360) - 180;
       }
     }
-    props.pitch = (0, import_core14.clamp)(pitch, minPitch, maxPitch);
+    props.pitch = (0, import_core12.clamp)(pitch, minPitch, maxPitch);
     const constrainedZoom = this._constrainZoom(props.zoom, props);
     const shouldRubberBand = rubberBand && (constraintContext == null ? void 0 : constraintContext.mode) === "elastic";
     props.zoom = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? props.zoom : shouldRubberBand ? applyRubberBand(props.zoom, constrainedZoom, ZOOM_RUBBER_BAND_RANGE) : constrainedZoom;
@@ -5914,8 +5754,8 @@ var MapState = class extends ViewState {
       ];
       const center = lngLatToWorld2([props.longitude, props.latitude]);
       const constrainedCenter = [
-        (0, import_core14.clamp)(center[0], minimumCenter[0], maximumCenter[0]),
-        (0, import_core14.clamp)(center[1], minimumCenter[1], maximumCenter[1])
+        (0, import_core12.clamp)(center[0], minimumCenter[0], maximumCenter[0]),
+        (0, import_core12.clamp)(center[1], minimumCenter[1], maximumCenter[1])
       ];
       const displayedCenter = center.slice();
       if (maxBoundsRect.width >= 0) {
@@ -5925,7 +5765,7 @@ var MapState = class extends ViewState {
         displayedCenter[1] = (constraintContext == null ? void 0 : constraintContext.mode) === "preserve" ? center[1] : shouldRubberBand ? applyRubberBand(center[1], constrainedCenter[1], maxBoundsRect.height / 2 / scale) : constrainedCenter[1];
       }
       if (displayedCenter[0] !== center[0] || displayedCenter[1] !== center[1]) {
-        const [displayedLongitude, displayedLatitude] = (0, import_web_mercator6.worldToLngLat)(displayedCenter);
+        const [displayedLongitude, displayedLatitude] = (0, import_web_mercator5.worldToLngLat)(displayedCenter);
         if (displayedCenter[0] !== center[0]) {
           props.longitude = displayedLongitude;
         }
@@ -5956,7 +5796,7 @@ var MapState = class extends ViewState {
       }
       if (minZoom > maxZoom) minZoom = maxZoom;
     }
-    return (0, import_core14.clamp)(zoom, minZoom, maxZoom);
+    return (0, import_core12.clamp)(zoom, minZoom, maxZoom);
   }
   _zoomFromCenter(scale, constraintContext) {
     const { width, height } = this.getViewportProps();
@@ -6012,7 +5852,7 @@ var MapState = class extends ViewState {
         deltaScaleY = 1 - centerY / startY;
       }
     }
-    deltaScaleY = (0, import_core14.clamp)(deltaScaleY, -1, 1);
+    deltaScaleY = (0, import_core12.clamp)(deltaScaleY, -1, 1);
     const { minPitch, maxPitch } = this.getViewportProps();
     const bearing = startBearing + 180 * deltaScaleX;
     let pitch = startPitch;
@@ -6341,7 +6181,7 @@ var DeckRenderer = class {
 };
 
 // ../core/src/lib/deck-picker.ts
-var import_core15 = require("@luma.gl/core");
+var import_core13 = require("@luma.gl/core");
 
 // ../core/src/lib/picking/query-object.ts
 var NO_PICKED_OBJECT = {
@@ -6610,7 +6450,7 @@ var DeckPicker = class {
         format: "rgba8unorm",
         width: 1,
         height: 1,
-        usage: import_core15.Texture.RENDER_ATTACHMENT | import_core15.Texture.COPY_SRC
+        usage: import_core13.Texture.RENDER_ATTACHMENT | import_core13.Texture.COPY_SRC
       });
       this.pickingFBO = this.device.createFramebuffer({
         colorAttachments: [pickingColorTexture],
@@ -6621,7 +6461,7 @@ var DeckPicker = class {
           format: "rgba32float",
           width: 1,
           height: 1,
-          usage: import_core15.Texture.RENDER_ATTACHMENT | import_core15.Texture.COPY_SRC
+          usage: import_core13.Texture.RENDER_ATTACHMENT | import_core13.Texture.COPY_SRC
         });
         const depthFBO = this.device.createFramebuffer({
           colorAttachments: [depthColorTexture],
@@ -7139,7 +6979,7 @@ var DeckPicker = class {
     const layout = texture.computeMemoryLayout(options);
     const readBuffer = this.device.createBuffer({
       byteLength: layout.byteLength,
-      usage: import_core15.Buffer.COPY_DST | import_core15.Buffer.MAP_READ
+      usage: import_core13.Buffer.COPY_DST | import_core13.Buffer.MAP_READ
     });
     try {
       texture.readBuffer(options, readBuffer);
@@ -7864,7 +7704,7 @@ var CanvasManager = class {
 };
 
 // ../core/src/lib/deck.ts
-var import_core16 = require("@luma.gl/core");
+var import_core14 = require("@luma.gl/core");
 var import_webgl = require("@luma.gl/webgl");
 
 // ../../node_modules/@luma.gl/webgl/dist/constants/webgl-constants.js
@@ -9482,7 +9322,7 @@ var Deck = class {
       // we must use 'premultiplied' canvas for webgpu to enable transparency and match shaders
       alphaMode: ((_b = this.props.deviceProps) == null ? void 0 : _b.type) === "webgpu" ? "premultiplied" : void 0
     };
-    return import_core16.luma.createDevice({
+    return import_core14.luma.createDevice({
       // luma by default throws if a device is already attached
       // asynchronous device creation could happen after finalize() is called
       // TODO - createDevice should support AbortController?
@@ -9763,7 +9603,7 @@ var Deck = class {
     metrics.cpuTime = stats.get("CPU Time").time;
     metrics.gpuTimePerFrame = stats.get("GPU Time").getAverageTime();
     metrics.cpuTimePerFrame = stats.get("CPU Time").getAverageTime();
-    const memoryStats = import_core16.luma.stats.get("GPU Time and Memory");
+    const memoryStats = import_core14.luma.stats.get("GPU Time and Memory");
     metrics.bufferMemory = memoryStats.get("Buffer Memory").count;
     metrics.textureMemory = memoryStats.get("Texture Memory").count;
     metrics.renderbufferMemory = memoryStats.get("Renderbuffer Memory").count;
@@ -9775,11 +9615,280 @@ Deck.defaultProps = defaultProps;
 // https://github.com/visgl/deck.gl/issues/3213
 Deck.VERSION = VERSION;
 
+// ../core/src/viewports/globe-viewport.ts
+var import_core15 = require("@math.gl/core");
+var import_web_mercator6 = 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 unitsPerMeter3 = GLOBE_RADIUS / EARTH_RADIUS;
+  const unitsPerDegree = Math.PI / 180 * GLOBE_RADIUS;
+  return {
+    unitsPerMeter: [unitsPerMeter3, unitsPerMeter3, unitsPerMeter3],
+    unitsPerMeter2: [0, 0, 0],
+    metersPerUnit: [1 / unitsPerMeter3, 1 / unitsPerMeter3, 1 / unitsPerMeter3],
+    unitsPerDegree: [unitsPerDegree, unitsPerDegree, unitsPerMeter3],
+    unitsPerDegree2: [0, 0, 0],
+    degreesPerUnit: [1 / unitsPerDegree, 1 / unitsPerDegree, 1 / unitsPerMeter3]
+  };
+}
+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_mercator6.fovyToAltitude)(fovy);
+    } else {
+      fovy = (0, import_web_mercator6.altitudeToFovy)(altitude);
+    }
+    const scaleLatitude = Math.max(Math.min(latitude, import_web_mercator6.MAX_LATITUDE), -import_web_mercator6.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 viewMatrix = new import_core15.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,
+      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_core15.vec3.sqrLen(import_core15.vec3.sub([], rayStartPosition, rayEndPosition));
+    const rayStartDistanceSquared = import_core15.vec3.sqrLen(rayStartPosition);
+    const rayEndDistanceSquared = import_core15.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_core15.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_core15.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_mercator6.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_mercator6.MAX_LATITUDE : -import_web_mercator6.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_mercator6.MAX_LATITUDE), -import_web_mercator6.MAX_LATITUDE);
+  }
+  const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
+  return Math.log2(scaleAdjust);
+}
+function transformVector(matrix, vector) {
+  const result = import_core15.vec4.transformMat4([], vector, matrix);
+  import_core15.vec4.scale(result, result, 1 / result[3]);
+  return result;
+}
+
 // ../core/src/controllers/globe-controller.ts
-var import_core18 = require("@math.gl/core");
+var import_core17 = require("@math.gl/core");
 
 // ../core/src/viewports/globe-utils.ts
-var import_core17 = require("@math.gl/core");
+var import_core16 = require("@math.gl/core");
 var DEGREES_TO_RADIANS3 = Math.PI / 180;
 var RADIANS_TO_DEGREES2 = 180 / Math.PI;
 var Globe = class _Globe {
@@ -9794,7 +9903,7 @@ var Globe = class _Globe {
   static toLngLat(v) {
     return [
       Math.atan2(v[1], v[0]) * RADIANS_TO_DEGREES2,
-      Math.asin((0, import_core17.clamp)(v[2], -1, 1)) * RADIANS_TO_DEGREES2
+      Math.asin((0, import_core16.clamp)(v[2], -1, 1)) * RADIANS_TO_DEGREES2
     ];
   }
   /** North and East tangent vectors at a given (lng, lat) */
@@ -9821,7 +9930,7 @@ var Globe = class _Globe {
   /** Bearing (degrees) from a camera up vector at a given lng/lat */
   static bearing(upVector, lng, lat) {
     const { N, E } = _Globe.tangentBasis(lng, lat);
-    return Math.atan2(import_core17.vec3.dot(upVector, E), import_core17.vec3.dot(upVector, N)) * RADIANS_TO_DEGREES2;
+    return Math.atan2(import_core16.vec3.dot(upVector, E), import_core16.vec3.dot(upVector, N)) * RADIANS_TO_DEGREES2;
   }
   /** Camera frame for panning at a given position/bearing */
   static cameraFrame(lng, lat, bearing) {
@@ -9835,8 +9944,8 @@ var Globe = class _Globe {
     return {
       position,
       up,
-      axisHorizontal: import_core17.vec3.cross([], position, right),
-      axisVertical: import_core17.vec3.cross([], position, up),
+      axisHorizontal: import_core16.vec3.cross([], position, right),
+      axisVertical: import_core16.vec3.cross([], position, up),
       longitude: lng,
       latitude: lat,
       bearing
@@ -9846,18 +9955,18 @@ var Globe = class _Globe {
   static angularDistance(a, b) {
     const pa = _Globe.toPosition(a.longitude, a.latitude);
     const pb = _Globe.toPosition(b.longitude, b.latitude);
-    return Math.acos((0, import_core17.clamp)(import_core17.vec3.dot(pa, pb), -1, 1));
+    return Math.acos((0, import_core16.clamp)(import_core16.vec3.dot(pa, pb), -1, 1));
   }
   /** Normalized rotation axis of the great circle between two lng/lat points */
   static greatCircleAxis(a, b) {
     const pa = _Globe.toPosition(a.longitude, a.latitude);
     const pb = _Globe.toPosition(b.longitude, b.latitude);
-    return import_core17.vec3.normalize([], import_core17.vec3.cross([], pa, pb));
+    return import_core16.vec3.normalize([], import_core16.vec3.cross([], pa, pb));
   }
   /** Rotate a vector around a unit axis by an angle (radians) using quaternions */
   static rotate(v, axis, angle) {
-    const q = new import_core17.Quaternion().fromAxisRotation(axis, angle);
-    return import_core17.vec3.transformQuat([], v, q);
+    const q = new import_core16.Quaternion().fromAxisRotation(axis, angle);
+    return import_core16.vec3.transformQuat([], v, q);
   }
   /**
    * Rotate a camera frame by horizontal/vertical angles (radians).
@@ -9881,6 +9990,40 @@ var Globe = class _Globe {
       bearing: b
     };
   }
+  /**
+   * Rotate a camera frame so one globe position moves toward another.
+   * The position and camera up vector share one rigid-body rotation, allowing
+   * bearing to evolve continuously as the camera moves around the sphere.
+   */
+  static rotateFrameToMatch(frame, currentCoordinates, targetCoordinates, strength = 1) {
+    const currentPosition = _Globe.toPosition(...currentCoordinates);
+    const targetPosition = _Globe.toPosition(...targetCoordinates);
+    let rotationAxis = import_core16.vec3.cross([], currentPosition, targetPosition);
+    const axisLength = import_core16.vec3.len(rotationAxis);
+    const cosine = (0, import_core16.clamp)(import_core16.vec3.dot(currentPosition, targetPosition), -1, 1);
+    if (axisLength < 1e-12) {
+      if (cosine > 0) {
+        return frame;
+      }
+      rotationAxis = import_core16.vec3.cross([], currentPosition, frame.up);
+      if (import_core16.vec3.len(rotationAxis) < 1e-12) {
+        rotationAxis = import_core16.vec3.cross([], currentPosition, frame.axisVertical);
+      }
+    }
+    import_core16.vec3.normalize(rotationAxis, rotationAxis);
+    const angle = Math.atan2(axisLength, cosine) * (0, import_core16.clamp)(strength, 0, 1);
+    const position = _Globe.rotate(frame.position, rotationAxis, angle);
+    const up = _Globe.rotate(frame.up, rotationAxis, angle);
+    const [longitude, latitude] = _Globe.toLngLat(position);
+    return {
+      ...frame,
+      position,
+      up,
+      longitude,
+      latitude,
+      bearing: _Globe.bearing(up, longitude, latitude)
+    };
+  }
 };
 var INERTIA_DECAY = 5;
 var INERTIA_NORM = 1 / (1 - Math.exp(-INERTIA_DECAY));
@@ -9933,7 +10076,6 @@ var GlobeInertiaInterpolator = class extends TransitionInterpolator {
 };
 
 // ../core/src/controllers/globe-controller.ts
-var import_web_mercator7 = require("@math.gl/web-mercator");
 var DEGREES_TO_RADIANS4 = Math.PI / 180;
 var RADIANS_TO_DEGREES3 = 180 / Math.PI;
 function degreesToPixels(angle, zoom = 0) {
@@ -9948,35 +10090,23 @@ function pixelsToDegrees(pixels, zoom = 0) {
 }
 var GlobeState = class extends MapState {
   constructor(options) {
-    const {
-      startPanPos,
-      startPanCameraFrame,
-      startPanAngularRate,
-      startPanLockBearing,
-      ...mapStateOptions
-    } = options;
+    const { startPanPos, startPanCameraFrame, startPanAngularRate, ...mapStateOptions } = options;
     mapStateOptions.normalize = false;
     super(mapStateOptions);
     const s = this._state;
     if (startPanPos !== void 0) s.startPanPos = startPanPos;
     if (startPanCameraFrame !== void 0) s.startPanCameraFrame = startPanCameraFrame;
     if (startPanAngularRate !== void 0) s.startPanAngularRate = startPanAngularRate;
-    if (startPanLockBearing !== void 0) s.startPanLockBearing = startPanLockBearing;
   }
   panStart({ pos }) {
     const { latitude, longitude, zoom, bearing = 0 } = this.getViewportProps();
     const cameraFrame = Globe.cameraFrame(longitude, latitude, bearing);
-    const lockBearing = Math.abs(bearing) < 1;
-    if (lockBearing) {
-      cameraFrame.axisHorizontal = [0, 0, 1];
-    }
     const scale = Math.pow(2, zoom - zoomAdjust(latitude, true));
     const angularRate = 0.25 / scale * DEGREES_TO_RADIANS4;
     return this._getUpdatedState({
       startPanPos: pos,
       startPanCameraFrame: cameraFrame,
       startPanAngularRate: angularRate,
-      startPanLockBearing: lockBearing,
       startZoom: zoom
     });
   }
@@ -9992,17 +10122,9 @@ var GlobeState = class extends MapState {
     }
     const dx = startPanPos[0] - pos[0];
     const dy = startPanPos[1] - pos[1];
-    let hAngle = dx * rate;
-    let vAngle = -dy * rate;
-    const locked = state.startPanLockBearing;
-    if (locked) {
-      const cosLat = Math.cos(frame.latitude * DEGREES_TO_RADIANS4);
-      hAngle = dx * rate / Math.max(cosLat, 0.25);
-      const maxUp = (import_web_mercator7.MAX_LATITUDE - frame.latitude) * DEGREES_TO_RADIANS4;
-      const maxDown = -(import_web_mercator7.MAX_LATITUDE + frame.latitude) * DEGREES_TO_RADIANS4;
-      vAngle = (0, import_core18.clamp)(vAngle, maxDown, maxUp);
-    }
-    const rotated = Globe.rotateFrame(frame, hAngle, vAngle, locked);
+    const hAngle = dx * rate;
+    const vAngle = -dy * rate;
+    const rotated = Globe.rotateFrame(frame, hAngle, vAngle);
     const zoom = startZoom + zoomAdjust(rotated.latitude, true) - zoomAdjust(frame.latitude, true);
     return this._getUpdatedState({
       longitude: rotated.longitude,
@@ -10016,38 +10138,52 @@ var GlobeState = class extends MapState {
       startPanPos: null,
       startPanCameraFrame: null,
       startPanAngularRate: null,
-      startPanLockBearing: null,
       startZoom: null
     });
   }
-  zoom({ scale }) {
-    const startZoom = this.getState().startZoom || this.getViewportProps().zoom;
-    const zoom = startZoom + Math.log2(scale);
-    return this._getUpdatedState({ zoom });
-  }
   _panFromCenter(offset) {
     const { width, height } = this.getViewportProps();
     const center = [width / 2, height / 2];
     return this.panStart({ pos: center }).pan({ pos: [center[0] + offset[0], center[1] + offset[1]] }).panEnd();
   }
   applyConstraints(props) {
-    const { longitude, latitude, maxBounds } = props;
+    const internalProps = props;
+    const constraintAround = internalProps[CONSTRAINT_AROUND];
+    delete internalProps[CONSTRAINT_AROUND];
+    const { latitude, maxBounds } = props;
     props.zoom = this._constrainZoom(props.zoom, props);
-    if (longitude < -180 || longitude > 180) {
-      props.longitude = mod(longitude + 180, 360) - 180;
+    if (constraintAround) {
+      const viewport = this.makeViewport(props);
+      const anchorStrength = viewport.getZoomAnchorStrength(constraintAround.screenPosition);
+      if (anchorStrength > 0) {
+        const currentCoordinates = viewport.unproject(constraintAround.screenPosition);
+        const cameraFrame = Globe.cameraFrame(props.longitude, props.latitude, props.bearing || 0);
+        const rotatedFrame = Globe.rotateFrameToMatch(
+          cameraFrame,
+          [currentCoordinates[0], currentCoordinates[1]],
+          [constraintAround.position[0], constraintAround.position[1]],
+          anchorStrength
+        );
+        props.longitude = rotatedFrame.longitude;
+        props.latitude = rotatedFrame.latitude;
+        props.bearing = rotatedFrame.bearing;
+      }
+    }
+    if (props.longitude < -180 || props.longitude > 180) {
+      props.longitude = mod(props.longitude + 180, 360) - 180;
     }
-    props.latitude = (0, import_core18.clamp)(latitude, -90, 90);
     if (props.bearing < -180 || props.bearing > 180) {
       props.bearing = mod(props.bearing + 180, 360) - 180;
     }
-    props.pitch = (0, import_core18.clamp)(props.pitch, props.minPitch, props.maxPitch);
+    props.latitude = (0, import_core17.clamp)(props.latitude, -90, 90);
+    props.pitch = (0, import_core17.clamp)(props.pitch, props.minPitch, props.maxPitch);
     const maxBoundsRect = maxBounds ? getMaxBoundsRect(props.width, props.height, props.maxBoundsPadding) : null;
     if (maxBounds && maxBoundsRect) {
       if (maxBoundsRect.width >= 0) {
-        props.longitude = (0, import_core18.clamp)(props.longitude, maxBounds[0][0], maxBounds[1][0]);
+        props.longitude = (0, import_core17.clamp)(props.longitude, maxBounds[0][0], maxBounds[1][0]);
       }
       if (maxBoundsRect.height >= 0) {
-        props.latitude = (0, import_core18.clamp)(props.latitude, maxBounds[0][1], maxBounds[1][1]);
+        props.latitude = (0, import_core17.clamp)(props.latitude, maxBounds[0][1], maxBounds[1][1]);
       }
     }
     if (maxBounds && maxBoundsRect) {
@@ -10067,7 +10203,7 @@ var GlobeState = class extends MapState {
         );
         const bottomDegrees = maxBoundsRect.height ? heightDegrees * screenExtents.bottom / maxBoundsRect.height : pixelsToDegrees(screenExtents.bottom, effectiveZoom);
         const topDegrees = maxBoundsRect.height ? heightDegrees * screenExtents.top / maxBoundsRect.height : pixelsToDegrees(screenExtents.top, effectiveZoom);
-        props.latitude = (0, import_core18.clamp)(
+        props.latitude = (0, import_core17.clamp)(
           props.latitude,
           maxBounds[0][1] + bottomDegrees,
           maxBounds[1][1] - topDegrees
@@ -10089,13 +10225,14 @@ var GlobeState = class extends MapState {
           screenExtents.right / Math.cos(props.latitude * DEGREES_TO_RADIANS4),
           effectiveZoom
         );
-        props.longitude = (0, import_core18.clamp)(
+        props.longitude = (0, import_core17.clamp)(
           props.longitude,
           maxBounds[0][0] + leftDegrees,
           maxBounds[1][0] - rightDegrees
         );
       }
     }
+    props.latitude = (0, import_core17.clamp)(props.latitude, -90, 90);
     if (props.latitude !== latitude) {
       props.zoom += zoomAdjust(props.latitude, true) - zoomAdjust(latitude, true);
     }
@@ -10123,7 +10260,7 @@ var GlobeState = class extends MapState {
       if (minZoom > maxZoom) minZoom = maxZoom;
     }
     const zoomAdjustment = zoomAdjust(props.latitude, true) - zoomAdjust(0, true);
-    return (0, import_core18.clamp)(zoom, minZoom + zoomAdjustment, maxZoom + zoomAdjustment);
+    return (0, import_core17.clamp)(zoom, minZoom + zoomAdjustment, maxZoom + zoomAdjustment);
   }
 };
 var GlobeController = class extends Controller {
@@ -10180,40 +10317,24 @@ var GlobeController = class extends Controller {
       const dt = last.timestamp - first.timestamp;
       if (dt > 0) {
         const viewportProps = this.controllerState.getViewportProps();
-        const state = this.controllerState.getState();
         const angularDistance = Globe.angularDistance(first, last);
         const angularVelocity = angularDistance / dt;
         if (angularVelocity > 1e-6) {
           const totalAngle = angularVelocity * inertia / 2;
-          let interpolator;
-          let endLng;
-          let endLat;
-          if (state.startPanLockBearing) {
-            let dLng = last.longitude - first.longitude;
-            if (dLng > 180) dLng -= 360;
-            else if (dLng < -180) dLng += 360;
-            const dLat = last.latitude - first.latitude;
-            const vLng = dLng / dt;
-            const vLat = dLat / dt;
-            endLng = viewportProps.longitude + vLng * inertia / 2;
-            endLat = (0, import_core18.clamp)(viewportProps.latitude + vLat * inertia / 2, -90, 90);
-            interpolator = new GlobeInertiaInterpolator({ targetLongitude: endLng });
-          } else {
-            const axis = Globe.greatCircleAxis(first, last);
-            const currentFrame = Globe.cameraFrame(
-              viewportProps.longitude,
-              viewportProps.latitude,
-              viewportProps.bearing || 0
-            );
-            const endFrame = Globe.rotateFrame(
-              { ...currentFrame, axisHorizontal: axis },
-              totalAngle,
-              0
-            );
-            endLng = endFrame.longitude;
-            endLat = (0, import_core18.clamp)(endFrame.latitude, -90, 90);
-            interpolator = new GlobeInertiaInterpolator({ axis, totalAngle });
-          }
+          const axis = Globe.greatCircleAxis(first, last);
+          const currentFrame = Globe.cameraFrame(
+            viewportProps.longitude,
+            viewportProps.latitude,
+            viewportProps.bearing || 0
+          );
+          const endFrame = Globe.rotateFrame(
+            { ...currentFrame, axisHorizontal: axis },
+            totalAngle,
+            0
+          );
+          const endLng = endFrame.longitude;
+          const endLat = (0, import_core17.clamp)(endFrame.latitude, -90, 90);
+          const interpolator = new GlobeInertiaInterpolator({ axis, totalAngle });
           const newControllerState2 = this.controllerState.panEnd();
           this.updateViewport(
             newControllerState2,
@@ -10350,7 +10471,7 @@ function resolveLayerGroups(map, oldLayers, newLayers) {
 }
 
 // dist/deck-utils.js
-var import_web_mercator8 = require("@math.gl/web-mercator");
+var import_web_mercator7 = require("@math.gl/web-mercator");
 var MAPBOX_VIEW_ID = "mapbox";
 var TILE_SIZE = 512;
 var DEGREES_TO_RADIANS5 = Math.PI / 180;
@@ -10502,7 +10623,7 @@ function centerCameraOnTerrain(map, viewState) {
     const cameraX = position.x * TILE_SIZE;
     const cameraY = (1 - position.y) * TILE_SIZE;
     const cameraZ = position.z * TILE_SIZE;
-    const center = (0, import_web_mercator8.lngLatToWorld)([longitude, latitude]);
+    const center = (0, import_web_mercator7.lngLatToWorld)([longitude, latitude]);
     const dx = cameraX - center[0];
     const dy = cameraY - center[1];
     const cameraToCenterDistanceGround = Math.sqrt(dx * dx + dy * dy);
@@ -10515,7 +10636,7 @@ function centerCameraOnTerrain(map, viewState) {
     viewState.zoom = Math.log2(scale);
     const cameraZFromSurface = altitudePixels * Math.cos(pitchRadians) / scale;
     const surfaceElevation = cameraZ - cameraZFromSurface;
-    viewState.position = [0, 0, surfaceElevation / (0, import_web_mercator8.unitsPerMeter)(latitude)];
+    viewState.position = [0, 0, surfaceElevation / (0, import_web_mercator7.unitsPerMeter)(latitude)];
   } else if (typeof map.transform.elevation === "number") {
     viewState.position = [0, 0, map.transform.elevation];
   }