leaflet-rotate 0.2.8 → 0.4.0

package/src/layer/tile/GridLayer.js

@@ -4,7 +4,7 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/tile/GridLayer.js
  */
 
-const gridLayerProto = L.extend({}, L.GridLayer.prototype);
+const gridLayerProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.GridLayer.prototype));
 
 L.GridLayer.include({
 
@@ -14,8 +14,8 @@ L.GridLayer.include({
      * 
      * @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);
@@ -25,7 +25,7 @@ L.GridLayer.include({
         return events;
     },
 
-    _getTiledPixelBounds: function(center) {
+    _getTiledPixelBounds(center) {
         if (!this._map._rotate) {
             return gridLayerProto._getTiledPixelBounds.apply(this, arguments);
         }

package/src/layer/vector/Renderer.js

@@ -4,7 +4,9 @@
  * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/vector/Renderer.js
  */
 
-const rendererProto = L.extend({}, L.Renderer.prototype);
+const rendererProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Renderer.prototype));
+const rendererBase = Object.getPrototypeOf(L.Renderer.prototype);
+const rendererGetEvents = rendererProto.getEvents || rendererBase.getEvents;
 
 L.Renderer.include({
 
@@ -14,8 +16,9 @@ L.Renderer.include({
      * 
      * @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 });
     },
 
     /**
@@ -23,7 +26,7 @@ L.Renderer.include({
      * 
      * @see https://github.com/Leaflet/Leaflet/pull/8794
      */
-    onAdd: function() {
+    onAdd() {
         rendererProto.onAdd.apply(this, arguments);
         if (L.version <= "1.9.3") {
             // always keep transform-origin as 0 0
@@ -50,20 +53,61 @@ L.Renderer.include({
      * 
      * @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 scale = this._map.getZoomScale(zoom, this._zoom),
+                    offset = this._topLeftPoint.multiplyBy(scale)
+                        .subtract(this._map._getNewPixelOrigin(center, zoom));
+
+                L.DomUtil.setTransform(this._container, offset, scale);
+                return;
+            }
+            return rendererBase._updateTransform.apply(this, arguments);
+        }
         if (!this._map._rotate) {
             return rendererProto._updateTransform.apply(this, arguments);
         }
+        if (zoom === this._zoom) {
+            // _reset() has already repositioned the renderer at the current zoom.
+            return;
+        }
         /**
          * @FIXME see path._renderer._reset();
          */
-        var scale = this._map.getZoomScale(zoom, this._zoom),
+        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,
@@ -106,7 +150,7 @@ L.Renderer.include({
     //     }
     // },
 
-    _update: function() {
+    _update() {
         if (!this._map._rotate) {
             return rendererProto._update.apply(this, arguments);
         }

package/src/map/Map.js

@@ -4,17 +4,29 @@
  * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/map/Map.js
  */
 
-const mapProto = L.extend({}, L.Map.prototype);
+import { toPoint } from '../geometry/Point';
+
+const mapProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Map.prototype));
 
 L.Map.mergeOptions({ rotate: false, bearing: 0, });
 
 L.Map.include({
 
+    _animateZoomNoDelay(center, zoom) {
+        if (!this._mapPane) { return; }
+
+        this._animatingZoom = true;
+        this._animateToCenter = center;
+        this._animateToZoom = zoom;
+        this._move(center, zoom, undefined, true);
+        this._onZoomTransitionEnd();
+    },
+
     /**
      * @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;
@@ -33,11 +45,11 @@ L.Map.include({
      * @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)
+        return toPoint(point)
             .subtract(this._getMapPanePos())
             .rotateFrom(-this._bearing, this._getRotatePanePos())
             .subtract(this._getRotatePanePos());
@@ -50,11 +62,11 @@ L.Map.include({
      * @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)
+        return toPoint(point)
             .add(this._getRotatePanePos())
             .rotateFrom(this._bearing, this._getRotatePanePos())
             .add(this._getMapPanePos());
@@ -72,8 +84,8 @@ L.Map.include({
      * 
      * @since leaflet-rotate (v0.1)
      */
-    rotatedPointToMapPanePoint: function(point) {
-        return L.point(point)
+    rotatedPointToMapPanePoint(point) {
+        return toPoint(point)
             .rotate(this._bearing)
             ._add(this._getRotatePanePos());
     },
@@ -89,18 +101,18 @@ L.Map.include({
      * 
      * @since leaflet-rotate (v0.1)
      */
-    mapPanePointToRotatedPoint: function(point) {
-        return L.point(point)
+    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)));
 	// },
 
@@ -115,7 +127,7 @@ L.Map.include({
      * 
      * @since leaflet-rotate (v0.2)
      */
-    mapBoundsToContainerBounds: function (bounds) {
+    mapBoundsToContainerBounds(bounds) {
         if (!this._rotate && mapProto.mapBoundsToContainerBounds) {
             return mapProto.mapBoundsToContainerBounds.apply(this, arguments);
         }
@@ -132,9 +144,9 @@ L.Map.include({
               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)), // [ minX, minY ]
-            L.point(Math.max(nw.x, ne.x, se.x, sw.x), Math.max(nw.y, ne.y, se.y, sw.y))  // [ maxX, maxY ]
+        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 ]
+            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 ]
         ]);
     },
 
@@ -148,14 +160,14 @@ L.Map.include({
      * 
      * @returns {L.LatLngBounds}
      */
-    getBounds: function() {
+    getBounds() {
         if (!this._rotate) {
             return mapProto.getBounds.apply(this, arguments);
         }
 
         // SEE: https://github.com/fnicollet/Leaflet/pull/22
         //
-        // var bounds = this.getPixelBounds(),
+        // const bounds = this.getPixelBounds(),
         // sw = this.unproject(bounds.getBottomLeft()),
         // ne = this.unproject(bounds.getTopRight());
         // return new LatLngBounds(sw, ne);
@@ -163,7 +175,7 @@ L.Map.include({
 
         // LatLngBounds' constructor automatically
         // extends the bounds to fit the passed points
-        var size = this.getSize();
+        const size = this.getSize();
         return new L.LatLngBounds([
             this.containerPointToLatLng([0, 0]),           // topleft
             this.containerPointToLatLng([size.x, 0]),      // topright 
@@ -193,13 +205,63 @@ L.Map.include({
      * Change map rotation
      * 
      * @param {number} theta map degrees
+     * @param {Object} [options] animation options
+     * @param {boolean} [options.animate=false]
+     * @param {number} [options.duration=0.25] animation duration in seconds
+     * @param {number} [options.easeLinearity=0.5]
      * 
      * @since leaflet-rotate (v0.1)
      */
-    setBearing: function(theta) {
-        if (!L.Browser.any3d || !this._rotate) { return; }
+    setBearing(theta, options) {
+        if (!this._rotate) { return; }
+
+        if (options && options.animate) {
+            this._bearingAnimationId = (this._bearingAnimationId || 0) + 1;
+            const animationId = this._bearingAnimationId;
+            if (this._bearingAnimationFrame) {
+                cancelAnimationFrame(this._bearingAnimationFrame);
+            }
+
+            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) * 1000,
+                easeLinearity = Math.max(options.easeLinearity || 0.5, 0.2),
+                startTime = performance.now();
+
+            const animate = function() {
+                if (!this._mapPane) {
+                    delete this._bearingAnimationFrame;
+                    return;
+                }
+
+                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 = requestAnimationFrame(animate.bind(this));
+                } else {
+                    delete this._bearingAnimationFrame;
+                }
+            };
+
+            this._bearingAnimationFrame = requestAnimationFrame(animate.bind(this));
+            return;
+        }
+
+        this._bearingAnimationId = (this._bearingAnimationId || 0) + 1;
+        if (this._bearingAnimationFrame) {
+            cancelAnimationFrame(this._bearingAnimationFrame);
+            delete this._bearingAnimationFrame;
+        }
 
-        var bearing = L.Util.wrapNum(theta, [0, 360]) * L.DomUtil.DEG_TO_RAD,
+        this._setBearing(theta);
+    },
+
+    _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);
@@ -221,8 +283,8 @@ L.Map.include({
      * 
      * @since leaflet-rotate (v0.1)
      */
-    getBearing: function() {
-        return this._bearing * L.DomUtil.RAD_TO_DEG;
+    getBearing() {
+        return this._bearing * (180 / Math.PI);
     },
 
     /**
@@ -234,7 +296,7 @@ L.Map.include({
      * @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);
     //     }
@@ -263,8 +325,8 @@ L.Map.include({
      * - 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);
@@ -273,6 +335,9 @@ L.Map.include({
         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';
+            }
             // rotatePane
             this.createPane('tilePane', this._rotatePane);
             this.createPane('overlayPane', this._rotatePane);
@@ -291,8 +356,8 @@ L.Map.include({
         }
 
         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');
         }
     },
 
@@ -316,18 +381,17 @@ L.Map.include({
 
         options = options || {};
 
-        const paddingTL = L.point(options.paddingTopLeft || options.padding || [0, 0]),
-            paddingBR = L.point(options.paddingBottomRight || options.padding || [0, 0]),
+        const paddingTL = toPoint(options.paddingTopLeft || options.padding || [0, 0]),
+            paddingBR = toPoint(options.paddingBottomRight || options.padding || [0, 0]),
             /** @TODO use mapProto.panInside */
             // pixelPoint = this.project(latlng),
             // pixelBounds = this.getPixelBounds(),
             // pixelCenter = this.project(this.getCenter()),
-            rect = this._container.getBoundingClientRect(),
             pixelPoint = this.latLngToContainerPoint(latlng),
-            pixelBounds = L.bounds([ L.point(rect), L.point(rect).add(this.getSize()) ]),
+            pixelBounds = new L.Bounds([new L.Point(0, 0), this.getSize()]),
             pixelCenter = pixelBounds.getCenter(),
             //
-            paddedBounds = L.bounds([pixelBounds.min.add(paddingTL), pixelBounds.max.subtract(paddingBR)]),
+            paddedBounds = new L.Bounds([pixelBounds.min.add(paddingTL), pixelBounds.max.subtract(paddingBR)]),
             paddedSize = paddedBounds.getSize();
         
         if (!paddedBounds.contains(pixelPoint)) {
@@ -359,9 +423,9 @@ L.Map.include({
      * @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)) {
@@ -437,8 +501,8 @@ L.Map.include({
             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(),
@@ -470,7 +534,7 @@ L.Map.include({
      * 
      * @returns {L.Point} layer center
      */
-    // _getCenterLayerPoint: function () {
+    // _getCenterLayerPoint() {
     //    return this.containerPointToLayerPoint(this.getSize()._divideBy(2));
     // },
 
@@ -479,8 +543,8 @@ L.Map.include({
      * 
      * @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);
         }
@@ -490,7 +554,7 @@ L.Map.include({
     /**
      * @since leaflet-rotate (v0.1)
      */
-    _getRotatePanePos: function() {
+    _getRotatePanePos() {
         return this._rotatePanePos || new L.Point(0, 0);
         // return L.DomUtil.getPosition(this._rotatePane) || new L.Point(0, 0);
     },
@@ -500,11 +564,11 @@ L.Map.include({
     //    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)
@@ -519,13 +583,13 @@ L.Map.include({
      * 
      * @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(),
+        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(),
@@ -544,7 +608,7 @@ L.Map.include({
      * 
      * @return {L.Point} map pivot point (center)
      */
-    _getPixelCenter: function() {
+    _getPixelCenter() {
         if (!this._rotate && mapProto._getPixelCenter) {
             return mapProto._getPixelCenter.apply(this, arguments);
         }
@@ -556,11 +620,11 @@ L.Map.include({
      * 
      * @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,
+        const p = padding,
             size = this.getSize(),
             padMin = size.multiplyBy(-p),
             padMax = size.multiplyBy(1 + p);
@@ -574,10 +638,10 @@ L.Map.include({
         ]);
     },
 
-    _handleGeolocationResponse: function(pos) {
+    _handleGeolocationResponse(pos) {
         if (!this._container._leaflet_id) { return; }
 
-        var lat = pos.coords.latitude,
+        const lat = pos.coords.latitude,
             lng = pos.coords.longitude,
             /** @TODO use mapProto._handleGeolocationResponse */
             hdg = pos.coords.heading,
@@ -586,11 +650,11 @@ L.Map.include({
             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: latlng,
             bounds: bounds,
             timestamp: pos.timestamp,
@@ -598,7 +662,7 @@ L.Map.include({
             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];
             }
@@ -617,7 +681,7 @@ L.Map.include({
      * @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);

package/src/map/handler/CompassBearing.js

@@ -6,7 +6,7 @@
 
 L.Map.CompassBearing = L.Handler.extend({
 
-    initialize: function(map) {
+    initialize(map) {
         this._map = map;
         /** @see https://caniuse.com/?search=DeviceOrientation */
         if ('ondeviceorientationabsolute' in window) {
@@ -17,7 +17,7 @@ L.Map.CompassBearing = L.Handler.extend({
         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 {
@@ -27,7 +27,7 @@ L.Map.CompassBearing = L.Handler.extend({
         }
     },
 
-    removeHooks: function() {
+    removeHooks() {
         if (this._map._rotate && this.__deviceOrientationEvent) {
             L.DomEvent.off(window, this.__deviceOrientationEvent, this._throttled, this);
         }
@@ -51,12 +51,14 @@ L.Map.CompassBearing = L.Handler.extend({
      * @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 || e.alpha;
-        var deviceOrientation = 0;
+    _onDeviceOrientation(e) {
+        let angle = e.webkitCompassHeading != null ? e.webkitCompassHeading : e.alpha;
+        let deviceOrientation = 0;
 
-        // Safari iOS
-        if (!e.absolute && e.webkitCompassHeading) {
+         if (!Number.isFinite(angle)) { return; }
+
+         // Safari iOS
+         if (!e.absolute && e.webkitCompassHeading) {
             angle = 360 - angle;
         }
 

package/src/map/handler/ContainerMutation.js

@@ -27,7 +27,7 @@ L.Map.mergeOptions({
 
 L.Map.ContainerMutation = L.Handler.extend({
 
-    addHooks: function() {
+    addHooks() {
         // if (!L.Browser.mutation) { return; }
         if (!this._observer) {
             this._observer = new MutationObserver(L.Util.bind(this._map.invalidateSize, this._map));
@@ -41,7 +41,7 @@ L.Map.ContainerMutation = L.Handler.extend({
         });
     },
 
-    removeHooks: function() {
+    removeHooks() {
         // if (!L.Browser.mutation) { return; }
         this._observer.disconnect();
     },

package/src/map/handler/ShiftKeyRotate.js

@@ -17,22 +17,22 @@ L.Map.mergeOptions({
 
 L.Map.ShiftKeyRotate = L.Handler.extend({
 
-    addHooks: function() {
+    addHooks() {
         L.DomEvent.on(this._map._container, "wheel", this._handleShiftScroll, this);
         // this._map.shiftKeyRotate.enable();
         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();
         }