@deck.gl/core 9.3.0-alpha.1 → 9.3.0-alpha.3

package/dist/index.cjs

@@ -50,6 +50,7 @@ __export(dist_exports, {
   PointLight: () => PointLight,
   PostProcessEffect: () => PostProcessEffect,
   TRANSITION_EVENTS: () => TRANSITION_EVENTS,
+  TerrainController: () => TerrainController,
   Tesselator: () => Tesselator,
   TransitionInterpolator: () => TransitionInterpolator,
   UNIT: () => UNIT,
@@ -183,15 +184,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 +230,7 @@ var json_loader_default = {
 
 // dist/lib/init.js
 function checkVersion() {
-  const version = true ? "9.3.0-alpha.1" : globalThis.DECK_VERSION || "untranspiled source";
+  const version = true ? "9.3.0-alpha.3" : 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 +1158,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,6 +1642,9 @@ var LayersPass = class extends Pass {
     this._lastRenderIndex = -1;
   }
   render(options) {
+    this._render(options);
+  }
+  _render(options) {
     const canvasContext = this.device.canvasContext;
     const framebuffer = options.target ?? canvasContext.getCurrentFramebuffer();
     const [width, height] = canvasContext.getDrawingBufferSize();
@@ -2097,9 +2101,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 {
@@ -2143,6 +2145,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
@@ -2231,6 +2246,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]),
@@ -3099,7 +3122,8 @@ 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
@@ -3108,7 +3132,7 @@ var PickLayersPass = class extends LayersPass {
     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,
@@ -4181,6 +4205,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) {
@@ -4234,13 +4283,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;
   }
@@ -4855,6 +4898,7 @@ var Controller = class {
     this.onStateChange = opts.onStateChange || (() => {
     });
     this.makeViewport = opts.makeViewport;
+    this.pickPosition = opts.pickPosition;
   }
   set events(customEvents) {
     this.toggleEvents(this._customEvents, false);
@@ -4959,6 +5003,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;
@@ -4981,6 +5026,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();
@@ -5032,15 +5086,13 @@ var Controller = class {
     if (this.invertPan || this.dragMode === "pan") {
       alternateMode = !alternateMode;
     }
-    const newControllerState = alternateMode ? this.controllerState.panStart({ pos }) : this.controllerState.rotateStart(this._getRotateStartParams(pos));
+    const newControllerState = this.controllerState[alternateMode ? "panStart" : "rotateStart"]({
+      pos
+    });
     this._panMove = alternateMode;
     this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
     return true;
   }
-  /** Returns parameters for rotateStart. Override to add extra params (e.g. altitude). */
-  _getRotateStartParams(pos) {
-    return { pos };
-  }
   // Default handler for the `panmove` and `panend` event.
   _onPan(event) {
     if (!this.isDragging()) {
@@ -5388,7 +5440,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;
   }
@@ -5404,6 +5457,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 {
@@ -5456,6 +5525,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,
@@ -5470,7 +5540,8 @@ var MapState = class extends ViewState {
       maxPitch,
       minPitch,
       normalize,
-      position
+      position,
+      maxBounds
     }, {
       startPanLngLat,
       startZoomLngLat,
@@ -5479,8 +5550,8 @@ var MapState = class extends ViewState {
       startBearing,
       startPitch,
       startZoom
-    });
-    this.makeViewport = options.makeViewport;
+    }, options.makeViewport);
+    this.getAltitude = options.getAltitude;
   }
   /**
    * Start panning
@@ -5518,12 +5589,10 @@ var MapState = class extends ViewState {
   /**
    * Start rotating
    * @param {[Number, Number]} pos - position on screen where the center is
-   * @param {Number} altitude - optional altitude for rotation pivot
-   *   - undefined: rotate around viewport center (no pivot point)
-   *   - 0: rotate around pointer position at ground level
-   *   - other value: rotate around pointer position at specified altitude
    */
-  rotateStart({ pos, altitude }) {
+  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,
@@ -5601,9 +5670,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,
@@ -5672,17 +5739,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({
@@ -5746,8 +5848,8 @@ var MapState = class extends ViewState {
   }
 };
 var MapController = class extends Controller {
-  constructor(opts) {
-    super(opts);
+  constructor() {
+    super(...arguments);
     this.ControllerState = MapState;
     this.transition = {
       transitionDuration: 300,
@@ -5760,23 +5862,29 @@ var MapController = class extends Controller {
     };
     this.dragMode = "pan";
     this.rotationPivot = "center";
-    this.pickPosition = opts.pickPosition;
+    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();
@@ -5790,22 +5898,6 @@ var MapController = class extends Controller {
     }
     super.updateViewport(newControllerState, extraProps, interactionState);
   }
-  /** Add altitude to rotateStart params based on rotationPivot mode */
-  _getRotateStartParams(pos) {
-    let altitude;
-    if (this.rotationPivot === "2d") {
-      altitude = 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) {
-          altitude = pickResult.coordinate[2];
-        }
-      }
-    }
-    return { pos, altitude };
-  }
 };
 
 // dist/views/map-view.js
@@ -5920,13 +6012,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);
@@ -5964,7 +6060,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;
@@ -5973,6 +6070,7 @@ var DeckRenderer = class {
     }
     this.renderCount++;
     debug(TRACE_RENDER_LAYERS, this, renderStats, opts);
+    this._updateStats(renderStats);
   }
   needsRedraw(opts = { clearRedrawFlags: false }) {
     const redraw = this._needsRedraw;
@@ -5988,6 +6086,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 || {};
@@ -6204,9 +6311,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,
@@ -6690,7 +6798,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, {
@@ -6725,7 +6834,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, {
@@ -6737,6 +6847,15 @@ 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.
@@ -7276,10 +7395,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,
@@ -7873,8 +7997,8 @@ 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,
@@ -7957,6 +8081,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;
@@ -7964,11 +8089,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;
@@ -9651,6 +9781,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,
@@ -11436,6 +11568,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;
@@ -11932,9 +12065,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 {
@@ -12085,6 +12222,7 @@ var FirstPersonState = class extends ViewState {
       latitude = null,
       maxPitch = 90,
       minPitch = -90,
+      maxBounds = null,
       // Model state when the rotate operation first started
       startRotatePos,
       startBearing,
@@ -12102,7 +12240,8 @@ var FirstPersonState = class extends ViewState {
       longitude,
       latitude,
       maxPitch,
-      minPitch
+      minPitch,
+      maxBounds
     }, {
       startRotatePos,
       startBearing,
@@ -12110,8 +12249,7 @@ var FirstPersonState = class extends ViewState {
       startZoomPosition,
       startPanPos,
       startPanPosition
-    });
-    this.makeViewport = options.makeViewport;
+    }, options.makeViewport);
   }
   /* Public API */
   /**
@@ -12321,7 +12459,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;
@@ -12329,6 +12467,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;
   }
 };
@@ -12379,6 +12525,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,
@@ -12400,7 +12547,8 @@ var OrbitState = class extends ViewState {
       minRotationX,
       maxRotationX,
       minZoom,
-      maxZoom
+      maxZoom,
+      maxBounds
     }, {
       startPanPosition,
       startRotatePos,
@@ -12408,8 +12556,8 @@ var OrbitState = class extends ViewState {
       startRotationOrbit,
       startZoomPosition,
       startZoom
-    });
-    this.makeViewport = options.makeViewport;
+    }, options.makeViewport);
+    this.unproject3D = options.unproject3D;
   }
   /**
    * Start panning
@@ -12594,17 +12742,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();
@@ -12624,14 +12775,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() {
@@ -12646,6 +12877,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);
   }
 };
 
@@ -12667,41 +12912,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 {
@@ -12710,10 +13214,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;
   }
@@ -12737,9 +13245,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;
@@ -12778,16 +13299,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() {
@@ -12821,6 +13384,95 @@ var GlobeView = class extends View {
 GlobeView.displayName = "GlobeView";
 var globe_view_default = GlobeView;
 
+// dist/controllers/terrain-controller.js
+var TerrainController = class extends MapController {
+  constructor() {
+    super(...arguments);
+    this._terrainAltitude = void 0;
+    this._terrainAltitudeTarget = void 0;
+  }
+  setProps(props) {
+    super.setProps({ rotationPivot: "3d", ...props });
+    if (this._terrainAltitude !== void 0 && this._terrainAltitudeTarget !== void 0 && Math.abs(this._terrainAltitudeTarget - this._terrainAltitude) > 0.01) {
+      this.updateViewport(new this.ControllerState({
+        makeViewport: this.makeViewport,
+        ...this.props,
+        ...this.state
+      }));
+    }
+  }
+  updateViewport(newControllerState, extraProps = null, interactionState = {}) {
+    const SMOOTHING = 0.05;
+    if (this._terrainAltitudeTarget === void 0)
+      return;
+    if (this._terrainAltitude === void 0) {
+      this._terrainAltitude = this._terrainAltitudeTarget;
+      extraProps = this._rebaseViewport(this._terrainAltitudeTarget, newControllerState, extraProps);
+    } else {
+      this._terrainAltitude += (this._terrainAltitudeTarget - this._terrainAltitude) * SMOOTHING;
+    }
+    const viewportProps = newControllerState.getViewportProps();
+    const pos = viewportProps.position || [0, 0, 0];
+    extraProps = {
+      ...extraProps,
+      position: [pos[0], pos[1], this._terrainAltitude]
+    };
+    super.updateViewport(newControllerState, extraProps, interactionState);
+  }
+  _onPanStart(event) {
+    this._pickTerrainCenterAltitude();
+    return super._onPanStart(event);
+  }
+  _onWheel(event) {
+    this._pickTerrainCenterAltitude();
+    return super._onWheel(event);
+  }
+  _onDoubleClick(event) {
+    this._pickTerrainCenterAltitude();
+    return super._onDoubleClick(event);
+  }
+  _pickTerrainCenterAltitude() {
+    if (!this.pickPosition) {
+      return;
+    }
+    const { x, y, width, height } = this.props;
+    const pickResult = this.pickPosition(x + width / 2, y + height / 2);
+    if ((pickResult == null ? void 0 : pickResult.coordinate) && pickResult.coordinate.length >= 3) {
+      this._terrainAltitudeTarget = pickResult.coordinate[2];
+    }
+  }
+  /**
+   * Utility function to return viewport that looks the same, but with
+   * a position shifted to [0, 0, altitude]
+   */
+  _rebaseViewport(altitude, newControllerState, extraProps) {
+    const viewportProps = newControllerState.getViewportProps();
+    const oldViewport = this.makeViewport({ ...viewportProps, position: [0, 0, 0] });
+    const oldCameraPos = oldViewport.cameraPosition;
+    const centerZOffset = altitude * oldViewport.distanceScales.unitsPerMeter[2];
+    const cameraHeightAboveOldCenter = oldCameraPos[2];
+    const newCameraHeightAboveCenter = cameraHeightAboveOldCenter - centerZOffset;
+    if (newCameraHeightAboveCenter <= 0) {
+      return extraProps;
+    }
+    const zoomDelta = Math.log2(cameraHeightAboveOldCenter / newCameraHeightAboveCenter);
+    const newZoom = viewportProps.zoom + zoomDelta;
+    const newViewport = this.makeViewport({
+      ...viewportProps,
+      zoom: newZoom,
+      position: [0, 0, altitude]
+    });
+    const { width, height } = viewportProps;
+    const screenCenter = [width / 2, height / 2];
+    const worldPoint = oldViewport.unproject(screenCenter, { targetZ: altitude });
+    if (worldPoint && "panByPosition3D" in newViewport && typeof newViewport.panByPosition3D === "function") {
+      const adjusted = newViewport.panByPosition3D(worldPoint, screenCenter);
+      return { ...extraProps, position: [0, 0, altitude], zoom: newZoom, ...adjusted };
+    }
+    return extraProps;
+  }
+};
+
 // dist/lib/layer-extension.js
 var LayerExtension = class {
   static get componentName() {