leaflet-rotate 0.3.0 → 0.4.0

package/dist/leaflet-rotate-src.js

@@ -3,6 +3,10 @@ var leafletRotate = (() => {
   var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
   var __getOwnPropNames = Object.getOwnPropertyNames;
   var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __export = (target, all) => {
+    for (var name in all)
+      __defProp(target, name, { get: all[name], enumerable: true });
+  };
   var __copyProps = (to, from, except, desc) => {
     if (from && typeof from === "object" || typeof from === "function") {
       for (let key of __getOwnPropNames(from))
@@ -15,75 +19,69 @@ var leafletRotate = (() => {
 
   // src/index.js
   var index_exports = {};
+  __export(index_exports, {
+    toPoint: () => toPoint
+  });
 
   // src/dom/DomUtil.js
-  var domUtilProto = L.extend({}, L.DomUtil);
-  L.extend(L.DomUtil, {
+  var domUtilProto = Object.assign({}, L.DomUtil);
+  Object.assign(L.DomUtil, {
     /**
-     * Resets the 3D CSS transform of `el` so it is
-     * translated by `offset` pixels and optionally
-     * scaled by `scale`. Does not have an effect if
-     * the browser doesn't support 3D CSS transforms.
-     * 
-     * @param {HTMLElement} el 
-     * @param {L.Point} offset 
+     * Resets the 3D CSS transform of `el` so it is translated by `offset` pixels,
+     * optionally scaled by `scale`, and rotated around `pivot` when `bearing` is set.
+     *
+     * @param {HTMLElement} el
+     * @param {L.Point} offset
      * @param {Number} scale
-     * @param {Number} bearing 
-     * @param {L.Point} pivot 
+     * @param {Number} bearing
+     * @param {L.Point} pivot
      */
-    setTransform: function(el, offset, scale, bearing, pivot) {
-      var pos = offset || new L.Point(0, 0);
+    setTransform(el, offset, scale, bearing, pivot) {
+      let pos = offset || new L.Point(0, 0);
       if (!bearing) {
-        offset = pos._round();
-        return domUtilProto.setTransform.apply(this, arguments);
+        return domUtilProto.setTransform(el, pos._round(), scale);
       }
       pos = pos.rotateFrom(bearing, pivot);
-      el.style[L.DomUtil.TRANSFORM] = "translate3d(" + pos.x + "px," + pos.y + "px,0)" + (scale ? " scale(" + scale + ")" : "") + " rotate(" + bearing + "rad)";
+      el.style.transform = "translate3d(" + pos.x + "px," + pos.y + "px,0)" + (scale ? " scale(" + scale + ")" : "") + " rotate(" + bearing + "rad)";
     },
     /**
-     * Sets the position of `el` to coordinates specified by
-     * `position`, using CSS translate or top/left positioning
-     * depending on the browser (used by Leaflet internally
-     * to position its layers).
-     * 
-     * @param {HTMLElement} el 
-     * @param {L.Point} point 
+     * Sets the position of `el` to `point`, using CSS transforms or top/left positioning
+     * depending on browser support, and optionally rotating it around `pivot`.
+     *
+     * @param {HTMLElement} el
+     * @param {L.Point} point
      * @param {Number} bearing
-     * @param {L.Point} pivot 
-     * @param {Number} scale 
+     * @param {L.Point} pivot
+     * @param {Number} scale
      */
-    setPosition: function(el, point, bearing, pivot, scale) {
+    setPosition(el, point, bearing, pivot, scale) {
       if (!bearing) {
-        return domUtilProto.setPosition.apply(this, arguments);
+        return domUtilProto.setPosition(el, point);
       }
       el._leaflet_pos = point;
-      if (L.Browser.any3d) {
-        L.DomUtil.setTransform(el, point, scale, bearing, pivot);
-      } else {
-        el.style.left = point.x + "px";
-        el.style.top = point.y + "px";
-      }
+      L.DomUtil.setTransform(el, point, scale, bearing, pivot);
     },
     /**
-     * @constant radians = degrees × π/180°
-     */
-    DEG_TO_RAD: Math.PI / 180,
-    /**
-     * @constant degrees = radians × 180°/π
+     * Returns the position assigned to `el`.
+     *
+     * @param {HTMLElement} el
+     * @returns {L.Point}
      */
-    RAD_TO_DEG: 180 / Math.PI
+    getPosition(el) {
+      return el._leaflet_pos || domUtilProto.getPosition(el);
+    }
   });
 
   // src/dom/Draggable.js
   L.Draggable.include({
     /** @TODO */
-    // updateMapBearing: function(mapBearing) {
+    // updateMapBearing(mapBearing) {
     //     this._mapBearing = mapBearing;
     // },
   });
 
   // src/geometry/Point.js
-  L.extend(L.Point.prototype, {
+  Object.assign(L.Point.prototype, {
     /**
      * Rotate around (0,0) by applying the 2D rotation matrix:
      * 
@@ -92,7 +90,7 @@ var leafletRotate = (() => {
      * 
      * @param theta must be given in radians.
      */
-    rotate: function(theta) {
+    rotate(theta) {
       return this.rotateFrom(theta, new L.Point(0, 0));
     },
     /**
@@ -109,23 +107,29 @@ var leafletRotate = (() => {
      * 
      * @returns {L.Point}
      */
-    rotateFrom: function(theta, pivot) {
+    rotateFrom(theta, pivot) {
       if (!theta) {
         return this;
       }
-      var sinTheta = Math.sin(theta);
-      var cosTheta = Math.cos(theta);
-      var cx = pivot.x, cy = pivot.y;
-      var x = this.x - cx, y = this.y - cy;
+      const sinTheta = Math.sin(theta);
+      const cosTheta = Math.cos(theta);
+      const cx = pivot.x, cy = pivot.y;
+      const x = this.x - cx, y = this.y - cy;
       return new L.Point(
         x * cosTheta - y * sinTheta + cx,
         x * sinTheta + y * cosTheta + cy
       );
     }
   });
+  function toPoint(point) {
+    if (point == null || point instanceof L.Point) {
+      return point;
+    }
+    return Array.isArray(point) ? new L.Point(point[0], point[1]) : new L.Point(point.x, point.y);
+  }
 
   // src/layer/DivOverlay.js
-  var divOverlayProto = L.extend({}, L.DivOverlay.prototype);
+  var divOverlayProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.DivOverlay.prototype));
   L.DivOverlay.include({
     /**
      * Update L.Popup and L.Tooltip anchor positions after
@@ -133,24 +137,24 @@ var leafletRotate = (() => {
      * 
      * @listens L.Map~rotate
      */
-    getEvents: function() {
-      return L.extend(divOverlayProto.getEvents.apply(this, arguments), { rotate: this._updatePosition });
+    getEvents() {
+      return Object.assign(divOverlayProto.getEvents.apply(this, arguments), { rotate: this._updatePosition });
     },
     /**
      * 0. update element anchor point (divOverlayProto v1.9.3)
      * 1. rotate around anchor point (subtract anchor -> rotate point -> add anchor)
      */
-    _updatePosition: function() {
+    _updatePosition() {
       if (!this._map) {
         return;
       }
       divOverlayProto._updatePosition.apply(this, arguments);
       if (this._map._rotate && this._zoomAnimated) {
-        var anchor = this._getAnchor();
-        var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
+        const anchor = this._getAnchor();
+        const pos = L.DomUtil.getPosition(this._container).subtract(anchor);
         L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
       } else if (this._map._rotate) {
-        var mapPanePoint = this._map.rotatedPointToMapPanePoint(this._map.latLngToLayerPoint(this._latlng)), offset = L.point(this.options.offset), anchor = this._getAnchor();
+        const mapPanePoint = this._map.rotatedPointToMapPanePoint(this._map.latLngToLayerPoint(this._latlng)), offset = toPoint(this.options.offset || [0, 0]), anchor = this._getAnchor();
         this._containerLeft = -Math.round(this._containerWidth / 2) + mapPanePoint.x + offset.x + anchor.x;
         this._containerBottom = -(mapPanePoint.y + offset.y + anchor.y);
         this._container.style.left = this._containerLeft + "px";
@@ -163,17 +167,17 @@ var leafletRotate = (() => {
   });
 
   // src/layer/Popup.js
-  var popupProto = L.extend({}, L.Popup.prototype);
+  var popupProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Popup.prototype));
   L.Popup.include({
     /**
      * 0. update element anchor point (popupProto v1.9.3)
      * 1. rotate around anchor point (subtract anchor -> rotate point -> add anchor)
      */
-    _animateZoom: function(e) {
+    _animateZoom(e) {
       popupProto._animateZoom.apply(this, arguments);
       if (this._map && this._map._rotate) {
-        var anchor = this._getAnchor();
-        var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
+        const anchor = this._getAnchor();
+        const pos = L.DomUtil.getPosition(this._container).subtract(anchor);
         L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
       }
     },
@@ -182,7 +186,7 @@ var leafletRotate = (() => {
      * 
      * @see https://github.com/fnicollet/Leaflet/pull/21
      */
-    _adjustPan: function() {
+    _adjustPan() {
       if (!this.options.autoPan || this._map._panAnim && this._map._panAnim._inProgress) {
         return;
       }
@@ -190,9 +194,10 @@ var leafletRotate = (() => {
         this._autopanning = false;
         return;
       }
-      var map = this._map, marginBottom = parseInt(L.DomUtil.getStyle(this._container, "marginBottom"), 10) || 0, containerHeight = this._container.offsetHeight + marginBottom, containerWidth = this._containerWidth, layerPos = new L.Point(this._containerLeft, -containerHeight - this._containerBottom);
+      const map = this._map, marginBottom = parseInt(getComputedStyle(this._container).marginBottom, 10) || 0, containerHeight = this._container.offsetHeight + marginBottom, containerWidth = this._containerWidth, layerPos = new L.Point(this._containerLeft, -containerHeight - this._containerBottom);
       layerPos._add(L.DomUtil.getPosition(this._container));
-      var containerPos = layerPos._add(this._map._getMapPanePos()), padding = L.point(this.options.autoPanPadding), paddingTL = L.point(this.options.autoPanPaddingTopLeft || padding), paddingBR = L.point(this.options.autoPanPaddingBottomRight || padding), size = map.getSize(), dx = 0, dy = 0;
+      const containerPos = layerPos._add(this._map._getMapPanePos()), padding = toPoint(this.options.autoPanPadding || [0, 0]), paddingTL = toPoint(this.options.autoPanPaddingTopLeft || padding), paddingBR = toPoint(this.options.autoPanPaddingBottomRight || padding), size = map.getSize();
+      let dx = 0, dy = 0;
       if (containerPos.x + containerWidth + paddingBR.x > size.x) {
         dx = containerPos.x + containerWidth - size.x + paddingBR.x;
       }
@@ -215,41 +220,41 @@ var leafletRotate = (() => {
   });
 
   // src/layer/Tooltip.js
-  var tooltipProto = L.extend({}, L.Tooltip.prototype);
+  var tooltipProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Tooltip.prototype));
   L.Tooltip.include({
-    _animateZoom: function(e) {
+    _animateZoom(e) {
       if (!this._map._rotate) {
         return tooltipProto._animateZoom.apply(this, arguments);
       }
-      var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
+      let pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
       pos = this._map.rotatedPointToMapPanePoint(pos);
       this._setPosition(pos);
     },
-    _updatePosition: function() {
+    _updatePosition() {
       if (!this._map._rotate) {
         return tooltipProto._updatePosition.apply(this, arguments);
       }
-      var pos = this._map.latLngToLayerPoint(this._latlng);
+      let pos = this._map.latLngToLayerPoint(this._latlng);
       pos = this._map.rotatedPointToMapPanePoint(pos);
       this._setPosition(pos);
     }
   });
 
   // src/layer/marker/Icon.js
-  var iconProto = L.extend({}, L.Icon.prototype);
+  var iconProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Icon.prototype));
   L.Icon.include({
-    _setIconStyles: function(img, name) {
-      var options = this.options;
-      var sizeOption = options[name + "Size"];
+    _setIconStyles(img, name) {
+      const options = this.options;
+      let sizeOption = options[name + "Size"];
       if (typeof sizeOption === "number") {
         sizeOption = [sizeOption, sizeOption];
       }
-      var size = L.point(sizeOption), anchor = L.point(name === "shadow" && options.shadowAnchor || options.iconAnchor || size && size.divideBy(2, true));
+      const size = sizeOption ? new L.Point(...Array.isArray(sizeOption) ? sizeOption : [sizeOption.x, sizeOption.y]) : null, anchorOption = name === "shadow" && options.shadowAnchor || options.iconAnchor || size && size.divideBy(2, true), anchor = anchorOption ? new L.Point(...Array.isArray(anchorOption) ? anchorOption : [anchorOption.x, anchorOption.y]) : null;
       img.className = "leaflet-marker-" + name + " " + (options.className || "");
       if (anchor) {
         img.style.marginLeft = -anchor.x + "px";
         img.style.marginTop = -anchor.y + "px";
-        img.style[L.DomUtil.TRANSFORM + "Origin"] = anchor.x + "px " + anchor.y + "px 0px";
+        img.style.transformOrigin = anchor.x + "px " + anchor.y + "px 0px";
       }
       if (size) {
         img.style.width = size.x + "px";
@@ -259,7 +264,7 @@ var leafletRotate = (() => {
   });
 
   // src/layer/marker/Marker.js
-  var markerProto = L.extend({}, L.Marker.prototype);
+  var markerProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Marker.prototype));
   L.Marker.mergeOptions({
     /**
      * Rotation of this marker in rad
@@ -288,21 +293,22 @@ var leafletRotate = (() => {
   });
   var markerDragProto;
   var MarkerDrag = {
-    // _onDragStart: function() {
+    // _onDragStart() {
     //     if (!this._marker._map._rotate) {
     //         return markerDragProto._onDragStart.apply(this, arguments);
     //     }
     //     this._draggable.updateMapBearing(this._marker._map._bearing);
     // },
-    _onDrag: function(e) {
-      var marker = this._marker, rotated_marker = marker.options.rotation || marker.options.rotateWithView, shadow = marker._shadow, iconPos = L.DomUtil.getPosition(marker._icon);
+    _onDrag(e) {
+      const marker = this._marker, rotated_marker = marker.options.rotation || marker.options.rotateWithView, shadow = marker._shadow;
+      let iconPos = L.DomUtil.getPosition(marker._icon);
       if (!rotated_marker && shadow) {
         L.DomUtil.setPosition(shadow, iconPos);
       }
       if (marker._map._rotate) {
         iconPos = marker._map.mapPanePointToRotatedPoint(iconPos);
       }
-      var latlng = marker._map.layerPointToLatLng(iconPos);
+      const latlng = marker._map.layerPointToLatLng(iconPos);
       marker._latlng = latlng;
       e.latlng = latlng;
       e.oldLatLng = this._oldLatLng;
@@ -310,7 +316,7 @@ var leafletRotate = (() => {
       else marker.fire("move", e);
       marker.fire("drag", e);
     },
-    _onDragEnd: function(e) {
+    _onDragEnd(e) {
       if (this._marker._map._rotate) {
         this._marker.update();
       }
@@ -324,11 +330,11 @@ var leafletRotate = (() => {
      * 
      * @listens L.Map~rotate
      */
-    getEvents: function() {
-      return L.extend(markerProto.getEvents.apply(this, arguments), { rotate: this.update });
+    getEvents() {
+      return Object.assign(markerProto.getEvents.apply(this, arguments), { rotate: this.update });
     },
-    _initInteraction: function() {
-      var ret = markerProto._initInteraction.apply(this, arguments);
+    _initInteraction() {
+      const ret = markerProto._initInteraction.apply(this, arguments);
       if (this.dragging && this.dragging.enabled() && this._map && this._map._rotate) {
         markerDragProto = markerDragProto || Object.getPrototypeOf(this.dragging);
         this.dragging.disable();
@@ -341,11 +347,11 @@ var leafletRotate = (() => {
       }
       return ret;
     },
-    _setPos: function(pos) {
+    _setPos(pos) {
       if (this._map._rotate) {
         pos = this._map.rotatedPointToMapPanePoint(pos);
       }
-      var bearing = this.options.rotation || 0;
+      let bearing = this.options.rotation || 0;
       if (this.options.rotateWithView) {
         bearing += this._map._bearing;
       }
@@ -365,20 +371,20 @@ var leafletRotate = (() => {
       this._zIndex = pos.y + this.options.zIndexOffset;
       this._resetZIndex();
     },
-    // _updateZIndex: function(offset) {
+    // _updateZIndex(offset) {
     //     if (!this._map._rotate) {
     //         return markerProto._updateZIndex.apply(this, arguments);
     //     }
     //     this._icon.style.zIndex = Math.round(this._zIndex + offset);
     // },
-    setRotation: function(rotation) {
+    setRotation(rotation) {
       this.options.rotation = rotation;
       this.update();
     }
   });
 
   // src/layer/tile/GridLayer.js
-  var gridLayerProto = L.extend({}, L.GridLayer.prototype);
+  var gridLayerProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.GridLayer.prototype));
   L.GridLayer.include({
     /**
      * Redraw L.TileLayer bounds after the map is
@@ -386,8 +392,8 @@ var leafletRotate = (() => {
      * 
      * @listens L.Map~rotate
      */
-    getEvents: function() {
-      var events = gridLayerProto.getEvents.apply(this, arguments);
+    getEvents() {
+      const events = gridLayerProto.getEvents.apply(this, arguments);
       if (this._map._rotate && !this.options.updateWhenIdle) {
         if (!this._onRotate) {
           this._onRotate = L.Util.throttle(this._onMoveEnd, this.options.updateInterval, this);
@@ -396,7 +402,7 @@ var leafletRotate = (() => {
       }
       return events;
     },
-    _getTiledPixelBounds: function(center) {
+    _getTiledPixelBounds(center) {
       if (!this._map._rotate) {
         return gridLayerProto._getTiledPixelBounds.apply(this, arguments);
       }
@@ -405,7 +411,9 @@ var leafletRotate = (() => {
   });
 
   // src/layer/vector/Renderer.js
-  var rendererProto = L.extend({}, L.Renderer.prototype);
+  var rendererProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Renderer.prototype));
+  var rendererBase = Object.getPrototypeOf(L.Renderer.prototype);
+  var rendererGetEvents = rendererProto.getEvents || rendererBase.getEvents;
   L.Renderer.include({
     /**
      * Redraw L.Canvas and L.SVG renderer bounds after the
@@ -413,15 +421,16 @@ var leafletRotate = (() => {
      * 
      * @listens L.Map~rotate
      */
-    getEvents: function() {
-      return L.extend(rendererProto.getEvents.apply(this, arguments), { rotate: this._update });
+    getEvents() {
+      const events = rendererGetEvents.apply(this, arguments);
+      return L.version.startsWith("2.") ? events : Object.assign(events, { rotate: this._update });
     },
     /**
      * Fix for `map.flyTo()` when `false === map.options.zoomAnimation`
      * 
      * @see https://github.com/Leaflet/Leaflet/pull/8794
      */
-    onAdd: function() {
+    onAdd() {
       rendererProto.onAdd.apply(this, arguments);
       if (L.version <= "1.9.3") {
         this._container.classList.add("leaflet-zoom-animated");
@@ -446,16 +455,46 @@ var leafletRotate = (() => {
      * 
      * @see https://github.com/Leaflet/Leaflet/compare/v1.7.0...v1.9.3
      */
-    _updateTransform: function(center, zoom) {
+    _updateTransform(center, zoom) {
+      if (L.version.startsWith("2.")) {
+        if (this._map._rotate) {
+          const scale2 = this._map.getZoomScale(zoom, this._zoom), offset2 = this._topLeftPoint.multiplyBy(scale2).subtract(this._map._getNewPixelOrigin(center, zoom));
+          L.DomUtil.setTransform(this._container, offset2, scale2);
+          return;
+        }
+        return rendererBase._updateTransform.apply(this, arguments);
+      }
       if (!this._map._rotate) {
         return rendererProto._updateTransform.apply(this, arguments);
       }
       if (zoom === this._zoom) {
         return;
       }
-      var scale = this._map.getZoomScale(zoom, this._zoom), offset = this._map._latLngToNewLayerPoint(this._topLeft, zoom, center);
+      const scale = this._map.getZoomScale(zoom, this._zoom), offset = this._map._latLngToNewLayerPoint(this._topLeft, zoom, center);
       L.DomUtil.setTransform(this._container, offset, scale);
     },
+    _onMoveEnd(ev) {
+      if (!L.version.startsWith("2.") || !this._map._rotate) {
+        return rendererBase._onMoveEnd.apply(this, arguments);
+      }
+      this._bounds = this._map._getPaddedPixelBounds(this.options.padding);
+      this._topLeft = this._map.layerPointToLatLng(this._bounds.min);
+      this._center = this._map.getCenter();
+      this._zoom = this._map.getZoom();
+      this._topLeftPoint = this._map._getNewPixelOrigin(this._center, this._zoom).add(this._bounds.min);
+      this._updateTransform(this._center, this._zoom);
+      this._resizeContainer();
+      this._onSettled(ev);
+    },
+    _resizeContainer() {
+      if (!L.version.startsWith("2.") || !this._map._rotate || !this._bounds) {
+        return rendererBase._resizeContainer.apply(this, arguments);
+      }
+      const size = this._bounds.getSize();
+      this._container.style.width = size.x + "px";
+      this._container.style.height = size.y + "px";
+      return size;
+    },
     // getEvents() {
     //     const events = {
     //         viewreset: this._reset,
@@ -491,7 +530,7 @@ var leafletRotate = (() => {
     //         this._layers[id]._update();
     //     }
     // },
-    _update: function() {
+    _update() {
       if (!this._map._rotate) {
         return rendererProto._update.apply(this, arguments);
       }
@@ -503,10 +542,10 @@ var leafletRotate = (() => {
   });
 
   // src/map/Map.js
-  var mapProto = L.extend({}, L.Map.prototype);
+  var mapProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Map.prototype));
   L.Map.mergeOptions({ rotate: false, bearing: 0 });
   L.Map.include({
-    _animateZoomNoDelay: function(center, zoom) {
+    _animateZoomNoDelay(center, zoom) {
       if (!this._mapPane) {
         return;
       }
@@ -520,7 +559,7 @@ var leafletRotate = (() => {
      * @param {(HTMLElement|String)} id html selector
      * @param {Object} [options={}] leaflet map options
      */
-    initialize: function(id, options) {
+    initialize(id, options) {
       if (options.rotate) {
         this._rotate = true;
         this._bearing = 0;
@@ -538,11 +577,11 @@ var leafletRotate = (() => {
      * @param {L.Point} point pixel screen coordinates
      * @returns {L.Point} transformed pixel point
      */
-    containerPointToLayerPoint: function(point) {
+    containerPointToLayerPoint(point) {
       if (!this._rotate) {
         return mapProto.containerPointToLayerPoint.apply(this, arguments);
       }
-      return L.point(point).subtract(this._getMapPanePos()).rotateFrom(-this._bearing, this._getRotatePanePos()).subtract(this._getRotatePanePos());
+      return toPoint(point).subtract(this._getMapPanePos()).rotateFrom(-this._bearing, this._getRotatePanePos()).subtract(this._getRotatePanePos());
     },
     /**
      * Given a pixel coordinate relative to the [origin pixel](#map-getpixelorigin),
@@ -551,11 +590,11 @@ var leafletRotate = (() => {
      * @param {L.Point} point pixel screen coordinates
      * @returns {L.Point} transformed pixel point
      */
-    layerPointToContainerPoint: function(point) {
+    layerPointToContainerPoint(point) {
       if (!this._rotate) {
         return mapProto.layerPointToContainerPoint.apply(this, arguments);
       }
-      return L.point(point).add(this._getRotatePanePos()).rotateFrom(this._bearing, this._getRotatePanePos()).add(this._getMapPanePos());
+      return toPoint(point).add(this._getRotatePanePos()).rotateFrom(this._bearing, this._getRotatePanePos()).add(this._getMapPanePos());
     },
     /**
      * Converts a coordinate from the rotated pane reference system
@@ -569,8 +608,8 @@ var leafletRotate = (() => {
      * 
      * @since leaflet-rotate (v0.1)
      */
-    rotatedPointToMapPanePoint: function(point) {
-      return L.point(point).rotate(this._bearing)._add(this._getRotatePanePos());
+    rotatedPointToMapPanePoint(point) {
+      return toPoint(point).rotate(this._bearing)._add(this._getRotatePanePos());
     },
     /**
      * Converts a coordinate from the not rotated map pane reference system
@@ -583,14 +622,14 @@ var leafletRotate = (() => {
      * 
      * @since leaflet-rotate (v0.1)
      */
-    mapPanePointToRotatedPoint: function(point) {
-      return L.point(point)._subtract(this._getRotatePanePos()).rotate(-this._bearing);
+    mapPanePointToRotatedPoint(point) {
+      return toPoint(point)._subtract(this._getRotatePanePos()).rotate(-this._bearing);
     },
-    // latLngToLayerPoint: function (latlng) {
-    //     var projectedPoint = this.project(L.latLng(latlng))._round();
+    // latLngToLayerPoint(latlng) {
+    //     const projectedPoint = this.project(L.latLng(latlng))._round();
     //     return projectedPoint._subtract(this.getPixelOrigin());
     // },
-    // latLngToContainerPoint: function (latlng) {
+    // latLngToContainerPoint(latlng) {
     // 	return this.layerPointToContainerPoint(this.latLngToLayerPoint(toLatLng(latlng)));
     // },
     /**
@@ -604,16 +643,16 @@ var leafletRotate = (() => {
      * 
      * @since leaflet-rotate (v0.2)
      */
-    mapBoundsToContainerBounds: function(bounds) {
+    mapBoundsToContainerBounds(bounds) {
       if (!this._rotate && mapProto.mapBoundsToContainerBounds) {
         return mapProto.mapBoundsToContainerBounds.apply(this, arguments);
       }
       const origin = this.getPixelOrigin();
       const nw = this.layerPointToContainerPoint(this.project(bounds.getNorthWest())._subtract(origin)), ne = this.layerPointToContainerPoint(this.project(bounds.getNorthEast())._subtract(origin)), sw = this.layerPointToContainerPoint(this.project(bounds.getSouthWest())._subtract(origin)), se = this.layerPointToContainerPoint(this.project(bounds.getSouthEast())._subtract(origin));
-      return L.bounds([
-        L.point(Math.min(nw.x, ne.x, se.x, sw.x), Math.min(nw.y, ne.y, se.y, sw.y)),
+      return new L.Bounds([
+        new L.Point(Math.min(nw.x, ne.x, se.x, sw.x), Math.min(nw.y, ne.y, se.y, sw.y)),
         // [ minX, minY ]
-        L.point(Math.max(nw.x, ne.x, se.x, sw.x), Math.max(nw.y, ne.y, se.y, sw.y))
+        new L.Point(Math.max(nw.x, ne.x, se.x, sw.x), Math.max(nw.y, ne.y, se.y, sw.y))
         // [ maxX, maxY ]
       ]);
     },
@@ -627,11 +666,11 @@ var leafletRotate = (() => {
      * 
      * @returns {L.LatLngBounds}
      */
-    getBounds: function() {
+    getBounds() {
       if (!this._rotate) {
         return mapProto.getBounds.apply(this, arguments);
       }
-      var size = this.getSize();
+      const size = this.getSize();
       return new L.LatLngBounds([
         this.containerPointToLatLng([0, 0]),
         // topleft
@@ -670,45 +709,45 @@ var leafletRotate = (() => {
      * 
      * @since leaflet-rotate (v0.1)
      */
-    setBearing: function(theta, options) {
-      if (!L.Browser.any3d || !this._rotate) {
+    setBearing(theta, options) {
+      if (!this._rotate) {
         return;
       }
       if (options && options.animate) {
         this._bearingAnimationId = (this._bearingAnimationId || 0) + 1;
-        var animationId = this._bearingAnimationId;
+        const animationId = this._bearingAnimationId;
         if (this._bearingAnimationFrame) {
-          L.Util.cancelAnimFrame(this._bearingAnimationFrame);
+          cancelAnimationFrame(this._bearingAnimationFrame);
         }
-        var startBearing = this.getBearing(), endBearing = L.Util.wrapNum(theta, [0, 360]), delta = (endBearing - startBearing + 540) % 360 - 180, duration = Math.max(0, options.duration == null ? 0.25 : options.duration) * 1e3, easeLinearity = Math.max(options.easeLinearity || 0.5, 0.2), startTime = performance.now();
-        var animate = function() {
+        const startBearing = this.getBearing(), endBearing = L.Util.wrapNum(theta, [0, 360]), delta = (endBearing - startBearing + 540) % 360 - 180, duration = Math.max(0, options.duration == null ? 0.25 : options.duration) * 1e3, easeLinearity = Math.max(options.easeLinearity || 0.5, 0.2), startTime = performance.now();
+        const animate = function() {
           if (!this._mapPane) {
             delete this._bearingAnimationFrame;
             return;
           }
-          var progress = duration ? Math.min((performance.now() - startTime) / duration, 1) : 1, eased = 1 - Math.pow(1 - progress, 1 / easeLinearity);
+          const progress = duration ? Math.min((performance.now() - startTime) / duration, 1) : 1, eased = 1 - Math.pow(1 - progress, 1 / easeLinearity);
           this._setBearing(progress === 1 ? endBearing : startBearing + delta * eased);
           if (this._bearingAnimationId !== animationId) {
             return;
           }
           if (progress < 1) {
-            this._bearingAnimationFrame = L.Util.requestAnimFrame(animate, this);
+            this._bearingAnimationFrame = requestAnimationFrame(animate.bind(this));
           } else {
             delete this._bearingAnimationFrame;
           }
         };
-        this._bearingAnimationFrame = L.Util.requestAnimFrame(animate, this);
+        this._bearingAnimationFrame = requestAnimationFrame(animate.bind(this));
         return;
       }
       this._bearingAnimationId = (this._bearingAnimationId || 0) + 1;
       if (this._bearingAnimationFrame) {
-        L.Util.cancelAnimFrame(this._bearingAnimationFrame);
+        cancelAnimationFrame(this._bearingAnimationFrame);
         delete this._bearingAnimationFrame;
       }
       this._setBearing(theta);
     },
-    _setBearing: function(theta) {
-      var bearing = L.Util.wrapNum(theta, [0, 360]) * L.DomUtil.DEG_TO_RAD, center = this._getPixelCenter(), oldPos = this._getRotatePanePos().rotateFrom(-this._bearing, center), newPos = oldPos.rotateFrom(bearing, center);
+    _setBearing(theta) {
+      const bearing = L.Util.wrapNum(theta, [0, 360]) * (Math.PI / 180), center = this._getPixelCenter(), oldPos = this._getRotatePanePos().rotateFrom(-this._bearing, center), newPos = oldPos.rotateFrom(bearing, center);
       L.DomUtil.setPosition(this._rotatePane, oldPos, bearing, center);
       this._pivot = center;
       this._bearing = bearing;
@@ -722,8 +761,8 @@ var leafletRotate = (() => {
      * 
      * @since leaflet-rotate (v0.1)
      */
-    getBearing: function() {
-      return this._bearing * L.DomUtil.RAD_TO_DEG;
+    getBearing() {
+      return this._bearing * (180 / Math.PI);
     },
     /**
      * Creates a new [map pane](#map-pane) with the given name if it doesn't
@@ -734,7 +773,7 @@ var leafletRotate = (() => {
      * @param {HTMLElement} [container] parent element
      * @returns {HTMLElement} pane container
      */
-    // createPane: function(name, container) {
+    // createPane(name, container) {
     //     if (!this._rotate || name == 'mapPane') {
     //         return mapProto.createPane.apply(this, arguments);
     //     }
@@ -762,14 +801,17 @@ var leafletRotate = (() => {
      * - tooltipPane [HTMLElement = 650]    - Pane for tooltips.
      * - popupPane   [HTMLElement = 700]    - Pane for popups.
      */
-    _initPanes: function() {
-      var panes = this._panes = {};
+    _initPanes() {
+      const panes = this._panes = {};
       this._paneRenderers = {};
       this._mapPane = this.createPane("mapPane", this._container);
       L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0));
       if (this._rotate) {
         this._rotatePane = this.createPane("rotatePane", this._mapPane);
         this._norotatePane = this.createPane("norotatePane", this._mapPane);
+        if (L.version.startsWith("2.")) {
+          this._rotatePane.style.transformOrigin = "0 0";
+        }
         this.createPane("tilePane", this._rotatePane);
         this.createPane("overlayPane", this._rotatePane);
         this.createPane("shadowPane", this._norotatePane);
@@ -785,8 +827,8 @@ var leafletRotate = (() => {
         this.createPane("popupPane");
       }
       if (!this.options.markerZoomAnimation) {
-        L.DomUtil.addClass(panes.markerPane, "leaflet-zoom-hide");
-        L.DomUtil.addClass(panes.shadowPane, "leaflet-zoom-hide");
+        panes.markerPane.classList.add("leaflet-zoom-hide");
+        panes.shadowPane.classList.add("leaflet-zoom-hide");
       }
     },
     /**
@@ -807,7 +849,7 @@ var leafletRotate = (() => {
         return mapProto.panInside.apply(this, arguments);
       }
       options = options || {};
-      const paddingTL = L.point(options.paddingTopLeft || options.padding || [0, 0]), paddingBR = L.point(options.paddingBottomRight || options.padding || [0, 0]), pixelPoint = this.latLngToContainerPoint(latlng), pixelBounds = L.bounds([L.point(0, 0), this.getSize()]), pixelCenter = pixelBounds.getCenter(), paddedBounds = L.bounds([pixelBounds.min.add(paddingTL), pixelBounds.max.subtract(paddingBR)]), paddedSize = paddedBounds.getSize();
+      const paddingTL = toPoint(options.paddingTopLeft || options.padding || [0, 0]), paddingBR = toPoint(options.paddingBottomRight || options.padding || [0, 0]), pixelPoint = this.latLngToContainerPoint(latlng), pixelBounds = new L.Bounds([new L.Point(0, 0), this.getSize()]), pixelCenter = pixelBounds.getCenter(), paddedBounds = new L.Bounds([pixelBounds.min.add(paddingTL), pixelBounds.max.subtract(paddingBR)]), paddedSize = paddedBounds.getSize();
       if (!paddedBounds.contains(pixelPoint)) {
         this._enforcingBounds = true;
         const centerOffset = pixelPoint.subtract(paddedBounds.getCenter());
@@ -833,9 +875,9 @@ var leafletRotate = (() => {
      * @param {Object} [options] pan options
      * @returns {L.Map} current map instance
      */
-    // panInsideBounds: function (bounds, options) {
+    // panInsideBounds(bounds, options) {
     //     this._enforcingBounds = true;
-    //     var center = this.getCenter(),
+    //     const center = this.getCenter(),
     //         newCenter = this._limitCenter(center, this._zoom, L.latLngBounds(bounds));
     //
     //     if (!center.equals(newCenter)) {
@@ -906,8 +948,8 @@ var leafletRotate = (() => {
       if (!this._rotate || Math.abs(this._bearing).toFixed(1) < 0.1) {
         return mapProto.getBoundsZoom.apply(this, arguments);
       }
-      bounds = L.latLngBounds(bounds);
-      padding = L.point(padding || [0, 0]);
+      bounds = bounds instanceof L.LatLngBounds ? bounds : new L.LatLngBounds(bounds);
+      padding = toPoint(padding || [0, 0]);
       let zoom = this.getZoom() || 0;
       const min = this.getMinZoom(), max = this.getMaxZoom(), size = this.getSize().subtract(padding), boundsSize = this.mapBoundsToContainerBounds(bounds).getSize(), snap = this.options.zoomSnap, scalex = size.x / boundsSize.x, scaley = size.y / boundsSize.y, scale = inside ? Math.max(scalex, scaley) : Math.min(scalex, scaley);
       zoom = this.getScaleZoom(scale, zoom);
@@ -922,7 +964,7 @@ var leafletRotate = (() => {
      * 
      * @returns {L.Point} layer center
      */
-    // _getCenterLayerPoint: function () {
+    // _getCenterLayerPoint() {
     //    return this.containerPointToLayerPoint(this.getSize()._divideBy(2));
     // },
     /**
@@ -930,8 +972,8 @@ var leafletRotate = (() => {
      * 
      * @param {L.LatLng} latlng map coordinates
      */
-    _getCenterOffset: function(latlng) {
-      var centerOffset = mapProto._getCenterOffset.apply(this, arguments);
+    _getCenterOffset(latlng) {
+      let centerOffset = mapProto._getCenterOffset.apply(this, arguments);
       if (this._rotate) {
         centerOffset = centerOffset.rotate(this._bearing);
       }
@@ -940,18 +982,18 @@ var leafletRotate = (() => {
     /**
      * @since leaflet-rotate (v0.1)
      */
-    _getRotatePanePos: function() {
+    _getRotatePanePos() {
       return this._rotatePanePos || new L.Point(0, 0);
     },
     // _latLngToNewLayerPoint(latlng, zoom, center) {
     //    const topLeft = this._getNewPixelOrigin(center, zoom);
     //    return this.project(latlng, zoom)._subtract(topLeft);
     //},
-    _getNewPixelOrigin: function(center, zoom) {
-      if (!this._rotate) {
+    _getNewPixelOrigin(center, zoom) {
+      if (!this._rotate || L.version.startsWith("2.")) {
         return mapProto._getNewPixelOrigin.apply(this, arguments);
       }
-      var viewHalf = this.getSize()._divideBy(2);
+      const viewHalf = this.getSize()._divideBy(2);
       return this.project(center, zoom).rotate(this._bearing)._subtract(viewHalf)._add(this._getMapPanePos())._add(this._getRotatePanePos()).rotate(-this._bearing)._round();
     },
     /**
@@ -959,13 +1001,13 @@ var leafletRotate = (() => {
      * 
      * @see src\layer\tile\GridLayer::_getTiledPixelBounds()
      */
-    _getNewPixelBounds: function(center, zoom) {
+    _getNewPixelBounds(center, zoom) {
       center = center || this.getCenter();
       zoom = zoom || this.getZoom();
       if (!this._rotate && mapProto._getNewPixelBounds) {
         return mapProto._getNewPixelBounds.apply(this, arguments);
       }
-      var mapZoom = this._animatingZoom ? Math.max(this._animateToZoom, this.getZoom()) : this.getZoom(), scale = this.getZoomScale(mapZoom, zoom), pixelCenter = this.project(center, zoom).floor(), size = this.getSize(), halfSize = new L.Bounds([
+      const mapZoom = this._animatingZoom ? Math.max(this._animateToZoom, this.getZoom()) : this.getZoom(), scale = this.getZoomScale(mapZoom, zoom), pixelCenter = this.project(center, zoom).floor(), size = this.getSize(), halfSize = new L.Bounds([
         this.containerPointToLayerPoint([0, 0]).floor(),
         this.containerPointToLayerPoint([size.x, 0]).floor(),
         this.containerPointToLayerPoint([0, size.y]).floor(),
@@ -978,7 +1020,7 @@ var leafletRotate = (() => {
      * 
      * @return {L.Point} map pivot point (center)
      */
-    _getPixelCenter: function() {
+    _getPixelCenter() {
       if (!this._rotate && mapProto._getPixelCenter) {
         return mapProto._getPixelCenter.apply(this, arguments);
       }
@@ -989,11 +1031,11 @@ var leafletRotate = (() => {
      * 
      * @see src\layer\vector\Renderer::_update()
      */
-    _getPaddedPixelBounds: function(padding) {
+    _getPaddedPixelBounds(padding) {
       if (!this._rotate && mapProto._getPaddedPixelBounds) {
         return mapProto._getPaddedPixelBounds.apply(this, arguments);
       }
-      var p = padding, size = this.getSize(), padMin = size.multiplyBy(-p), padMax = size.multiplyBy(1 + p);
+      const p = padding, size = this.getSize(), padMin = size.multiplyBy(-p), padMax = size.multiplyBy(1 + p);
       return new L.Bounds([
         this.containerPointToLayerPoint([padMin.x, padMin.y]).floor(),
         this.containerPointToLayerPoint([padMin.x, padMax.y]).floor(),
@@ -1001,23 +1043,23 @@ var leafletRotate = (() => {
         this.containerPointToLayerPoint([padMax.x, padMax.y]).floor()
       ]);
     },
-    _handleGeolocationResponse: function(pos) {
+    _handleGeolocationResponse(pos) {
       if (!this._container._leaflet_id) {
         return;
       }
-      var lat = pos.coords.latitude, lng = pos.coords.longitude, hdg = pos.coords.heading, latlng = new L.LatLng(lat, lng), bounds = latlng.toBounds(pos.coords.accuracy), options = this._locateOptions;
+      const lat = pos.coords.latitude, lng = pos.coords.longitude, hdg = pos.coords.heading, latlng = new L.LatLng(lat, lng), bounds = latlng.toBounds(pos.coords.accuracy), options = this._locateOptions;
       if (options.setView) {
-        var zoom = this.getBoundsZoom(bounds);
+        const zoom = this.getBoundsZoom(bounds);
         this.setView(latlng, options.maxZoom ? Math.min(zoom, options.maxZoom) : zoom);
       }
-      var data = {
+      const data = {
         latlng,
         bounds,
         timestamp: pos.timestamp,
         /** @TODO use mapProto._handleGeolocationResponse */
         heading: hdg
       };
-      for (var i in pos.coords) {
+      for (const i in pos.coords) {
         if (typeof pos.coords[i] === "number") {
           data[i] = pos.coords[i];
         }
@@ -1031,7 +1073,7 @@ var leafletRotate = (() => {
      * @returns {L.Bounds}
      */
     // toCircumscribedBounds(points) {
-    //     var minX = points.reduce(function (pv, v) { return Math.min(pv, v.x); }, points[0].x),
+    //     const minX = points.reduce(function (pv, v) { return Math.min(pv, v.x); }, points[0].x),
     //         maxX = points.reduce(function (pv, v) { return Math.max(pv, v.x); }, points[0].x),
     //         minY = points.reduce(function (pv, v) { return Math.min(pv, v.y); }, points[0].y),
     //         maxY = points.reduce(function (pv, v) { return Math.max(pv, v.y); }, points[0].y);
@@ -1042,7 +1084,7 @@ var leafletRotate = (() => {
 
   // src/map/handler/CompassBearing.js
   L.Map.CompassBearing = L.Handler.extend({
-    initialize: function(map) {
+    initialize(map) {
       this._map = map;
       if ("ondeviceorientationabsolute" in window) {
         this.__deviceOrientationEvent = "deviceorientationabsolute";
@@ -1051,14 +1093,14 @@ var leafletRotate = (() => {
       }
       this._throttled = L.Util.throttle(this._onDeviceOrientation, 100, this);
     },
-    addHooks: function() {
+    addHooks() {
       if (this._map._rotate && this.__deviceOrientationEvent) {
         L.DomEvent.on(window, this.__deviceOrientationEvent, this._throttled, this);
       } else {
         this.disable();
       }
     },
-    removeHooks: function() {
+    removeHooks() {
       if (this._map._rotate && this.__deviceOrientationEvent) {
         L.DomEvent.off(window, this.__deviceOrientationEvent, this._throttled, this);
       }
@@ -1081,9 +1123,9 @@ var leafletRotate = (() => {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/DeviceOrientationEvent/alpha
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation
      */
-    _onDeviceOrientation: function(e) {
-      var angle = e.webkitCompassHeading != null ? e.webkitCompassHeading : e.alpha;
-      var deviceOrientation = 0;
+    _onDeviceOrientation(e) {
+      let angle = e.webkitCompassHeading != null ? e.webkitCompassHeading : e.alpha;
+      let deviceOrientation = 0;
       if (!Number.isFinite(angle)) {
         return;
       }
@@ -1113,7 +1155,7 @@ var leafletRotate = (() => {
     trackContainerMutation: false
   });
   L.Map.ContainerMutation = L.Handler.extend({
-    addHooks: function() {
+    addHooks() {
       if (!this._observer) {
         this._observer = new MutationObserver(L.Util.bind(this._map.invalidateSize, this._map));
       }
@@ -1125,13 +1167,20 @@ var leafletRotate = (() => {
         attributeFilter: ["style"]
       });
     },
-    removeHooks: function() {
+    removeHooks() {
       this._observer.disconnect();
     }
   });
   L.Map.addInitHook("addHandler", "trackContainerMutation", L.Map.ContainerMutation);
 
   // src/map/handler/TouchGestures.js
+  function touchToContainerPoint(map, touch) {
+    const container = map.getContainer(), rect = container.getBoundingClientRect();
+    return new L.Point(
+      touch.clientX - rect.left - container.clientLeft,
+      touch.clientY - rect.top - container.clientTop
+    );
+  }
   L.Map.mergeOptions({
     /**
      * Set it to false if you don't want the map to
@@ -1143,23 +1192,23 @@ var leafletRotate = (() => {
     bounceAtZoomLimits: true
   });
   L.Map.TouchGestures = L.Handler.extend({
-    initialize: function(map) {
+    initialize(map) {
       this._map = map;
       this.rotate = !!this._map.options.touchRotate;
       this.zoom = !!this._map.options.touchZoom;
     },
-    addHooks: function() {
+    addHooks() {
       L.DomEvent.on(this._map._container, "touchstart", this._onTouchStart, this);
     },
-    removeHooks: function() {
+    removeHooks() {
       L.DomEvent.off(this._map._container, "touchstart", this._onTouchStart, this);
     },
-    _onTouchStart: function(e) {
-      var map = this._map;
+    _onTouchStart(e) {
+      const map = this._map;
       if (!e.touches || e.touches.length !== 2 || map._animatingZoom || this._zooming || this._rotating) {
         return;
       }
-      var p1 = map.mouseEventToContainerPoint(e.touches[0]), p2 = map.mouseEventToContainerPoint(e.touches[1]), vector = p1.subtract(p2);
+      const p1 = touchToContainerPoint(map, e.touches[0]), p2 = touchToContainerPoint(map, e.touches[1]), vector = p1.subtract(p2);
       this._centerPoint = map.getSize()._divideBy(2);
       this._startLatLng = map.containerPointToLatLng(this._centerPoint);
       if (this.zoom) {
@@ -1187,14 +1236,15 @@ var leafletRotate = (() => {
       L.DomEvent.on(document, "touchmove", this._onTouchMove, this).on(document, "touchend touchcancel", this._onTouchEnd, this);
       L.DomEvent.preventDefault(e);
     },
-    _onTouchMove: function(e) {
+    _onTouchMove(e) {
       if (!e.touches || e.touches.length !== 2 || !(this._zooming || this._rotating)) {
         return;
       }
-      var map = this._map, p1 = map.mouseEventToContainerPoint(e.touches[0]), p2 = map.mouseEventToContainerPoint(e.touches[1]), vector = p1.subtract(p2), scale = p1.distanceTo(p2) / this._startDist, delta;
+      const map = this._map, p1 = touchToContainerPoint(map, e.touches[0]), p2 = touchToContainerPoint(map, e.touches[1]), vector = p1.subtract(p2), scale = p1.distanceTo(p2) / this._startDist;
+      let delta;
       if (this._rotating) {
-        var theta = Math.atan(vector.x / vector.y);
-        var bearingDelta = (theta - this._startTheta) * L.DomUtil.RAD_TO_DEG;
+        const theta = Math.atan(vector.x / vector.y);
+        let bearingDelta = (theta - this._startTheta) * (180 / Math.PI);
         if (vector.y < 0) {
           bearingDelta += 180;
         }
@@ -1217,7 +1267,7 @@ var leafletRotate = (() => {
           if (scale === 1 && delta.x === 0 && delta.y === 0) {
             return;
           }
-          var alpha = -map.getBearing() * L.DomUtil.DEG_TO_RAD;
+          const alpha = -map.getBearing() * (Math.PI / 180);
           this._center = map.unproject(map.project(this._pinchStartLatLng).subtract(delta.rotate(alpha)));
         }
       }
@@ -1225,9 +1275,8 @@ var leafletRotate = (() => {
         map._moveStart(true, false);
         this._moved = true;
       }
-      L.Util.cancelAnimFrame(this._animRequest);
-      var moveFn = map._move.bind(map, this._center, this._zoom, { pinch: true, round: false }, void 0);
-      this._animRequest = L.Util.requestAnimFrame(moveFn, this, true);
+      const moveFn = map._move.bind(map, this._center, this._zoom, { pinch: true, round: false }, void 0);
+      moveFn();
       if (this.zoom) {
         if (map.options.zoomAnimation) {
           map._animateZoomNoDelay(this._center, map._limitZoom(this._zoom));
@@ -1237,14 +1286,13 @@ var leafletRotate = (() => {
       }
       L.DomEvent.preventDefault(e);
     },
-    _onTouchEnd: function() {
+    _onTouchEnd() {
       if (!this._moved || !(this._zooming || this._rotating)) {
         this._zooming = false;
         return;
       }
       this._zooming = false;
       this._rotating = false;
-      L.Util.cancelAnimFrame(this._animRequest);
       L.DomEvent.off(document, "touchmove", this._onTouchMove, this).off(document, "touchend touchcancel", this._onTouchEnd, this);
       if (this.zoom) {
         if (this._map.options.zoomAnimation) {
@@ -1267,11 +1315,11 @@ var leafletRotate = (() => {
     touchRotate: false
   });
   L.Map.TouchRotate = L.Handler.extend({
-    addHooks: function() {
+    addHooks() {
       this._map.touchGestures.enable();
       this._map.touchGestures.rotate = true;
     },
-    removeHooks: function() {
+    removeHooks() {
       this._map.touchGestures.rotate = false;
     }
   });
@@ -1286,19 +1334,19 @@ var leafletRotate = (() => {
     shiftKeyRotate: true
   });
   L.Map.ShiftKeyRotate = L.Handler.extend({
-    addHooks: function() {
+    addHooks() {
       L.DomEvent.on(this._map._container, "wheel", this._handleShiftScroll, this);
       this._map.shiftKeyRotate.rotate = true;
     },
-    removeHooks: function() {
+    removeHooks() {
       L.DomEvent.off(this._map._container, "wheel", this._handleShiftScroll, this);
       this._map.shiftKeyRotate.rotate = false;
     },
-    _handleShiftScroll: function(e) {
+    _handleShiftScroll(e) {
       if (e.shiftKey) {
         e.preventDefault();
         this._map.scrollWheelZoom.disable();
-        this._map.setBearing(this._map._bearing * L.DomUtil.RAD_TO_DEG + Math.sign(e.deltaY) * 5);
+        this._map.setBearing(this._map._bearing * (180 / Math.PI) + Math.sign(e.deltaY) * 5);
       } else {
         this._map.scrollWheelZoom.enable();
       }
@@ -1336,13 +1384,13 @@ var leafletRotate = (() => {
     bounceAtZoomLimits: false
   });
   L.Map.TouchZoom = L.Handler.extend({
-    addHooks: function() {
-      L.DomUtil.addClass(this._map._container, "leaflet-touch-zoom");
+    addHooks() {
+      this._map._container.classList.add("leaflet-touch-zoom");
       this._map.touchGestures.enable();
       this._map.touchGestures.zoom = true;
     },
-    removeHooks: function() {
-      L.DomUtil.removeClass(this._map._container, "leaflet-touch-zoom");
+    removeHooks() {
+      this._map._container.classList.remove("leaflet-touch-zoom");
       this._map.touchGestures.zoom = false;
     }
   });
@@ -1354,9 +1402,9 @@ var leafletRotate = (() => {
       position: "topleft",
       closeOnZeroBearing: true
     },
-    onAdd: function(map) {
-      var container = this._container = L.DomUtil.create("div", "leaflet-control-rotate leaflet-bar");
-      var arrow = this._arrow = L.DomUtil.create("span", "leaflet-control-rotate-arrow");
+    onAdd(map) {
+      const container = this._container = L.DomUtil.create("div", "leaflet-control-rotate leaflet-bar");
+      const arrow = this._arrow = L.DomUtil.create("span", "leaflet-control-rotate-arrow");
       arrow.style.backgroundImage = `url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")`;
       arrow.style.cursor = "grab";
       arrow.style.display = "block";
@@ -1364,14 +1412,11 @@ var leafletRotate = (() => {
       arrow.style.height = "100%";
       arrow.style.backgroundRepeat = "no-repeat";
       arrow.style.backgroundPosition = "50%";
-      var link = this._link = L.DomUtil.create("a", "leaflet-control-rotate-toggle", container);
+      const link = this._link = L.DomUtil.create("a", "leaflet-control-rotate-toggle", container);
       link.appendChild(arrow);
       link.href = "#";
       link.title = "Rotate map";
       L.DomEvent.on(link, "dblclick", L.DomEvent.stopPropagation).on(link, "mousedown", this._handleMouseDown, this).on(link, "click", L.DomEvent.stop).on(link, "click", this._cycleState, this).on(link, "click", this._refocusOnMap, this);
-      if (!L.Browser.any3d) {
-        L.DomUtil.addClass(link, "leaflet-disabled");
-      }
       this._restyle();
       map.on("rotate", this._restyle, this);
       this._follow = false;
@@ -1381,33 +1426,33 @@ var leafletRotate = (() => {
       }
       return container;
     },
-    onRemove: function(map) {
+    onRemove(map) {
       map.off("rotate", this._restyle, this);
     },
-    _handleMouseDown: function(e) {
+    _handleMouseDown(e) {
       L.DomEvent.stop(e);
       this.dragging = true;
       this.dragstartX = e.pageX;
       this.dragstartY = e.pageY;
       L.DomEvent.on(document, "mousemove", this._handleMouseDrag, this).on(document, "mouseup", this._handleMouseUp, this);
     },
-    _handleMouseUp: function(e) {
+    _handleMouseUp(e) {
       L.DomEvent.stop(e);
       this.dragging = false;
       L.DomEvent.off(document, "mousemove", this._handleMouseDrag, this).off(document, "mouseup", this._handleMouseUp, this);
     },
-    _handleMouseDrag: function(e) {
+    _handleMouseDrag(e) {
       if (!this.dragging) {
         return;
       }
-      var deltaX = e.clientX - this.dragstartX;
+      const deltaX = e.clientX - this.dragstartX;
       this._map.setBearing(deltaX);
     },
-    _cycleState: function(ev) {
+    _cycleState(ev) {
       if (!this._map) {
         return;
       }
-      var map = this._map;
+      const map = this._map;
       if (!map.touchRotate.enabled() && !map.compassBearing.enabled()) {
         map.touchRotate.enable();
       } else if (!map.compassBearing.enabled()) {
@@ -1422,12 +1467,12 @@ var leafletRotate = (() => {
       }
       this._restyle();
     },
-    _restyle: function() {
+    _restyle() {
       if (!this._map.options.rotate) {
-        L.DomUtil.addClass(this._link, "leaflet-disabled");
+        this._link.classList.add("leaflet-disabled");
       } else {
-        var map = this._map;
-        var bearing = map.getBearing();
+        const map = this._map;
+        const bearing = map.getBearing();
         this._arrow.style.transform = "rotate(" + bearing + "deg)";
         if (bearing && this.options.closeOnZeroBearing) {
           this._container.style.display = "block";
@@ -1445,16 +1490,16 @@ var leafletRotate = (() => {
       }
     }
   });
-  L.control.rotate = function(options) {
-    return new L.Control.Rotate(options);
-  };
+  if (L.control) {
+    L.control.rotate = (options) => new L.Control.Rotate(options);
+  }
   L.Map.mergeOptions({
     rotateControl: true
   });
   L.Map.addInitHook(function() {
     if (this.options.rotateControl) {
-      var options = typeof this.options.rotateControl === "object" ? this.options.rotateControl : {};
-      this.rotateControl = L.control.rotate(options);
+      const options = typeof this.options.rotateControl === "object" ? this.options.rotateControl : {};
+      this.rotateControl = new L.Control.Rotate(options);
       this.addControl(this.rotateControl);
     }
   });