@deck.gl/arcgis 9.3.4 → 9.3.6

package/dist/index.cjs

@@ -17,15 +17,15 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+var __toESM = (mod2, isNodeMode, target) => (target = mod2 != null ? __create(__getProtoOf(mod2)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
   // compatible transform (i.e. "__esModule" has not been set), then set
   // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
+  isNodeMode || !mod2 || !mod2.__esModule ? __defProp(target, "default", { value: mod2, enumerable: true }) : target,
+  mod2
 ));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __toCommonJS = (mod2) => __copyProps(__defProp({}, "__esModule", { value: true }), mod2);
 
 // dist/index.js
 var dist_exports = {};
@@ -171,7 +171,9 @@ out vec4 fragColor;
 
 void main(void) {
     vec4 imageColor = texture(deckglTexture, v_texcoord);
-    imageColor.rgb *= imageColor.a;
+    // FBO stores premultiplied RGBA (rgb already multiplied by alpha).
+    // The composite blend (ONE, ONE_MINUS_SRC_ALPHA) handles premultiplied
+    // input correctly; multiplying again here would darken overlays.
     fragColor = imageColor;
 }
     `,
@@ -179,8 +181,8 @@ void main(void) {
       deckglTexture: texture
     },
     parameters: {
-      depthWriteEnabled: true,
-      depthCompare: "less-equal",
+      depthWriteEnabled: false,
+      depthCompare: "always",
       blendColorSrcFactor: "one",
       blendColorDstFactor: "one-minus-src-alpha",
       blendAlphaSrcFactor: "one",
@@ -209,6 +211,8 @@ void main(void) {
     _framebuffer: fbo,
     _customRender: (redrawReason) => {
       if (redrawReason === "arcgis") {
+        const glCtx = device.gl;
+        glCtx.blendFuncSeparate(glCtx.ONE, glCtx.ONE_MINUS_SRC_ALPHA, glCtx.ONE, glCtx.ONE_MINUS_SRC_ALPHA);
         deckInstance._drawLayers(redrawReason);
       } else {
         this.redraw();
@@ -218,33 +222,48 @@ void main(void) {
   return { deck: deckInstance, texture, fbo, model };
 }
 function render(resources, viewport) {
-  var _a, _b;
   const { model, deck, fbo } = resources;
   const device = model.device;
   if (device instanceof import_webgl.WebGLDevice) {
-    const { width, height, ...viewState } = viewport;
+    const rawScreenFbo = device.getParametersWebGL(36006);
+    const { width, height, views, viewState, ...defaultViewState } = viewport;
     const dpr = window.devicePixelRatio;
     const pixelWidth = Math.round(width * dpr);
     const pixelHeight = Math.round(height * dpr);
-    const externalFbo = device.getParametersWebGL(36006);
-    let screenFbo = null;
-    if (externalFbo) {
-      if (((_a = resources._externalFramebuffer) == null ? void 0 : _a.handle) !== externalFbo) {
-        (_b = resources._externalFramebuffer) == null ? void 0 : _b.wrapper.destroy();
-        const wrapper = device.createFramebuffer({
-          handle: externalFbo,
-          width: pixelWidth,
-          height: pixelHeight
-        });
-        resources._externalFramebuffer = { handle: externalFbo, wrapper };
-      }
-      screenFbo = resources._externalFramebuffer.wrapper;
-    }
     fbo.resize({ width: pixelWidth, height: pixelHeight });
-    deck.setProps({ viewState });
+    const currentTexture = fbo.colorAttachments[0].texture ?? fbo.colorAttachments[0];
+    if (currentTexture !== resources.texture) {
+      resources.texture = currentTexture;
+      model.setBindings({ deckglTexture: currentTexture });
+    }
+    const deckProps = {
+      width,
+      height,
+      viewState: viewState || defaultViewState
+    };
+    if (views) {
+      deckProps.views = views;
+    }
+    deck.setProps(deckProps);
     deck.redraw("arcgis");
+    const { gl } = device;
+    if (rawScreenFbo) {
+      gl.bindFramebuffer(36160, rawScreenFbo);
+      gl.drawBuffers([36064]);
+    } else {
+      gl.drawBuffers([1029]);
+    }
+    gl.enable(3042);
+    gl.blendFuncSeparate(1, 771, 1, 771);
+    gl.blendEquationSeparate(32774, 32774);
+    const screenFboAdapter = {
+      handle: rawScreenFbo,
+      width: pixelWidth,
+      height: pixelHeight,
+      colorAttachments: [null]
+    };
     const textureToScreenPass = device.beginRenderPass({
-      framebuffer: screenFbo,
+      framebuffer: screenFboAdapter,
       parameters: { viewport: [0, 0, pixelWidth, pixelHeight] },
       clearColor: false,
       clearDepth: false
@@ -257,12 +276,10 @@ function render(resources, viewport) {
   }
 }
 function finalizeResources(resources) {
-  var _a;
   resources.deck.finalize();
   resources.model.destroy();
   resources.fbo.destroy();
   resources.texture.destroy();
-  (_a = resources._externalFramebuffer) == null ? void 0 : _a.wrapper.destroy();
 }
 
 // dist/deck-layer-view-2d.js
@@ -318,55 +335,2793 @@ function createDeckLayerView2D(BaseLayerViewGL2D2) {
   });
 }
 
+// ../core/src/utils/positions.ts
+var NUMBER_REGEX = /^(?:\d+\.?\d*|\.\d+)$/;
+function parsePosition(value) {
+  switch (typeof value) {
+    case "number":
+      if (!Number.isFinite(value)) {
+        throw new Error(`Could not parse position string ${value}`);
+      }
+      return { type: "literal", value };
+    case "string":
+      try {
+        const tokens = tokenize(value);
+        const parser = new LayoutExpressionParser(tokens);
+        return parser.parseExpression();
+      } catch (error) {
+        const reason = error instanceof Error ? error.message : String(error);
+        throw new Error(`Could not parse position string ${value}: ${reason}`);
+      }
+    default:
+      throw new Error(`Could not parse position string ${value}`);
+  }
+}
+function evaluateLayoutExpression(expression, extent) {
+  switch (expression.type) {
+    case "literal":
+      return expression.value;
+    case "percentage":
+      return Math.round(expression.value * extent);
+    case "binary":
+      const left = evaluateLayoutExpression(expression.left, extent);
+      const right = evaluateLayoutExpression(expression.right, extent);
+      return expression.operator === "+" ? left + right : left - right;
+    default:
+      throw new Error("Unknown layout expression type");
+  }
+}
+function getPosition(expression, extent) {
+  return evaluateLayoutExpression(expression, extent);
+}
+function tokenize(input) {
+  const tokens = [];
+  let index = 0;
+  while (index < input.length) {
+    const char = input[index];
+    if (/\s/.test(char)) {
+      index++;
+      continue;
+    }
+    if (char === "+" || char === "-" || char === "(" || char === ")" || char === "%") {
+      tokens.push({ type: "symbol", value: char });
+      index++;
+      continue;
+    }
+    if (isDigit(char) || char === ".") {
+      const start = index;
+      let hasDecimal = char === ".";
+      index++;
+      while (index < input.length) {
+        const next = input[index];
+        if (isDigit(next)) {
+          index++;
+          continue;
+        }
+        if (next === "." && !hasDecimal) {
+          hasDecimal = true;
+          index++;
+          continue;
+        }
+        break;
+      }
+      const numberString = input.slice(start, index);
+      if (!NUMBER_REGEX.test(numberString)) {
+        throw new Error("Invalid number token");
+      }
+      tokens.push({ type: "number", value: parseFloat(numberString) });
+      continue;
+    }
+    if (isAlpha(char)) {
+      const start = index;
+      while (index < input.length && isAlpha(input[index])) {
+        index++;
+      }
+      const word = input.slice(start, index).toLowerCase();
+      tokens.push({ type: "word", value: word });
+      continue;
+    }
+    throw new Error("Invalid token in position string");
+  }
+  return tokens;
+}
+var LayoutExpressionParser = class {
+  constructor(tokens) {
+    this.index = 0;
+    this.tokens = tokens;
+  }
+  parseExpression() {
+    const expression = this.parseBinaryExpression();
+    if (this.index < this.tokens.length) {
+      throw new Error("Unexpected token at end of expression");
+    }
+    return expression;
+  }
+  parseBinaryExpression() {
+    let expression = this.parseFactor();
+    let token = this.peek();
+    while (isAddSubSymbol(token)) {
+      this.index++;
+      const right = this.parseFactor();
+      expression = { type: "binary", operator: token.value, left: expression, right };
+      token = this.peek();
+    }
+    return expression;
+  }
+  parseFactor() {
+    const token = this.peek();
+    if (!token) {
+      throw new Error("Unexpected end of expression");
+    }
+    if (token.type === "symbol" && token.value === "+") {
+      this.index++;
+      return this.parseFactor();
+    }
+    if (token.type === "symbol" && token.value === "-") {
+      this.index++;
+      const factor = this.parseFactor();
+      return { type: "binary", operator: "-", left: { type: "literal", value: 0 }, right: factor };
+    }
+    if (token.type === "symbol" && token.value === "(") {
+      this.index++;
+      const expression = this.parseBinaryExpression();
+      if (!this.consumeSymbol(")")) {
+        throw new Error("Missing closing parenthesis");
+      }
+      return expression;
+    }
+    if (token.type === "word" && token.value === "calc") {
+      this.index++;
+      if (!this.consumeSymbol("(")) {
+        throw new Error("Missing opening parenthesis after calc");
+      }
+      const expression = this.parseBinaryExpression();
+      if (!this.consumeSymbol(")")) {
+        throw new Error("Missing closing parenthesis");
+      }
+      return expression;
+    }
+    if (token.type === "number") {
+      this.index++;
+      const numberValue = token.value;
+      const nextToken = this.peek();
+      if (nextToken && nextToken.type === "symbol" && nextToken.value === "%") {
+        this.index++;
+        return { type: "percentage", value: numberValue / 100 };
+      }
+      if (nextToken && nextToken.type === "word" && nextToken.value === "px") {
+        this.index++;
+        return { type: "literal", value: numberValue };
+      }
+      return { type: "literal", value: numberValue };
+    }
+    throw new Error("Unexpected token in expression");
+  }
+  consumeSymbol(value) {
+    const token = this.peek();
+    if (token && token.type === "symbol" && token.value === value) {
+      this.index++;
+      return true;
+    }
+    return false;
+  }
+  peek() {
+    return this.tokens[this.index] || null;
+  }
+};
+function isDigit(char) {
+  return char >= "0" && char <= "9";
+}
+function isAlpha(char) {
+  return char >= "a" && char <= "z" || char >= "A" && char <= "Z";
+}
+function isAddSubSymbol(token) {
+  return Boolean(token && token.type === "symbol" && (token.value === "+" || token.value === "-"));
+}
+
+// ../core/src/utils/deep-equal.ts
+function deepEqual(a, b, depth) {
+  if (a === b) {
+    return true;
+  }
+  if (!depth || !a || !b) {
+    return false;
+  }
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length) {
+      return false;
+    }
+    for (let i = 0; i < a.length; i++) {
+      if (!deepEqual(a[i], b[i], depth - 1)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (Array.isArray(b)) {
+    return false;
+  }
+  if (typeof a === "object" && typeof b === "object") {
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length) {
+      return false;
+    }
+    for (const key of aKeys) {
+      if (!b.hasOwnProperty(key)) {
+        return false;
+      }
+      if (!deepEqual(a[key], b[key], depth - 1)) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
+// ../core/src/utils/deep-merge.ts
+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, source) {
+  target = target.slice();
+  for (let i = 0; i < source.length; i++) {
+    const v = source[i];
+    if (Number.isFinite(v)) {
+      target[i] = v;
+    }
+  }
+  return target;
+}
+
+// ../core/src/views/view.ts
+var View = class {
+  constructor(props) {
+    const { id, x = 0, y = 0, width = "100%", height = "100%", padding = null } = props;
+    this.id = id || this.constructor.displayName || "view";
+    this.props = { ...props, id: this.id };
+    this._x = parsePosition(x);
+    this._y = parsePosition(y);
+    this._width = parsePosition(width);
+    this._height = parsePosition(height);
+    this._padding = padding && {
+      left: parsePosition(padding.left || 0),
+      right: parsePosition(padding.right || 0),
+      top: parsePosition(padding.top || 0),
+      bottom: parsePosition(padding.bottom || 0)
+    };
+    this.equals = this.equals.bind(this);
+    Object.seal(this);
+  }
+  equals(view) {
+    if (this === view) {
+      return true;
+    }
+    return this.constructor === view.constructor && deepEqual(this.props, view.props, 2);
+  }
+  /** Clone this view with modified props */
+  clone(newProps) {
+    const ViewConstructor = this.constructor;
+    return new ViewConstructor({ ...this.props, ...newProps });
+  }
+  /** Make viewport from canvas dimensions and view state */
+  makeViewport({ width, height, viewState }) {
+    viewState = this.filterViewState(viewState);
+    const viewportDimensions = this.getDimensions({ width, height });
+    if (!viewportDimensions.height || !viewportDimensions.width) {
+      return null;
+    }
+    const ViewportType = this.getViewportType(viewState);
+    return new ViewportType({ ...viewState, ...this.props, ...viewportDimensions });
+  }
+  getViewStateId() {
+    const { viewState } = this.props;
+    if (typeof viewState === "string") {
+      return viewState;
+    }
+    return (viewState == null ? void 0 : viewState.id) || this.id;
+  }
+  // Allows view to override (or completely define) viewState
+  filterViewState(viewState) {
+    if (this.props.viewState && typeof this.props.viewState === "object") {
+      if (!this.props.viewState.id) {
+        return this.props.viewState;
+      }
+      return deepMergeViewState(viewState, this.props.viewState);
+    }
+    return viewState;
+  }
+  /** Resolve the dimensions of the view from overall canvas dimensions */
+  getDimensions({ width, height }) {
+    const dimensions = {
+      x: getPosition(this._x, width),
+      y: getPosition(this._y, height),
+      width: getPosition(this._width, width),
+      height: getPosition(this._height, height)
+    };
+    if (this._padding) {
+      dimensions.padding = {
+        left: getPosition(this._padding.left, width),
+        top: getPosition(this._padding.top, height),
+        right: getPosition(this._padding.right, width),
+        bottom: getPosition(this._padding.bottom, height)
+      };
+    }
+    return dimensions;
+  }
+  // Used by sub classes to resolve controller props
+  get controller() {
+    const opts = this.props.controller;
+    if (!opts) {
+      return null;
+    }
+    if (opts === true) {
+      return { type: this.ControllerType };
+    }
+    if (typeof opts === "function") {
+      return { type: opts };
+    }
+    return { type: this.ControllerType, ...opts };
+  }
+};
+
+// ../core/src/utils/log.ts
+var import_log = require("@probe.gl/log");
+var defaultLogger = new import_log.Log({ id: "deck" });
+var log_default = defaultLogger;
+
+// ../core/src/utils/math-utils.ts
+var import_core2 = require("@math.gl/core");
+function createMat4() {
+  return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+}
+function mod(value, divisor) {
+  const modulus = value % divisor;
+  return modulus < 0 ? divisor + modulus : modulus;
+}
+function getCameraPosition(viewMatrixInverse) {
+  return [viewMatrixInverse[12], viewMatrixInverse[13], viewMatrixInverse[14]];
+}
+function getFrustumPlanes(viewProjectionMatrix) {
+  return {
+    left: getFrustumPlane(
+      viewProjectionMatrix[3] + viewProjectionMatrix[0],
+      viewProjectionMatrix[7] + viewProjectionMatrix[4],
+      viewProjectionMatrix[11] + viewProjectionMatrix[8],
+      viewProjectionMatrix[15] + viewProjectionMatrix[12]
+    ),
+    right: getFrustumPlane(
+      viewProjectionMatrix[3] - viewProjectionMatrix[0],
+      viewProjectionMatrix[7] - viewProjectionMatrix[4],
+      viewProjectionMatrix[11] - viewProjectionMatrix[8],
+      viewProjectionMatrix[15] - viewProjectionMatrix[12]
+    ),
+    bottom: getFrustumPlane(
+      viewProjectionMatrix[3] + viewProjectionMatrix[1],
+      viewProjectionMatrix[7] + viewProjectionMatrix[5],
+      viewProjectionMatrix[11] + viewProjectionMatrix[9],
+      viewProjectionMatrix[15] + viewProjectionMatrix[13]
+    ),
+    top: getFrustumPlane(
+      viewProjectionMatrix[3] - viewProjectionMatrix[1],
+      viewProjectionMatrix[7] - viewProjectionMatrix[5],
+      viewProjectionMatrix[11] - viewProjectionMatrix[9],
+      viewProjectionMatrix[15] - viewProjectionMatrix[13]
+    ),
+    near: getFrustumPlane(
+      viewProjectionMatrix[3] + viewProjectionMatrix[2],
+      viewProjectionMatrix[7] + viewProjectionMatrix[6],
+      viewProjectionMatrix[11] + viewProjectionMatrix[10],
+      viewProjectionMatrix[15] + viewProjectionMatrix[14]
+    ),
+    far: getFrustumPlane(
+      viewProjectionMatrix[3] - viewProjectionMatrix[2],
+      viewProjectionMatrix[7] - viewProjectionMatrix[6],
+      viewProjectionMatrix[11] - viewProjectionMatrix[10],
+      viewProjectionMatrix[15] - viewProjectionMatrix[14]
+    )
+  };
+}
+var scratchVector = new import_core2.Vector3();
+function getFrustumPlane(a, b, c, d) {
+  scratchVector.set(a, b, c);
+  const L = scratchVector.len();
+  return { distance: d / L, normal: new import_core2.Vector3(-a / L, -b / L, -c / L) };
+}
+
+// ../core/src/viewports/viewport.ts
+var import_core3 = require("@math.gl/core");
+var import_web_mercator = require("@math.gl/web-mercator");
+
+// ../core/src/lib/constants.ts
+var import_mjolnir = require("mjolnir.js");
+var COORDINATE_SYSTEM = {
+  /**
+   * `LNGLAT` if rendering into a geospatial viewport, `CARTESIAN` otherwise
+   */
+  DEFAULT: "default",
+  /**
+   * Positions are interpreted as [longitude, latitude, elevation]
+   * longitude/latitude are in degrees, elevation is in meters.
+   * Dimensions are in meters.
+   */
+  LNGLAT: "lnglat",
+  /**
+   * Positions are interpreted as [x, y, z] in meter offsets from the coordinate origin.
+   * Dimensions are in meters.
+   */
+  METER_OFFSETS: "meter-offsets",
+  /**
+   * Positions are interpreted as [deltaLng, deltaLat, elevation] from the coordinate origin.
+   * deltaLng/deltaLat are in degrees, elevation is in meters.
+   * Dimensions are in meters.
+   */
+  LNGLAT_OFFSETS: "lnglat-offsets",
+  /**
+   * Positions and dimensions are in the common units of the viewport.
+   */
+  CARTESIAN: "cartesian"
+};
+Object.defineProperty(COORDINATE_SYSTEM, "IDENTITY", {
+  get: () => {
+    log_default.deprecated("COORDINATE_SYSTEM.IDENTITY", "COORDINATE_SYSTEM.CARTESIAN")();
+    return COORDINATE_SYSTEM.CARTESIAN;
+  }
+});
+var PROJECTION_MODE = {
+  /**
+   * Render geospatial data in Web Mercator projection
+   */
+  WEB_MERCATOR: 1,
+  /**
+   * Render geospatial data as a 3D globe
+   */
+  GLOBE: 2,
+  /**
+   * (Internal use only) Web Mercator projection at high zoom
+   */
+  WEB_MERCATOR_AUTO_OFFSET: 4,
+  /**
+   * No transformation
+   */
+  IDENTITY: 0
+};
+var RECOGNIZERS = {
+  multipan: [import_mjolnir.Pan, { threshold: 10, direction: import_mjolnir.InputDirection.Vertical, pointers: 2 }],
+  pinch: [import_mjolnir.Pinch, {}, null, ["multipan"]],
+  pan: [import_mjolnir.Pan, { threshold: 1 }, ["pinch"], ["multipan"]],
+  dblclick: [import_mjolnir.Tap, { event: "dblclick", taps: 2 }],
+  click: [import_mjolnir.Tap, { event: "click" }, null, ["dblclick"]]
+};
+
+// ../core/src/viewports/viewport.ts
+var DEGREES_TO_RADIANS = Math.PI / 180;
+var IDENTITY = createMat4();
+var ZERO_VECTOR = [0, 0, 0];
+var DEFAULT_DISTANCE_SCALES = {
+  unitsPerMeter: [1, 1, 1],
+  metersPerUnit: [1, 1, 1]
+};
+function createProjectionMatrix({
+  width,
+  height,
+  orthographic,
+  fovyRadians,
+  focalDistance,
+  padding,
+  near,
+  far
+}) {
+  const aspect = width / height;
+  const matrix = orthographic ? new import_core3.Matrix4().orthographic({ fovy: fovyRadians, aspect, focalDistance, near, far }) : new import_core3.Matrix4().perspective({ fovy: fovyRadians, aspect, near, far });
+  if (padding) {
+    const { left = 0, right = 0, top = 0, bottom = 0 } = padding;
+    const offsetX = (0, import_core3.clamp)((left + width - right) / 2, 0, width) - width / 2;
+    const offsetY = (0, import_core3.clamp)((top + height - bottom) / 2, 0, height) - height / 2;
+    matrix[8] -= offsetX * 2 / width;
+    matrix[9] += offsetY * 2 / height;
+  }
+  return matrix;
+}
+var _Viewport = class {
+  // eslint-disable-next-line complexity
+  constructor(opts = {}) {
+    this._frustumPlanes = {};
+    this.id = opts.id || this.constructor.displayName || "viewport";
+    this.x = opts.x || 0;
+    this.y = opts.y || 0;
+    this.width = opts.width || 1;
+    this.height = opts.height || 1;
+    this.zoom = opts.zoom || 0;
+    this.padding = opts.padding;
+    this.distanceScales = opts.distanceScales || DEFAULT_DISTANCE_SCALES;
+    this.focalDistance = opts.focalDistance || 1;
+    this.position = opts.position || ZERO_VECTOR;
+    this.modelMatrix = opts.modelMatrix || null;
+    const { longitude, latitude } = opts;
+    this.isGeospatial = Number.isFinite(latitude) && Number.isFinite(longitude);
+    this._initProps(opts);
+    this._initMatrices(opts);
+    this.equals = this.equals.bind(this);
+    this.project = this.project.bind(this);
+    this.unproject = this.unproject.bind(this);
+    this.projectPosition = this.projectPosition.bind(this);
+    this.unprojectPosition = this.unprojectPosition.bind(this);
+    this.projectFlat = this.projectFlat.bind(this);
+    this.unprojectFlat = this.unprojectFlat.bind(this);
+  }
+  get subViewports() {
+    return null;
+  }
+  get metersPerPixel() {
+    return this.distanceScales.metersPerUnit[2] / this.scale;
+  }
+  get projectionMode() {
+    if (this.isGeospatial) {
+      return this.zoom < 12 ? PROJECTION_MODE.WEB_MERCATOR : PROJECTION_MODE.WEB_MERCATOR_AUTO_OFFSET;
+    }
+    return PROJECTION_MODE.IDENTITY;
+  }
+  // Two viewports are equal if width and height are identical, and if
+  // their view and projection matrices are (approximately) equal.
+  equals(viewport) {
+    if (!(viewport instanceof _Viewport)) {
+      return false;
+    }
+    if (this === viewport) {
+      return true;
+    }
+    return viewport.width === this.width && viewport.height === this.height && viewport.scale === this.scale && (0, import_core3.equals)(viewport.projectionMatrix, this.projectionMatrix) && (0, import_core3.equals)(viewport.viewMatrix, this.viewMatrix);
+  }
+  /**
+   * Projects xyz (possibly latitude and longitude) to pixel coordinates in window
+   * using viewport projection parameters
+   * - [longitude, latitude] to [x, y]
+   * - [longitude, latitude, Z] => [x, y, z]
+   * Note: By default, returns top-left coordinates for canvas/SVG type render
+   *
+   * @param {Array} lngLatZ - [lng, lat] or [lng, lat, Z]
+   * @param {Object} opts - options
+   * @param {Object} opts.topLeft=true - Whether projected coords are top left
+   * @return {Array} - [x, y] or [x, y, z] in top left coords
+   */
+  project(xyz, { topLeft = true } = {}) {
+    const worldPosition = this.projectPosition(xyz);
+    const coord = (0, import_web_mercator.worldToPixels)(worldPosition, this.pixelProjectionMatrix);
+    const [x, y] = coord;
+    const y2 = topLeft ? y : this.height - y;
+    return xyz.length === 2 ? [x, y2] : [x, y2, coord[2]];
+  }
+  /**
+   * Unproject pixel coordinates on screen onto world coordinates,
+   * (possibly [lon, lat]) on map.
+   * - [x, y] => [lng, lat]
+   * - [x, y, z] => [lng, lat, Z]
+   * @param {Array} xyz -
+   * @param {Object} opts - options
+   * @param {Object} opts.topLeft=true - Whether origin is top left
+   * @return {Array|null} - [lng, lat, Z] or [X, Y, Z]
+   */
+  unproject(xyz, { topLeft = true, targetZ } = {}) {
+    const [x, y, z] = xyz;
+    const y2 = topLeft ? y : this.height - y;
+    const targetZWorld = targetZ && targetZ * this.distanceScales.unitsPerMeter[2];
+    const coord = (0, import_web_mercator.pixelsToWorld)([x, y2, z], this.pixelUnprojectionMatrix, targetZWorld);
+    const [X, Y, Z] = this.unprojectPosition(coord);
+    if (Number.isFinite(z)) {
+      return [X, Y, Z];
+    }
+    return Number.isFinite(targetZ) ? [X, Y, targetZ] : [X, Y];
+  }
+  // NON_LINEAR PROJECTION HOOKS
+  // Used for web meractor projection
+  projectPosition(xyz) {
+    const [X, Y] = this.projectFlat(xyz);
+    const Z = (xyz[2] || 0) * this.distanceScales.unitsPerMeter[2];
+    return [X, Y, Z];
+  }
+  unprojectPosition(xyz) {
+    const [X, Y] = this.unprojectFlat(xyz);
+    const Z = (xyz[2] || 0) * this.distanceScales.metersPerUnit[2];
+    return [X, Y, Z];
+  }
+  /**
+   * Project [lng,lat] on sphere onto [x,y] on 512*512 Mercator Zoom 0 tile.
+   * Performs the nonlinear part of the web mercator projection.
+   * Remaining projection is done with 4x4 matrices which also handles
+   * perspective.
+   * @param {Array} lngLat - [lng, lat] coordinates
+   *   Specifies a point on the sphere to project onto the map.
+   * @return {Array} [x,y] coordinates.
+   */
+  projectFlat(xyz) {
+    if (this.isGeospatial) {
+      const result = (0, import_web_mercator.lngLatToWorld)(xyz);
+      result[1] = (0, import_core3.clamp)(result[1], -318, 830);
+      return result;
+    }
+    return xyz;
+  }
+  /**
+   * Unproject world point [x,y] on map onto {lat, lon} on sphere
+   * @param {object|Vector} xy - object with {x,y} members
+   *  representing point on projected map plane
+   * @return {GeoCoordinates} - object with {lat,lon} of point on sphere.
+   *   Has toArray method if you need a GeoJSON Array.
+   *   Per cartographic tradition, lat and lon are specified as degrees.
+   */
+  unprojectFlat(xyz) {
+    if (this.isGeospatial) {
+      return (0, import_web_mercator.worldToLngLat)(xyz);
+    }
+    return xyz;
+  }
+  /**
+   * Get bounds of the current viewport
+   * @return {Array} - [minX, minY, maxX, maxY]
+   */
+  getBounds(options = {}) {
+    const unprojectOption = { targetZ: options.z || 0 };
+    const topLeft = this.unproject([0, 0], unprojectOption);
+    const topRight = this.unproject([this.width, 0], unprojectOption);
+    const bottomLeft = this.unproject([0, this.height], unprojectOption);
+    const bottomRight = this.unproject([this.width, this.height], unprojectOption);
+    return [
+      Math.min(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+      Math.min(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1]),
+      Math.max(topLeft[0], topRight[0], bottomLeft[0], bottomRight[0]),
+      Math.max(topLeft[1], topRight[1], bottomLeft[1], bottomRight[1])
+    ];
+  }
+  getDistanceScales(coordinateOrigin) {
+    if (coordinateOrigin && this.isGeospatial) {
+      return (0, import_web_mercator.getDistanceScales)({
+        longitude: coordinateOrigin[0],
+        latitude: coordinateOrigin[1],
+        highPrecision: true
+      });
+    }
+    return this.distanceScales;
+  }
+  containsPixel({
+    x,
+    y,
+    width = 1,
+    height = 1
+  }) {
+    return x < this.x + this.width && this.x < x + width && y < this.y + this.height && this.y < y + height;
+  }
+  // Extract frustum planes in common space
+  getFrustumPlanes() {
+    if (this._frustumPlanes.near) {
+      return this._frustumPlanes;
+    }
+    Object.assign(this._frustumPlanes, getFrustumPlanes(this.viewProjectionMatrix));
+    return this._frustumPlanes;
+  }
+  // EXPERIMENTAL METHODS
+  /**
+   * Needed by panning and linear transition
+   * Pan the viewport to place a given world coordinate at screen point [x, y]
+   *
+   * @param {Array} coords - world coordinates
+   * @param {Array} pixel - [x,y] coordinates on screen
+   * @param {Array} startPixel - [x,y] screen position where pan started (optional, for delta-based panning)
+   * @return {Object} props of the new viewport
+   */
+  panByPosition(coords, pixel, startPixel) {
+    return null;
+  }
+  // INTERNAL METHODS
+  /* eslint-disable complexity, max-statements */
+  _initProps(opts) {
+    const longitude = opts.longitude;
+    const latitude = opts.latitude;
+    if (this.isGeospatial) {
+      if (!Number.isFinite(opts.zoom)) {
+        this.zoom = (0, import_web_mercator.getMeterZoom)({ latitude }) + Math.log2(this.focalDistance);
+      }
+      this.distanceScales = opts.distanceScales || (0, import_web_mercator.getDistanceScales)({ latitude, longitude });
+    }
+    const scale = Math.pow(2, this.zoom);
+    this.scale = scale;
+    const { position, modelMatrix } = opts;
+    let meterOffset = ZERO_VECTOR;
+    if (position) {
+      meterOffset = modelMatrix ? new import_core3.Matrix4(modelMatrix).transformAsVector(position, []) : position;
+    }
+    if (this.isGeospatial) {
+      const center = this.projectPosition([longitude, latitude, 0]);
+      this.center = new import_core3.Vector3(meterOffset).scale(this.distanceScales.unitsPerMeter).add(center);
+    } else {
+      this.center = this.projectPosition(meterOffset);
+    }
+  }
+  /* eslint-enable complexity, max-statements */
+  _initMatrices(opts) {
+    const {
+      // View matrix
+      viewMatrix = IDENTITY,
+      // Projection matrix
+      projectionMatrix = null,
+      // Projection matrix parameters, used if projectionMatrix not supplied
+      orthographic = false,
+      fovyRadians,
+      fovy = 75,
+      near = 0.1,
+      // Distance of near clipping plane
+      far = 1e3,
+      // Distance of far clipping plane
+      padding = null,
+      // Center offset in pixels
+      focalDistance = 1
+    } = opts;
+    this.viewMatrixUncentered = viewMatrix;
+    this.viewMatrix = new import_core3.Matrix4().multiplyRight(viewMatrix).translate(new import_core3.Vector3(this.center).negate());
+    this.projectionMatrix = projectionMatrix || createProjectionMatrix({
+      width: this.width,
+      height: this.height,
+      orthographic,
+      fovyRadians: fovyRadians || fovy * DEGREES_TO_RADIANS,
+      focalDistance,
+      padding,
+      near,
+      far
+    });
+    const vpm = createMat4();
+    import_core3.mat4.multiply(vpm, vpm, this.projectionMatrix);
+    import_core3.mat4.multiply(vpm, vpm, this.viewMatrix);
+    this.viewProjectionMatrix = vpm;
+    this.viewMatrixInverse = import_core3.mat4.invert([], this.viewMatrix) || this.viewMatrix;
+    this.cameraPosition = getCameraPosition(this.viewMatrixInverse);
+    const viewportMatrix = createMat4();
+    const pixelProjectionMatrix = createMat4();
+    import_core3.mat4.scale(viewportMatrix, viewportMatrix, [this.width / 2, -this.height / 2, 1]);
+    import_core3.mat4.translate(viewportMatrix, viewportMatrix, [1, -1, 0]);
+    import_core3.mat4.multiply(pixelProjectionMatrix, viewportMatrix, this.viewProjectionMatrix);
+    this.pixelProjectionMatrix = pixelProjectionMatrix;
+    this.pixelUnprojectionMatrix = import_core3.mat4.invert(createMat4(), this.pixelProjectionMatrix);
+    if (!this.pixelUnprojectionMatrix) {
+      log_default.warn("Pixel project matrix not invertible")();
+    }
+  }
+};
+var Viewport = _Viewport;
+Viewport.displayName = "Viewport";
+
+// ../core/src/viewports/web-mercator-viewport.ts
+var import_web_mercator2 = require("@math.gl/web-mercator");
+var import_core4 = require("@math.gl/core");
+var _WebMercatorViewport = class extends Viewport {
+  /* eslint-disable complexity, max-statements */
+  constructor(opts = {}) {
+    const {
+      latitude = 0,
+      longitude = 0,
+      zoom = 0,
+      pitch = 0,
+      bearing = 0,
+      nearZMultiplier = 0.1,
+      farZMultiplier = 1.01,
+      nearZ,
+      farZ,
+      orthographic = false,
+      projectionMatrix,
+      repeat = false,
+      worldOffset = 0,
+      position,
+      padding,
+      // backward compatibility
+      // TODO: remove in v9
+      legacyMeterSizes = false
+    } = opts;
+    let { width, height, altitude = 1.5 } = opts;
+    const scale = Math.pow(2, zoom);
+    width = width || 1;
+    height = height || 1;
+    let fovy;
+    let projectionParameters = null;
+    if (projectionMatrix) {
+      altitude = projectionMatrix[5] / 2;
+      fovy = (0, import_web_mercator2.altitudeToFovy)(altitude);
+    } else {
+      if (opts.fovy) {
+        fovy = opts.fovy;
+        altitude = (0, import_web_mercator2.fovyToAltitude)(fovy);
+      } else {
+        fovy = (0, import_web_mercator2.altitudeToFovy)(altitude);
+      }
+      let offset;
+      if (padding) {
+        const { top = 0, bottom = 0 } = padding;
+        offset = [0, (0, import_core4.clamp)((top + height - bottom) / 2, 0, height) - height / 2];
+      }
+      projectionParameters = (0, import_web_mercator2.getProjectionParameters)({
+        width,
+        height,
+        scale,
+        center: position && [0, 0, position[2] * (0, import_web_mercator2.unitsPerMeter)(latitude)],
+        offset,
+        pitch,
+        fovy,
+        nearZMultiplier,
+        farZMultiplier
+      });
+      if (Number.isFinite(nearZ)) {
+        projectionParameters.near = nearZ;
+      }
+      if (Number.isFinite(farZ)) {
+        projectionParameters.far = farZ;
+      }
+    }
+    let viewMatrixUncentered = (0, import_web_mercator2.getViewMatrix)({
+      height,
+      pitch,
+      bearing,
+      scale,
+      altitude
+    });
+    if (worldOffset) {
+      const viewOffset = new import_core4.Matrix4().translate([512 * worldOffset, 0, 0]);
+      viewMatrixUncentered = viewOffset.multiplyLeft(viewMatrixUncentered);
+    }
+    super({
+      ...opts,
+      // x, y,
+      width,
+      height,
+      // view matrix
+      viewMatrix: viewMatrixUncentered,
+      longitude,
+      latitude,
+      zoom,
+      // projection matrix parameters
+      ...projectionParameters,
+      fovy,
+      focalDistance: altitude
+    });
+    this.latitude = latitude;
+    this.longitude = longitude;
+    this.zoom = zoom;
+    this.pitch = pitch;
+    this.bearing = bearing;
+    this.altitude = altitude;
+    this.fovy = fovy;
+    this.orthographic = orthographic;
+    this._subViewports = repeat ? [] : null;
+    this._pseudoMeters = legacyMeterSizes;
+    Object.freeze(this);
+  }
+  /* eslint-enable complexity, max-statements */
+  get subViewports() {
+    if (this._subViewports && !this._subViewports.length) {
+      const bounds = this.getBounds();
+      const minOffset = Math.floor((bounds[0] + 180) / 360);
+      const maxOffset = Math.ceil((bounds[2] - 180) / 360);
+      for (let x = minOffset; x <= maxOffset; x++) {
+        const offsetViewport = x ? new _WebMercatorViewport({
+          ...this,
+          worldOffset: x
+        }) : this;
+        this._subViewports.push(offsetViewport);
+      }
+    }
+    return this._subViewports;
+  }
+  projectPosition(xyz) {
+    if (this._pseudoMeters) {
+      return super.projectPosition(xyz);
+    }
+    const [X, Y] = this.projectFlat(xyz);
+    const Z = (xyz[2] || 0) * (0, import_web_mercator2.unitsPerMeter)(xyz[1]);
+    return [X, Y, Z];
+  }
+  unprojectPosition(xyz) {
+    if (this._pseudoMeters) {
+      return super.unprojectPosition(xyz);
+    }
+    const [X, Y] = this.unprojectFlat(xyz);
+    const Z = (xyz[2] || 0) / (0, import_web_mercator2.unitsPerMeter)(Y);
+    return [X, Y, Z];
+  }
+  /**
+   * Add a meter delta to a base lnglat coordinate, returning a new lnglat array
+   *
+   * Note: Uses simple linear approximation around the viewport center
+   * Error increases with size of offset (roughly 1% per 100km)
+   *
+   * @param {[Number,Number]|[Number,Number,Number]) lngLatZ - base coordinate
+   * @param {[Number,Number]|[Number,Number,Number]) xyz - array of meter deltas
+   * @return {[Number,Number]|[Number,Number,Number]) array of [lng,lat,z] deltas
+   */
+  addMetersToLngLat(lngLatZ, xyz) {
+    return (0, import_web_mercator2.addMetersToLngLat)(lngLatZ, xyz);
+  }
+  panByPosition(coords, pixel, startPixel) {
+    const fromLocation = (0, import_web_mercator2.pixelsToWorld)(pixel, this.pixelUnprojectionMatrix);
+    const toLocation = this.projectFlat(coords);
+    const translate = import_core4.vec2.add([], toLocation, import_core4.vec2.negate([], fromLocation));
+    const newCenter = import_core4.vec2.add([], this.center, translate);
+    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_core4.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_mercator2.getBounds)(this, options.z || 0);
+    return [
+      Math.min(corners[0][0], corners[1][0], corners[2][0], corners[3][0]),
+      Math.min(corners[0][1], corners[1][1], corners[2][1], corners[3][1]),
+      Math.max(corners[0][0], corners[1][0], corners[2][0], corners[3][0]),
+      Math.max(corners[0][1], corners[1][1], corners[2][1], corners[3][1])
+    ];
+  }
+  /**
+   * Returns a new viewport that fit around the given rectangle.
+   * Only supports non-perspective mode.
+   */
+  fitBounds(bounds, options = {}) {
+    const { width, height } = this;
+    const { longitude, latitude, zoom } = (0, import_web_mercator2.fitBounds)({ width, height, bounds, ...options });
+    return new _WebMercatorViewport({ width, height, longitude, latitude, zoom });
+  }
+};
+var WebMercatorViewport = _WebMercatorViewport;
+WebMercatorViewport.displayName = "WebMercatorViewport";
+
+// ../core/src/controllers/map-controller.ts
+var import_core9 = require("@math.gl/core");
+
+// ../core/src/transitions/transition.ts
+var Transition = class {
+  /**
+   * @params timeline {Timeline}
+   */
+  constructor(timeline) {
+    this._inProgress = false;
+    this._handle = null;
+    this.time = 0;
+    // @ts-expect-error
+    this.settings = {
+      duration: 0
+    };
+    this._timeline = timeline;
+  }
+  /* Public API */
+  get inProgress() {
+    return this._inProgress;
+  }
+  /**
+   * (re)start this transition.
+   * @params props {object} - optional overriding props. see constructor
+   */
+  start(settings) {
+    var _a, _b;
+    this.cancel();
+    this.settings = settings;
+    this._inProgress = true;
+    (_b = (_a = this.settings).onStart) == null ? void 0 : _b.call(_a, this);
+  }
+  /**
+   * end this transition if it is in progress.
+   */
+  end() {
+    var _a, _b;
+    if (this._inProgress) {
+      this._timeline.removeChannel(this._handle);
+      this._handle = null;
+      this._inProgress = false;
+      (_b = (_a = this.settings).onEnd) == null ? void 0 : _b.call(_a, this);
+    }
+  }
+  /**
+   * cancel this transition if it is in progress.
+   */
+  cancel() {
+    var _a, _b;
+    if (this._inProgress) {
+      (_b = (_a = this.settings).onInterrupt) == null ? void 0 : _b.call(_a, this);
+      this._timeline.removeChannel(this._handle);
+      this._handle = null;
+      this._inProgress = false;
+    }
+  }
+  /**
+   * update this transition. Returns `true` if updated.
+   */
+  update() {
+    var _a, _b;
+    if (!this._inProgress) {
+      return false;
+    }
+    if (this._handle === null) {
+      const { _timeline: timeline, settings } = this;
+      this._handle = timeline.addChannel({
+        delay: timeline.getTime(),
+        duration: settings.duration
+      });
+    }
+    this.time = this._timeline.getTime(this._handle);
+    this._onUpdate();
+    (_b = (_a = this.settings).onUpdate) == null ? void 0 : _b.call(_a, this);
+    if (this._timeline.isFinished(this._handle)) {
+      this.end();
+    }
+    return true;
+  }
+  /* Private API */
+  _onUpdate() {
+  }
+};
+
+// ../core/src/controllers/transition-manager.ts
+var noop = () => {
+};
+var TRANSITION_EVENTS = {
+  BREAK: 1,
+  SNAP_TO_END: 2,
+  IGNORE: 3
+};
+var DEFAULT_EASING = (t) => t;
+var DEFAULT_INTERRUPTION = TRANSITION_EVENTS.BREAK;
+var TransitionManager = class {
+  constructor(opts) {
+    this._onTransitionUpdate = (transition) => {
+      const {
+        time,
+        settings: { interpolator, startProps, endProps, duration, easing }
+      } = transition;
+      const t = easing(time / duration);
+      const viewport = interpolator.interpolateProps(startProps, endProps, t);
+      this.propsInTransition = this.getControllerState({
+        ...this.props,
+        ...viewport
+      }).getViewportProps();
+      this.onViewStateChange({
+        viewState: this.propsInTransition,
+        oldViewState: this.props
+      });
+    };
+    this.getControllerState = opts.getControllerState;
+    this.propsInTransition = null;
+    this.transition = new Transition(opts.timeline);
+    this.onViewStateChange = opts.onViewStateChange || noop;
+    this.onStateChange = opts.onStateChange || noop;
+  }
+  finalize() {
+    this.transition.cancel();
+  }
+  // Returns current transitioned viewport.
+  getViewportInTransition() {
+    return this.propsInTransition;
+  }
+  // Process the vewiport change, either ignore or trigger a new transition.
+  // Return true if a new transition is triggered, false otherwise.
+  processViewStateChange(nextProps) {
+    let transitionTriggered = false;
+    const currentProps = this.props;
+    this.props = nextProps;
+    if (!currentProps || this._shouldIgnoreViewportChange(currentProps, nextProps)) {
+      return false;
+    }
+    if (this._isTransitionEnabled(nextProps)) {
+      let startProps = currentProps;
+      if (this.transition.inProgress) {
+        const { interruption, endProps } = this.transition.settings;
+        startProps = {
+          ...currentProps,
+          ...interruption === TRANSITION_EVENTS.SNAP_TO_END ? endProps : this.propsInTransition || currentProps
+        };
+      }
+      this._triggerTransition(startProps, nextProps);
+      transitionTriggered = true;
+    } else {
+      this.transition.cancel();
+    }
+    return transitionTriggered;
+  }
+  updateTransition() {
+    this.transition.update();
+  }
+  // Helper methods
+  _isTransitionEnabled(props) {
+    const { transitionDuration, transitionInterpolator } = props;
+    return (transitionDuration > 0 || transitionDuration === "auto") && Boolean(transitionInterpolator);
+  }
+  _isUpdateDueToCurrentTransition(props) {
+    if (this.transition.inProgress && this.propsInTransition) {
+      return this.transition.settings.interpolator.arePropsEqual(
+        props,
+        this.propsInTransition
+      );
+    }
+    return false;
+  }
+  _shouldIgnoreViewportChange(currentProps, nextProps) {
+    if (this.transition.inProgress) {
+      const transitionSettings = this.transition.settings;
+      return transitionSettings.interruption === TRANSITION_EVENTS.IGNORE || // Ignore update if it is due to current active transition.
+      this._isUpdateDueToCurrentTransition(nextProps);
+    }
+    if (this._isTransitionEnabled(nextProps)) {
+      return nextProps.transitionInterpolator.arePropsEqual(
+        currentProps,
+        nextProps
+      );
+    }
+    return true;
+  }
+  _triggerTransition(startProps, endProps) {
+    const startViewstate = this.getControllerState(startProps);
+    const endViewStateProps = this.getControllerState(endProps).shortestPathFrom(startViewstate);
+    const transitionInterpolator = endProps.transitionInterpolator;
+    const duration = transitionInterpolator.getDuration ? transitionInterpolator.getDuration(startProps, endProps) : endProps.transitionDuration;
+    if (duration === 0) {
+      return;
+    }
+    const initialProps = transitionInterpolator.initializeProps(startProps, endViewStateProps);
+    this.propsInTransition = {};
+    const transitionSettings = {
+      duration,
+      easing: endProps.transitionEasing || DEFAULT_EASING,
+      interpolator: transitionInterpolator,
+      interruption: endProps.transitionInterruption || DEFAULT_INTERRUPTION,
+      startProps: initialProps.start,
+      endProps: initialProps.end,
+      onStart: endProps.onTransitionStart,
+      onUpdate: this._onTransitionUpdate,
+      onInterrupt: this._onTransitionEnd(endProps.onTransitionInterrupt),
+      onEnd: this._onTransitionEnd(endProps.onTransitionEnd)
+    };
+    this.transition.start(transitionSettings);
+    this.onStateChange({ inTransition: true });
+    this.updateTransition();
+  }
+  _onTransitionEnd(callback) {
+    return (transition) => {
+      this.propsInTransition = null;
+      this.onStateChange({
+        inTransition: false,
+        isZooming: false,
+        isPanning: false,
+        isRotating: false
+      });
+      callback == null ? void 0 : callback(transition);
+    };
+  }
+};
+
+// ../core/src/transitions/transition-interpolator.ts
+var import_core5 = require("@math.gl/core");
+
+// ../core/src/utils/assert.ts
+function assert(condition, message) {
+  if (!condition) {
+    throw new Error(message || "deck.gl: assertion failed.");
+  }
+}
+
+// ../core/src/transitions/transition-interpolator.ts
+var TransitionInterpolator = class {
+  /**
+   * @param opts {array|object}
+   * @param opts.compare {array} - prop names used in equality check
+   * @param opts.extract {array} - prop names needed for interpolation
+   * @param opts.required {array} - prop names that must be supplied
+   * alternatively, supply one list of prop names as `opts` if all of the above are the same.
+   */
+  constructor(opts) {
+    const { compare, extract, required } = opts;
+    this._propsToCompare = compare;
+    this._propsToExtract = extract || compare;
+    this._requiredProps = required;
+  }
+  /**
+   * Checks if two sets of props need transition in between
+   * @param currentProps {object} - a list of viewport props
+   * @param nextProps {object} - a list of viewport props
+   * @returns {bool} - true if two props are equivalent
+   */
+  arePropsEqual(currentProps, nextProps) {
+    for (const key of this._propsToCompare) {
+      if (!(key in currentProps) || !(key in nextProps) || !(0, import_core5.equals)(currentProps[key], nextProps[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  /**
+   * Called before transition starts to validate/pre-process start and end props
+   * @param startProps {object} - a list of starting viewport props
+   * @param endProps {object} - a list of target viewport props
+   * @returns {Object} {start, end} - start and end props to be passed
+   *   to `interpolateProps`
+   */
+  initializeProps(startProps, endProps) {
+    const startViewStateProps = {};
+    const endViewStateProps = {};
+    for (const key of this._propsToExtract) {
+      if (key in startProps || key in endProps) {
+        startViewStateProps[key] = startProps[key];
+        endViewStateProps[key] = endProps[key];
+      }
+    }
+    this._checkRequiredProps(startViewStateProps);
+    this._checkRequiredProps(endViewStateProps);
+    return { start: startViewStateProps, end: endViewStateProps };
+  }
+  /**
+   * Returns transition duration
+   * @param startProps {object} - a list of starting viewport props
+   * @param endProps {object} - a list of target viewport props
+   * @returns {Number} - transition duration in milliseconds
+   */
+  getDuration(startProps, endProps) {
+    return endProps.transitionDuration;
+  }
+  _checkRequiredProps(props) {
+    if (!this._requiredProps) {
+      return;
+    }
+    this._requiredProps.forEach((propName) => {
+      const value = props[propName];
+      assert(
+        Number.isFinite(value) || Array.isArray(value),
+        `${propName} is required for transition`
+      );
+    });
+  }
+};
+
+// ../core/src/transitions/linear-interpolator.ts
+var import_core8 = require("@math.gl/core");
+
+// ../core/src/viewports/globe-viewport.ts
+var import_core6 = require("@math.gl/core");
+var import_web_mercator3 = require("@math.gl/web-mercator");
+var import_web_mercator4 = require("@math.gl/web-mercator");
+var import_core7 = require("@math.gl/core");
+var DEGREES_TO_RADIANS2 = Math.PI / 180;
+var RADIANS_TO_DEGREES = 180 / Math.PI;
+var EARTH_RADIUS = 6370972;
+var GLOBE_RADIUS = 256;
+function getDistanceScales2() {
+  const unitsPerMeter2 = GLOBE_RADIUS / EARTH_RADIUS;
+  const unitsPerDegree = Math.PI / 180 * GLOBE_RADIUS;
+  return {
+    unitsPerMeter: [unitsPerMeter2, unitsPerMeter2, unitsPerMeter2],
+    unitsPerMeter2: [0, 0, 0],
+    metersPerUnit: [1 / unitsPerMeter2, 1 / unitsPerMeter2, 1 / unitsPerMeter2],
+    unitsPerDegree: [unitsPerDegree, unitsPerDegree, unitsPerMeter2],
+    unitsPerDegree2: [0, 0, 0],
+    degreesPerUnit: [1 / unitsPerDegree, 1 / unitsPerDegree, 1 / unitsPerMeter2]
+  };
+}
+var GlobeViewport = class extends Viewport {
+  constructor(opts = {}) {
+    const {
+      longitude = 0,
+      zoom = 0,
+      // Matches Maplibre defaults
+      // https://github.com/maplibre/maplibre-gl-js/blob/f8ab4b48d59ab8fe7b068b102538793bbdd4c848/src/geo/projection/globe_transform.ts#L632-L633
+      nearZMultiplier = 0.5,
+      farZMultiplier = 1,
+      resolution = 10
+    } = opts;
+    let { latitude = 0, height, altitude = 1.5, fovy } = opts;
+    latitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+    height = height || 1;
+    if (fovy) {
+      altitude = (0, import_web_mercator3.fovyToAltitude)(fovy);
+    } else {
+      fovy = (0, import_web_mercator3.altitudeToFovy)(altitude);
+    }
+    const scale = Math.pow(2, zoom - zoomAdjust(latitude));
+    const nearZ = opts.nearZ ?? nearZMultiplier;
+    const farZ = opts.farZ ?? (altitude + GLOBE_RADIUS * 2 * scale / height) * farZMultiplier;
+    const viewMatrix = new import_core6.Matrix4().lookAt({ eye: [0, -altitude, 0], up: [0, 0, 1] });
+    viewMatrix.rotateX(latitude * DEGREES_TO_RADIANS2);
+    viewMatrix.rotateZ(-longitude * DEGREES_TO_RADIANS2);
+    viewMatrix.scale(scale / height);
+    super({
+      ...opts,
+      // x, y, width,
+      height,
+      // view matrix
+      viewMatrix,
+      longitude,
+      latitude,
+      zoom,
+      // projection matrix parameters
+      distanceScales: getDistanceScales2(),
+      fovy,
+      focalDistance: altitude,
+      near: nearZ,
+      far: farZ
+    });
+    this.scale = scale;
+    this.latitude = latitude;
+    this.longitude = longitude;
+    this.fovy = fovy;
+    this.resolution = resolution;
+  }
+  get projectionMode() {
+    return PROJECTION_MODE.GLOBE;
+  }
+  getDistanceScales() {
+    return this.distanceScales;
+  }
+  getBounds(options = {}) {
+    const unprojectOption = { targetZ: options.z || 0 };
+    const left = this.unproject([0, this.height / 2], unprojectOption);
+    const top = this.unproject([this.width / 2, 0], unprojectOption);
+    const right = this.unproject([this.width, this.height / 2], unprojectOption);
+    const bottom = this.unproject([this.width / 2, this.height], unprojectOption);
+    if (right[0] < this.longitude)
+      right[0] += 360;
+    if (left[0] > this.longitude)
+      left[0] -= 360;
+    return [
+      Math.min(left[0], right[0], top[0], bottom[0]),
+      Math.min(left[1], right[1], top[1], bottom[1]),
+      Math.max(left[0], right[0], top[0], bottom[0]),
+      Math.max(left[1], right[1], top[1], bottom[1])
+    ];
+  }
+  unproject(xyz, { topLeft = true, targetZ } = {}) {
+    const [x, y, z] = xyz;
+    const y2 = topLeft ? y : this.height - y;
+    const { pixelUnprojectionMatrix } = this;
+    let coord;
+    if (Number.isFinite(z)) {
+      coord = transformVector(pixelUnprojectionMatrix, [x, y2, z, 1]);
+    } else {
+      const coord0 = transformVector(pixelUnprojectionMatrix, [x, y2, -1, 1]);
+      const coord1 = transformVector(pixelUnprojectionMatrix, [x, y2, 1, 1]);
+      const lt = ((targetZ || 0) / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+      const lSqr = import_core7.vec3.sqrLen(import_core7.vec3.sub([], coord0, coord1));
+      const l0Sqr = import_core7.vec3.sqrLen(coord0);
+      const l1Sqr = import_core7.vec3.sqrLen(coord1);
+      const sSqr = (4 * l0Sqr * l1Sqr - (lSqr - l0Sqr - l1Sqr) ** 2) / 16;
+      const dSqr = 4 * sSqr / lSqr;
+      const r0 = Math.sqrt(l0Sqr - dSqr);
+      const dr = Math.sqrt(Math.max(0, lt * lt - dSqr));
+      const t = (r0 - dr) / Math.sqrt(lSqr);
+      coord = import_core7.vec3.lerp([], coord0, coord1, t);
+    }
+    const [X, Y, Z] = this.unprojectPosition(coord);
+    if (Number.isFinite(z)) {
+      return [X, Y, Z];
+    }
+    return Number.isFinite(targetZ) ? [X, Y, targetZ] : [X, Y];
+  }
+  projectPosition(xyz) {
+    const [lng, lat, Z = 0] = xyz;
+    const lambda = lng * DEGREES_TO_RADIANS2;
+    const phi = lat * DEGREES_TO_RADIANS2;
+    const cosPhi = Math.cos(phi);
+    const D = (Z / EARTH_RADIUS + 1) * GLOBE_RADIUS;
+    return [Math.sin(lambda) * cosPhi * D, -Math.cos(lambda) * cosPhi * D, Math.sin(phi) * D];
+  }
+  unprojectPosition(xyz) {
+    const [x, y, z] = xyz;
+    const D = import_core7.vec3.len(xyz);
+    const phi = Math.asin(z / D);
+    const lambda = Math.atan2(x, -y);
+    const lng = lambda * RADIANS_TO_DEGREES;
+    const lat = phi * RADIANS_TO_DEGREES;
+    const Z = (D / GLOBE_RADIUS - 1) * EARTH_RADIUS;
+    return [lng, lat, Z];
+  }
+  projectFlat(xyz) {
+    return xyz;
+  }
+  unprojectFlat(xyz) {
+    return xyz;
+  }
+  /**
+   * Pan the globe using delta-based movement
+   * @param coords - the geographic coordinates where the pan started
+   * @param pixel - the current screen position
+   * @param startPixel - the screen position where the pan started
+   * @returns updated viewport options with new longitude/latitude
+   */
+  panByPosition([startLng, startLat, startZoom], pixel, startPixel) {
+    const scale = Math.pow(2, this.zoom - zoomAdjust(this.latitude));
+    const rotationSpeed = 0.25 / scale;
+    const longitude = startLng + rotationSpeed * (startPixel[0] - pixel[0]);
+    let latitude = startLat - rotationSpeed * (startPixel[1] - pixel[1]);
+    latitude = Math.max(Math.min(latitude, import_web_mercator4.MAX_LATITUDE), -import_web_mercator4.MAX_LATITUDE);
+    const out = { longitude, latitude, zoom: startZoom - zoomAdjust(startLat) };
+    out.zoom += zoomAdjust(out.latitude);
+    return out;
+  }
+};
+GlobeViewport.displayName = "GlobeViewport";
+function zoomAdjust(latitude) {
+  const scaleAdjust = Math.PI * Math.cos(latitude * Math.PI / 180);
+  return Math.log2(scaleAdjust);
+}
+function transformVector(matrix, vector) {
+  const result = import_core7.vec4.transformMat4([], vector, matrix);
+  import_core7.vec4.scale(result, result, 1 / result[3]);
+  return result;
+}
+
+// ../core/src/transitions/linear-interpolator.ts
+var DEFAULT_PROPS = ["longitude", "latitude", "zoom", "bearing", "pitch"];
+var DEFAULT_REQUIRED_PROPS = ["longitude", "latitude", "zoom"];
+var LinearInterpolator = class extends TransitionInterpolator {
+  /**
+   * @param {Object} opts
+   * @param {Array} opts.transitionProps - list of props to apply linear transition to.
+   * @param {Array} opts.around - a screen point to zoom/rotate around.
+   * @param {Function} opts.makeViewport - construct a viewport instance with given props.
+   */
+  constructor(opts = {}) {
+    const transitionProps = Array.isArray(opts) ? opts : opts.transitionProps;
+    const normalizedOpts = Array.isArray(opts) ? {} : opts;
+    normalizedOpts.transitionProps = Array.isArray(transitionProps) ? {
+      compare: transitionProps,
+      required: transitionProps
+    } : transitionProps || {
+      compare: DEFAULT_PROPS,
+      required: DEFAULT_REQUIRED_PROPS
+    };
+    super(normalizedOpts.transitionProps);
+    this.opts = normalizedOpts;
+  }
+  initializeProps(startProps, endProps) {
+    const result = super.initializeProps(startProps, endProps);
+    const { makeViewport, around } = this.opts;
+    if (makeViewport && around) {
+      const TestViewport = makeViewport(startProps);
+      if (TestViewport instanceof GlobeViewport) {
+        log_default.warn("around not supported in GlobeView")();
+      } else {
+        const startViewport = makeViewport(startProps);
+        const endViewport = makeViewport(endProps);
+        const aroundPosition = startViewport.unproject(around);
+        result.start.around = around;
+        Object.assign(result.end, {
+          around: endViewport.project(aroundPosition),
+          aroundPosition,
+          width: endProps.width,
+          height: endProps.height
+        });
+      }
+    }
+    return result;
+  }
+  interpolateProps(startProps, endProps, t) {
+    const propsInTransition = {};
+    for (const key of this._propsToExtract) {
+      propsInTransition[key] = (0, import_core8.lerp)(startProps[key] || 0, endProps[key] || 0, t);
+    }
+    if (endProps.aroundPosition && this.opts.makeViewport) {
+      const viewport = this.opts.makeViewport({ ...endProps, ...propsInTransition });
+      Object.assign(
+        propsInTransition,
+        viewport.panByPosition(
+          endProps.aroundPosition,
+          // anchor point in current screen coordinates
+          (0, import_core8.lerp)(startProps.around, endProps.around, t)
+        )
+      );
+    }
+    return propsInTransition;
+  }
+};
+
+// ../core/src/controllers/controller.ts
+var NO_TRANSITION_PROPS = {
+  transitionDuration: 0
+};
+var DEFAULT_INERTIA = 300;
+var INERTIA_EASING = (t) => 1 - (1 - t) * (1 - t);
+var EVENT_TYPES = {
+  WHEEL: ["wheel"],
+  PAN: ["panstart", "panmove", "panend"],
+  PINCH: ["pinchstart", "pinchmove", "pinchend"],
+  MULTI_PAN: ["multipanstart", "multipanmove", "multipanend"],
+  DOUBLE_CLICK: ["dblclick"],
+  KEYBOARD: ["keydown"]
+};
+var pinchEventWorkaround = {};
+var Controller = class {
+  constructor(opts) {
+    this.state = {};
+    this._events = {};
+    this._interactionState = {
+      isDragging: false
+    };
+    this._customEvents = [];
+    this._eventStartBlocked = null;
+    this._panMove = false;
+    this.invertPan = false;
+    this.dragMode = "rotate";
+    this.inertia = 0;
+    this.scrollZoom = true;
+    this.dragPan = true;
+    this.dragRotate = true;
+    this.doubleClickZoom = true;
+    this.touchZoom = true;
+    this.touchRotate = false;
+    this.keyboard = true;
+    this.transitionManager = new TransitionManager({
+      ...opts,
+      getControllerState: (props) => new this.ControllerState(props),
+      onViewStateChange: this._onTransition.bind(this),
+      onStateChange: this._setInteractionState.bind(this)
+    });
+    this.handleEvent = this.handleEvent.bind(this);
+    this.eventManager = opts.eventManager;
+    this.onViewStateChange = opts.onViewStateChange || (() => {
+    });
+    this.onStateChange = opts.onStateChange || (() => {
+    });
+    this.makeViewport = opts.makeViewport;
+    this.pickPosition = opts.pickPosition;
+  }
+  set events(customEvents) {
+    this.toggleEvents(this._customEvents, false);
+    this.toggleEvents(customEvents, true);
+    this._customEvents = customEvents;
+    if (this.props) {
+      this.setProps(this.props);
+    }
+  }
+  finalize() {
+    var _a;
+    for (const eventName in this._events) {
+      if (this._events[eventName]) {
+        (_a = this.eventManager) == null ? void 0 : _a.off(eventName, this.handleEvent);
+      }
+    }
+    this.transitionManager.finalize();
+  }
+  /**
+   * Callback for events
+   */
+  handleEvent(event) {
+    this._controllerState = void 0;
+    const eventStartBlocked = this._eventStartBlocked;
+    switch (event.type) {
+      case "panstart":
+        return eventStartBlocked ? false : this._onPanStart(event);
+      case "panmove":
+        return this._onPan(event);
+      case "panend":
+        return this._onPanEnd(event);
+      case "pinchstart":
+        return eventStartBlocked ? false : this._onPinchStart(event);
+      case "pinchmove":
+        return this._onPinch(event);
+      case "pinchend":
+        return this._onPinchEnd(event);
+      case "multipanstart":
+        return eventStartBlocked ? false : this._onMultiPanStart(event);
+      case "multipanmove":
+        return this._onMultiPan(event);
+      case "multipanend":
+        return this._onMultiPanEnd(event);
+      case "dblclick":
+        return this._onDoubleClick(event);
+      case "wheel":
+        return this._onWheel(event);
+      case "keydown":
+        return this._onKeyDown(event);
+      default:
+        return false;
+    }
+  }
+  /* Event utils */
+  // Event object: http://hammerjs.github.io/api/#event-object
+  get controllerState() {
+    this._controllerState = this._controllerState || new this.ControllerState({
+      makeViewport: this.makeViewport,
+      ...this.props,
+      ...this.state
+    });
+    return this._controllerState;
+  }
+  getCenter(event) {
+    const { x, y } = this.props;
+    const { offsetCenter } = event;
+    return [offsetCenter.x - x, offsetCenter.y - y];
+  }
+  isPointInBounds(pos, event) {
+    const { width, height } = this.props;
+    if (event && event.handled) {
+      return false;
+    }
+    const inside = pos[0] >= 0 && pos[0] <= width && pos[1] >= 0 && pos[1] <= height;
+    if (inside && event) {
+      event.stopPropagation();
+    }
+    return inside;
+  }
+  isFunctionKeyPressed(event) {
+    const { srcEvent } = event;
+    return Boolean(srcEvent.metaKey || srcEvent.altKey || srcEvent.ctrlKey || srcEvent.shiftKey);
+  }
+  isDragging() {
+    return this._interactionState.isDragging || false;
+  }
+  // When a multi-touch event ends, e.g. pinch, not all pointers are lifted at the same time.
+  // This triggers a brief `pan` event.
+  // Calling this method will temporarily disable *start events to avoid conflicting transitions.
+  blockEvents(timeout) {
+    const timer = setTimeout(() => {
+      if (this._eventStartBlocked === timer) {
+        this._eventStartBlocked = null;
+      }
+    }, timeout);
+    this._eventStartBlocked = timer;
+  }
+  /**
+   * Extract interactivity options
+   */
+  setProps(props) {
+    if (props.dragMode) {
+      this.dragMode = props.dragMode;
+    }
+    const oldProps = this.props;
+    this.props = props;
+    if (!("transitionInterpolator" in props)) {
+      props.transitionInterpolator = this._getTransitionProps().transitionInterpolator;
+    }
+    this.transitionManager.processViewStateChange(props);
+    const { inertia } = props;
+    this.inertia = Number.isFinite(inertia) ? inertia : inertia === true ? DEFAULT_INERTIA : 0;
+    const {
+      scrollZoom = true,
+      dragPan = true,
+      dragRotate = true,
+      doubleClickZoom = true,
+      touchZoom = true,
+      touchRotate = false,
+      keyboard = true
+    } = props;
+    const isInteractive = Boolean(this.onViewStateChange);
+    this.toggleEvents(EVENT_TYPES.WHEEL, isInteractive && scrollZoom);
+    this.toggleEvents(EVENT_TYPES.PAN, isInteractive);
+    this.toggleEvents(EVENT_TYPES.PINCH, isInteractive && (touchZoom || touchRotate));
+    this.toggleEvents(EVENT_TYPES.MULTI_PAN, isInteractive && touchRotate);
+    this.toggleEvents(EVENT_TYPES.DOUBLE_CLICK, isInteractive && doubleClickZoom);
+    this.toggleEvents(EVENT_TYPES.KEYBOARD, isInteractive && keyboard);
+    this.scrollZoom = scrollZoom;
+    this.dragPan = dragPan;
+    this.dragRotate = dragRotate;
+    this.doubleClickZoom = doubleClickZoom;
+    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();
+  }
+  toggleEvents(eventNames, enabled) {
+    if (this.eventManager) {
+      eventNames.forEach((eventName) => {
+        if (this._events[eventName] !== enabled) {
+          this._events[eventName] = enabled;
+          if (enabled) {
+            this.eventManager.on(eventName, this.handleEvent);
+          } else {
+            this.eventManager.off(eventName, this.handleEvent);
+          }
+        }
+      });
+    }
+  }
+  // Private Methods
+  /* Callback util */
+  // formats map state and invokes callback function
+  updateViewport(newControllerState, extraProps = null, interactionState = {}) {
+    const viewState = { ...newControllerState.getViewportProps(), ...extraProps };
+    const changed = this.controllerState !== newControllerState;
+    this.state = newControllerState.getState();
+    this._setInteractionState(interactionState);
+    if (changed) {
+      const oldViewState = this.controllerState && this.controllerState.getViewportProps();
+      if (this.onViewStateChange) {
+        this.onViewStateChange({ viewState, interactionState: this._interactionState, oldViewState, viewId: this.props.id });
+      }
+    }
+  }
+  _onTransition(params) {
+    this.onViewStateChange({ ...params, interactionState: this._interactionState, viewId: this.props.id });
+  }
+  _setInteractionState(newStates) {
+    Object.assign(this._interactionState, newStates);
+    this.onStateChange(this._interactionState);
+  }
+  /* Event handlers */
+  // Default handler for the `panstart` event.
+  _onPanStart(event) {
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      return false;
+    }
+    let alternateMode = this.isFunctionKeyPressed(event) || event.rightButton || false;
+    if (this.invertPan || this.dragMode === "pan") {
+      alternateMode = !alternateMode;
+    }
+    const newControllerState = this.controllerState[alternateMode ? "panStart" : "rotateStart"]({
+      pos
+    });
+    this._panMove = alternateMode;
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
+    return true;
+  }
+  // Default handler for the `panmove` and `panend` event.
+  _onPan(event) {
+    if (!this.isDragging()) {
+      return false;
+    }
+    return this._panMove ? this._onPanMove(event) : this._onPanRotate(event);
+  }
+  _onPanEnd(event) {
+    if (!this.isDragging()) {
+      return false;
+    }
+    return this._panMove ? this._onPanMoveEnd(event) : this._onPanRotateEnd(event);
+  }
+  // Default handler for panning to move.
+  // Called by `_onPan` when panning without function key pressed.
+  _onPanMove(event) {
+    if (!this.dragPan) {
+      return false;
+    }
+    const pos = this.getCenter(event);
+    const newControllerState = this.controllerState.pan({ pos });
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isPanning: true
+    });
+    return true;
+  }
+  _onPanMoveEnd(event) {
+    const { inertia } = this;
+    if (this.dragPan && inertia && event.velocity) {
+      const pos = this.getCenter(event);
+      const endPos = [
+        pos[0] + event.velocityX * inertia / 2,
+        pos[1] + event.velocityY * inertia / 2
+      ];
+      const newControllerState = this.controllerState.pan({ pos: endPos }).panEnd();
+      this.updateViewport(
+        newControllerState,
+        {
+          ...this._getTransitionProps(),
+          transitionDuration: inertia,
+          transitionEasing: INERTIA_EASING
+        },
+        {
+          isDragging: false,
+          isPanning: true
+        }
+      );
+    } else {
+      const newControllerState = this.controllerState.panEnd();
+      this.updateViewport(newControllerState, null, {
+        isDragging: false,
+        isPanning: false
+      });
+    }
+    return true;
+  }
+  // Default handler for panning to rotate.
+  // Called by `_onPan` when panning with function key pressed.
+  _onPanRotate(event) {
+    if (!this.dragRotate) {
+      return false;
+    }
+    const pos = this.getCenter(event);
+    const newControllerState = this.controllerState.rotate({ pos });
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isRotating: true
+    });
+    return true;
+  }
+  _onPanRotateEnd(event) {
+    const { inertia } = this;
+    if (this.dragRotate && inertia && event.velocity) {
+      const pos = this.getCenter(event);
+      const endPos = [
+        pos[0] + event.velocityX * inertia / 2,
+        pos[1] + event.velocityY * inertia / 2
+      ];
+      const newControllerState = this.controllerState.rotate({ pos: endPos }).rotateEnd();
+      this.updateViewport(
+        newControllerState,
+        {
+          ...this._getTransitionProps(),
+          transitionDuration: inertia,
+          transitionEasing: INERTIA_EASING
+        },
+        {
+          isDragging: false,
+          isRotating: true
+        }
+      );
+    } else {
+      const newControllerState = this.controllerState.rotateEnd();
+      this.updateViewport(newControllerState, null, {
+        isDragging: false,
+        isRotating: false
+      });
+    }
+    return true;
+  }
+  // Default handler for the `wheel` event.
+  _onWheel(event) {
+    if (!this.scrollZoom) {
+      return false;
+    }
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      return false;
+    }
+    event.srcEvent.preventDefault();
+    const { speed = 0.01, smooth = false } = this.scrollZoom === true ? {} : this.scrollZoom;
+    const { delta } = event;
+    let scale = 2 / (1 + Math.exp(-Math.abs(delta * speed)));
+    if (delta < 0 && scale !== 0) {
+      scale = 1 / scale;
+    }
+    const transitionProps = smooth ? { ...this._getTransitionProps({ around: pos }), transitionDuration: 250 } : NO_TRANSITION_PROPS;
+    const newControllerState = this.controllerState.zoom({ pos, scale });
+    this.updateViewport(
+      newControllerState,
+      transitionProps,
+      {
+        isZooming: true,
+        isPanning: true
+      }
+    );
+    if (!smooth) {
+      this._setInteractionState({ isZooming: false, isPanning: false });
+    }
+    return true;
+  }
+  _onMultiPanStart(event) {
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      return false;
+    }
+    const newControllerState = this.controllerState.rotateStart({ pos });
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
+    return true;
+  }
+  _onMultiPan(event) {
+    if (!this.touchRotate) {
+      return false;
+    }
+    if (!this.isDragging()) {
+      return false;
+    }
+    const pos = this.getCenter(event);
+    pos[0] -= event.deltaX;
+    const newControllerState = this.controllerState.rotate({ pos });
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isRotating: true
+    });
+    return true;
+  }
+  _onMultiPanEnd(event) {
+    if (!this.isDragging()) {
+      return false;
+    }
+    const { inertia } = this;
+    if (this.touchRotate && inertia && event.velocityY) {
+      const pos = this.getCenter(event);
+      const endPos = [pos[0], pos[1] += event.velocityY * inertia / 2];
+      const newControllerState = this.controllerState.rotate({ pos: endPos });
+      this.updateViewport(
+        newControllerState,
+        {
+          ...this._getTransitionProps(),
+          transitionDuration: inertia,
+          transitionEasing: INERTIA_EASING
+        },
+        {
+          isDragging: false,
+          isRotating: true
+        }
+      );
+      this.blockEvents(inertia);
+    } else {
+      const newControllerState = this.controllerState.rotateEnd();
+      this.updateViewport(newControllerState, null, {
+        isDragging: false,
+        isRotating: false
+      });
+    }
+    return true;
+  }
+  // Default handler for the `pinchstart` event.
+  _onPinchStart(event) {
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      return false;
+    }
+    const newControllerState = this.controllerState.zoomStart({ pos }).rotateStart({ pos });
+    pinchEventWorkaround._startPinchRotation = event.rotation;
+    pinchEventWorkaround._lastPinchEvent = event;
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, { isDragging: true });
+    return true;
+  }
+  // Default handler for the `pinchmove` and `pinchend` events.
+  _onPinch(event) {
+    if (!this.touchZoom && !this.touchRotate) {
+      return false;
+    }
+    if (!this.isDragging()) {
+      return false;
+    }
+    let newControllerState = this.controllerState;
+    if (this.touchZoom) {
+      const { scale } = event;
+      const pos = this.getCenter(event);
+      newControllerState = newControllerState.zoom({ pos, scale });
+    }
+    if (this.touchRotate) {
+      const { rotation } = event;
+      newControllerState = newControllerState.rotate({
+        deltaAngleX: pinchEventWorkaround._startPinchRotation - rotation
+      });
+    }
+    this.updateViewport(newControllerState, NO_TRANSITION_PROPS, {
+      isDragging: true,
+      isPanning: this.touchZoom,
+      isZooming: this.touchZoom,
+      isRotating: this.touchRotate
+    });
+    pinchEventWorkaround._lastPinchEvent = event;
+    return true;
+  }
+  _onPinchEnd(event) {
+    if (!this.isDragging()) {
+      return false;
+    }
+    const { inertia } = this;
+    const { _lastPinchEvent } = pinchEventWorkaround;
+    if (this.touchZoom && inertia && _lastPinchEvent && event.scale !== _lastPinchEvent.scale) {
+      const pos = this.getCenter(event);
+      let newControllerState = this.controllerState.rotateEnd();
+      const z = Math.log2(event.scale);
+      const velocityZ = (z - Math.log2(_lastPinchEvent.scale)) / (event.deltaTime - _lastPinchEvent.deltaTime);
+      const endScale = Math.pow(2, z + velocityZ * inertia / 2);
+      newControllerState = newControllerState.zoom({ pos, scale: endScale }).zoomEnd();
+      this.updateViewport(
+        newControllerState,
+        {
+          ...this._getTransitionProps({ around: pos }),
+          transitionDuration: inertia,
+          transitionEasing: INERTIA_EASING
+        },
+        {
+          isDragging: false,
+          isPanning: this.touchZoom,
+          isZooming: this.touchZoom,
+          isRotating: false
+        }
+      );
+      this.blockEvents(inertia);
+    } else {
+      const newControllerState = this.controllerState.zoomEnd().rotateEnd();
+      this.updateViewport(newControllerState, null, {
+        isDragging: false,
+        isPanning: false,
+        isZooming: false,
+        isRotating: false
+      });
+    }
+    pinchEventWorkaround._startPinchRotation = null;
+    pinchEventWorkaround._lastPinchEvent = null;
+    return true;
+  }
+  // Default handler for the `dblclick` event.
+  _onDoubleClick(event) {
+    if (!this.doubleClickZoom) {
+      return false;
+    }
+    const pos = this.getCenter(event);
+    if (!this.isPointInBounds(pos, event)) {
+      return false;
+    }
+    const isZoomOut = this.isFunctionKeyPressed(event);
+    const newControllerState = this.controllerState.zoom({ pos, scale: isZoomOut ? 0.5 : 2 });
+    this.updateViewport(newControllerState, this._getTransitionProps({ around: pos }), {
+      isZooming: true,
+      isPanning: true
+    });
+    this.blockEvents(100);
+    return true;
+  }
+  // Default handler for the `keydown` event
+  _onKeyDown(event) {
+    if (!this.keyboard) {
+      return false;
+    }
+    const funcKey = this.isFunctionKeyPressed(event);
+    const { zoomSpeed, moveSpeed, rotateSpeedX, rotateSpeedY } = this.keyboard === true ? {} : this.keyboard;
+    const { controllerState } = this;
+    let newControllerState;
+    const interactionState = {};
+    switch (event.srcEvent.code) {
+      case "Minus":
+        newControllerState = funcKey ? controllerState.zoomOut(zoomSpeed).zoomOut(zoomSpeed) : controllerState.zoomOut(zoomSpeed);
+        interactionState.isZooming = true;
+        break;
+      case "Equal":
+        newControllerState = funcKey ? controllerState.zoomIn(zoomSpeed).zoomIn(zoomSpeed) : controllerState.zoomIn(zoomSpeed);
+        interactionState.isZooming = true;
+        break;
+      case "ArrowLeft":
+        if (funcKey) {
+          newControllerState = controllerState.rotateLeft(rotateSpeedX);
+          interactionState.isRotating = true;
+        } else {
+          newControllerState = controllerState.moveLeft(moveSpeed);
+          interactionState.isPanning = true;
+        }
+        break;
+      case "ArrowRight":
+        if (funcKey) {
+          newControllerState = controllerState.rotateRight(rotateSpeedX);
+          interactionState.isRotating = true;
+        } else {
+          newControllerState = controllerState.moveRight(moveSpeed);
+          interactionState.isPanning = true;
+        }
+        break;
+      case "ArrowUp":
+        if (funcKey) {
+          newControllerState = controllerState.rotateUp(rotateSpeedY);
+          interactionState.isRotating = true;
+        } else {
+          newControllerState = controllerState.moveUp(moveSpeed);
+          interactionState.isPanning = true;
+        }
+        break;
+      case "ArrowDown":
+        if (funcKey) {
+          newControllerState = controllerState.rotateDown(rotateSpeedY);
+          interactionState.isRotating = true;
+        } else {
+          newControllerState = controllerState.moveDown(moveSpeed);
+          interactionState.isPanning = true;
+        }
+        break;
+      default:
+        return false;
+    }
+    this.updateViewport(newControllerState, this._getTransitionProps(), interactionState);
+    return true;
+  }
+  _getTransitionProps(opts) {
+    const { transition } = this;
+    if (!transition || !transition.transitionInterpolator) {
+      return NO_TRANSITION_PROPS;
+    }
+    return opts ? {
+      ...transition,
+      transitionInterpolator: new LinearInterpolator({
+        ...opts,
+        ...transition.transitionInterpolator.opts,
+        makeViewport: this.controllerState.makeViewport
+      })
+    } : transition;
+  }
+};
+
+// ../core/src/controllers/view-state.ts
+var ViewState = class {
+  constructor(props, state, makeViewport) {
+    this.makeViewport = makeViewport;
+    this._viewportProps = this.applyConstraints(props);
+    this._state = state;
+  }
+  getViewportProps() {
+    return this._viewportProps;
+  }
+  getState() {
+    return this._state;
+  }
+};
+
+// ../core/src/controllers/map-controller.ts
+var import_web_mercator5 = require("@math.gl/web-mercator");
+var PITCH_MOUSE_THRESHOLD = 5;
+var PITCH_ACCEL = 1.2;
+var WEB_MERCATOR_TILE_SIZE = 512;
+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_mercator5.lngLatToWorld)([lng, lat]);
+    return [x, (0, import_core9.clamp)(y2, 0, WEB_MERCATOR_TILE_SIZE)];
+  }
+  const [, y] = (0, import_web_mercator5.lngLatToWorld)([0, lat]);
+  return [lng, (0, import_core9.clamp)(y, 0, WEB_MERCATOR_TILE_SIZE)];
+}
+var MapState = class extends ViewState {
+  constructor(options) {
+    const {
+      /** Mapbox viewport properties */
+      /** The width of the viewport */
+      width,
+      /** The height of the viewport */
+      height,
+      /** The latitude at the center of the viewport */
+      latitude,
+      /** The longitude at the center of the viewport */
+      longitude,
+      /** The tile zoom level of the map. */
+      zoom,
+      /** The bearing of the viewport in degrees */
+      bearing = 0,
+      /** The pitch of the viewport in degrees */
+      pitch = 0,
+      /**
+       * Specify the altitude of the viewport camera
+       * Unit: map heights, default 1.5
+       * Non-public API, see https://github.com/mapbox/mapbox-gl-js/issues/1137
+       */
+      altitude = 1.5,
+      /** Viewport position */
+      position = [0, 0, 0],
+      /** Viewport constraints */
+      maxZoom = 20,
+      minZoom = 0,
+      maxPitch = 60,
+      minPitch = 0,
+      /** Interaction states, required to calculate change during transform */
+      /* The point on map being grabbed when the operation first started */
+      startPanLngLat,
+      /* Center of the zoom when the operation first started */
+      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 */
+      startPitch,
+      /** Zoom when current zoom operation started */
+      startZoom,
+      /** Normalize viewport props to fit map height into viewport */
+      normalize = true
+    } = options;
+    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,
+        latitude,
+        longitude,
+        zoom,
+        bearing,
+        pitch,
+        altitude,
+        maxZoom,
+        minZoom,
+        maxPitch,
+        minPitch,
+        normalize,
+        position,
+        maxBounds
+      },
+      {
+        startPanLngLat,
+        startZoomLngLat,
+        startRotatePos,
+        startRotateLngLat,
+        startBearing,
+        startPitch,
+        startZoom
+      },
+      options.makeViewport
+    );
+    this.getAltitude = options.getAltitude;
+  }
+  /**
+   * Start panning
+   * @param {[Number, Number]} pos - position on screen where the pointer grabs
+   */
+  panStart({ pos }) {
+    return this._getUpdatedState({
+      startPanLngLat: this._unproject(pos)
+    });
+  }
+  /**
+   * Pan
+   * @param {[Number, Number]} pos - position on screen where the pointer is
+   * @param {[Number, Number], optional} startPos - where the pointer grabbed at
+   *   the start of the operation. Must be supplied of `panStart()` was not called
+   */
+  pan({ pos, startPos }) {
+    const startPanLngLat = this.getState().startPanLngLat || this._unproject(startPos);
+    if (!startPanLngLat) {
+      return this;
+    }
+    const viewport = this.makeViewport(this.getViewportProps());
+    const newProps = viewport.panByPosition(startPanLngLat, pos);
+    return this._getUpdatedState(newProps);
+  }
+  /**
+   * End panning
+   * Must call if `panStart()` was called
+   */
+  panEnd() {
+    return this._getUpdatedState({
+      startPanLngLat: null
+    });
+  }
+  /**
+   * Start rotating
+   * @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
+    });
+  }
+  /**
+   * Rotate
+   * @param {[Number, Number]} pos - position on screen where the center is
+   */
+  rotate({
+    pos,
+    deltaAngleX = 0,
+    deltaAngleY = 0
+  }) {
+    const { startRotatePos, startRotateLngLat, startBearing, startPitch } = this.getState();
+    if (!startRotatePos || startBearing === void 0 || startPitch === void 0) {
+      return this;
+    }
+    let newRotation;
+    if (pos) {
+      newRotation = this._getNewRotation(pos, startRotatePos, startPitch, startBearing);
+    } else {
+      newRotation = {
+        bearing: startBearing + deltaAngleX,
+        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);
+  }
+  /**
+   * End rotating
+   * Must call if `rotateStart()` was called
+   */
+  rotateEnd() {
+    return this._getUpdatedState({
+      startRotatePos: null,
+      startRotateLngLat: null,
+      startBearing: null,
+      startPitch: null
+    });
+  }
+  /**
+   * Start zooming
+   * @param {[Number, Number]} pos - position on screen where the center is
+   */
+  zoomStart({ pos }) {
+    return this._getUpdatedState({
+      startZoomLngLat: this._unproject(pos),
+      startZoom: this.getViewportProps().zoom
+    });
+  }
+  /**
+   * Zoom
+   * @param {[Number, Number]} pos - position on screen where the current center is
+   * @param {[Number, Number]} startPos - the center 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, startZoomLngLat } = this.getState();
+    if (!startZoomLngLat) {
+      startZoom = this.getViewportProps().zoom;
+      startZoomLngLat = this._unproject(startPos) || this._unproject(pos);
+    }
+    if (!startZoomLngLat) {
+      return this;
+    }
+    const zoom = this._constrainZoom(startZoom + Math.log2(scale));
+    const zoomedViewport = this.makeViewport({ ...this.getViewportProps(), zoom });
+    return this._getUpdatedState({
+      zoom,
+      ...zoomedViewport.panByPosition(startZoomLngLat, pos)
+    });
+  }
+  /**
+   * End zooming
+   * Must call if `zoomStart()` was called
+   */
+  zoomEnd() {
+    return this._getUpdatedState({
+      startZoomLngLat: null,
+      startZoom: null
+    });
+  }
+  zoomIn(speed = 2) {
+    return this._zoomFromCenter(speed);
+  }
+  zoomOut(speed = 2) {
+    return this._zoomFromCenter(1 / speed);
+  }
+  moveLeft(speed = 100) {
+    return this._panFromCenter([speed, 0]);
+  }
+  moveRight(speed = 100) {
+    return this._panFromCenter([-speed, 0]);
+  }
+  moveUp(speed = 100) {
+    return this._panFromCenter([0, speed]);
+  }
+  moveDown(speed = 100) {
+    return this._panFromCenter([0, -speed]);
+  }
+  rotateLeft(speed = 15) {
+    return this._getUpdatedState({
+      bearing: this.getViewportProps().bearing - speed
+    });
+  }
+  rotateRight(speed = 15) {
+    return this._getUpdatedState({
+      bearing: this.getViewportProps().bearing + speed
+    });
+  }
+  rotateUp(speed = 10) {
+    return this._getUpdatedState({
+      pitch: this.getViewportProps().pitch + speed
+    });
+  }
+  rotateDown(speed = 10) {
+    return this._getUpdatedState({
+      pitch: this.getViewportProps().pitch - speed
+    });
+  }
+  shortestPathFrom(viewState) {
+    const fromProps = viewState.getViewportProps();
+    const props = { ...this.getViewportProps() };
+    const { bearing, longitude } = props;
+    if (Math.abs(bearing - fromProps.bearing) > 180) {
+      props.bearing = bearing < 0 ? bearing + 360 : bearing - 360;
+    }
+    if (Math.abs(longitude - fromProps.longitude) > 180) {
+      props.longitude = longitude < 0 ? longitude + 360 : longitude - 360;
+    }
+    return props;
+  }
+  // Apply any constraints (mathematical or defined by _viewportProps) to map state
+  applyConstraints(props) {
+    const { maxPitch, minPitch, pitch, longitude, bearing, normalize, maxBounds } = props;
+    if (normalize) {
+      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_core9.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_mercator5.worldToLngLat)([bl[0] + halfWidth, bl[1] + halfHeight]);
+      const [maxLng, maxLat] = (0, import_web_mercator5.worldToLngLat)([tr[0] - halfWidth, tr[1] - halfHeight]);
+      props.longitude = (0, import_core9.clamp)(props.longitude, minLng, maxLng);
+      props.latitude = (0, import_core9.clamp)(props.latitude, minLat, maxLat);
+    }
+    return props;
+  }
+  /* Private methods */
+  _constrainZoom(zoom, 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_core9.clamp)(zoom, minZoom, maxZoom);
+  }
+  _zoomFromCenter(scale) {
+    const { width, height } = this.getViewportProps();
+    return this.zoom({
+      pos: [width / 2, height / 2],
+      scale
+    });
+  }
+  _panFromCenter(offset) {
+    const { width, height } = this.getViewportProps();
+    return this.pan({
+      startPos: [width / 2, height / 2],
+      pos: [width / 2 + offset[0], height / 2 + offset[1]]
+    });
+  }
+  _getUpdatedState(newProps) {
+    return new this.constructor({
+      makeViewport: this.makeViewport,
+      ...this.getViewportProps(),
+      ...this.getState(),
+      ...newProps
+    });
+  }
+  _unproject(pos) {
+    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];
+    const centerY = pos[1];
+    const startY = startPos[1];
+    const { width, height } = this.getViewportProps();
+    const deltaScaleX = deltaX / width;
+    let deltaScaleY = 0;
+    if (deltaY > 0) {
+      if (Math.abs(height - startY) > PITCH_MOUSE_THRESHOLD) {
+        deltaScaleY = deltaY / (startY - height) * PITCH_ACCEL;
+      }
+    } else if (deltaY < 0) {
+      if (startY > PITCH_MOUSE_THRESHOLD) {
+        deltaScaleY = 1 - centerY / startY;
+      }
+    }
+    deltaScaleY = (0, import_core9.clamp)(deltaScaleY, -1, 1);
+    const { minPitch, maxPitch } = this.getViewportProps();
+    const bearing = startBearing + 180 * deltaScaleX;
+    let pitch = startPitch;
+    if (deltaScaleY > 0) {
+      pitch = startPitch + deltaScaleY * (maxPitch - startPitch);
+    } else if (deltaScaleY < 0) {
+      pitch = startPitch - deltaScaleY * (minPitch - startPitch);
+    }
+    return {
+      pitch,
+      bearing
+    };
+  }
+};
+var MapController = class extends Controller {
+  constructor() {
+    super(...arguments);
+    this.ControllerState = MapState;
+    this.transition = {
+      transitionDuration: 300,
+      transitionInterpolator: new LinearInterpolator({
+        transitionProps: {
+          compare: ["longitude", "latitude", "zoom", "bearing", "pitch", "position"],
+          required: ["longitude", "latitude", "zoom"]
+        }
+      })
+    };
+    this.dragMode = "pan";
+    /**
+     * Rotation pivot behavior:
+     * - 'center': Rotate around viewport center (default)
+     * - '2d': Rotate around pointer position at ground level (z=0)
+     * - '3d': Rotate around 3D picked point (requires pickPosition callback)
+     */
+    this.rotationPivot = "center";
+    /** Add altitude to rotateStart params based on rotationPivot mode */
+    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];
+    props.maxBounds = props.maxBounds || (props.normalize === false ? null : WEB_MERCATOR_MAX_BOUNDS);
+    super.setProps(props);
+  }
+  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);
+  }
+};
+
+// ../core/src/views/map-view.ts
+var MapView = class extends View {
+  constructor(props = {}) {
+    super(props);
+  }
+  getViewportType() {
+    return WebMercatorViewport;
+  }
+  get ControllerType() {
+    return MapController;
+  }
+};
+MapView.displayName = "MapView";
+
 // dist/deck-renderer.js
-function arcgisFOVToDeckAltitude(fov, aspectRatio) {
-  const D = Math.sqrt(1 + aspectRatio ** 2);
-  const halfFOV = fov / 2 / 180 * Math.PI;
-  return D / 2 / Math.tan(halfFOV);
+var ARCGIS_WEB_MERCATOR_SCALE_AT_ZOOM_0 = 5916575505e-1;
+var DECK_GROUND_MPP_AT_ZOOM_0 = 78271.484;
+var METERS_PER_DEG_LAT = 111320;
+var ARCGIS_DIAGONAL_FOV_RADIANS = 55 * Math.PI / 180;
+var ALTITUDE_BLEND_START_TILT = 65;
+var ALTITUDE_BLEND_END_TILT = 80;
+function getDistanceMeters(a, b) {
+  const midLatRad = (a.latitude + b.latitude) / 2 * Math.PI / 180;
+  const dLatM = (a.latitude - b.latitude) * METERS_PER_DEG_LAT;
+  const dLngM = (a.longitude - b.longitude) * METERS_PER_DEG_LAT * Math.cos(midLatRad);
+  return Math.sqrt(dLatM * dLatM + dLngM * dLngM);
 }
-function createDeckRenderer(DeckProps2, externalRenderers2) {
+function getZoom(view, longitude, latitude, width, height) {
+  const focalPoint = view.toMap({ x: width / 2, y: height / 2 });
+  const focalPointRight = view.toMap({ x: width / 2 + 1, y: height / 2 });
+  if (focalPoint && focalPointRight) {
+    const horizontalMetersPerPixel = getDistanceMeters(focalPoint, focalPointRight);
+    if (horizontalMetersPerPixel > 0) {
+      const latitudeRad = latitude * Math.PI / 180;
+      return Math.log2(DECK_GROUND_MPP_AT_ZOOM_0 * Math.cos(latitudeRad) / horizontalMetersPerPixel);
+    }
+  }
+  return Math.log2(ARCGIS_WEB_MERCATOR_SCALE_AT_ZOOM_0 / view.scale) - 1;
+}
+function smoothstep(edge0, edge1, value) {
+  const t = Math.max(0, Math.min(1, (value - edge0) / (edge1 - edge0)));
+  return t * t * (3 - 2 * t);
+}
+function getFovMatchedAltitude(width, height) {
+  const aspect = width / height;
+  const verticalTan = Math.tan(ARCGIS_DIAGONAL_FOV_RADIANS / 2) / Math.sqrt(1 + aspect * aspect);
+  return 0.5 / verticalTan;
+}
+function getAltitude(tilt, slantAltitude, width, height) {
+  const fovAltitude = getFovMatchedAltitude(width, height);
+  const blend = smoothstep(ALTITUDE_BLEND_START_TILT, ALTITUDE_BLEND_END_TILT, tilt);
+  return slantAltitude * (1 - blend) + fovAltitude * blend;
+}
+function getArcGISMatrixViewState(view, longitude, latitude, zoom, resolution, altitude) {
+  return {
+    views: new MapView({ id: "arcgis-scene" }),
+    viewState: {
+      "arcgis-scene": {
+        id: "arcgis-scene",
+        longitude,
+        latitude,
+        zoom,
+        pitch: view.camera.tilt,
+        bearing: view.camera.heading,
+        altitude,
+        position: [0, 0, 0],
+        resolution
+      }
+    }
+  };
+}
+function createDeckRenderer(DeckProps2, RenderNode2) {
   class DeckRenderer2 {
-    constructor(view, props) {
+    constructor(viewOrProps, props) {
       this.resources = null;
       this.cancelInitialization = null;
-      this.view = view;
-      this.deck = new DeckProps2(props);
-    }
-    async setup(context) {
-      const gl = context.gl;
-      let cancelled = false;
-      this.cancelInitialization = () => cancelled = true;
-      const resources = await initializeResources.call(this, gl);
-      if (cancelled) {
-        finalizeResources(resources);
-        return;
+      this.renderNode = null;
+      if (viewOrProps && typeof viewOrProps === "object" && "view" in viewOrProps) {
+        const { view, ...deckProps } = viewOrProps;
+        this.view = view;
+        this.deck = new DeckProps2(deckProps);
+      } else {
+        this.view = viewOrProps;
+        this.deck = new DeckProps2(props);
       }
-      this.deck.on("change", (props) => resources.deck.setProps(props));
-      resources.deck.setProps(this.deck.toJSON());
-      this.resources = resources;
+      let isInitializing = false;
+      const self = this;
+      const DeckRenderNode = RenderNode2.createSubclass({
+        consumes: { required: ["composite-color"] },
+        produces: "composite-color",
+        initialize() {
+        },
+        render(inputs) {
+          const renderNode = this;
+          const passthrough = inputs.find((i) => i.name === "composite-color");
+          if (!self.resources && !isInitializing) {
+            const gl2 = renderNode.gl;
+            if (gl2) {
+              isInitializing = true;
+              let cancelled = false;
+              self.cancelInitialization = () => {
+                cancelled = true;
+              };
+              initializeResources.call(self, gl2).then((resources) => {
+                isInitializing = false;
+                if (cancelled) {
+                  finalizeResources(resources);
+                  return;
+                }
+                self.deck.on("change", (deckProps) => resources.deck.setProps(deckProps));
+                resources.deck.setProps(self.deck.toJSON());
+                self.resources = resources;
+                renderNode.requestRender();
+              }).catch((err) => {
+                isInitializing = false;
+                console.error("DeckRenderer: failed to initialize resources", err);
+              });
+            }
+            return passthrough;
+          }
+          if (!self.resources) {
+            return passthrough;
+          }
+          const output = renderNode.bindRenderTarget();
+          const gl = renderNode.gl;
+          const dpr = window.devicePixelRatio || 1;
+          const width = gl.drawingBufferWidth / dpr;
+          const height = gl.drawingBufferHeight / dpr;
+          const cameraPos = self.view.camera.position;
+          const focalPoint = self.view.toMap({ x: width / 2, y: height / 2 });
+          const latitude = focalPoint ? focalPoint.latitude : self.view.center.latitude;
+          const longitude = focalPoint ? focalPoint.longitude : self.view.center.longitude;
+          const midLatRad = (latitude + cameraPos.latitude) / 2 * Math.PI / 180;
+          const dLatM = (cameraPos.latitude - latitude) * METERS_PER_DEG_LAT;
+          const dLngM = (cameraPos.longitude - longitude) * METERS_PER_DEG_LAT * Math.cos(midLatRad);
+          const horizM = Math.sqrt(dLatM * dLatM + dLngM * dLngM);
+          const slantM = Math.sqrt(horizM * horizM + cameraPos.z * cameraPos.z);
+          const zoom = getZoom(self.view, longitude, latitude, width, height);
+          const viewportHeightM = height * self.view.resolution;
+          const slantAltitude = slantM / viewportHeightM;
+          const altitude = getAltitude(self.view.camera.tilt, slantAltitude, width, height);
+          const arcgisMatrixView = getArcGISMatrixViewState(self.view, longitude, latitude, zoom, self.view.resolution, altitude);
+          try {
+            if (arcgisMatrixView) {
+              render(self.resources, {
+                width,
+                height,
+                latitude,
+                longitude,
+                altitude,
+                zoom,
+                bearing: self.view.camera.heading,
+                pitch: self.view.camera.tilt,
+                ...arcgisMatrixView
+              });
+            } else {
+              render(self.resources, {
+                width,
+                height,
+                latitude,
+                longitude,
+                altitude,
+                zoom,
+                bearing: self.view.camera.heading,
+                pitch: self.view.camera.tilt
+              });
+            }
+          } catch (e) {
+            console.error("DeckRenderer: render error", e);
+          }
+          return output;
+        }
+      });
+      this.renderNode = new DeckRenderNode({ view: this.view });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    async setup(_context) {
     }
     dispose() {
       var _a;
       (_a = this.cancelInitialization) == null ? void 0 : _a.call(this);
       if (this.resources) {
         finalizeResources(this.resources);
+        this.resources = null;
       }
+      this.renderNode = null;
     }
     redraw() {
-      externalRenderers2.requestRender(this.view);
+      var _a;
+      (_a = this.renderNode) == null ? void 0 : _a.requestRender();
     }
     render() {
-      const [width, height] = this.view.size;
-      render(this.resources, {
-        width,
-        height,
-        latitude: this.view.center.latitude,
-        longitude: this.view.center.longitude,
-        altitude: arcgisFOVToDeckAltitude(this.view.camera.fov, width / height),
-        zoom: this.view.zoom,
-        bearing: this.view.camera.heading,
-        pitch: this.view.camera.tilt
-      });
+      var _a;
+      (_a = this.renderNode) == null ? void 0 : _a.requestRender();
     }
   }
   return DeckRenderer2;
@@ -376,7 +3131,7 @@ function createDeckRenderer(DeckProps2, externalRenderers2) {
 var import_Accessor = __toESM(require("@arcgis/core/core/Accessor"), 1);
 var import_Layer = __toESM(require("@arcgis/core/layers/Layer"), 1);
 var import_BaseLayerViewGL2D = __toESM(require("@arcgis/core/views/2d/layers/BaseLayerViewGL2D"), 1);
-var externalRenderers = __toESM(require("@arcgis/core/views/3d/externalRenderers"), 1);
+var import_RenderNode = __toESM(require("@arcgis/core/views/3d/webgl/RenderNode"), 1);
 
 // dist/load-modules.js
 var import_esri_loader = require("esri-loader");
@@ -399,22 +3154,22 @@ async function loadArcGISModule(esri, loadScriptOptions) {
     const Layer3 = esri.layers.Layer;
     const Accessor3 = esri.core.Accessor;
     const BaseLayerViewGL2D3 = esri.views["2d"].layers.BaseLayerViewGL2D;
-    const externalRenderers3 = esri.views["3d"].externalRenderers;
-    return initialize(Layer3, Accessor3, BaseLayerViewGL2D3, externalRenderers3);
+    const RenderNode3 = esri.views["3d"].webgl.RenderNode;
+    return initialize(Layer3, Accessor3, BaseLayerViewGL2D3, RenderNode3);
   }
-  const [Layer2, Accessor2, BaseLayerViewGL2D2, externalRenderers2] = await (0, import_esri_loader.loadModules)([
+  const [Layer2, Accessor2, BaseLayerViewGL2D2, RenderNode2] = await (0, import_esri_loader.loadModules)([
     "esri/layers/Layer",
     "esri/core/Accessor",
     "esri/views/2d/layers/BaseLayerViewGL2D",
-    "esri/views/3d/externalRenderers"
+    "esri/views/3d/webgl/RenderNode"
   ], loadScriptOptions);
-  return initialize(Layer2, Accessor2, BaseLayerViewGL2D2, externalRenderers2);
+  return initialize(Layer2, Accessor2, BaseLayerViewGL2D2, RenderNode2);
 }
-function initialize(Layer2, Accessor2, BaseLayerViewGL2D2, externalRenderers2) {
+function initialize(Layer2, Accessor2, BaseLayerViewGL2D2, RenderNode2) {
   const DeckProps2 = createDeckProps(Accessor2);
   const DeckLayerView2D2 = createDeckLayerView2D(BaseLayerViewGL2D2);
   const DeckLayer2 = createDeckLayer(DeckProps2, Layer2, DeckLayerView2D2);
-  const DeckRenderer2 = createDeckRenderer(DeckProps2, externalRenderers2);
+  const DeckRenderer2 = createDeckRenderer(DeckProps2, RenderNode2);
   arcGIS = { DeckLayer: DeckLayer2, DeckRenderer: DeckRenderer2 };
   return arcGIS;
 }
@@ -423,5 +3178,5 @@ function initialize(Layer2, Accessor2, BaseLayerViewGL2D2, externalRenderers2) {
 var DeckProps = createDeckProps(import_Accessor.default);
 var DeckLayerView2D = createDeckLayerView2D(import_BaseLayerViewGL2D.default);
 var DeckLayer = createDeckLayer(DeckProps, import_Layer.default, DeckLayerView2D);
-var DeckRenderer = createDeckRenderer(DeckProps, externalRenderers);
+var DeckRenderer = createDeckRenderer(DeckProps, import_RenderNode.default);
 //# sourceMappingURL=index.cjs.map