@deck.gl/core 9.2.11 → 9.3.0-alpha.2

package/dist/index.cjs

@@ -183,15 +183,12 @@ var getLoggers = (log) => ({
   },
   /* Render events */
   "deckRenderer.renderLayers": (deckRenderer, renderStats, opts) => {
-    const { pass, redrawReason, stats } = opts;
+    const { pass, redrawReason } = opts;
     for (const status of renderStats) {
       const { totalCount, visibleCount, compositeCount, pickableCount } = status;
       const primitiveCount = totalCount - compositeCount;
       const hiddenCount = primitiveCount - visibleCount;
       log.log(LOG_LEVEL_DRAW, `RENDER #${deckRenderer.renderCount}   ${visibleCount} (of ${totalCount} layers) to ${pass} because ${redrawReason}   (${hiddenCount} hidden, ${compositeCount} composite ${pickableCount} pickable)`)();
-      if (stats) {
-        stats.get("Redraw Layers").add(visibleCount);
-      }
     }
   }
 });
@@ -232,7 +229,7 @@ var json_loader_default = {
 
 // dist/lib/init.js
 function checkVersion() {
-  const version = true ? "9.2.11" : globalThis.DECK_VERSION || "untranspiled source";
+  const version = true ? "9.3.0-alpha.2" : globalThis.DECK_VERSION || "untranspiled source";
   const existingVersion = globalThis.deck && globalThis.deck.VERSION;
   if (existingVersion && existingVersion !== version) {
     throw new Error(`deck.gl - multiple versions detected: ${existingVersion} vs ${version}`);
@@ -1160,6 +1157,9 @@ return offset * project.focalDistance;
 float project_size_to_pixel(float meters) {
 return project_size(meters) * project.scale;
 }
+vec2 project_size_to_pixel(vec2 meters) {
+return project_size(meters) * project.scale;
+}
 float project_size_to_pixel(float size, int unit) {
 if (unit == UNIT_METERS) return project_size_to_pixel(size);
 if (unit == UNIT_COMMON) return size * project.scale;
@@ -1641,7 +1641,12 @@ var LayersPass = class extends Pass {
     this._lastRenderIndex = -1;
   }
   render(options) {
-    const [width, height] = this.device.canvasContext.getDrawingBufferSize();
+    this._render(options);
+  }
+  _render(options) {
+    const canvasContext = this.device.canvasContext;
+    const framebuffer = options.target ?? canvasContext.getCurrentFramebuffer();
+    const [width, height] = canvasContext.getDrawingBufferSize();
     const clearCanvas = options.clearCanvas ?? true;
     const clearColor = options.clearColor ?? (clearCanvas ? [0, 0, 0, 0] : false);
     const clearDepth = clearCanvas ? 1 : false;
@@ -1655,7 +1660,7 @@ var LayersPass = class extends Pass {
       parameters.scissorRect = options.scissorRect;
     }
     const renderPass = this.device.beginRenderPass({
-      framebuffer: options.target,
+      framebuffer,
       parameters,
       clearColor,
       clearDepth,
@@ -2095,9 +2100,7 @@ var LightingEffect = class {
     } : {};
     const lightingProps = {
       enabled: true,
-      ambientLight: this.ambientLight,
-      directionalLights: this.directionalLights.map((directionalLight) => directionalLight.getProjectedLight({ layer })),
-      pointLights: this.pointLights.map((pointLight) => pointLight.getProjectedLight({ layer }))
+      lights: this._getLights(layer)
     };
     const materialProps = layer.props.material;
     return {
@@ -2141,6 +2144,19 @@ var LightingEffect = class {
       this.directionalLights.push(new DirectionalLight(DEFAULT_DIRECTIONAL_LIGHT_PROPS[0]), new DirectionalLight(DEFAULT_DIRECTIONAL_LIGHT_PROPS[1]));
     }
   }
+  _getLights(layer) {
+    const lights = [];
+    if (this.ambientLight) {
+      lights.push(this.ambientLight);
+    }
+    for (const pointLight of this.pointLights) {
+      lights.push(pointLight.getProjectedLight({ layer }));
+    }
+    for (const directionalLight of this.directionalLights) {
+      lights.push(directionalLight.getProjectedLight({ layer }));
+    }
+    return lights;
+  }
 };
 
 // dist/utils/typed-array-manager.js
@@ -2229,6 +2245,14 @@ function mod(value, divisor) {
 function getCameraPosition(viewMatrixInverse) {
   return [viewMatrixInverse[12], viewMatrixInverse[13], viewMatrixInverse[14]];
 }
+function getProjectionParameters(projectionMatrix) {
+  const m22 = projectionMatrix[10];
+  const m23 = projectionMatrix[14];
+  return {
+    near: m23 / (m22 - 1),
+    far: m23 / (m22 + 1)
+  };
+}
 function getFrustumPlanes(viewProjectionMatrix) {
   return {
     left: getFrustumPlane(viewProjectionMatrix[3] + viewProjectionMatrix[0], viewProjectionMatrix[7] + viewProjectionMatrix[4], viewProjectionMatrix[11] + viewProjectionMatrix[8], viewProjectionMatrix[15] + viewProjectionMatrix[12]),
@@ -2733,6 +2757,15 @@ var WebMercatorViewport = class extends viewport_default {
     const [longitude, latitude] = this.unprojectFlat(newCenter);
     return { longitude, latitude };
   }
+  /**
+   * Returns a new longitude and latitude that keeps a 3D world coordinate at a given screen pixel
+   * This version handles the z-component (altitude) properly for cameras positioned above ground
+   */
+  panByPosition3D(coords, pixel) {
+    const targetZ = coords[2] || 0;
+    const deltaLngLat = import_core8.vec2.sub([], coords, this.unproject(pixel, { targetZ }));
+    return { longitude: this.longitude + deltaLngLat[0], latitude: this.latitude + deltaLngLat[1] };
+  }
   getBounds(options = {}) {
     const corners = (0, import_web_mercator3.getBounds)(this, options.z || 0);
     return [
@@ -3088,16 +3121,17 @@ var PickLayersPass = class extends LayersPass {
     if ("pickingFBO" in props) {
       return this._drawPickingBuffer(props);
     }
-    return super.render(props);
+    const stats = super._render(props);
+    return { decodePickingColor: null, stats };
   }
   // Private
   // Draws list of layers and viewports into the picking buffer
   // Note: does not sample the buffer, that has to be done by the caller
-  _drawPickingBuffer({ layers, layerFilter, views, viewports, onViewportActive, pickingFBO, deviceRect: { x, y, width, height }, cullRect, effects, pass = "picking", pickZ, shaderModuleProps }) {
+  _drawPickingBuffer({ layers, layerFilter, views, viewports, onViewportActive, pickingFBO, deviceRect: { x, y, width, height }, cullRect, effects, pass = "picking", pickZ, shaderModuleProps, clearColor }) {
     this.pickZ = pickZ;
     const colorEncoderState = this._resetColorEncoder(pickZ);
     const scissorRect = [x, y, width, height];
-    const renderStatus = super.render({
+    const renderStatus = super._render({
       target: pickingFBO,
       layers,
       layerFilter,
@@ -3109,7 +3143,7 @@ var PickLayersPass = class extends LayersPass {
       pass,
       isPicking: true,
       shaderModuleProps,
-      clearColor: [0, 0, 0, 0],
+      clearColor: clearColor ?? [0, 0, 0, 0],
       colorMask: 15,
       scissorRect
     });
@@ -3131,6 +3165,7 @@ var PickLayersPass = class extends LayersPass {
     };
   }
   getLayerParameters(layer, layerIndex, viewport) {
+    var _a;
     const pickParameters = {
       ...layer.props.parameters
     };
@@ -3141,6 +3176,9 @@ var PickLayersPass = class extends LayersPass {
       Object.assign(pickParameters, PICKING_BLENDING);
       pickParameters.blend = true;
       pickParameters.blendColor = encodeColor(this._colorEncoderState, layer, viewport);
+      if (operation.includes("terrain") && ((_a = layer.state) == null ? void 0 : _a._hasPickingCover)) {
+        pickParameters.blendAlphaSrcFactor = "one";
+      }
     } else if (operation.includes("terrain")) {
       pickParameters.blend = false;
     }
@@ -3730,6 +3768,7 @@ var ViewManager = class {
       onViewStateChange: props.onViewStateChange,
       onInteractionStateChange: props.onInteractionStateChange
     };
+    this._pickPosition = props.pickPosition;
     Object.seal(this);
     this.setProps(props);
   }
@@ -3838,6 +3877,9 @@ var ViewManager = class {
     if ("width" in props || "height" in props) {
       this._setSize(props.width, props.height);
     }
+    if ("pickPosition" in props) {
+      this._pickPosition = props.pickPosition;
+    }
     if (!this._isUpdating) {
       this._update();
     }
@@ -3900,7 +3942,8 @@ var ViewManager = class {
           width: this.width,
           height: this.height
         });
-      }
+      },
+      pickPosition: this._pickPosition
     });
     return controller;
   }
@@ -4161,6 +4204,31 @@ function isAddSubSymbol(token) {
   return Boolean(token && token.type === "symbol" && (token.value === "+" || token.value === "-"));
 }
 
+// dist/utils/deep-merge.js
+function deepMergeViewState(a, b) {
+  const result = { ...a };
+  for (const key in b) {
+    if (key === "id")
+      continue;
+    if (Array.isArray(result[key]) && Array.isArray(b[key])) {
+      result[key] = mergeNumericArray(result[key], b[key]);
+    } else {
+      result[key] = b[key];
+    }
+  }
+  return result;
+}
+function mergeNumericArray(target, source3) {
+  target = target.slice();
+  for (let i = 0; i < source3.length; i++) {
+    const v = source3[i];
+    if (Number.isFinite(v)) {
+      target[i] = v;
+    }
+  }
+  return target;
+}
+
 // dist/views/view.js
 var View = class {
   constructor(props) {
@@ -4214,13 +4282,7 @@ var View = class {
       if (!this.props.viewState.id) {
         return this.props.viewState;
       }
-      const newViewState = { ...viewState };
-      for (const key in this.props.viewState) {
-        if (key !== "id") {
-          newViewState[key] = this.props.viewState[key];
-        }
-      }
-      return newViewState;
+      return deepMergeViewState(viewState, this.props.viewState);
     }
     return viewState;
   }
@@ -4835,6 +4897,7 @@ var Controller = class {
     this.onStateChange = opts.onStateChange || (() => {
     });
     this.makeViewport = opts.makeViewport;
+    this.pickPosition = opts.pickPosition;
   }
   set events(customEvents) {
     this.toggleEvents(this._customEvents, false);
@@ -4939,6 +5002,7 @@ var Controller = class {
     if (props.dragMode) {
       this.dragMode = props.dragMode;
     }
+    const oldProps = this.props;
     this.props = props;
     if (!("transitionInterpolator" in props)) {
       props.transitionInterpolator = this._getTransitionProps().transitionInterpolator;
@@ -4961,6 +5025,15 @@ var Controller = class {
     this.touchZoom = touchZoom;
     this.touchRotate = touchRotate;
     this.keyboard = keyboard;
+    const dimensionChanged = !oldProps || oldProps.height !== props.height || oldProps.width !== props.width || oldProps.maxBounds !== props.maxBounds;
+    if (dimensionChanged && props.maxBounds) {
+      const controllerState = new this.ControllerState({ ...props, makeViewport: this.makeViewport });
+      const normalizedProps = controllerState.getViewportProps();
+      const changed = Object.keys(normalizedProps).some((key) => !deepEqual(normalizedProps[key], props[key], 1));
+      if (changed) {
+        this.updateViewport(controllerState);
+      }
+    }
   }
   updateTransition() {
     this.transitionManager.updateTransition();
@@ -5366,7 +5439,8 @@ var Controller = class {
 
 // dist/controllers/view-state.js
 var ViewState = class {
-  constructor(props, state) {
+  constructor(props, state, makeViewport) {
+    this.makeViewport = makeViewport;
     this._viewportProps = this.applyConstraints(props);
     this._state = state;
   }
@@ -5382,6 +5456,22 @@ var ViewState = class {
 var import_web_mercator7 = require("@math.gl/web-mercator");
 var PITCH_MOUSE_THRESHOLD = 5;
 var PITCH_ACCEL = 1.2;
+var WEB_MERCATOR_TILE_SIZE = 512;
+var WEB_MERCATOR_MAX_BOUNDS = [
+  [-Infinity, -90],
+  [Infinity, 90]
+];
+function lngLatToWorld2([lng, lat]) {
+  if (Math.abs(lat) > 90) {
+    lat = Math.sign(lat) * 90;
+  }
+  if (Number.isFinite(lng)) {
+    const [x, y2] = (0, import_web_mercator7.lngLatToWorld)([lng, lat]);
+    return [x, (0, import_core15.clamp)(y2, 0, WEB_MERCATOR_TILE_SIZE)];
+  }
+  const [, y] = (0, import_web_mercator7.lngLatToWorld)([0, lat]);
+  return [lng, (0, import_core15.clamp)(y, 0, WEB_MERCATOR_TILE_SIZE)];
+}
 var MapState = class extends ViewState {
   constructor(options) {
     const {
@@ -5420,6 +5510,8 @@ var MapState = class extends ViewState {
       startZoomLngLat,
       /* Pointer position when rotation started */
       startRotatePos,
+      /* The lng/lat point at the rotation pivot (where rotation started) */
+      startRotateLngLat,
       /** Bearing when current perspective rotate operation started */
       startBearing,
       /** Pitch when current perspective rotate operation started */
@@ -5432,6 +5524,7 @@ var MapState = class extends ViewState {
     assert(Number.isFinite(longitude));
     assert(Number.isFinite(latitude));
     assert(Number.isFinite(zoom));
+    const maxBounds = options.maxBounds || (normalize ? WEB_MERCATOR_MAX_BOUNDS : null);
     super({
       width,
       height,
@@ -5446,16 +5539,18 @@ var MapState = class extends ViewState {
       maxPitch,
       minPitch,
       normalize,
-      position
+      position,
+      maxBounds
     }, {
       startPanLngLat,
       startZoomLngLat,
       startRotatePos,
+      startRotateLngLat,
       startBearing,
       startPitch,
       startZoom
-    });
-    this.makeViewport = options.makeViewport;
+    }, options.makeViewport);
+    this.getAltitude = options.getAltitude;
   }
   /**
    * Start panning
@@ -5495,8 +5590,11 @@ var MapState = class extends ViewState {
    * @param {[Number, Number]} pos - position on screen where the center is
    */
   rotateStart({ pos }) {
+    var _a;
+    const altitude = (_a = this.getAltitude) == null ? void 0 : _a.call(this, pos);
     return this._getUpdatedState({
       startRotatePos: pos,
+      startRotateLngLat: altitude !== void 0 ? this._unproject3D(pos, altitude) : void 0,
       startBearing: this.getViewportProps().bearing,
       startPitch: this.getViewportProps().pitch
     });
@@ -5506,7 +5604,7 @@ var MapState = class extends ViewState {
    * @param {[Number, Number]} pos - position on screen where the center is
    */
   rotate({ pos, deltaAngleX = 0, deltaAngleY = 0 }) {
-    const { startRotatePos, startBearing, startPitch } = this.getState();
+    const { startRotatePos, startRotateLngLat, startBearing, startPitch } = this.getState();
     if (!startRotatePos || startBearing === void 0 || startPitch === void 0) {
       return this;
     }
@@ -5519,6 +5617,17 @@ var MapState = class extends ViewState {
         pitch: startPitch + deltaAngleY
       };
     }
+    if (startRotateLngLat) {
+      const rotatedViewport = this.makeViewport({
+        ...this.getViewportProps(),
+        ...newRotation
+      });
+      const panMethod = "panByPosition3D" in rotatedViewport ? "panByPosition3D" : "panByPosition";
+      return this._getUpdatedState({
+        ...newRotation,
+        ...rotatedViewport[panMethod](startRotateLngLat, startRotatePos)
+      });
+    }
     return this._getUpdatedState(newRotation);
   }
   /**
@@ -5527,6 +5636,8 @@ var MapState = class extends ViewState {
    */
   rotateEnd() {
     return this._getUpdatedState({
+      startRotatePos: null,
+      startRotateLngLat: null,
       startBearing: null,
       startPitch: null
     });
@@ -5558,9 +5669,7 @@ var MapState = class extends ViewState {
     if (!startZoomLngLat) {
       return this;
     }
-    const { maxZoom, minZoom } = this.getViewportProps();
-    let zoom = startZoom + Math.log2(scale);
-    zoom = (0, import_core15.clamp)(zoom, minZoom, maxZoom);
+    const zoom = this._constrainZoom(startZoom + Math.log2(scale));
     const zoomedViewport = this.makeViewport({ ...this.getViewportProps(), zoom });
     return this._getUpdatedState({
       zoom,
@@ -5629,17 +5738,52 @@ var MapState = class extends ViewState {
   }
   // Apply any constraints (mathematical or defined by _viewportProps) to map state
   applyConstraints(props) {
-    const { maxZoom, minZoom, zoom } = props;
-    props.zoom = (0, import_core15.clamp)(zoom, minZoom, maxZoom);
-    const { maxPitch, minPitch, pitch } = props;
-    props.pitch = (0, import_core15.clamp)(pitch, minPitch, maxPitch);
-    const { normalize = true } = props;
+    const { maxPitch, minPitch, pitch, longitude, bearing, normalize, maxBounds } = props;
     if (normalize) {
-      Object.assign(props, (0, import_web_mercator7.normalizeViewportProps)(props));
+      if (longitude < -180 || longitude > 180) {
+        props.longitude = mod(longitude + 180, 360) - 180;
+      }
+      if (bearing < -180 || bearing > 180) {
+        props.bearing = mod(bearing + 180, 360) - 180;
+      }
+    }
+    props.pitch = (0, import_core15.clamp)(pitch, minPitch, maxPitch);
+    props.zoom = this._constrainZoom(props.zoom, props);
+    if (maxBounds) {
+      const bl = lngLatToWorld2(maxBounds[0]);
+      const tr = lngLatToWorld2(maxBounds[1]);
+      const scale = 2 ** props.zoom;
+      const halfWidth = props.width / 2 / scale;
+      const halfHeight = props.height / 2 / scale;
+      const [minLng, minLat] = (0, import_web_mercator7.worldToLngLat)([bl[0] + halfWidth, bl[1] + halfHeight]);
+      const [maxLng, maxLat] = (0, import_web_mercator7.worldToLngLat)([tr[0] - halfWidth, tr[1] - halfHeight]);
+      props.longitude = (0, import_core15.clamp)(props.longitude, minLng, maxLng);
+      props.latitude = (0, import_core15.clamp)(props.latitude, minLat, maxLat);
     }
     return props;
   }
   /* Private methods */
+  _constrainZoom(zoom, props) {
+    props || (props = this.getViewportProps());
+    const { maxZoom, maxBounds } = props;
+    const shouldApplyMaxBounds = maxBounds !== null && props.width > 0 && props.height > 0;
+    let { minZoom } = props;
+    if (shouldApplyMaxBounds) {
+      const bl = lngLatToWorld2(maxBounds[0]);
+      const tr = lngLatToWorld2(maxBounds[1]);
+      const w = tr[0] - bl[0];
+      const h = tr[1] - bl[1];
+      if (Number.isFinite(w) && w > 0) {
+        minZoom = Math.max(minZoom, Math.log2(props.width / w));
+      }
+      if (Number.isFinite(h) && h > 0) {
+        minZoom = Math.max(minZoom, Math.log2(props.height / h));
+      }
+      if (minZoom > maxZoom)
+        minZoom = maxZoom;
+    }
+    return (0, import_core15.clamp)(zoom, minZoom, maxZoom);
+  }
   _zoomFromCenter(scale) {
     const { width, height } = this.getViewportProps();
     return this.zoom({
@@ -5666,6 +5810,10 @@ var MapState = class extends ViewState {
     const viewport = this.makeViewport(this.getViewportProps());
     return pos && viewport.unproject(pos);
   }
+  _unproject3D(pos, altitude) {
+    const viewport = this.makeViewport(this.getViewportProps());
+    return viewport.unproject(pos, { targetZ: altitude });
+  }
   _getNewRotation(pos, startPos, startPitch, startBearing) {
     const deltaX = pos[0] - startPos[0];
     const deltaY = pos[1] - startPos[1];
@@ -5712,19 +5860,42 @@ var MapController = class extends Controller {
       })
     };
     this.dragMode = "pan";
+    this.rotationPivot = "center";
+    this._getAltitude = (pos) => {
+      if (this.rotationPivot === "2d") {
+        return 0;
+      } else if (this.rotationPivot === "3d") {
+        if (this.pickPosition) {
+          const { x, y } = this.props;
+          const pickResult = this.pickPosition(x + pos[0], y + pos[1]);
+          if (pickResult && pickResult.coordinate && pickResult.coordinate.length >= 3) {
+            return pickResult.coordinate[2];
+          }
+        }
+      }
+      return void 0;
+    };
   }
   setProps(props) {
+    if ("rotationPivot" in props) {
+      this.rotationPivot = props.rotationPivot || "center";
+    }
+    props.getAltitude = this._getAltitude;
     props.position = props.position || [0, 0, 0];
-    const oldProps = this.props;
+    props.maxBounds = props.maxBounds || (props.normalize === false ? null : WEB_MERCATOR_MAX_BOUNDS);
     super.setProps(props);
-    const dimensionChanged = !oldProps || oldProps.height !== props.height;
-    if (dimensionChanged) {
-      this.updateViewport(new this.ControllerState({
-        makeViewport: this.makeViewport,
-        ...props,
-        ...this.state
-      }));
+  }
+  updateViewport(newControllerState, extraProps = null, interactionState = {}) {
+    const state = newControllerState.getState();
+    if (interactionState.isDragging && state.startRotateLngLat) {
+      interactionState = {
+        ...interactionState,
+        rotationPivotPosition: state.startRotateLngLat
+      };
+    } else if (interactionState.isDragging === false) {
+      interactionState = { ...interactionState, rotationPivotPosition: void 0 };
     }
+    super.updateViewport(newControllerState, extraProps, interactionState);
   }
 };
 
@@ -5840,13 +6011,17 @@ var DrawLayersPass = class extends LayersPass {
     const { operation } = layer.props;
     return operation.includes("draw") || operation.includes("terrain");
   }
+  render(options) {
+    return this._render(options);
+  }
 };
 
 // dist/lib/deck-renderer.js
 var TRACE_RENDER_LAYERS = "deckRenderer.renderLayers";
 var DeckRenderer = class {
-  constructor(device) {
+  constructor(device, opts = {}) {
     this.device = device;
+    this.stats = opts.stats;
     this.layerFilter = null;
     this.drawPickingColors = false;
     this.drawLayersPass = new DrawLayersPass(device);
@@ -5884,7 +6059,8 @@ var DeckRenderer = class {
       renderOpts.clearColor = [0, 0, 0, 0];
       renderOpts.clearCanvas = true;
     }
-    const renderStats = layerPass.render({ ...renderOpts, target: outputBuffer });
+    const renderResult = layerPass.render({ ...renderOpts, target: outputBuffer });
+    const renderStats = "stats" in renderResult ? renderResult.stats : renderResult;
     if (renderOpts.effects) {
       if (this.lastPostProcessEffect) {
         renderOpts.clearCanvas = opts.clearCanvas === void 0 ? true : opts.clearCanvas;
@@ -5893,6 +6069,7 @@ var DeckRenderer = class {
     }
     this.renderCount++;
     debug(TRACE_RENDER_LAYERS, this, renderStats, opts);
+    this._updateStats(renderStats);
   }
   needsRedraw(opts = { clearRedrawFlags: false }) {
     const redraw = this._needsRedraw;
@@ -5908,6 +6085,15 @@ var DeckRenderer = class {
     }
     renderBuffers.length = 0;
   }
+  _updateStats(source3) {
+    if (!this.stats)
+      return;
+    let layersCount = 0;
+    for (const { visibleCount } of source3) {
+      layersCount += visibleCount;
+    }
+    this.stats.get("Layers rendered").addCount(layersCount);
+  }
   _preRender(effects, opts) {
     this.lastPostProcessEffect = null;
     opts.preRenderStats = opts.preRenderStats || {};
@@ -6124,9 +6310,10 @@ function getViewportFromCoordinates(viewports, pixel) {
 
 // dist/lib/deck-picker.js
 var DeckPicker = class {
-  constructor(device) {
+  constructor(device, opts = {}) {
     this._pickable = true;
     this.device = device;
+    this.stats = opts.stats;
     this.pickLayersPass = new PickLayersPass(device);
     this.lastPickedInfo = {
       index: -1,
@@ -6289,15 +6476,16 @@ var DeckPicker = class {
         };
       }
       let z;
-      if (pickInfo.pickedLayer && unproject3D && this.depthFBO) {
+      const depthLayers = this._getDepthLayers(pickInfo, pickableLayers, unproject3D);
+      if (depthLayers.length > 0) {
         const { pickedColors: pickedColors2 } = this._drawAndSample({
-          layers: [pickInfo.pickedLayer],
+          layers: depthLayers,
           views,
           viewports,
           onViewportActive,
           deviceRect: {
-            x: pickInfo.pickedX,
-            y: pickInfo.pickedY,
+            x: pickInfo.pickedX ?? devicePixel[0],
+            y: pickInfo.pickedY ?? devicePixel[1],
             width: 1,
             height: 1
           },
@@ -6403,15 +6591,16 @@ var DeckPicker = class {
         };
       }
       let z;
-      if (pickInfo.pickedLayer && unproject3D && this.depthFBO) {
+      const depthLayers = this._getDepthLayers(pickInfo, pickableLayers, unproject3D);
+      if (depthLayers.length > 0) {
         const { pickedColors: pickedColors2 } = this._drawAndSample({
-          layers: [pickInfo.pickedLayer],
+          layers: depthLayers,
           views,
           viewports,
           onViewportActive,
           deviceRect: {
-            x: pickInfo.pickedX,
-            y: pickInfo.pickedY,
+            x: pickInfo.pickedX ?? devicePixel[0],
+            y: pickInfo.pickedY ?? devicePixel[1],
             width: 1,
             height: 1
           },
@@ -6608,7 +6797,8 @@ var DeckPicker = class {
         opts.preRenderStats[effect.id] = effect.preRender(opts);
       }
     }
-    const { decodePickingColor } = this.pickLayersPass.render(opts);
+    const { decodePickingColor, stats } = this.pickLayersPass.render(opts);
+    this._updateStats(stats);
     const { x, y, width, height } = deviceRect;
     const pickedColors = new (pickZ ? Float32Array : Uint8Array)(width * height * 4);
     this.device.readPixelsToArrayWebGL(pickingFBO, {
@@ -6643,7 +6833,8 @@ var DeckPicker = class {
         opts.preRenderStats[effect.id] = effect.preRender(opts);
       }
     }
-    const { decodePickingColor } = this.pickLayersPass.render(opts);
+    const { decodePickingColor, stats } = this.pickLayersPass.render(opts);
+    this._updateStats(stats);
     const { x, y, width, height } = deviceRect;
     const pickedColors = new (pickZ ? Float32Array : Uint8Array)(width * height * 4);
     this.device.readPixelsToArrayWebGL(pickingFBO, {
@@ -6655,6 +6846,33 @@ var DeckPicker = class {
     });
     return { pickedColors, decodePickingColor };
   }
+  _updateStats(source3) {
+    if (!this.stats)
+      return;
+    let layersCount = 0;
+    for (const { visibleCount } of source3) {
+      layersCount += visibleCount;
+    }
+    this.stats.get("Layers picked").addCount(layersCount);
+  }
+  /**
+   * Determine which layers to use for the depth (pickZ) pass.
+   * - If a non-draped layer was picked, use just that layer.
+   * - If a draped layer was picked (geometry is at z=0) or no layer was picked
+   *   (e.g. no-FBO tiles at extreme zoom), fall back to terrain layers.
+   */
+  _getDepthLayers(pickInfo, pickableLayers, unproject3D) {
+    var _a;
+    if (!unproject3D || !this.depthFBO) {
+      return [];
+    }
+    const { pickedLayer } = pickInfo;
+    const isDraped = ((_a = pickedLayer == null ? void 0 : pickedLayer.state) == null ? void 0 : _a.terrainDrawMode) === "drape";
+    if (pickedLayer && !isDraped) {
+      return [pickedLayer];
+    }
+    return pickableLayers.filter((l) => l.props.operation.includes("terrain"));
+  }
   /**
    * Calculate a picking rect centered on deviceX and deviceY and clipped to device
    * @returns null if pixel is outside of device
@@ -6939,6 +7157,17 @@ var Widget = class {
       this.onRenderHTML(this.rootElement);
     }
   }
+  // VIEW STATE HELPERS
+  /** Returns the current view state for the given view */
+  getViewState(viewId) {
+    var _a, _b;
+    return ((_b = (_a = this.deck) == null ? void 0 : _a.viewManager) == null ? void 0 : _b.getViewState(viewId)) || {};
+  }
+  /** Updates the view state for the given view */
+  setViewState(viewId, viewState) {
+    var _a;
+    (_a = this.deck) == null ? void 0 : _a._onViewStateChange({ viewId, viewState, interactionState: {} });
+  }
   // @note empty method calls have an overhead in V8 but it is very low, ~1ns
   /**
    * Common utility to create the root DOM element for this widget
@@ -7165,10 +7394,15 @@ var Deck = class {
     this.metrics = {
       fps: 0,
       setPropsTime: 0,
+      layersCount: 0,
+      drawLayersCount: 0,
+      updateLayersCount: 0,
+      updateAttributesCount: 0,
       updateAttributesTime: 0,
       framesRedrawn: 0,
       pickTime: 0,
       pickCount: 0,
+      pickLayersCount: 0,
       gpuTime: 0,
       gpuTimePerFrame: 0,
       cpuTime: 0,
@@ -7284,8 +7518,7 @@ var Deck = class {
         ...this.props.deviceProps,
         onResize: (canvasContext, info) => {
           const { width, height } = canvasContext.canvas;
-          canvasContext.drawingBufferWidth = width;
-          canvasContext.drawingBufferHeight = height;
+          canvasContext.setDrawingBufferSize(width, height);
           this._needsRedraw = "Canvas resized";
           userOnResize == null ? void 0 : userOnResize(canvasContext, info);
         }
@@ -7459,6 +7692,14 @@ var Deck = class {
   pickObjects(opts) {
     return this._pick("pickObjects", "pickObjects Time", opts);
   }
+  /**
+   * Internal method used by controllers to pick 3D position at a screen coordinate
+   * @private
+   */
+  _pickPositionForController(x, y) {
+    const pickResult = this.pickObject({ x, y, radius: 0, unproject3D: true });
+    return pickResult;
+  }
   /** Experimental
    * Add a global resource for sharing among layers
    */
@@ -7683,7 +7924,7 @@ var Deck = class {
     }
   }
   _setDevice(device) {
-    var _a, _b;
+    var _a, _b, _c, _d;
     this.device = device;
     if (!this.animationLoop) {
       return;
@@ -7710,7 +7951,8 @@ var Deck = class {
     const timeline = new import_engine3.Timeline();
     timeline.play();
     this.animationLoop.attachTimeline(timeline);
-    this.eventManager = new import_mjolnir2.EventManager(this.props.parent || this.canvas, {
+    const eventRoot = ((_b = this.props.parent) == null ? void 0 : _b.querySelector(".deck-events-root")) || this.canvas;
+    this.eventManager = new import_mjolnir2.EventManager(eventRoot, {
       touchAction: this.props.touchAction,
       recognizers: Object.keys(RECOGNIZERS).map((eventName) => {
         var _a2;
@@ -7737,6 +7979,7 @@ var Deck = class {
       eventManager: this.eventManager,
       onViewStateChange: this._onViewStateChange.bind(this),
       onInteractionStateChange: this._onInteractionStateChange.bind(this),
+      pickPosition: this._pickPositionForController.bind(this),
       views: this._getViews(),
       viewState: this._getViewState(),
       width: this.width,
@@ -7753,11 +7996,12 @@ var Deck = class {
       deck: this,
       device: this.device
     });
-    this.deckRenderer = new DeckRenderer(this.device);
-    this.deckPicker = new DeckPicker(this.device);
+    this.deckRenderer = new DeckRenderer(this.device, { stats: this.stats });
+    this.deckPicker = new DeckPicker(this.device, { stats: this.stats });
+    const widgetParent = ((_c = this.props.parent) == null ? void 0 : _c.querySelector(".deck-widgets-root")) || ((_d = this.canvas) == null ? void 0 : _d.parentElement);
     this.widgetManager = new WidgetManager({
       deck: this,
-      parentElement: (_b = this.canvas) == null ? void 0 : _b.parentElement
+      parentElement: widgetParent
     });
     this.widgetManager.addDefault(new TooltipWidget());
     this.setProps(this.props);
@@ -7836,6 +8080,7 @@ var Deck = class {
     stats.get("CPU Time").addTime(animationLoopStats.get("CPU Time").lastTiming);
   }
   _getMetrics() {
+    var _a;
     const { metrics, stats } = this;
     metrics.fps = stats.get("frameRate").getHz();
     metrics.setPropsTime = stats.get("setProps Time").time;
@@ -7843,11 +8088,16 @@ var Deck = class {
     metrics.framesRedrawn = stats.get("Redraw Count").count;
     metrics.pickTime = stats.get("pickObject Time").time + stats.get("pickMultipleObjects Time").time + stats.get("pickObjects Time").time;
     metrics.pickCount = stats.get("Pick Count").count;
+    metrics.layersCount = ((_a = this.layerManager) == null ? void 0 : _a.layers.length) ?? 0;
+    metrics.drawLayersCount = stats.get("Layers rendered").lastSampleCount;
+    metrics.pickLayersCount = stats.get("Layers picked").lastSampleCount;
+    metrics.updateAttributesCount = stats.get("Layers updated").count;
+    metrics.updateAttributesCount = stats.get("Attributes updated").count;
     metrics.gpuTime = stats.get("GPU Time").time;
     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("Memory Usage");
+    const memoryStats = import_core16.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;
@@ -7876,6 +8126,9 @@ function typedArrayFromDataType(type) {
 }
 var dataTypeFromTypedArray = import_core17.getDataType;
 function getBufferAttributeLayout(name, accessor, deviceType) {
+  if (accessor.size > 4) {
+    return null;
+  }
   const type = deviceType === "webgpu" && accessor.type === "uint8" ? "unorm8" : accessor.type;
   return {
     attribute: name,
@@ -8028,8 +8281,7 @@ var DataColumn = class {
     const attributes = [];
     const result = {
       name: this.id,
-      byteStride: getStride(accessor),
-      attributes
+      byteStride: getStride(accessor)
     };
     if (this.doublePrecision) {
       const doubleShaderAttributeDefs = resolveDoublePrecisionShaderAttributes(accessor, options || {});
@@ -8043,6 +8295,7 @@ var DataColumn = class {
     } else {
       attributes.push(getBufferAttributeLayout(attributeName, accessor, this.device.type));
     }
+    result.attributes = attributes.filter(Boolean);
     return result;
   }
   setAccessor(accessor) {
@@ -9527,6 +9780,8 @@ var AttributeManager = class {
     }
     if (this.stats) {
       this.stats.get("Update Attributes").timeEnd();
+      if (updated)
+        this.stats.get("Attributes updated").incrementCount();
     }
     this.attributeTransitionManager.update({
       attributes: this.attributes,
@@ -10039,7 +10294,9 @@ function createTexture(owner, device, image, sampler) {
     },
     mipLevels: device.getMipLevelCount(width, height)
   });
-  texture.generateMipmapsWebGL();
+  if (device.type === "webgl") {
+    texture.generateMipmapsWebGL();
+  }
   internalTextures[texture.id] = owner;
   return texture;
 }
@@ -10678,15 +10935,19 @@ var defaultProps2 = {
   fetch: {
     type: "function",
     value: (url, { propName, layer, loaders, loadOptions, signal }) => {
+      var _a;
       const { resourceManager } = layer.context;
       loadOptions = loadOptions || layer.getLoadOptions();
       loaders = loaders || layer.props.loaders;
       if (signal) {
         loadOptions = {
           ...loadOptions,
-          fetch: {
-            ...loadOptions == null ? void 0 : loadOptions.fetch,
-            signal
+          core: {
+            ...loadOptions == null ? void 0 : loadOptions.core,
+            fetch: {
+              ...(_a = loadOptions == null ? void 0 : loadOptions.core) == null ? void 0 : _a.fetch,
+              signal
+            }
           }
         };
       }
@@ -10699,8 +10960,8 @@ var defaultProps2 = {
         return resourceManager.subscribe({
           resourceId: url,
           onChange: (data) => {
-            var _a;
-            return (_a = layer.internalState) == null ? void 0 : _a.reloadAsyncProp(propName, data);
+            var _a2;
+            return (_a2 = layer.internalState) == null ? void 0 : _a2.reloadAsyncProp(propName, data);
           },
           consumerId: layer.id,
           requestId: propName
@@ -11306,6 +11567,7 @@ var Layer = class extends component_default {
     if (!stateNeedsUpdate) {
       return;
     }
+    this.context.stats.get("Layer updates").incrementCount();
     const currentProps = this.props;
     const context = this.context;
     const internalState = this.internalState;
@@ -11802,9 +12064,13 @@ var OrbitViewport = class extends viewport_default {
   }
   panByPosition(coords, pixel, startPixel) {
     const p0 = this.project(coords);
+    const { near, far } = getProjectionParameters(this.projectionMatrix);
+    const pz = near * far / (far - p0[2] * (far - near));
+    const centerZ = near * far / (far - this.projectedCenter[2] * (far - near));
+    const shiftScale = pz / centerZ;
     const nextCenter = [
-      this.width / 2 + p0[0] - pixel[0],
-      this.height / 2 + p0[1] - pixel[1],
+      this.width / 2 + (p0[0] - pixel[0]) * shiftScale,
+      this.height / 2 + (p0[1] - pixel[1]) * shiftScale,
       this.projectedCenter[2]
     ];
     return {
@@ -11955,6 +12221,7 @@ var FirstPersonState = class extends ViewState {
       latitude = null,
       maxPitch = 90,
       minPitch = -90,
+      maxBounds = null,
       // Model state when the rotate operation first started
       startRotatePos,
       startBearing,
@@ -11972,7 +12239,8 @@ var FirstPersonState = class extends ViewState {
       longitude,
       latitude,
       maxPitch,
-      minPitch
+      minPitch,
+      maxBounds
     }, {
       startRotatePos,
       startBearing,
@@ -11980,8 +12248,7 @@ var FirstPersonState = class extends ViewState {
       startZoomPosition,
       startPanPos,
       startPanPosition
-    });
-    this.makeViewport = options.makeViewport;
+    }, options.makeViewport);
   }
   /* Public API */
   /**
@@ -12191,7 +12458,7 @@ var FirstPersonState = class extends ViewState {
   }
   // Apply any constraints (mathematical or defined by _viewportProps) to map state
   applyConstraints(props) {
-    const { pitch, maxPitch, minPitch, longitude, bearing } = props;
+    const { pitch, maxPitch, minPitch, longitude, position, bearing, maxBounds } = props;
     props.pitch = (0, import_core26.clamp)(pitch, minPitch, maxPitch);
     if (longitude !== null && (longitude < -180 || longitude > 180)) {
       props.longitude = mod(longitude + 180, 360) - 180;
@@ -12199,6 +12466,14 @@ var FirstPersonState = class extends ViewState {
     if (bearing < -180 || bearing > 180) {
       props.bearing = mod(bearing + 180, 360) - 180;
     }
+    if (maxBounds) {
+      const x = (0, import_core26.clamp)(position[0], maxBounds[0][0], maxBounds[1][0]);
+      const y = (0, import_core26.clamp)(position[1], maxBounds[0][1], maxBounds[1][1]);
+      const z = (0, import_core26.clamp)(position[2] ?? 0, maxBounds[0][2] ?? 0, maxBounds[1][2] ?? 0);
+      if (x !== position[0] || y !== position[1] || z !== position[2]) {
+        props.position = [x, y, z];
+      }
+    }
     return props;
   }
 };
@@ -12249,6 +12524,7 @@ var OrbitState = class extends ViewState {
       maxRotationX = 90,
       minZoom = -Infinity,
       maxZoom = Infinity,
+      maxBounds = null,
       /** Interaction states, required to calculate change during transform */
       // Model state when the pan operation first started
       startPanPosition,
@@ -12270,7 +12546,8 @@ var OrbitState = class extends ViewState {
       minRotationX,
       maxRotationX,
       minZoom,
-      maxZoom
+      maxZoom,
+      maxBounds
     }, {
       startPanPosition,
       startRotatePos,
@@ -12278,8 +12555,8 @@ var OrbitState = class extends ViewState {
       startRotationOrbit,
       startZoomPosition,
       startZoom
-    });
-    this.makeViewport = options.makeViewport;
+    }, options.makeViewport);
+    this.unproject3D = options.unproject3D;
   }
   /**
    * Start panning
@@ -12464,17 +12741,20 @@ var OrbitState = class extends ViewState {
     return viewport.project(pos);
   }
   _unproject(pos) {
+    var _a;
+    const p = (_a = this.unproject3D) == null ? void 0 : _a.call(this, pos);
+    if (p)
+      return p;
     const viewport = this.makeViewport(this.getViewportProps());
     return viewport.unproject(pos);
   }
   // Calculates new zoom
   _calculateNewZoom({ scale, startZoom }) {
-    const { maxZoom, minZoom } = this.getViewportProps();
     if (startZoom === void 0) {
       startZoom = this.getViewportProps().zoom;
     }
     const zoom = startZoom + Math.log2(scale);
-    return (0, import_core27.clamp)(zoom, minZoom, maxZoom);
+    return this._constrainZoom(zoom);
   }
   _panFromCenter(offset) {
     const { target } = this.getViewportProps();
@@ -12494,14 +12774,94 @@ var OrbitState = class extends ViewState {
   }
   // Apply any constraints (mathematical or defined by _viewportProps) to map state
   applyConstraints(props) {
-    const { maxZoom, minZoom, zoom, maxRotationX, minRotationX, rotationOrbit } = props;
-    props.zoom = Array.isArray(zoom) ? [(0, import_core27.clamp)(zoom[0], minZoom, maxZoom), (0, import_core27.clamp)(zoom[1], minZoom, maxZoom)] : (0, import_core27.clamp)(zoom, minZoom, maxZoom);
+    const { maxRotationX, minRotationX, rotationOrbit } = props;
+    props.zoom = this._constrainZoom(props.zoom, props);
     props.rotationX = (0, import_core27.clamp)(props.rotationX, minRotationX, maxRotationX);
     if (rotationOrbit < -180 || rotationOrbit > 180) {
       props.rotationOrbit = mod(rotationOrbit + 180, 360) - 180;
     }
+    props.target = this._constrainTarget(props);
     return props;
   }
+  _constrainZoom(zoom, props) {
+    props || (props = this.getViewportProps());
+    const { maxZoom, maxBounds } = props;
+    let { minZoom } = props;
+    if (maxBounds && props.width > 0 && props.height > 0) {
+      const dx = maxBounds[1][0] - maxBounds[0][0];
+      const dy = maxBounds[1][1] - maxBounds[0][1];
+      const dz = (maxBounds[1][2] ?? 0) - (maxBounds[0][2] ?? 0);
+      const maxDiameter = Math.sqrt(dx * dx + dy * dy + dz * dz);
+      if (maxDiameter > 0) {
+        minZoom = Math.max(minZoom, Math.log2(Math.min(props.width, props.height) / maxDiameter));
+        if (minZoom > maxZoom)
+          minZoom = maxZoom;
+      }
+    }
+    return (0, import_core27.clamp)(zoom, minZoom, maxZoom);
+  }
+  _constrainTarget(props) {
+    var _a;
+    const { target, maxBounds } = props;
+    if (!maxBounds)
+      return target;
+    const [[minX, minY, minZ = 0], [maxX, maxY, maxZ = 0]] = maxBounds;
+    if (target[0] >= minX && target[0] <= maxX && target[1] >= minY && target[1] <= maxY && target[2] >= minZ && target[2] <= maxZ) {
+      return target;
+    }
+    const vp = (_a = this.makeViewport) == null ? void 0 : _a.call(this, props);
+    if (vp) {
+      const { cameraPosition } = vp;
+      const nx = cameraPosition[0] - target[0];
+      const ny = cameraPosition[1] - target[1];
+      const nz = cameraPosition[2] - target[2];
+      const c = nx * target[0] + ny * target[1] + nz * target[2];
+      const minDot = nx * (nx >= 0 ? minX : maxX) + ny * (ny >= 0 ? minY : maxY) + nz * (nz >= 0 ? minZ : maxZ);
+      const maxDot = nx * (nx >= 0 ? maxX : minX) + ny * (ny >= 0 ? maxY : minY) + nz * (nz >= 0 ? maxZ : minZ);
+      if ((nx || ny || nz) && c >= minDot && c <= maxDot) {
+        const clampX = (value) => (0, import_core27.clamp)(value, minX, maxX);
+        const clampY = (value) => (0, import_core27.clamp)(value, minY, maxY);
+        const clampZ = (value) => (0, import_core27.clamp)(value, minZ, maxZ);
+        const f = (lambda2) => nx * clampX(target[0] - lambda2 * nx) + ny * clampY(target[1] - lambda2 * ny) + nz * clampZ(target[2] - lambda2 * nz) - c;
+        let lo = -1;
+        let hi = 1;
+        let flo = f(lo);
+        let fhi = f(hi);
+        while (flo < 0) {
+          hi = lo;
+          fhi = flo;
+          lo *= 2;
+          flo = f(lo);
+        }
+        while (fhi > 0) {
+          lo = hi;
+          flo = fhi;
+          hi *= 2;
+          fhi = f(hi);
+        }
+        for (let i = 0; i < 30; i++) {
+          const mid = (lo + hi) / 2;
+          const fm = f(mid);
+          if (fm > 0) {
+            lo = mid;
+          } else {
+            hi = mid;
+          }
+        }
+        const lambda = (lo + hi) / 2;
+        return [
+          clampX(target[0] - lambda * nx),
+          clampY(target[1] - lambda * ny),
+          clampZ(target[2] - lambda * nz)
+        ];
+      }
+    }
+    return [
+      (0, import_core27.clamp)(target[0], minX, maxX),
+      (0, import_core27.clamp)(target[1], minY, maxY),
+      (0, import_core27.clamp)(target[2], minZ, maxZ)
+    ];
+  }
 };
 var OrbitController = class extends Controller {
   constructor() {
@@ -12516,6 +12876,20 @@ var OrbitController = class extends Controller {
         }
       })
     };
+    this._unproject3D = (pos) => {
+      if (this.pickPosition) {
+        const { x, y } = this.props;
+        const pickResult = this.pickPosition(x + pos[0], y + pos[1]);
+        if (pickResult && pickResult.coordinate) {
+          return pickResult.coordinate;
+        }
+      }
+      return null;
+    };
+  }
+  setProps(props) {
+    props.unproject3D = this._unproject3D;
+    super.setProps(props);
   }
 };
 
@@ -12537,41 +12911,300 @@ var orbit_view_default = OrbitView;
 
 // dist/controllers/orthographic-controller.js
 var import_core28 = require("@math.gl/core");
-var OrthographicState = class extends OrbitState {
-  constructor(props) {
-    super(props);
-    this.zoomAxis = props.zoomAxis || "all";
+function normalizeZoom({ zoom = 0, zoomX, zoomY }) {
+  zoomX = zoomX ?? (Array.isArray(zoom) ? zoom[0] : zoom);
+  zoomY = zoomY ?? (Array.isArray(zoom) ? zoom[1] : zoom);
+  return { zoomX, zoomY };
+}
+var OrthographicState = class extends ViewState {
+  constructor(options) {
+    const {
+      /* Viewport arguments */
+      width,
+      // Width of viewport
+      height,
+      // Height of viewport
+      target = [0, 0, 0],
+      zoom = 0,
+      zoomAxis = "all",
+      /* Viewport constraints */
+      minZoom = -Infinity,
+      maxZoom = Infinity,
+      minZoomX = minZoom,
+      maxZoomX = maxZoom,
+      minZoomY = minZoom,
+      maxZoomY = maxZoom,
+      maxBounds = null,
+      /** Interaction states, required to calculate change during transform */
+      // Model state when the pan operation first started
+      startPanPosition,
+      // Model state when the zoom operation first started
+      startZoomPosition,
+      startZoom
+    } = options;
+    const { zoomX, zoomY } = normalizeZoom(options);
+    super({
+      width,
+      height,
+      target,
+      zoom,
+      zoomX,
+      zoomY,
+      zoomAxis,
+      minZoomX,
+      maxZoomX,
+      minZoomY,
+      maxZoomY,
+      maxBounds
+    }, {
+      startPanPosition,
+      startZoomPosition,
+      startZoom
+    }, options.makeViewport);
+  }
+  /**
+   * Start panning
+   * @param {[Number, Number]} pos - position on screen where the pointer grabs
+   */
+  panStart({ pos }) {
+    return this._getUpdatedState({
+      startPanPosition: this._unproject(pos)
+    });
+  }
+  /**
+   * Pan
+   * @param {[Number, Number]} pos - position on screen where the pointer is
+   */
+  pan({ pos, startPosition }) {
+    const startPanPosition = this.getState().startPanPosition || startPosition;
+    if (!startPanPosition) {
+      return this;
+    }
+    const viewport = this.makeViewport(this.getViewportProps());
+    const newProps = viewport.panByPosition(startPanPosition, pos);
+    return this._getUpdatedState(newProps);
+  }
+  /**
+   * End panning
+   * Must call if `panStart()` was called
+   */
+  panEnd() {
+    return this._getUpdatedState({
+      startPanPosition: null
+    });
+  }
+  /**
+   * Start rotating
+   */
+  rotateStart() {
+    return this;
+  }
+  /**
+   * Rotate
+   */
+  rotate() {
+    return this;
+  }
+  /**
+   * End rotating
+   */
+  rotateEnd() {
+    return this;
+  }
+  // shortest path between two view states
+  shortestPathFrom(viewState) {
+    const fromProps = viewState.getViewportProps();
+    const props = { ...this.getViewportProps() };
+    return props;
+  }
+  /**
+   * Start zooming
+   * @param {[Number, Number]} pos - position on screen where the pointer grabs
+   */
+  zoomStart({ pos }) {
+    const { zoomX, zoomY } = this.getViewportProps();
+    return this._getUpdatedState({
+      startZoomPosition: this._unproject(pos),
+      startZoom: [zoomX, zoomY]
+    });
+  }
+  /**
+   * Zoom
+   * @param {[Number, Number]} pos - position on screen where the current target is
+   * @param {[Number, Number]} startPos - the target position at
+   *   the start of the operation. Must be supplied of `zoomStart()` was not called
+   * @param {Number} scale - a number between [0, 1] specifying the accumulated
+   *   relative scale.
+   */
+  zoom({ pos, startPos, scale }) {
+    let { startZoom, startZoomPosition } = this.getState();
+    if (!startZoomPosition) {
+      const { zoomX, zoomY } = this.getViewportProps();
+      startZoom = [zoomX, zoomY];
+      startZoomPosition = this._unproject(startPos || pos);
+    }
+    if (!startZoomPosition) {
+      return this;
+    }
+    const newZoomProps = this._constrainZoom(this._calculateNewZoom({ scale, startZoom }));
+    const zoomedViewport = this.makeViewport({ ...this.getViewportProps(), ...newZoomProps });
+    return this._getUpdatedState({
+      ...newZoomProps,
+      ...zoomedViewport.panByPosition(startZoomPosition, pos)
+    });
+  }
+  /**
+   * End zooming
+   * Must call if `zoomStart()` was called
+   */
+  zoomEnd() {
+    return this._getUpdatedState({
+      startZoomPosition: null,
+      startZoom: null
+    });
+  }
+  zoomIn(speed = 2) {
+    return this._getUpdatedState(this._calculateNewZoom({ scale: speed }));
+  }
+  zoomOut(speed = 2) {
+    return this._getUpdatedState(this._calculateNewZoom({ scale: 1 / speed }));
+  }
+  moveLeft(speed = 50) {
+    return this._panFromCenter([-speed, 0]);
+  }
+  moveRight(speed = 50) {
+    return this._panFromCenter([speed, 0]);
+  }
+  moveUp(speed = 50) {
+    return this._panFromCenter([0, -speed]);
+  }
+  moveDown(speed = 50) {
+    return this._panFromCenter([0, speed]);
   }
+  rotateLeft(speed = 15) {
+    return this;
+  }
+  rotateRight(speed = 15) {
+    return this;
+  }
+  rotateUp(speed = 10) {
+    return this;
+  }
+  rotateDown(speed = 10) {
+    return this;
+  }
+  /* Private methods */
+  _project(pos) {
+    const viewport = this.makeViewport(this.getViewportProps());
+    return viewport.project(pos);
+  }
+  _unproject(pos) {
+    const viewport = this.makeViewport(this.getViewportProps());
+    return viewport.unproject(pos);
+  }
+  // Calculates new zoom
   _calculateNewZoom({ scale, startZoom }) {
-    const { maxZoom, minZoom } = this.getViewportProps();
+    const { zoomX, zoomY, zoomAxis } = this.getViewportProps();
     if (startZoom === void 0) {
-      startZoom = this.getViewportProps().zoom;
+      startZoom = [zoomX, zoomY];
     }
-    let deltaZoom = Math.log2(scale);
-    if (Array.isArray(startZoom)) {
-      let [newZoomX, newZoomY] = startZoom;
-      switch (this.zoomAxis) {
-        case "X":
-          newZoomX = (0, import_core28.clamp)(newZoomX + deltaZoom, minZoom, maxZoom);
-          break;
-        case "Y":
-          newZoomY = (0, import_core28.clamp)(newZoomY + deltaZoom, minZoom, maxZoom);
-          break;
-        default:
-          let z = Math.min(newZoomX + deltaZoom, newZoomY + deltaZoom);
-          if (z < minZoom) {
-            deltaZoom += minZoom - z;
-          }
-          z = Math.max(newZoomX + deltaZoom, newZoomY + deltaZoom);
-          if (z > maxZoom) {
-            deltaZoom += maxZoom - z;
-          }
-          newZoomX += deltaZoom;
-          newZoomY += deltaZoom;
+    const deltaZoom = Math.log2(scale);
+    let [newZoomX, newZoomY] = startZoom;
+    switch (zoomAxis) {
+      case "X":
+        newZoomX += deltaZoom;
+        break;
+      case "Y":
+        newZoomY += deltaZoom;
+        break;
+      default:
+        newZoomX += deltaZoom;
+        newZoomY += deltaZoom;
+    }
+    return {
+      zoomX: newZoomX,
+      zoomY: newZoomY
+    };
+  }
+  _panFromCenter(offset) {
+    const { target } = this.getViewportProps();
+    const center = this._project(target);
+    return this.pan({
+      startPosition: target,
+      pos: [center[0] + offset[0], center[1] + offset[1]]
+    });
+  }
+  _getUpdatedState(newProps) {
+    return new this.constructor({
+      makeViewport: this.makeViewport,
+      ...this.getViewportProps(),
+      ...this.getState(),
+      ...newProps
+    });
+  }
+  // Apply any constraints (mathematical or defined by _viewportProps) to map state
+  applyConstraints(props) {
+    const { zoomX, zoomY } = this._constrainZoom(props, props);
+    props.zoomX = zoomX;
+    props.zoomY = zoomY;
+    props.zoom = Array.isArray(props.zoom) || props.zoomX !== props.zoomY ? [props.zoomX, props.zoomY] : props.zoomX;
+    const { maxBounds, target } = props;
+    if (maxBounds) {
+      const halfWidth = props.width / 2 / 2 ** zoomX;
+      const halfHeight = props.height / 2 / 2 ** zoomY;
+      const minX = maxBounds[0][0] + halfWidth;
+      const maxX = maxBounds[1][0] - halfWidth;
+      const minY = maxBounds[0][1] + halfHeight;
+      const maxY = maxBounds[1][1] - halfHeight;
+      const x = (0, import_core28.clamp)(target[0], minX, maxX);
+      const y = (0, import_core28.clamp)(target[1], minY, maxY);
+      if (x !== target[0] || y !== target[1]) {
+        props.target = target.slice();
+        props.target[0] = x;
+        props.target[1] = y;
       }
-      return [newZoomX, newZoomY];
     }
-    return (0, import_core28.clamp)(startZoom + deltaZoom, minZoom, maxZoom);
+    return props;
+  }
+  _constrainZoom({ zoomX, zoomY }, props) {
+    props || (props = this.getViewportProps());
+    const { zoomAxis, maxZoomX, maxZoomY, maxBounds } = props;
+    let { minZoomX, minZoomY } = props;
+    const shouldApplyMaxBounds = maxBounds !== null && props.width > 0 && props.height > 0;
+    if (shouldApplyMaxBounds) {
+      const bl = maxBounds[0];
+      const tr = maxBounds[1];
+      const w = tr[0] - bl[0];
+      const h = tr[1] - bl[1];
+      if (Number.isFinite(w) && w > 0) {
+        minZoomX = Math.max(minZoomX, Math.log2(props.width / w));
+        if (minZoomX > maxZoomX)
+          minZoomX = maxZoomX;
+      }
+      if (Number.isFinite(h) && h > 0) {
+        minZoomY = Math.max(minZoomY, Math.log2(props.height / h));
+        if (minZoomY > maxZoomY)
+          minZoomY = maxZoomY;
+      }
+    }
+    switch (zoomAxis) {
+      case "X":
+        zoomX = (0, import_core28.clamp)(zoomX, minZoomX, maxZoomX);
+        break;
+      case "Y":
+        zoomY = (0, import_core28.clamp)(zoomY, minZoomY, maxZoomY);
+        break;
+      default:
+        let delta = Math.min(maxZoomX - zoomX, maxZoomY - zoomY, 0);
+        if (delta === 0) {
+          delta = Math.max(minZoomX - zoomX, minZoomY - zoomY, 0);
+        }
+        if (delta !== 0) {
+          zoomX += delta;
+          zoomY += delta;
+        }
+    }
+    return { zoomX, zoomY };
   }
 };
 var OrthographicController = class extends Controller {
@@ -12580,10 +13213,14 @@ var OrthographicController = class extends Controller {
     this.ControllerState = OrthographicState;
     this.transition = {
       transitionDuration: 300,
-      transitionInterpolator: new LinearInterpolator(["target", "zoom"])
+      transitionInterpolator: new LinearInterpolator(["target", "zoomX", "zoomY"])
     };
     this.dragMode = "pan";
   }
+  setProps(props) {
+    Object.assign(props, normalizeZoom(props));
+    super.setProps(props);
+  }
   _onPanRotate() {
     return false;
   }
@@ -12607,9 +13244,22 @@ var orthographic_view_default = OrthographicView;
 // dist/controllers/globe-controller.js
 var import_core29 = require("@math.gl/core");
 var import_web_mercator12 = require("@math.gl/web-mercator");
+var DEGREES_TO_RADIANS4 = Math.PI / 180;
+var RADIANS_TO_DEGREES2 = 180 / Math.PI;
+function degreesToPixels(angle, zoom = 0) {
+  const radians = Math.min(180, angle) * DEGREES_TO_RADIANS4;
+  const size = GLOBE_RADIUS * 2 * Math.sin(radians / 2);
+  return size * Math.pow(2, zoom);
+}
+function pixelsToDegrees(pixels, zoom = 0) {
+  const size = pixels / Math.pow(2, zoom);
+  const radians = Math.asin(Math.min(1, size / GLOBE_RADIUS / 2)) * 2;
+  return radians * RADIANS_TO_DEGREES2;
+}
 var GlobeState = class extends MapState {
   constructor(options) {
     const { startPanPos, ...mapStateOptions } = options;
+    mapStateOptions.normalize = false;
     super(mapStateOptions);
     if (startPanPos !== void 0) {
       this._state.startPanPos = startPanPos;
@@ -12648,16 +13298,58 @@ var GlobeState = class extends MapState {
     return this._getUpdatedState({ zoom });
   }
   applyConstraints(props) {
-    const { longitude, latitude, maxZoom, minZoom, zoom } = props;
-    const ZOOM0 = zoomAdjust(0);
-    const zoomAdjustment = zoomAdjust(latitude) - ZOOM0;
-    props.zoom = (0, import_core29.clamp)(zoom, minZoom + zoomAdjustment, maxZoom + zoomAdjustment);
+    const { longitude, latitude, maxBounds } = props;
+    props.zoom = this._constrainZoom(props.zoom, props);
     if (longitude < -180 || longitude > 180) {
       props.longitude = mod(longitude + 180, 360) - 180;
     }
     props.latitude = (0, import_core29.clamp)(latitude, -import_web_mercator12.MAX_LATITUDE, import_web_mercator12.MAX_LATITUDE);
+    if (maxBounds) {
+      props.longitude = (0, import_core29.clamp)(props.longitude, maxBounds[0][0], maxBounds[1][0]);
+      props.latitude = (0, import_core29.clamp)(props.latitude, maxBounds[0][1], maxBounds[1][1]);
+    }
+    if (maxBounds) {
+      const effectiveZoom = props.zoom - zoomAdjust(latitude);
+      const lngSpan = maxBounds[1][0] - maxBounds[0][0];
+      const latSpan = maxBounds[1][1] - maxBounds[0][1];
+      if (latSpan > 0 && latSpan < import_web_mercator12.MAX_LATITUDE * 2) {
+        const halfHeightDegrees = Math.min(pixelsToDegrees(props.height, effectiveZoom), latSpan) / 2;
+        props.latitude = (0, import_core29.clamp)(props.latitude, maxBounds[0][1] + halfHeightDegrees, maxBounds[1][1] - halfHeightDegrees);
+      }
+      if (lngSpan > 0 && lngSpan < 360) {
+        const halfWidthDegrees = Math.min(pixelsToDegrees(props.width / Math.cos(props.latitude * DEGREES_TO_RADIANS4), effectiveZoom), lngSpan) / 2;
+        props.longitude = (0, import_core29.clamp)(props.longitude, maxBounds[0][0] + halfWidthDegrees, maxBounds[1][0] - halfWidthDegrees);
+      }
+    }
+    if (props.latitude !== latitude) {
+      props.zoom += zoomAdjust(props.latitude) - zoomAdjust(latitude);
+    }
     return props;
   }
+  _constrainZoom(zoom, props) {
+    props || (props = this.getViewportProps());
+    const { latitude, maxZoom, maxBounds } = props;
+    let { minZoom } = props;
+    const ZOOM0 = zoomAdjust(0);
+    const zoomAdjustment = zoomAdjust(latitude) - ZOOM0;
+    const shouldApplyMaxBounds = maxBounds !== null && props.width > 0 && props.height > 0;
+    if (shouldApplyMaxBounds) {
+      const minLatitude = maxBounds[0][1];
+      const maxLatitude = maxBounds[1][1];
+      const fitLatitude = Math.sign(minLatitude) === Math.sign(maxLatitude) ? Math.min(Math.abs(minLatitude), Math.abs(maxLatitude)) : 0;
+      const w = degreesToPixels(maxBounds[1][0] - maxBounds[0][0]) * Math.cos(fitLatitude * DEGREES_TO_RADIANS4);
+      const h = degreesToPixels(maxBounds[1][1] - maxBounds[0][1]);
+      if (w > 0) {
+        minZoom = Math.max(minZoom, Math.log2(props.width / w) + ZOOM0);
+      }
+      if (h > 0) {
+        minZoom = Math.max(minZoom, Math.log2(props.height / h) + ZOOM0);
+      }
+      if (minZoom > maxZoom)
+        minZoom = maxZoom;
+    }
+    return (0, import_core29.clamp)(zoom, minZoom + zoomAdjustment, maxZoom + zoomAdjustment);
+  }
 };
 var GlobeController = class extends Controller {
   constructor() {