@antv/l7-map 2.25.7 → 2.25.9

package/es/map/map.js

@@ -0,0 +1,984 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import Point from '@mapbox/point-geometry';
+import { Camera } from "./camera";
+import { LngLat } from "./geo/lng_lat";
+import { LngLatBounds } from "./geo/lng_lat_bounds";
+import { Transform } from "./geo/transform";
+import { HandlerManager } from "./handler_manager";
+import { browser } from "./util/browser";
+import { DOM } from "./util/dom";
+import { Event } from "./util/evented";
+import { TaskQueue } from "./util/task_queue";
+import { extend, uniqueId } from "./util/util";
+function loadStyles(css, doc) {
+  var isMiniAli = typeof my !== 'undefined' && !!my && typeof my.showToast === 'function' && my.isFRM !== true;
+  var isWeChatMiniProgram = typeof wx !== 'undefined' && wx !== null && (typeof wx.request !== 'undefined' || typeof wx.miniProgram !== 'undefined');
+  if (isMiniAli || isWeChatMiniProgram) {
+    return;
+  }
+  if (!doc) doc = document;
+  if (!doc) {
+    return;
+  }
+  var head = doc.head || doc.getElementsByTagName('head')[0];
+  if (!head) {
+    head = doc.createElement('head');
+    var body = doc.body || doc.getElementsByTagName('body')[0];
+    if (body) {
+      body.parentNode.insertBefore(head, body);
+    } else {
+      doc.documentElement.appendChild(head);
+    }
+  }
+  var style = doc.createElement('style');
+  style.type = 'text/css';
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(doc.createTextNode(css));
+  }
+  head.appendChild(style);
+  return style;
+}
+loadStyles(`.l7-map {
+  font:
+    12px/20px 'Helvetica Neue',
+    Arial,
+    Helvetica,
+    sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+}
+
+.l7-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.l7-map:full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.l7-canary {
+  background-color: salmon;
+}
+
+.l7-canvas-container.l7-interactive,
+.l7-ctrl-group button.l7-ctrl-compass {
+  cursor: grab;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+
+.l7-canvas-container.l7-interactive.l7-track-pointer {
+  cursor: pointer;
+}
+
+.l7-canvas-container.l7-interactive:active,
+.l7-ctrl-group button.l7-ctrl-compass:active {
+  cursor: grabbing;
+}
+
+.l7-canvas-container.l7-touch-zoom-rotate,
+.l7-canvas-container.l7-touch-zoom-rotate .l7-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.l7-canvas-container.l7-touch-drag-pan,
+.l7-canvas-container.l7-touch-drag-pan .l7-canvas {
+  touch-action: pinch-zoom;
+}
+
+.l7-canvas-container.l7-touch-zoom-rotate.l7-touch-drag-pan,
+.l7-canvas-container.l7-touch-zoom-rotate.l7-touch-drag-pan .l7-canvas {
+  touch-action: none;
+}
+
+.l7-canvas-container.l7-touch-drag-pan.l7-cooperative-gestures,
+.l7-canvas-container.l7-touch-drag-pan.l7-cooperative-gestures .l7-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.l7-cooperative-gesture-screen {
+  background: rgba(0 0 0 / 40%);
+  position: absolute;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+  padding: 1rem;
+  font-size: 1.4em;
+  line-height: 1.2;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 1s ease 1s;
+  z-index: 99999;
+}
+
+.l7-cooperative-gesture-screen.l7-show {
+  opacity: 1;
+  transition: opacity 0.05s;
+}
+
+.l7-cooperative-gesture-screen .l7-mobile-message {
+  display: none;
+}
+
+@media (hover: none), (width <= 480px) {
+  .l7-cooperative-gesture-screen .l7-desktop-message {
+    display: none;
+  }
+
+  .l7-cooperative-gesture-screen .l7-mobile-message {
+    display: block;
+  }
+}
+
+.l7-ctrl-top-left,
+.l7-ctrl-top-right,
+.l7-ctrl-bottom-left,
+.l7-ctrl-bottom-right {
+  position: absolute;
+  pointer-events: none;
+  z-index: 2;
+}
+
+.l7-ctrl-top-left {
+  top: 0;
+  left: 0;
+}
+
+.l7-ctrl-top-right {
+  top: 0;
+  right: 0;
+}
+
+.l7-ctrl-bottom-left {
+  bottom: 0;
+  left: 0;
+}
+
+.l7-ctrl-bottom-right {
+  right: 0;
+  bottom: 0;
+}
+
+.l7-ctrl {
+  clear: both;
+  pointer-events: auto;
+
+  /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */
+  -webkit-transform: translate(0, 0);
+          transform: translate(0, 0);
+}
+
+.l7-ctrl-top-left .l7-ctrl {
+  margin: 10px 0 0 10px;
+  float: left;
+}
+
+.l7-ctrl-top-right .l7-ctrl {
+  margin: 10px 10px 0 0;
+  float: right;
+}
+
+.l7-ctrl-bottom-left .l7-ctrl {
+  margin: 0 0 10px 10px;
+  float: left;
+}
+
+.l7-ctrl-bottom-right .l7-ctrl {
+  margin: 0 10px 10px 0;
+  float: right;
+}
+
+.l7-crosshair,
+.l7-crosshair .l7-interactive,
+.l7-crosshair .l7-interactive:active {
+  cursor: crosshair;
+}
+
+.l7-boxzoom {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  background: #fff;
+  border: 2px dotted #202020;
+  opacity: 0.5;
+  z-index: 10;
+}
+`);
+import { lodashUtil } from '@antv/l7-utils';
+
+/**
+ * The {@link Map} options object.
+ */
+
+// This type is used inside map since all properties are assigned a default value.
+
+const defaultMinZoom = -2;
+const defaultMaxZoom = 22;
+
+// the default values, but also the valid range
+const defaultMinPitch = 0;
+const defaultMaxPitch = 60;
+
+// use this variable to check maxPitch for validity
+const maxPitchThreshold = 85;
+const defaultOptions = {
+  interactive: true,
+  bearingSnap: 7,
+  scrollZoom: true,
+  minZoom: defaultMinZoom,
+  maxZoom: defaultMaxZoom,
+  minPitch: defaultMinPitch,
+  maxPitch: defaultMaxPitch,
+  boxZoom: true,
+  dragRotate: true,
+  dragPan: true,
+  keyboard: true,
+  doubleClickZoom: true,
+  touchZoomRotate: true,
+  touchPitch: true,
+  cooperativeGestures: false,
+  trackResize: true,
+  center: [0, 0],
+  zoom: 0,
+  bearing: 0,
+  pitch: 0,
+  renderWorldCopies: true,
+  fadeDuration: 300,
+  clickTolerance: 3,
+  pitchWithRotate: true
+};
+
+/**
+ * The `Map` object represents the map on your page. It exposes methods
+ * and properties that enable you to programmatically change the map,
+ * and fires events as users interact with it.
+ *
+ * You create a `Map` by specifying a `container` and other options, see {@link MapOptions} for the full list.
+ * Then MapLibre GL JS initializes the map on the page and returns your `Map` object.
+ *
+ * @group Main
+ *
+ * @example
+ * ```ts
+ * let map = new Map({
+ *   container: 'map',
+ *   center: [-122.420679, 37.772537],
+ *   zoom: 13,
+ * });
+ * ```
+ */
+export class Map extends Camera {
+  constructor(options) {
+    const resolvedOptions = _objectSpread(_objectSpread({}, defaultOptions), options);
+    if (resolvedOptions.minZoom != null && resolvedOptions.maxZoom != null && resolvedOptions.minZoom > resolvedOptions.maxZoom) {
+      throw new Error('maxZoom must be greater than or equal to minZoom');
+    }
+    if (resolvedOptions.minPitch != null && resolvedOptions.maxPitch != null && resolvedOptions.minPitch > resolvedOptions.maxPitch) {
+      throw new Error('maxPitch must be greater than or equal to minPitch');
+    }
+    if (resolvedOptions.minPitch != null && resolvedOptions.minPitch < defaultMinPitch) {
+      throw new Error(`minPitch must be greater than or equal to ${defaultMinPitch}`);
+    }
+    if (resolvedOptions.maxPitch != null && resolvedOptions.maxPitch > maxPitchThreshold) {
+      throw new Error(`maxPitch must be less than or equal to ${maxPitchThreshold}`);
+    }
+    const transform = new Transform(resolvedOptions.minZoom, resolvedOptions.maxZoom, resolvedOptions.minPitch, resolvedOptions.maxPitch, resolvedOptions.renderWorldCopies);
+    super(transform, {
+      bearingSnap: resolvedOptions.bearingSnap
+    });
+    _defineProperty(this, "_container", void 0);
+    _defineProperty(this, "_canvasContainer", void 0);
+    _defineProperty(this, "_interactive", void 0);
+    _defineProperty(this, "_frameRequest", void 0);
+    _defineProperty(this, "_loaded", void 0);
+    _defineProperty(this, "_idleTriggered", false);
+    // accounts for placement finishing as well
+    _defineProperty(this, "_fullyLoaded", void 0);
+    _defineProperty(this, "_trackResize", void 0);
+    _defineProperty(this, "_resizeObserver", void 0);
+    _defineProperty(this, "_preserveDrawingBuffer", void 0);
+    _defineProperty(this, "_failIfMajorPerformanceCaveat", void 0);
+    _defineProperty(this, "_fadeDuration", void 0);
+    _defineProperty(this, "_crossSourceCollisions", void 0);
+    _defineProperty(this, "_crossFadingFactor", 1);
+    _defineProperty(this, "_collectResourceTiming", void 0);
+    _defineProperty(this, "_renderTaskQueue", new TaskQueue());
+    _defineProperty(this, "_mapId", uniqueId());
+    _defineProperty(this, "_removed", void 0);
+    _defineProperty(this, "_clickTolerance", void 0);
+    _defineProperty(this, "version", void 0);
+    _defineProperty(this, "mapSize", void 0);
+    /**
+     * The map's {@link ScrollZoomHandler}, which implements zooming in and out with a scroll wheel or trackpad.
+     * Find more details and examples using `scrollZoom` in the {@link ScrollZoomHandler} section.
+     */
+    _defineProperty(this, "scrollZoom", void 0);
+    /**
+     * The map's {@link BoxZoomHandler}, which implements zooming using a drag gesture with the Shift key pressed.
+     * Find more details and examples using `boxZoom` in the {@link BoxZoomHandler} section.
+     */
+    _defineProperty(this, "boxZoom", void 0);
+    /**
+     * The map's {@link DragRotateHandler}, which implements rotating the map while dragging with the right
+     * mouse button or with the Control key pressed. Find more details and examples using `dragRotate`
+     * in the {@link DragRotateHandler} section.
+     */
+    _defineProperty(this, "dragRotate", void 0);
+    /**
+     * The map's {@link DragPanHandler}, which implements dragging the map with a mouse or touch gesture.
+     * Find more details and examples using `dragPan` in the {@link DragPanHandler} section.
+     */
+    _defineProperty(this, "dragPan", void 0);
+    /**
+     * The map's {@link KeyboardHandler}, which allows the user to zoom, rotate, and pan the map using keyboard
+     * shortcuts. Find more details and examples using `keyboard` in the {@link KeyboardHandler} section.
+     */
+    _defineProperty(this, "keyboard", void 0);
+    /**
+     * The map's {@link DoubleClickZoomHandler}, which allows the user to zoom by double clicking.
+     * Find more details and examples using `doubleClickZoom` in the {@link DoubleClickZoomHandler} section.
+     */
+    _defineProperty(this, "doubleClickZoom", void 0);
+    /**
+     * The map's {@link TwoFingersTouchZoomRotateHandler}, which allows the user to zoom or rotate the map with touch gestures.
+     * Find more details and examples using `touchZoomRotate` in the {@link TwoFingersTouchZoomRotateHandler} section.
+     */
+    _defineProperty(this, "touchZoomRotate", void 0);
+    /**
+     * The map's {@link TwoFingersTouchPitchHandler}, which allows the user to pitch the map with touch gestures.
+     * Find more details and examples using `touchPitch` in the {@link TwoFingersTouchPitchHandler} section.
+     */
+    _defineProperty(this, "touchPitch", void 0);
+    /**
+     * The map's {@link CooperativeGesturesHandler}, which allows the user to see cooperative gesture info when user tries to zoom in/out.
+     * Find more details and examples using `cooperativeGestures` in the {@link CooperativeGesturesHandler} section.
+     */
+    _defineProperty(this, "cooperativeGestures", void 0);
+    _defineProperty(this, "_onMapScroll", event => {
+      if (event.target !== this._container) return;
+
+      // Revert any scroll which would move the canvas outside of the view
+      this._container.scrollTop = 0;
+      this._container.scrollLeft = 0;
+      return false;
+    });
+    this._interactive = resolvedOptions.interactive;
+    this._trackResize = resolvedOptions.trackResize === true;
+    this._bearingSnap = resolvedOptions.bearingSnap;
+    this._fadeDuration = resolvedOptions.fadeDuration;
+    this._clickTolerance = resolvedOptions.clickTolerance;
+    this.version = options.version;
+    this.mapSize = options.mapSize;
+    if (typeof resolvedOptions.container === 'string') {
+      this._container = document.getElementById(resolvedOptions.container);
+      if (!this._container) {
+        throw new Error(`Container '${resolvedOptions.container}' not found.`);
+      }
+    } else if (resolvedOptions.container instanceof HTMLElement) {
+      this._container = resolvedOptions.container;
+    } else {
+      throw new Error("Invalid type: 'container' must be a String or HTMLElement.");
+    }
+    if (resolvedOptions.maxBounds) {
+      this.setMaxBounds(resolvedOptions.maxBounds);
+    }
+    this._setupContainer();
+    this.on('move', () => this._update()).on('moveend', () => this._update()).on('zoom', () => this._update()).once('idle', () => {
+      this._idleTriggered = true;
+    });
+    if (typeof window !== 'undefined') {
+      let initialResizeEventCaptured = false;
+      const throttledResizeCallback = lodashUtil.throttle(entries => {
+        if (this._trackResize && !this._removed) {
+          this.resize(entries)._update();
+        }
+      }, 50);
+      this._resizeObserver = new ResizeObserver(entries => {
+        if (!initialResizeEventCaptured) {
+          initialResizeEventCaptured = true;
+          return;
+        }
+        throttledResizeCallback(entries);
+      });
+      this._resizeObserver.observe(this._container);
+    }
+    this.handlers = new HandlerManager(this, resolvedOptions);
+    this.jumpTo({
+      center: resolvedOptions.center,
+      zoom: resolvedOptions.zoom,
+      bearing: resolvedOptions.bearing,
+      pitch: resolvedOptions.pitch
+    });
+    if (resolvedOptions.bounds) {
+      this.resize();
+      this.fitBounds(resolvedOptions.bounds, extend({}, resolvedOptions.fitBoundsOptions, {
+        duration: 0
+      }));
+    }
+    this.resize();
+  }
+
+  /**
+   * @internal
+   * Returns a unique number for this map instance which is used for the MapLoadEvent
+   * to make sure we only fire one event per instantiated map object.
+   * @returns the uniq map ID
+   */
+  _getMapId() {
+    return this._mapId;
+  }
+  calculateCameraOptionsFromTo(from, altitudeFrom, to, altitudeTo) {
+    return super.calculateCameraOptionsFromTo(from, altitudeFrom, to, altitudeTo);
+  }
+
+  /**
+   * Resizes the map according to the dimensions of its
+   * `container` element.
+   *
+   * Checks if the map container size changed and updates the map if it has changed.
+   * This method must be called after the map's `container` is resized programmatically
+   * or when the map is shown after being initially hidden with CSS.
+   *
+   * Triggers the following events: `movestart`, `move`, `moveend`, and `resize`.
+   *
+   * @param eventData - Additional properties to be passed to `movestart`, `move`, `resize`, and `moveend`
+   * events that get triggered as a result of resize. This can be useful for differentiating the
+   * source of an event (for example, user-initiated or programmatically-triggered events).
+   * @example
+   * Resize the map when the map container is shown after being initially hidden with CSS.
+   * ```ts
+   * let mapDiv = document.getElementById('map');
+   * if (mapDiv.style.visibility === true) map.resize();
+   * ```
+   */
+  resize(eventData) {
+    var _this$_requestedCamer;
+    const dimensions = this._containerDimensions();
+    const width = dimensions[0];
+    const height = dimensions[1];
+    this.transform.resize(width, height);
+    (_this$_requestedCamer = this._requestedCameraState) === null || _this$_requestedCamer === void 0 || _this$_requestedCamer.resize(width, height);
+    const fireMoving = !this._moving;
+    if (fireMoving) {
+      this.stop();
+      this.fire(new Event('movestart', eventData)).fire(new Event('move', eventData));
+    }
+    this.fire(new Event('resize', eventData));
+    if (fireMoving) this.fire(new Event('moveend', eventData));
+    return this;
+  }
+
+  /**
+   * Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not
+   * an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region.
+   * @returns The geographical bounds of the map as {@link LngLatBounds}.
+   * @example
+   * ```ts
+   * let bounds = map.getBounds();
+   * ```
+   */
+  getBounds() {
+    return this.transform.getBounds();
+  }
+
+  /**
+   * Returns the maximum geographical bounds the map is constrained to, or `null` if none set.
+   * @returns The map object.
+   * @example
+   * ```ts
+   * let maxBounds = map.getMaxBounds();
+   * ```
+   */
+  getMaxBounds() {
+    return this.transform.getMaxBounds();
+  }
+
+  /**
+   * Sets or clears the map's geographical bounds.
+   *
+   * Pan and zoom operations are constrained within these bounds.
+   * If a pan or zoom is performed that would
+   * display regions outside these bounds, the map will
+   * instead display a position and zoom level
+   * as close as possible to the operation's request while still
+   * remaining within the bounds.
+   *
+   * @param bounds - The maximum bounds to set. If `null` or `undefined` is provided, the function removes the map's maximum bounds.
+   * @example
+   * Define bounds that conform to the `LngLatBoundsLike` object as set the max bounds.
+   * ```ts
+   * let bounds = [
+   *   [-74.04728, 40.68392], // [west, south]
+   *   [-73.91058, 40.87764]  // [east, north]
+   * ];
+   * map.setMaxBounds(bounds);
+   * ```
+   */
+  setMaxBounds(bounds) {
+    this.transform.setMaxBounds(bounds && LngLatBounds.convert(bounds));
+    return this._update();
+  }
+
+  /**
+   * Sets or clears the map's minimum zoom level.
+   * If the map's current zoom level is lower than the new minimum,
+   * the map will zoom to the new minimum.
+   *
+   * It is not always possible to zoom out and reach the set `minZoom`.
+   * Other factors such as map height may restrict zooming. For example,
+   * if the map is 512px tall it will not be possible to zoom below zoom 0
+   * no matter what the `minZoom` is set to.
+   *
+   * A {@link ErrorEvent} event will be fired if minZoom is out of bounds.
+   *
+   * @param minZoom - The minimum zoom level to set (-2 - 24).
+   * If `null` or `undefined` is provided, the function removes the current minimum zoom (i.e. sets it to -2).
+   * @example
+   * ```ts
+   * map.setMinZoom(12.25);
+   * ```
+   */
+  setMinZoom(minZoom) {
+    minZoom = minZoom === null || minZoom === undefined ? defaultMinZoom : minZoom;
+    if (minZoom >= defaultMinZoom && minZoom <= this.transform.maxZoom) {
+      this.transform.minZoom = minZoom;
+      this._update();
+      if (this.getZoom() < minZoom) this.setZoom(minZoom);
+      return this;
+    } else throw new Error(`minZoom must be between ${defaultMinZoom} and the current maxZoom, inclusive`);
+  }
+
+  /**
+   * Returns the map's minimum allowable zoom level.
+   *
+   * @returns minZoom
+   * @example
+   * ```ts
+   * let minZoom = map.getMinZoom();
+   * ```
+   */
+  getMinZoom() {
+    return this.transform.minZoom;
+  }
+
+  /**
+   * Sets or clears the map's maximum zoom level.
+   * If the map's current zoom level is higher than the new maximum,
+   * the map will zoom to the new maximum.
+   *
+   * A {@link ErrorEvent} event will be fired if minZoom is out of bounds.
+   *
+   * @param maxZoom - The maximum zoom level to set.
+   * If `null` or `undefined` is provided, the function removes the current maximum zoom (sets it to 22).
+   * @example
+   * ```ts
+   * map.setMaxZoom(18.75);
+   * ```
+   */
+  setMaxZoom(maxZoom) {
+    maxZoom = maxZoom === null || maxZoom === undefined ? defaultMaxZoom : maxZoom;
+    if (maxZoom >= this.transform.minZoom) {
+      this.transform.maxZoom = maxZoom;
+      if (this.getZoom() > maxZoom) this.setZoom(maxZoom);
+      return this;
+    } else throw new Error('maxZoom must be greater than the current minZoom');
+  }
+
+  /**
+   * Returns the map's maximum allowable zoom level.
+   *
+   * @returns The maxZoom
+   * @example
+   * ```ts
+   * let maxZoom = map.getMaxZoom();
+   * ```
+   */
+  getMaxZoom() {
+    return this.transform.maxZoom;
+  }
+
+  /**
+   * Sets or clears the map's minimum pitch.
+   * If the map's current pitch is lower than the new minimum,
+   * the map will pitch to the new minimum.
+   *
+   * A {@link ErrorEvent} event will be fired if minPitch is out of bounds.
+   *
+   * @param minPitch - The minimum pitch to set (0-85). Values greater than 60 degrees are experimental and may result in rendering issues. If you encounter any, please raise an issue with details in the MapLibre project.
+   * If `null` or `undefined` is provided, the function removes the current minimum pitch (i.e. sets it to 0).
+   */
+  setMinPitch(minPitch) {
+    minPitch = minPitch === null || minPitch === undefined ? defaultMinPitch : minPitch;
+    if (minPitch < defaultMinPitch) {
+      throw new Error(`minPitch must be greater than or equal to ${defaultMinPitch}`);
+    }
+    if (minPitch >= defaultMinPitch && minPitch <= this.transform.maxPitch) {
+      this.transform.minPitch = minPitch;
+      if (this.getPitch() < minPitch) this.setPitch(minPitch);
+      return this;
+    } else throw new Error(`minPitch must be between ${defaultMinPitch} and the current maxPitch, inclusive`);
+  }
+
+  /**
+   * Returns the map's minimum allowable pitch.
+   *
+   * @returns The minPitch
+   */
+  getMinPitch() {
+    return this.transform.minPitch;
+  }
+
+  /**
+   * Sets or clears the map's maximum pitch.
+   * If the map's current pitch is higher than the new maximum,
+   * the map will pitch to the new maximum.
+   *
+   * A {@link ErrorEvent} event will be fired if maxPitch is out of bounds.
+   *
+   * @param maxPitch - The maximum pitch to set (0-85). Values greater than 60 degrees are experimental and may result in rendering issues. If you encounter any, please raise an issue with details in the MapLibre project.
+   * If `null` or `undefined` is provided, the function removes the current maximum pitch (sets it to 60).
+   */
+  setMaxPitch(maxPitch) {
+    maxPitch = maxPitch === null || maxPitch === undefined ? defaultMaxPitch : maxPitch;
+    if (maxPitch > maxPitchThreshold) {
+      throw new Error(`maxPitch must be less than or equal to ${maxPitchThreshold}`);
+    }
+    if (maxPitch >= this.transform.minPitch) {
+      this.transform.maxPitch = maxPitch;
+      if (this.getPitch() > maxPitch) this.setPitch(maxPitch);
+      return this;
+    } else throw new Error('maxPitch must be greater than the current minPitch');
+  }
+
+  /**
+   * Returns the map's maximum allowable pitch.
+   *
+   * @returns The maxPitch
+   */
+  getMaxPitch() {
+    return this.transform.maxPitch;
+  }
+
+  /**
+   * Returns the state of `renderWorldCopies`. If `true`, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to `false`:
+   *
+   * - When the map is zoomed out far enough that a single representation of the world does not fill the map's entire
+   * container, there will be blank space beyond 180 and -180 degrees longitude.
+   * - Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the
+   * map and the other on the left edge of the map) at every zoom level.
+   * @returns The renderWorldCopies
+   * @example
+   * ```ts
+   * let worldCopiesRendered = map.getRenderWorldCopies();
+   * ```
+   * @see [Render world copies](https://maplibre.org/maplibre-gl-js/docs/examples/render-world-copies/)
+   */
+  getRenderWorldCopies() {
+    return this.transform.renderWorldCopies;
+  }
+
+  /**
+   * Sets the state of `renderWorldCopies`.
+   *
+   * @param renderWorldCopies - If `true`, multiple copies of the world will be rendered side by side beyond -180 and 180 degrees longitude. If set to `false`:
+   *
+   * - When the map is zoomed out far enough that a single representation of the world does not fill the map's entire
+   * container, there will be blank space beyond 180 and -180 degrees longitude.
+   * - Features that cross 180 and -180 degrees longitude will be cut in two (with one portion on the right edge of the
+   * map and the other on the left edge of the map) at every zoom level.
+   *
+   * `undefined` is treated as `true`, `null` is treated as `false`.
+   * @example
+   * ```ts
+   * map.setRenderWorldCopies(true);
+   * ```
+   */
+  setRenderWorldCopies(renderWorldCopies) {
+    this.transform.renderWorldCopies = renderWorldCopies;
+  }
+
+  /**
+   * Returns a [Point](https://github.com/mapbox/point-geometry) representing pixel coordinates, relative to the map's `container`,
+   * that correspond to the specified geographical location.
+   *
+   * @param lnglat - The geographical location to project.
+   * @returns The [Point](https://github.com/mapbox/point-geometry) corresponding to `lnglat`, relative to the map's `container`.
+   * @example
+   * ```ts
+   * let coordinate = [-122.420679, 37.772537];
+   * let point = map.project(coordinate);
+   * ```
+   */
+  project(lnglat) {
+    return this.transform.locationPoint(LngLat.convert(lnglat));
+  }
+
+  /**
+   * Returns a {@link LngLat} representing geographical coordinates that correspond
+   * to the specified pixel coordinates.
+   *
+   * @param point - The pixel coordinates to unproject.
+   * @returns The {@link LngLat} corresponding to `point`.
+   * @example
+   * ```ts
+   * map.on('click', (e) => {
+   *   // When the map is clicked, get the geographic coordinate.
+   *   let coordinate = map.unproject(e.point);
+   * });
+   * ```
+   */
+  unproject(point) {
+    return this.transform.pointLocation(Point.convert(point));
+  }
+
+  /**
+   * Returns true if the map is panning, zooming, rotating, or pitching due to a camera animation or user gesture.
+   * @returns true if the map is moving.
+   * @example
+   * ```ts
+   * let isMoving = map.isMoving();
+   * ```
+   */
+  isMoving() {
+    var _this$handlers;
+    return this._moving || ((_this$handlers = this.handlers) === null || _this$handlers === void 0 ? void 0 : _this$handlers.isMoving());
+  }
+
+  /**
+   * Returns true if the map is zooming due to a camera animation or user gesture.
+   * @returns true if the map is zooming.
+   * @example
+   * ```ts
+   * let isZooming = map.isZooming();
+   * ```
+   */
+  isZooming() {
+    var _this$handlers2;
+    return this._zooming || ((_this$handlers2 = this.handlers) === null || _this$handlers2 === void 0 ? void 0 : _this$handlers2.isZooming());
+  }
+
+  /**
+   * Returns true if the map is rotating due to a camera animation or user gesture.
+   * @returns true if the map is rotating.
+   * @example
+   * ```ts
+   * map.isRotating();
+   * ```
+   */
+  isRotating() {
+    var _this$handlers3;
+    return this._rotating || ((_this$handlers3 = this.handlers) === null || _this$handlers3 === void 0 ? void 0 : _this$handlers3.isRotating());
+  }
+
+  /**
+   * Overload of the `on` method that allows to listen to events without specifying a layer.
+   * @event
+   * @param type - The type of the event.
+   * @param listener - The listener callback.
+   */
+
+  /**
+   * Overload of the `on` method that allows to listen to events without specifying a layer.
+   * @event
+   * @param type - The type of the event.
+   * @param listener - The listener callback.
+   */
+
+  on(type, listener) {
+    return super.on(type, listener);
+  }
+
+  /**
+   * Overload of the `once` method that allows to listen to events without specifying a layer.
+   * @event
+   * @param type - The type of the event.
+   * @param listener - The listener callback.
+   */
+
+  /**
+   * Overload of the `once` method that allows to listen to events without specifying a layer.
+   * @event
+   * @param type - The type of the event.
+   * @param listener - The listener callback.
+   */
+
+  once(type, listener) {
+    return super.once(type, listener);
+  }
+
+  /**
+   * Overload of the `off` method that allows to listen to events without specifying a layer.
+   * @event
+   * @param type - The type of the event.
+   * @param listener - The function previously installed as a listener.
+   */
+
+  /**
+   * Overload of the `off` method that allows to listen to events without specifying a layer.
+   * @event
+   * @param type - The type of the event.
+   * @param listener - The function previously installed as a listener.
+   */
+
+  off(type, listener) {
+    return super.off(type, listener);
+  }
+
+  /**
+   * Returns the map's containing HTML element.
+   *
+   * @returns The map's container.
+   */
+  getContainer() {
+    return this._container;
+  }
+
+  /**
+   * Returns the HTML element containing the map's `<canvas>` element.
+   *
+   * If you want to add non-GL overlays to the map, you should append them to this element.
+   *
+   * This is the element to which event bindings for map interactivity (such as panning and zooming) are
+   * attached. It will receive bubbled events from child elements such as the `<canvas>`, but not from
+   * map controls.
+   *
+   * @returns The container of the map's `<canvas>`.
+   * @see [Create a draggable point](https://maplibre.org/maplibre-gl-js/docs/examples/drag-a-point/)
+   */
+  getCanvasContainer() {
+    return this._canvasContainer;
+  }
+  _containerDimensions() {
+    let width = 0;
+    let height = 0;
+    if (this._container) {
+      width = this._container.clientWidth || 400;
+      height = this._container.clientHeight || 300;
+    }
+    return [width, height];
+  }
+  _setupContainer() {
+    const container = this._container;
+    container.classList.add('l7-map');
+    const canvasContainer = this._canvasContainer = DOM.create('div', 'l7-canvas-container', container);
+    if (this._interactive) {
+      canvasContainer.classList.add('l7-interactive');
+    }
+    this._container.addEventListener('scroll', this._onMapScroll, false);
+  }
+  /**
+   * @internal
+   * Update this map's style and sources, and re-render the map.
+   *
+   * @param updateStyle - mark the map's style for reprocessing as
+   * well as its sources
+   */
+  _update() {
+    this.triggerRepaint();
+    return this;
+  }
+
+  /**
+   * @internal
+   * Request that the given callback be executed during the next render
+   * frame.  Schedule a render frame if one is not already scheduled.
+   *
+   * @returns An id that can be used to cancel the callback
+   */
+  _requestRenderFrame(callback) {
+    this._update();
+    return this._renderTaskQueue.add(callback);
+  }
+  _cancelRenderFrame(id) {
+    this._renderTaskQueue.remove(id);
+  }
+
+  /**
+   * @internal
+   * Call when a (re-)render of the map is required:
+   *
+   * - The style has changed (`setPaintProperty()`, etc.)
+   * - Source data has changed (e.g. tiles have finished loading)
+   * - The map has is moving (or just finished moving)
+   * - A transition is in progress
+   *
+   * @param paintStartTimeStamp - The time when the animation frame began executing.
+   */
+  _render(paintStartTimeStamp) {
+    this._renderTaskQueue.run(paintStartTimeStamp);
+    // A task queue callback may have fired a user event which may have removed the map
+    if (this._removed) return;
+    this.fire(new Event('render'));
+    if (!this.isMoving()) {
+      this.fire(new Event('idle'));
+    }
+    return this;
+  }
+
+  /**
+   * Clean up and release all internal resources associated with this map.
+   *
+   * This includes DOM elements, event bindings, web workers, and WebGL resources.
+   *
+   * Use this method when you are done using the map and wish to ensure that it no
+   * longer consumes browser resources. Afterwards, you must not call any other
+   * methods on the map.
+   */
+  remove() {
+    var _this$_resizeObserver;
+    if (this._frameRequest) {
+      this._frameRequest.abort();
+      this._frameRequest = null;
+    }
+    this._renderTaskQueue.clear();
+    this.handlers.destroy();
+    delete this.handlers;
+    (_this$_resizeObserver = this._resizeObserver) === null || _this$_resizeObserver === void 0 || _this$_resizeObserver.disconnect();
+    DOM.remove(this._canvasContainer);
+    this._container.classList.remove('l7-map');
+    this._removed = true;
+    this.fire(new Event('remove'));
+  }
+
+  /**
+   * Trigger the rendering of a single frame. Use this method with custom layers to
+   * repaint the map when the layer changes. Calling this multiple times before the
+   * next frame is rendered will still result in only a single frame being rendered.
+   * @example
+   * ```ts
+   * map.triggerRepaint();
+   * ```
+   */
+  triggerRepaint() {
+    if (!this._frameRequest) {
+      this._frameRequest = new AbortController();
+      browser.frameAsync(this._frameRequest).then(paintStartTimeStamp => {
+        this._frameRequest = null;
+        this._render(paintStartTimeStamp);
+      }).catch(() => {}); // ignore abort error
+    }
+  }
+
+  /**
+   * Returns the elevation for the point where the camera is looking.
+   * This value corresponds to:
+   * "meters above sea level" * "exaggeration"
+   * @returns The elevation.
+   */
+  getCameraTargetElevation() {
+    return this.transform.elevation;
+  }
+}