@antv/l7-map 2.21.0 → 2.21.2

package/es/map.js

@@ -1,13 +1,4 @@
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import { DOM, lodashUtil } from '@antv/l7-utils';
 import Camera from "./camera";
 function loadStyles(css, doc) {
@@ -40,7 +31,102 @@ function loadStyles(css, doc) {
   head.appendChild(style);
   return style;
 }
-loadStyles(".l7-map {\n  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;\n  overflow: hidden;\n  position: relative;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n.l7-canvas {\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n.l7-map:-webkit-full-screen {\n  width: 100%;\n  height: 100%;\n}\n\n.l7-canary {\n  background-color: salmon;\n}\n\n.l7-canvas-container.l7-interactive,\n.l7-ctrl-group button.l7-ctrl-compass {\n  cursor: -webkit-grab;\n  cursor: grab;\n  -moz-user-select: none;\n  -webkit-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n}\n\n.l7-canvas-container.l7-interactive.l7-track-pointer {\n  cursor: pointer;\n}\n\n.l7-canvas-container.l7-interactive:active,\n.l7-ctrl-group button.l7-ctrl-compass:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n\n.l7-canvas-container.l7-touch-zoom-rotate,\n.l7-canvas-container.l7-touch-zoom-rotate .l7-canvas {\n  -ms-touch-action: pan-x pan-y;\n      touch-action: pan-x pan-y;\n}\n\n.l7-canvas-container.l7-touch-drag-pan,\n.l7-canvas-container.l7-touch-drag-pan .l7-canvas {\n  -ms-touch-action: pinch-zoom;\n      touch-action: pinch-zoom;\n}\n\n.l7-canvas-container.l7-touch-zoom-rotate.l7-touch-drag-pan,\n.l7-canvas-container.l7-touch-zoom-rotate.l7-touch-drag-pan .l7-canvas {\n  -ms-touch-action: none;\n      touch-action: none;\n}\n\n.l7-ctrl-top-left,\n.l7-ctrl-top-right,\n.l7-ctrl-bottom-left,\n.l7-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }\n.l7-ctrl-top-left     { top: 0; left: 0; }\n.l7-ctrl-top-right    { top: 0; right: 0; }\n.l7-ctrl-bottom-left  { bottom: 0; left: 0; }\n.l7-ctrl-bottom-right { right: 0; bottom: 0; }\n\n.l7-ctrl {\n  clear: both;\n  pointer-events: auto;\n\n  /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */\n  -webkit-transform: translate(0, 0);\n          transform: translate(0, 0);\n}\n.l7-ctrl-top-left .l7-ctrl     { margin: 10px 0 0 10px; float: left; }\n.l7-ctrl-top-right .l7-ctrl    { margin: 10px 10px 0 0; float: right; }\n.l7-ctrl-bottom-left .l7-ctrl  { margin: 0 0 10px 10px; float: left; }\n.l7-ctrl-bottom-right .l7-ctrl { margin: 0 10px 10px 0; float: right; }\n\n\n.l7-crosshair,\n.l7-crosshair .l7-interactive,\n.l7-crosshair .l7-interactive:active {\n    cursor: crosshair;\n}\n\n.l7-boxzoom {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 0;\n    height: 0;\n    background: #fff;\n    border: 2px dotted #202020;\n    opacity: 0.5;\n    z-index: 10;\n}\n");
+loadStyles(`.l7-map {
+  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.l7-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.l7-map:-webkit-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;
+  -moz-user-select: none;
+  -webkit-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-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 LngLat from "./geo/lng_lat";
 import LngLatBounds from "./geo/lng_lat_bounds";
 // @ts-ignore
@@ -60,7 +146,7 @@ import TaskQueue from "./utils/task_queue";
       cancelable: false,
       detail: undefined
     };
-    var evt = document.createEvent('CustomEvent');
+    const evt = document.createEvent('CustomEvent');
     evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
     return evt;
   }
@@ -68,13 +154,15 @@ import TaskQueue from "./utils/task_queue";
   // @ts-ignore
   window.CustomEvent = CustomEvent;
 })();
-var defaultMinZoom = -2;
-var defaultMaxZoom = 22;
-var merge = lodashUtil.merge;
+const defaultMinZoom = -2;
+const defaultMaxZoom = 22;
+const {
+  merge
+} = lodashUtil;
 // the default values, but also the valid range
-var defaultMinPitch = 0;
-var defaultMaxPitch = 60;
-var DefaultOptions = {
+const defaultMinPitch = 0;
+const defaultMaxPitch = 60;
+const DefaultOptions = {
   hash: false,
   zoom: -1,
   center: [112, 32],
@@ -101,307 +189,253 @@ var DefaultOptions = {
   pitchEnabled: true,
   rotateEnabled: true
 };
-export var Map = /*#__PURE__*/function (_Camera) {
-  _inherits(Map, _Camera);
-  var _super = _createSuper(Map);
-  function Map(options) {
-    var _this;
-    _classCallCheck(this, Map);
-    _this = _super.call(this, merge({}, DefaultOptions, options));
-    _defineProperty(_assertThisInitialized(_this), "renderTaskQueue", new TaskQueue());
-    _defineProperty(_assertThisInitialized(_this), "trackResize", true);
-    _defineProperty(_assertThisInitialized(_this), "onWindowOnline", function () {
-      _this.update();
+export class Map extends Camera {
+  constructor(options) {
+    super(merge({}, DefaultOptions, options));
+    _defineProperty(this, "doubleClickZoom", void 0);
+    _defineProperty(this, "dragRotate", void 0);
+    _defineProperty(this, "dragPan", void 0);
+    _defineProperty(this, "touchZoomRotate", void 0);
+    _defineProperty(this, "scrollZoom", void 0);
+    _defineProperty(this, "keyboard", void 0);
+    _defineProperty(this, "touchPitch", void 0);
+    _defineProperty(this, "boxZoom", void 0);
+    _defineProperty(this, "handlers", void 0);
+    _defineProperty(this, "container", void 0);
+    _defineProperty(this, "canvas", void 0);
+    _defineProperty(this, "canvasContainer", void 0);
+    _defineProperty(this, "renderTaskQueue", new TaskQueue());
+    _defineProperty(this, "frame", void 0);
+    _defineProperty(this, "trackResize", true);
+    _defineProperty(this, "hash", void 0);
+    _defineProperty(this, "onWindowOnline", () => {
+      this.update();
     });
-    _defineProperty(_assertThisInitialized(_this), "onWindowResize", function (event) {
-      if (_this.trackResize) {
-        _this.resize({
+    _defineProperty(this, "onWindowResize", event => {
+      if (this.trackResize) {
+        this.resize({
           originalEvent: event
         }).update();
       }
     });
-    _this.initContainer();
-    _this.resize();
-    _this.handlers = new HandlerManager(_assertThisInitialized(_this), _this.options);
+    this.initContainer();
+    this.resize();
+    this.handlers = new HandlerManager(this, this.options);
     if (typeof window !== 'undefined') {
-      window.addEventListener('online', _this.onWindowOnline, false);
-      window.addEventListener('resize', _this.onWindowResize, false);
-      window.addEventListener('orientationchange', _this.onWindowResize, false);
+      window.addEventListener('online', this.onWindowOnline, false);
+      window.addEventListener('resize', this.onWindowResize, false);
+      window.addEventListener('orientationchange', this.onWindowResize, false);
     }
-    var hashName = typeof options.hash === 'string' && options.hash || undefined;
+    const hashName = typeof options.hash === 'string' && options.hash || undefined;
     if (options.hash) {
-      _this.hash = new Hash(hashName).addTo(_assertThisInitialized(_this));
+      this.hash = new Hash(hashName).addTo(this);
     }
 
     // don't set position from options if set through hash
-    if (!_this.hash || !_this.hash.onHashChange()) {
-      _this.jumpTo({
+    if (!this.hash || !this.hash.onHashChange()) {
+      this.jumpTo({
         center: options.center,
         zoom: options.zoom,
         bearing: options.bearing,
         pitch: options.pitch
       });
       if (options.bounds) {
-        _this.resize();
-        _this.fitBounds(options.bounds, merge({}, options.fitBoundsOptions, {
+        this.resize();
+        this.fitBounds(options.bounds, merge({}, options.fitBoundsOptions, {
           duration: 0
         }));
       }
     }
-    return _this;
-  }
-  _createClass(Map, [{
-    key: "resize",
-    value: function resize(eventData) {
-      var _this$containerDimens = this.containerDimensions(),
-        _this$containerDimens2 = _slicedToArray(_this$containerDimens, 2),
-        width = _this$containerDimens2[0],
-        height = _this$containerDimens2[1];
-      this.transform.resize(width, height);
-      // 小程序环境不需要执行后续动作
-      var fireMoving = !this.moving;
-      if (fireMoving) {
-        this.stop();
-        this.emit('movestart', new window.CustomEvent('movestart', eventData));
-        this.emit('move', new window.CustomEvent('move', eventData));
-      }
-      this.emit('resize', new window.CustomEvent('resize', eventData));
-      if (fireMoving) {
-        this.emit('moveend', new window.CustomEvent('moveend', eventData));
-      }
-      return this;
-    }
-  }, {
-    key: "getContainer",
-    value: function getContainer() {
-      return this.container;
-    }
-  }, {
-    key: "getCanvas",
-    value: function getCanvas() {
-      return this.canvas;
-    }
-  }, {
-    key: "getCanvasContainer",
-    value: function getCanvasContainer() {
-      return this.canvasContainer;
-    }
-  }, {
-    key: "getCanvasOverlays",
-    value: function getCanvasOverlays() {
-      return this.getCanvasContainer();
-    }
-  }, {
-    key: "project",
-    value: function project(lngLat) {
-      return this.transform.locationPoint(LngLat.convert(lngLat));
-    }
-  }, {
-    key: "unproject",
-    value: function unproject(point) {
-      return this.transform.pointLocation(Point.convert(point));
-    }
-  }, {
-    key: "getBounds",
-    value: function getBounds() {
-      return this.transform.getBounds();
-    }
-  }, {
-    key: "getMaxBounds",
-    value: function getMaxBounds() {
-      return this.transform.getMaxBounds();
-    }
-  }, {
-    key: "setMaxBounds",
-    value: function setMaxBounds(bounds) {
-      this.transform.setMaxBounds(LngLatBounds.convert(bounds));
-    }
+  }
+  resize(eventData) {
+    const [width, height] = this.containerDimensions();
+    this.transform.resize(width, height);
+    // 小程序环境不需要执行后续动作
+    const fireMoving = !this.moving;
+    if (fireMoving) {
+      this.stop();
+      this.emit('movestart', new window.CustomEvent('movestart', eventData));
+      this.emit('move', new window.CustomEvent('move', eventData));
+    }
+    this.emit('resize', new window.CustomEvent('resize', eventData));
+    if (fireMoving) {
+      this.emit('moveend', new window.CustomEvent('moveend', eventData));
+    }
+    return this;
+  }
+  getContainer() {
+    return this.container;
+  }
+  getCanvas() {
+    return this.canvas;
+  }
+  getCanvasContainer() {
+    return this.canvasContainer;
+  }
+  getCanvasOverlays() {
+    return this.getCanvasContainer();
+  }
+  project(lngLat) {
+    return this.transform.locationPoint(LngLat.convert(lngLat));
+  }
+  unproject(point) {
+    return this.transform.pointLocation(Point.convert(point));
+  }
+  getBounds() {
+    return this.transform.getBounds();
+  }
+  getMaxBounds() {
+    return this.transform.getMaxBounds();
+  }
+  setMaxBounds(bounds) {
+    this.transform.setMaxBounds(LngLatBounds.convert(bounds));
+  }
 
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  }, {
-    key: "setStyle",
-    value: function setStyle(style) {
-      return;
-    }
-  }, {
-    key: "setMinZoom",
-    value: function setMinZoom(minZoom) {
-      minZoom = minZoom === null || minZoom === undefined ? defaultMinZoom : minZoom;
-      if (minZoom >= defaultMinZoom && minZoom <= this.transform.maxZoom) {
-        this.transform.minZoom = minZoom;
-        if (this.getZoom() < minZoom) {
-          this.setZoom(minZoom);
-        }
-        return this;
-      } else {
-        throw new Error("minZoom must be between ".concat(defaultMinZoom, " and the current maxZoom, inclusive"));
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  setStyle(style) {
+    return;
+  }
+  setMinZoom(minZoom) {
+    minZoom = minZoom === null || minZoom === undefined ? defaultMinZoom : minZoom;
+    if (minZoom >= defaultMinZoom && minZoom <= this.transform.maxZoom) {
+      this.transform.minZoom = minZoom;
+      if (this.getZoom() < minZoom) {
+        this.setZoom(minZoom);
       }
+      return this;
+    } else {
+      throw new Error(`minZoom must be between ${defaultMinZoom} and the current maxZoom, inclusive`);
     }
-  }, {
-    key: "getMinZoom",
-    value: function getMinZoom() {
-      return this.transform.minZoom;
-    }
-  }, {
-    key: "setMaxZoom",
-    value: function 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');
+  }
+  getMinZoom() {
+    return this.transform.minZoom;
+  }
+  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');
     }
-  }, {
-    key: "getMaxZoom",
-    value: function getMaxZoom() {
-      return this.transform.maxZoom;
-    }
-  }, {
-    key: "setMinPitch",
-    value: function setMinPitch(minPitch) {
-      minPitch = minPitch === null || minPitch === undefined ? defaultMinPitch : minPitch;
-      if (minPitch < defaultMinPitch) {
-        throw new Error("minPitch must be greater than or equal to ".concat(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 ".concat(defaultMinPitch, " and the current maxPitch, inclusive"));
+  }
+  getMaxZoom() {
+    return this.transform.maxZoom;
+  }
+  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`);
     }
