leaflet-rotate 0.3.0 → 0.5.0

package/src/map/Map.js

@@ -1,16 +1,65 @@
 /**
+ * Extends Leaflet maps with bearing rotation and 3D pitch.
+ *
  * @external L.Map
  * 
+ * @since leaflet-rotate (v0.1.0)
+ * 
  * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/map/Map.js
  */
 
-const mapProto = L.extend({}, L.Map.prototype);
+/**
+ * @event L.Map#rotate Fired after the map bearing changes.
+ * 
+ * @since leaflet-rotate (v0.1.0)
+ */
+
+/**
+ * @event L.Map#pitch Fired after the map pitch changes.
+ * 
+ * @since leaflet-rotate (0.5.0)
+ */
+
+import { toPoint } from '../geometry/Point';
+
+const mapProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Map.prototype));
+
+L.Map.mergeOptions({
+
+    /**
+     * @type {boolean} Enable bearing and pitch transformations.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    rotate: false,
+
+    /**
+     * @type {number} Initial map bearing in degrees.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    bearing: 0,
+
+    /**
+     * @type {number} Initial map pitch in degrees, clamped to 0–85.
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    pitch: 0,
 
-L.Map.mergeOptions({ rotate: false, bearing: 0, });
+});
 
 L.Map.include({
 
-    _animateZoomNoDelay: function(center, zoom) {
+    /**
+     * Apply an immediate animated-zoom frame without waiting for a transition delay.
+     *
+     * @param {L.LatLng} center Target center.
+     * @param {number} zoom Target zoom level.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _animateZoomNoDelay(center, zoom) {
         if (!this._mapPane) { return; }
 
         this._animatingZoom = true;
@@ -21,17 +70,24 @@ L.Map.include({
     },
 
     /**
-     * @param {(HTMLElement|String)} id html selector
-     * @param {Object} [options={}] leaflet map options
+     * Initialize the Leaflet map and apply its initial bearing and pitch.
+     * 
+     * @param {HTMLElement|string} id Map container element or its ID.
+     * @param {Object} [options={}] Leaflet map options, including `rotate`, `bearing`, and `pitch`.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    initialize: function(id, options) {
+    initialize(id, options) {
         if (options.rotate) {
             this._rotate = true;
             this._bearing = 0;
+            this._pitch = 0;
         }
         mapProto.initialize.apply(this, arguments);
-        if(this.options.rotate){
-          this.setBearing(this.options.bearing);
+        if (this.options.rotate) {
+            this.on('resize', this._updatePitchTransform, this);
+            this.setBearing(this.options.bearing);
+            this.setPitch(this.options.pitch);
         }
     },
 
@@ -40,14 +96,23 @@ L.Map.include({
      * returns the corresponding pixel coordinate relative to
      * the [origin pixel](#map-getpixelorigin).
      * 
-     * @param {L.Point} point pixel screen coordinates
-     * @returns {L.Point} transformed pixel point
+     * @param {L.Point|number[]} point Pixel coordinate in the map container.
+     * 
+     * @returns {L.Point} Corresponding layer-point coordinate.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    containerPointToLayerPoint: function(point) {
+    containerPointToLayerPoint(point) {
         if (!this._rotate) {
             return mapProto.containerPointToLayerPoint.apply(this, arguments);
         }
-        return L.point(point)
+        if (this._pitch) {
+            return this._transformPitchPoint(
+                toPoint(point).subtract(this._getMapPanePos()),
+                this._pitchInverseTransform
+            );
+        }
+        return toPoint(point)
             .subtract(this._getMapPanePos())
             .rotateFrom(-this._bearing, this._getRotatePanePos())
             .subtract(this._getRotatePanePos());
@@ -57,14 +122,20 @@ L.Map.include({
      * Given a pixel coordinate relative to the [origin pixel](#map-getpixelorigin),
      * returns the corresponding pixel coordinate relative to the map container.
      * 
-     * @param {L.Point} point pixel screen coordinates
-     * @returns {L.Point} transformed pixel point
+     * @param {L.Point|number[]} point Pixel coordinate in layer-point space.
+     * 
+     * @returns {L.Point} Corresponding pixel coordinate in the map container.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    layerPointToContainerPoint: function(point) {
+    layerPointToContainerPoint(point) {
         if (!this._rotate) {
             return mapProto.layerPointToContainerPoint.apply(this, arguments);
         }
-        return L.point(point)
+        if (this._pitch) {
+            return this._transformPitchPoint(point, this._pitchTransform).add(this._getMapPanePos());
+        }
+        return toPoint(point)
             .add(this._getRotatePanePos())
             .rotateFrom(this._bearing, this._getRotatePanePos())
             .add(this._getMapPanePos());
@@ -77,13 +148,17 @@ L.Map.include({
      * (rotatePane) --> (mapPane)
      * (rotatePane) --> (norotatePane)
      * 
-     * @param {L.Point} point pixel screen coordinates
-     * @returns {L.Point}
+     * @param {L.Point|number[]} point Point in the rotated pane.
+     * 
+     * @returns {L.Point} Corresponding point in map-pane coordinates.
      * 
-     * @since leaflet-rotate (v0.1)
+     * @since leaflet-rotate (v0.1.0)
      */
-    rotatedPointToMapPanePoint: function(point) {
-        return L.point(point)
+    rotatedPointToMapPanePoint(point) {
+        if (this._pitch) {
+            return this._transformPitchPoint(point, this._pitchTransform);
+        }
+        return toPoint(point)
             .rotate(this._bearing)
             ._add(this._getRotatePanePos());
     },
@@ -95,22 +170,27 @@ L.Map.include({
      * (mapPane) --> (rotatePane)
      * (norotatePane) --> (rotatePane)
      * 
-     * @param {L.Point} point pixel screen coordinates
+     * @param {L.Point|number[]} point Point in map-pane coordinates.
+     * 
+     * @returns {L.Point} Corresponding point in the rotated pane.
      * 
-     * @since leaflet-rotate (v0.1)
+     * @since leaflet-rotate (v0.1.0)
      */
-    mapPanePointToRotatedPoint: function(point) {
-        return L.point(point)
+    mapPanePointToRotatedPoint(point) {
+        if (this._pitch) {
+            return this._transformPitchPoint(point, this._pitchInverseTransform);
+        }
+        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)));
 	// },
 
@@ -120,12 +200,13 @@ L.Map.include({
      * 
      * @see https://github.com/ronikar/Leaflet/blob/5c480ef959b947c3beed7065425a5a36c486262b/src/map/Map.js#L1114-L1135
      * 
-     * @param {L.LatLngBounds} bounds 
-     * @returns {L.Bounds}
+     * @param {L.LatLngBounds} bounds Geographic bounds to project.
      * 
-     * @since leaflet-rotate (v0.2)
+     * @returns {L.Bounds} Axis-aligned bounds in container-pixel coordinates.
+     * 
+     * @since leaflet-rotate (v0.2.0)
      */
-    mapBoundsToContainerBounds: function (bounds) {
+    mapBoundsToContainerBounds(bounds) {
         if (!this._rotate && mapProto.mapBoundsToContainerBounds) {
             return mapProto.mapBoundsToContainerBounds.apply(this, arguments);
         }
@@ -142,30 +223,29 @@ 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 ]
         ]);
     },
 
     /**
-     * Returns geographical bounds visible in the current map view
+     * Return the geographic bounds of the current viewport, accounting for rotation and pitch.
      * 
-     * @TODO find out  if map bounds calculated by `L.Map::getBounds()`
-     *       function should match the `rotatePane` or `norotatePane` bounds
+     * The result is the smallest geographic bounds containing all four viewport corners.
      * 
-     * @see https://github.com/fnicollet/Leaflet/issues/7
+     * @returns {L.LatLngBounds} Geographic bounds visible in the map viewport.
      * 
-     * @returns {L.LatLngBounds}
+     * @since leaflet-rotate (v0.1.0)
      */
-    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);
@@ -173,7 +253,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 
@@ -200,89 +280,234 @@ L.Map.include({
     // },
 
     /**
-     * Change map rotation
+     * Set the map bearing, optionally animating to the new value.
+     * 
+     * @param {number} theta Target bearing in degrees; normalized to [0, 360).
+     * @param {Object} [options] Animation options.
+     * @param {boolean} [options.animate=false] Animate the change.
+     * @param {number} [options.duration=0.25] Animation duration in seconds.
+     * @param {number} [options.easeLinearity=0.5] Easing curve linearity.
+     * 
+     * @returns {void}
      * 
-     * @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]
+     * @fires L.Map#rotate
      * 
-     * @since leaflet-rotate (v0.1)
+     * @since leaflet-rotate (v0.1.0)
      */
-    setBearing: function(theta, options) {
-        if (!L.Browser.any3d || !this._rotate) { return; }
+    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(),
+            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();
 
-            var animate = function() {
+            const animate = function() {
                 if (!this._mapPane) {
                     delete this._bearingAnimationFrame;
                     return;
                 }
 
-                var progress = duration ? Math.min((performance.now() - startTime) / duration, 1) : 1,
+                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,
+    /**
+     * Apply a bearing immediately and update the rotated pane and map coordinates.
+     * 
+     * @param {number} theta Bearing in degrees.
+     * @param {L.LatLng} [mapCenter] Center to preserve while applying the change.
+     * 
+     * @fires L.Map#rotate
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _setBearing(theta, mapCenter) {
+        if (!mapCenter && this._loaded) {
+            mapCenter = this.getCenter();
+        }
+
+        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);
 
-        // CSS transform
-        L.DomUtil.setPosition(this._rotatePane, oldPos, bearing, center);
-
         this._pivot = center;
         this._bearing = bearing;
         this._rotatePanePos = newPos;
 
+        if (this._pitch) {
+            this._rotatePane._leaflet_pos = oldPos;
+            this._updatePitchTransform();
+        } else {
+            L.DomUtil.setPosition(this._rotatePane, oldPos, bearing, center);
+        }
+
+        if (mapCenter) {
+            this._pixelOrigin = this.project(mapCenter, this._zoom)
+                .subtract(this.containerPointToLayerPoint(this.getSize().divideBy(2)));
+            delete this._lastCenter;
+            this.fire('move');
+        }
+
         this.fire('rotate');
     },
 
     /**
-     * Get current map rotation
+     * Transform a point with a projective matrix, accepting DOMMatrix or its 2D inverse.
      * 
-     * @returns {number} theta map degrees
+     * @param {L.Point|number[]} point Input pixel coordinate.
+     * @param {DOMMatrix|Object} matrix Forward or inverse transformation matrix.
      * 
-     * @since leaflet-rotate (v0.1)
+     * @returns {L.Point} Transformed pixel coordinate.
+     * 
+     * @since leaflet-rotate (0.5.0)
      */
-    getBearing: function() {
-        return this._bearing * L.DomUtil.RAD_TO_DEG;
+    _transformPitchPoint(point, matrix) {
+        point = toPoint(point);
+        if (!(matrix instanceof DOMMatrix)) {
+            const denominator = matrix.g * point.x + matrix.h * point.y + matrix.i;
+            return new L.Point(
+                (matrix.a * point.x + matrix.b * point.y + matrix.c) / denominator,
+                (matrix.d * point.x + matrix.e * point.y + matrix.f) / denominator
+            );
+        }
+        const transformed = new DOMPoint(point.x, point.y).matrixTransform(matrix);
+        return new L.Point(transformed.x / transformed.w, transformed.y / transformed.w);
+    },
+
+    /**
+     * Apply the current pitch/bearing CSS transform and cache its forward and inverse matrices.
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    _updatePitchTransform() {
+        if (!this._pitch || !this._rotatePane) { return; }
+
+        const pivot = this._getPixelCenter(),
+            size = this.getSize(),
+            perspective = Math.max(1, size.y * 1.5),
+            position = this._rotatePane._leaflet_pos || new L.Point(0, 0),
+            transform = `translate3d(${pivot.x}px,${pivot.y}px,0) perspective(${perspective}px) rotateX(${this.getPitch()}deg) rotateZ(${this.getBearing()}deg) translate3d(${position.x - pivot.x}px,${position.y - pivot.y}px,0)`;
+
+        this._rotatePane.style.transformOrigin = '0 0';
+        this._rotatePane.style.transform = transform;
+        const matrix = this._pitchTransform = new DOMMatrix(getComputedStyle(this._rotatePane).transform),
+            a = matrix.m11, b = matrix.m21, c = matrix.m41,
+            d = matrix.m12, e = matrix.m22, f = matrix.m42,
+            g = matrix.m14, h = matrix.m24, i = matrix.m44,
+            determinant = a * (e * i - f * h) - b * (d * i - f * g) + c * (d * h - e * g);
+
+        this._pitchInverseTransform = {
+            a: (e * i - f * h) / determinant,
+            b: (c * h - b * i) / determinant,
+            c: (b * f - c * e) / determinant,
+            d: (f * g - d * i) / determinant,
+            e: (a * i - c * g) / determinant,
+            f: (c * d - a * f) / determinant,
+            g: (d * h - e * g) / determinant,
+            h: (b * g - a * h) / determinant,
+            i: (a * e - b * d) / determinant,
+        };
+    },
+
+    /**
+     * Set the map pitch in degrees. Values are clamped to the range 0–85.
+     *
+     * @param {number} pitch Pitch angle in degrees; clamped to [0, 85].
+     * 
+     * @returns {L.Map} This map instance.
+     * 
+     * @fires L.Map#pitch
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    setPitch(pitch) {
+        this._setPitchAndBearing(pitch, this.getBearing());
+        return this;
+    },
+
+    /**
+     * Update pitch and bearing together, preserving the current map center.
+     * Used by the Ctrl+drag handler to avoid applying two separate transforms.
+     * 
+     * @param {number} pitch Pitch angle in degrees.
+     * @param {number} bearing Bearing angle in degrees.
+     * 
+     * @fires L.Map#pitch
+     * @fires L.Map#rotate
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    _setPitchAndBearing(pitch, bearing) {
+        if (!this._rotate) { return; }
+
+        const clampedPitch = Math.max(0, Math.min(pitch, 85)) * (Math.PI / 180),
+            clampedBearing = L.Util.wrapNum(bearing, [0, 360]) * (Math.PI / 180),
+            pitchChanged = clampedPitch !== this._pitch;
+        if (!pitchChanged && clampedBearing === this._bearing) { return; }
+
+        const mapCenter = this._loaded ? this.getCenter() : undefined;
+        if (pitchChanged) {
+            this._pitch = clampedPitch;
+            this._rotatePane.style.transformOrigin = L.version.startsWith('2.') ? '0 0' : '';
+        }
+        this._setBearing(bearing, mapCenter);
+        if (pitchChanged) {
+            this.fire('pitch');
+        }
+    },
+
+    /**
+     * Get the current map pitch in degrees.
+     * 
+     * @returns {number} Pitch angle in degrees.
+     * 
+     * @since leaflet-rotate (0.5.0)
+     */
+    getPitch() {
+        return (this._pitch || 0) * (180 / Math.PI);
+    },
+
+    /**
+     * Get the current map bearing. Enable the `rotate` map option before calling.
+     * 
+     * @returns {number} Bearing in degrees, normalized to [0, 360).
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    getBearing() {
+        return this._bearing * (180 / Math.PI);
     },
 
     /**
@@ -292,9 +517,12 @@ L.Map.include({
      * 
      * @param {String} name leaflet pane
      * @param {HTMLElement} [container] parent element
+     * 
      * @returns {HTMLElement} pane container
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    // createPane: function(name, container) {
+    // createPane(name, container) {
     //     if (!this._rotate || name == 'mapPane') {
     //         return mapProto.createPane.apply(this, arguments);
     //     }
@@ -323,8 +551,14 @@ L.Map.include({
      * - tooltipPane [HTMLElement = 650]    - Pane for tooltips.
      * - popupPane   [HTMLElement = 700]    - Pane for popups.
      */
-    _initPanes: function() {
-        var panes = this._panes = {};
+    /**
+     * Create the map's panes, placing tile/vector layers in the transformed pane
+     * and markers/overlays in the pane that remains upright.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _initPanes() {
+        const panes = this._panes = {};
         this._paneRenderers = {};
 
         this._mapPane = this.createPane('mapPane', this._container);
@@ -333,6 +567,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);
@@ -351,8 +588,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');
         }
     },
 
@@ -364,29 +601,31 @@ L.Map.include({
      * 
      * @see https://github.com/Raruto/leaflet-rotate/issues/18
      * 
-     * @param {L.LatLng} latlng coordinates
-     * @param {Object} [options={}] padding options
+     * @param {L.LatLng} latlng Geographic point to keep visible.
+     * @param {Object} [options={}] Padding options (`padding`, `paddingTopLeft`, `paddingBottomRight`).
      * 
      * @returns {L.Map} current map instance
+     * 
+     * @since leaflet-rotate (v0.1.4)
      */
     panInside(latlng, options) {
-        if (!this._rotate || Math.abs(this._bearing).toFixed(1) < 0.1) {
+        if (!this._rotate || (!this._pitch && Math.abs(this._bearing).toFixed(1) < 0.1)) {
             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]),
+        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()),
             pixelPoint = this.latLngToContainerPoint(latlng),
-            pixelBounds = L.bounds([L.point(0, 0), 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)) {
@@ -414,13 +653,16 @@ L.Map.include({
      *
      * @see https://github.com/fnicollet/Leaflet/issues/7
      * 
-     * @param {L.LatLngBounds} bounds coordinates
-     * @param {Object} [options] pan options
-     * @returns {L.Map} current map instance
+     * @param {L.LatLngBounds} bounds Geographic bounds to fit inside the viewport.
+     * @param {Object} [options] Pan animation options.
+     * 
+     * @returns {L.Map} This map instance.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    // 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)) {
@@ -485,19 +727,21 @@ L.Map.include({
      * instead returns the minimum zoom level on which the map view fits into
      * the given bounds in its entirety.
      * 
-     * @param {L.LatLngBounds} bounds
-     * @param {Boolean} [inside=false]
-     * @param {L.Point} [padding=[0,0]]
+     * @param {L.LatLngBounds} bounds Geographic bounds to fit.
+     * @param {boolean} [inside=false] Fit the viewport inside bounds instead of bounds inside the viewport.
+     * @param {L.Point|number[]} [padding=[0,0]] Pixel padding around the viewport.
+     * 
+     * @returns {number} Zoom level satisfying the fit.
      * 
-     * @returns {Number} zoom level
+     * @since leaflet-rotate (v0.1.0)
      */
     getBoundsZoom(bounds, inside, padding) {
-        if (!this._rotate || Math.abs(this._bearing).toFixed(1) < 0.1) {
+        if (!this._rotate || (!this._pitch && 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(),
@@ -529,27 +773,39 @@ L.Map.include({
      * 
      * @returns {L.Point} layer center
      */
-    // _getCenterLayerPoint: function () {
+    // _getCenterLayerPoint() {
     //    return this.containerPointToLayerPoint(this.getSize()._divideBy(2));
     // },
 
     /**
-     * Offset of the specified place to the current center in pixels
+     * Return the pixel offset from the current center to the given geographic point.
      * 
-     * @param {L.LatLng} latlng map coordinates
+     * @param {L.LatLng} latlng Geographic point.
+     * 
+     * @returns {L.Point} Offset in layer pixels, adjusted for bearing and pitch.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    _getCenterOffset: function(latlng) {
-        var centerOffset = mapProto._getCenterOffset.apply(this, arguments);
-        if (this._rotate) {
+    _getCenterOffset(latlng) {
+        let centerOffset = mapProto._getCenterOffset.apply(this, arguments);
+        if (this._pitch) {
+            const center = this.getSize()._divideBy(2);
+            centerOffset = this.containerPointToLayerPoint(center.add(centerOffset))
+                .subtract(this.containerPointToLayerPoint(center));
+        } else if (this._rotate) {
             centerOffset = centerOffset.rotate(this._bearing);
         }
         return centerOffset;
     },
 
     /**
-     * @since leaflet-rotate (v0.1)
+     * Return the current position of the rotated pane.
+     * 
+     * @returns {L.Point} Rotated-pane position in map-pane coordinates.
+     * 
+     * @since leaflet-rotate (v0.1.0)
      */
-    _getRotatePanePos: function() {
+    _getRotatePanePos() {
         return this._rotatePanePos || new L.Point(0, 0);
         // return L.DomUtil.getPosition(this._rotatePane) || new L.Point(0, 0);
     },
@@ -559,11 +815,21 @@ L.Map.include({
     //    return this.project(latlng, zoom)._subtract(topLeft);
     //},
 
-    _getNewPixelOrigin: function(center, zoom) {
-        if (!this._rotate) {
+    /**
+     * Calculate the pixel origin for a target view while preserving bearing-aware alignment.
+     * 
+     * @param {L.LatLng} center Target center.
+     * @param {number} zoom Target zoom level.
+     * 
+     * @returns {L.Point} New pixel origin.
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _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)
@@ -574,17 +840,24 @@ L.Map.include({
     },
 
     /**
-     * @since leaflet-rotate (v0.2)
+     * Calculate the pixel bounds needed to cover the transformed viewport.
+     * 
+     * @param {L.LatLng} [center=this.getCenter()] Target center.
+     * @param {number} [zoom=this.getZoom()] Target zoom level.
+     * 
+     * @returns {L.Bounds} Pixel bounds in projected map coordinates.
+     * 
+     * @since leaflet-rotate (v0.2.0)
      * 
      * @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(),
@@ -599,11 +872,11 @@ L.Map.include({
     },
 
     /**
-     * @since leaflet-rotate (v0.2)
+     * @since leaflet-rotate (v0.2.0)
      * 
-     * @return {L.Point} map pivot point (center)
+     * @returns {L.Point} Map pivot point in pixel coordinates.
      */
-    _getPixelCenter: function() {
+    _getPixelCenter() {
         if (!this._rotate && mapProto._getPixelCenter) {
             return mapProto._getPixelCenter.apply(this, arguments);
         }
@@ -611,15 +884,19 @@ L.Map.include({
     },
 
     /**
-     * @since leaflet-rotate (v0.2)
-     * 
      * @see src\layer\vector\Renderer::_update()
+     * 
+     * @param {number} padding Bounds padding as a fraction of map size.
+     * 
+     * @returns {L.Bounds} Padded bounds in layer-point coordinates.
+     * 
+     * @since leaflet-rotate (v0.2.0)
      */
-    _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);
@@ -633,10 +910,19 @@ L.Map.include({
         ]);
     },
 
-    _handleGeolocationResponse: function(pos) {
+    /**
+     * Build and fire Leaflet's location-found event, including the device heading.
+     * 
+     * @param {GeolocationPosition} pos Browser geolocation result.
+     * 
+     * @fires L.Map#locationfound
+     * 
+     * @since leaflet-rotate (v0.1.0)
+     */
+    _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,
@@ -645,11 +931,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,
@@ -657,7 +943,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];
             }
@@ -673,10 +959,11 @@ L.Map.include({
      * @see https://github.com/ronikar/Leaflet/blob/5c480ef959b947c3beed7065425a5a36c486262b/src/geo/LatLngBounds.js#L253-L264
      * 
      * @param {L.Bounds} points 
+     * 
      * @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);