-  }, {
-    key: "getMinPitch",
-    value: function getMinPitch() {
-      return this.transform.minPitch;
-    }
-  }, {
-    key: "setMaxPitch",
-    value: function setMaxPitch(maxPitch) {
-      maxPitch = maxPitch === null || maxPitch === undefined ? defaultMaxPitch : maxPitch;
-      if (maxPitch > defaultMaxPitch) {
-        throw new Error("maxPitch must be less than or equal to ".concat(defaultMaxPitch));
-      }
-      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');
+  }
+  getMinPitch() {
+    return this.transform.minPitch;
+  }
+  setMaxPitch(maxPitch) {
+    maxPitch = maxPitch === null || maxPitch === undefined ? defaultMaxPitch : maxPitch;
+    if (maxPitch > defaultMaxPitch) {
+      throw new Error(`maxPitch must be less than or equal to ${defaultMaxPitch}`);
+    }
+    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');
     }
-  }, {
-    key: "getMaxPitch",
-    value: function getMaxPitch() {
-      return this.transform.maxPitch;
-    }
-  }, {
-    key: "getRenderWorldCopies",
-    value: function getRenderWorldCopies() {
-      return this.transform.renderWorldCopies;
-    }
-  }, {
-    key: "setRenderWorldCopies",
-    value: function setRenderWorldCopies(renderWorldCopies) {
-      this.transform.renderWorldCopies = !!renderWorldCopies;
+  }
+  getMaxPitch() {
+    return this.transform.maxPitch;
+  }
+  getRenderWorldCopies() {
+    return this.transform.renderWorldCopies;
+  }
+  setRenderWorldCopies(renderWorldCopies) {
+    this.transform.renderWorldCopies = !!renderWorldCopies;
+  }
+  remove() {
+    this.container.removeChild(this.canvasContainer);
+    // @ts-ignore
+    this.canvasContainer = null;
+    if (this.frame) {
+      this.frame.cancel();
+      this.frame = null;
+    }
+    this.renderTaskQueue.clear();
+    //销毁事件
+    this.handlers.destroy();
+    if (typeof window !== 'undefined') {
+      window.removeEventListener('online', this.onWindowOnline, false);
+      window.removeEventListener('resize', this.onWindowResize, false);
+      window.removeEventListener('orientationchange', this.onWindowResize, false);
     }
-  }, {
-    key: "remove",
-    value: function remove() {
-      this.container.removeChild(this.canvasContainer);
-      // @ts-ignore
-      this.canvasContainer = null;
-      if (this.frame) {
-        this.frame.cancel();
+  }
+  requestRenderFrame(cb) {
+    this.update();
+    return this.renderTaskQueue.add(cb);
+  }
+  cancelRenderFrame(id) {
+    return this.renderTaskQueue.remove(id);
+  }
+  triggerRepaint() {
+    if (!this.frame) {
+      this.frame = renderframe(paintStartTimeStamp => {
+        PerformanceUtils.frame(paintStartTimeStamp);
         this.frame = null;
-      }
-      this.renderTaskQueue.clear();
-      //销毁事件
-      this.handlers.destroy();
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('online', this.onWindowOnline, false);
-        window.removeEventListener('resize', this.onWindowResize, false);
-        window.removeEventListener('orientationchange', this.onWindowResize, false);
-      }
-    }
-  }, {
-    key: "requestRenderFrame",
-    value: function requestRenderFrame(cb) {
-      this.update();
-      return this.renderTaskQueue.add(cb);
-    }
-  }, {
-    key: "cancelRenderFrame",
-    value: function cancelRenderFrame(id) {
-      return this.renderTaskQueue.remove(id);
-    }
-  }, {
-    key: "triggerRepaint",
-    value: function triggerRepaint() {
-      var _this2 = this;
-      if (!this.frame) {
-        this.frame = renderframe(function (paintStartTimeStamp) {
-          PerformanceUtils.frame(paintStartTimeStamp);
-          _this2.frame = null;
-          _this2.update(paintStartTimeStamp);
-        });
-      }
+        this.update(paintStartTimeStamp);
+      });
     }
-  }, {
-    key: "update",
-    value: function update(time) {
-      var _this3 = this;
-      if (!this.frame) {
-        this.frame = renderframe(function (paintStartTimeStamp) {
-          PerformanceUtils.frame(paintStartTimeStamp);
-          _this3.frame = null;
-          _this3.renderTaskQueue.run(time);
-        });
-      }
+  }
+  update(time) {
+    if (!this.frame) {
+      this.frame = renderframe(paintStartTimeStamp => {
+        PerformanceUtils.frame(paintStartTimeStamp);
+        this.frame = null;
+        this.renderTaskQueue.run(time);
+      });
     }
-  }, {
-    key: "initContainer",
-    value: function initContainer() {
-      if (typeof this.options.container === 'string') {
-        this.container = window.document.getElementById(this.options.container);
-        if (!this.container) {
-          throw new Error("Container '".concat(this.options.container, "' not found."));
-        }
-      } else if (this.options.container instanceof HTMLElement) {
-        this.container = this.options.container;
-      } else {
-        throw new Error("Invalid type: 'container' must be a String or HTMLElement.");
-      }
-      var container = this.container;
-      container.classList.add('l7-map');
-      var canvasContainer = this.canvasContainer = DOM.create('div', 'l7-canvas-container', container);
-      if (this.options.interactive) {
-        canvasContainer.classList.add('l7-interactive');
+  }
+  initContainer() {
+    if (typeof this.options.container === 'string') {
+      this.container = window.document.getElementById(this.options.container);
+      if (!this.container) {
+        throw new Error(`Container '${this.options.container}' not found.`);
       }
+    } else if (this.options.container instanceof HTMLElement) {
+      this.container = this.options.container;
+    } else {
+      throw new Error("Invalid type: 'container' must be a String or HTMLElement.");
     }
-  }, {
-    key: "containerDimensions",
-    value: function containerDimensions() {
-      var width = 0;
-      var height = 0;
-      if (this.container) {
-        width = this.container.clientWidth;
-        height = this.container.clientHeight;
-        width = width === 0 ? 400 : width;
-        height = height === 0 ? 300 : height;
-      }
-      return [width, height];
+    const container = this.container;
+    container.classList.add('l7-map');
+    const canvasContainer = this.canvasContainer = DOM.create('div', 'l7-canvas-container', container);
+    if (this.options.interactive) {
+      canvasContainer.classList.add('l7-interactive');
     }
-  }]);
-  return Map;
-}(Camera);
+  }
+  containerDimensions() {
+    let width = 0;
+    let height = 0;
+    if (this.container) {
+      width = this.container.clientWidth;
+      height = this.container.clientHeight;
+      width = width === 0 ? 400 : width;
+      height = height === 0 ? 300 : height;
+    }
+    return [width, height];
+  }
+}