leaflet-rotate 0.1.4 → 0.2.1

package/dist/leaflet-rotate-src.js

@@ -1,11 +1,14 @@
 (function (factory) {
     typeof define === 'function' && define.amd ? define(factory) :
     factory();
-}((function () { 'use strict';
+})((function () { 'use strict';
 
     /**
-     * L.DomUtil
+     * @external L.DomUtil
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/DomUtil.js
      */
+
     const domUtilProto = L.extend({}, L.DomUtil);
 
     L.extend(L.DomUtil, {
@@ -15,7 +18,7 @@
 
             if (!bearing) {
                 offset = pos._round();
-                return domUtilProto.setTransform.call(this, el, offset, scale);
+                return domUtilProto.setTransform.apply(this, arguments);
             }
 
             pos = pos.rotateFrom(bearing, pivot);
@@ -26,9 +29,9 @@
                 ' rotate(' + bearing + 'rad)';
         },
 
-        setPosition: function(el, point, bearing, pivot) { // (HTMLElement, Point[, Boolean])
+        setPosition: function(el, point, bearing, pivot, scale) { // (HTMLElement, Point[, Boolean])
             if (!bearing) {
-                return domUtilProto.setPosition.call(this, el, point);
+                return domUtilProto.setPosition.apply(this, arguments);
             }
 
             /*eslint-disable */
@@ -36,7 +39,7 @@
             /*eslint-enable */
 
             if (L.Browser.any3d) {
-                L.DomUtil.setTransform(el, point, undefined, bearing, pivot);
+                L.DomUtil.setTransform(el, point, scale, bearing, pivot);
             } else {
                 el.style.left = point.x + 'px';
                 el.style.top = point.y + 'px';
@@ -50,41 +53,48 @@
     });
 
     /**
-     * L.Draggable
+     * @external L.Draggable
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/Draggable.js
      */
+
     L.Draggable.include({
 
-        updateMapBearing: function(mapBearing) {
-            this._mapBearing = mapBearing;
-        },
+        // updateMapBearing: function(mapBearing) {
+        //     this._mapBearing = mapBearing;
+        // },
 
     });
 
     /**
-     * L.Point
+     * @external L.Point
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/geometry/Point.js
      */
+
     L.extend(L.Point.prototype, {
 
-        // Rotate around (0,0) by applying the 2D rotation matrix:
-        // ⎡ x' ⎤ = ⎡ cos θ  -sin θ ⎤ ⎡ x ⎤
-        // ⎣ y' ⎦   ⎣ sin θ   cos θ ⎦ ⎣ y ⎦
-        // Theta must be given in radians.
+        /**
+         * Rotate around (0,0) by applying the 2D rotation matrix:
+         * 
+         * ⎡ x' ⎤ = ⎡ cos θ  -sin θ ⎤ ⎡ x ⎤
+         * ⎣ y' ⎦   ⎣ sin θ   cos θ ⎦ ⎣ y ⎦
+         * 
+         * @param theta must be given in radians.
+         */
         rotate: function(theta) {
-            if (!theta) { return this; }
-            var sinTheta = Math.sin(theta);
-            var cosTheta = Math.cos(theta);
-
-            return new L.Point(
-                this.x * cosTheta - this.y * sinTheta,
-                this.x * sinTheta + this.y * cosTheta
-            );
-        },
-
-        // Rotate around (pivot.x, pivot.y) by:
-        // 1. subtract (pivot.x, pivot.y)
-        // 2. rotate around (0, 0)
-        // 3. add (pivot.x, pivot.y) back
-        // same as `this.subtract(pivot).rotate(theta).add(pivot)`
+            return this.rotateFrom(theta, new L.Point(0,0))
+        },
+
+        /**
+         * Rotate around (pivot.x, pivot.y) by:
+         * 
+         * 1. subtract (pivot.x, pivot.y)
+         * 2. rotate around (0, 0)
+         * 3. add (pivot.x, pivot.y) back
+         * 
+         * same as `this.subtract(pivot).rotate(theta).add(pivot)`
+         */
         rotateFrom: function(theta, pivot) {
             if (!theta) { return this; }
             var sinTheta = Math.sin(theta);
@@ -103,65 +113,73 @@
     });
 
     /**
-     * L.DivOverlay
+     * @external L.DivOverlay
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/DivOverlay.js
      */
+
     const divOverlayProto = L.extend({}, L.DivOverlay.prototype);
 
     L.DivOverlay.include({
 
         getEvents: function() {
-            return L.extend(divOverlayProto.getEvents.call(this), { rotate: this._updatePosition });
+            return L.extend(divOverlayProto.getEvents.apply(this, arguments), { rotate: this._updatePosition });
         },
 
         _updatePosition: function() {
-            if (!this._map) { return; }
-
-            var pos = this._map.latLngToLayerPoint(this._latlng),
-                offset = L.point(this.options.offset),
-                anchor = this._getAnchor();
-
-            if (this._zoomAnimated) {
-                // TODO: use divOverlayProto._updatePosition
-                if (this._map._rotate) {
-                    pos = this._map.rotatedPointToMapPanePoint(pos);
-                }
-                L.DomUtil.setPosition(this._container, pos.add(anchor));
-            } else {
-                offset = offset.add(pos).add(anchor);
+            // 0. update anchor (leaflet v1.9.3)
+            divOverlayProto._updatePosition.apply(this, arguments);
+            // 1. subtract anchor
+            // 2. rotate element
+            // 3. restore anchor
+            if (this._map && this._map._rotate && this._zoomAnimated) {
+                var anchor = this._getAnchor();
+                var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
+                L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
             }
 
-            var bottom = this._containerBottom = -offset.y,
-                left = this._containerLeft = -Math.round(this._containerWidth / 2) + offset.x;
-
-            // bottom position the popup in case the height of the popup changes (images loading etc)
-            this._container.style.bottom = bottom + 'px';
-            this._container.style.left = left + 'px';
         },
 
     });
 
     /**
-     * L.Popup
+     * @external L.Popup
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/Popup.js
      */
+
     const popupProto = L.extend({}, L.Popup.prototype);
 
     L.Popup.include({
 
         _animateZoom: function(e) {
-            if (!this._map._rotate) {
-                popupProto._animateZoom.call(this, e);
+            // 0. update anchor (leaflet v1.9.3)
+            popupProto._animateZoom.apply(this, arguments);
+            // 1. subtract anchor
+            // 2. rotate element
+            // 3. restore anchor
+            if (this._map && this._map._rotate) {
+                var anchor = this._getAnchor();
+                var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
+                L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
             }
-            var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center),
-                anchor = this._getAnchor();
-
-            pos = this._map.rotatedPointToMapPanePoint(pos);
-
-            L.DomUtil.setPosition(this._container, pos.add(anchor));
         },
 
+        /**
+         * Hot fix for L.Popup.mergeOptions({ keepInView: true, });
+         * 
+         * @see https://github.com/fnicollet/Leaflet/pull/21
+         */
         _adjustPan: function() {
             if (!this.options.autoPan || (this._map._panAnim && this._map._panAnim._inProgress)) { return; }
 
+            // We can endlessly recurse if keepInView is set and the view resets.
+            // Let's guard against that by exiting early if we're responding to our own autopan.
+            if (this._autopanning) {
+                this._autopanning = false;
+                return;
+            }
+
             var map = this._map,
                 marginBottom = parseInt(L.DomUtil.getStyle(this._container, 'marginBottom'), 10) || 0,
                 containerHeight = this._container.offsetHeight + marginBottom,
@@ -171,7 +189,7 @@
             layerPos._add(L.DomUtil.getPosition(this._container));
 
             // var containerPos = map.layerPointToContainerPoint(layerPos);
-            // TODO: use popupProto._adjustPan
+            /** @TODO use popupProto._adjustPan */
             var containerPos = layerPos._add(this._map._getMapPanePos()),
                 padding = L.point(this.options.autoPanPadding),
                 paddingTL = L.point(this.options.autoPanPaddingTopLeft || padding),
@@ -198,6 +216,10 @@
             // @event autopanstart: Event
             // Fired when the map starts autopanning when opening a popup.
             if (dx || dy) {
+                // Track that we're autopanning, as this function will be re-ran on moveend
+                if (this.options.keepInView) {
+                    this._autopanning = true;
+                }
                 map
                     .fire('autopanstart')
                     .panBy([dx, dy]);
@@ -207,27 +229,30 @@
     });
 
     /**
-     * L.Tooltip
+     * @external L.Tooltip
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/Tooltip.js
      */
+
     const tooltipProto = L.extend({}, L.Tooltip.prototype);
 
     L.Tooltip.include({
 
-        _updatePosition: function() {
+        _animateZoom: function(e) {
             if (!this._map._rotate) {
-                return tooltipProto._updatePosition.call(this);
+                return tooltipProto._animateZoom.apply(this, arguments);
             }
-            var pos = this._map.latLngToLayerPoint(this._latlng);
+            var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
 
             pos = this._map.rotatedPointToMapPanePoint(pos);
             this._setPosition(pos);
         },
 
-        _animateZoom: function(e) {
+        _updatePosition: function() {
             if (!this._map._rotate) {
-                return tooltipProto._animateZoom.call(this, e);
+                return tooltipProto._updatePosition.apply(this, arguments);
             }
-            var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
+            var pos = this._map.latLngToLayerPoint(this._latlng);
 
             pos = this._map.rotatedPointToMapPanePoint(pos);
             this._setPosition(pos);
@@ -236,9 +261,12 @@
     });
 
     /**
-     * L.Icon
+     * @external L.Icon
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/marker/Icon.js
      */
-    const iconProto = L.extend({}, L.Icon.prototype);
+
+    L.extend({}, L.Icon.prototype);
 
     L.Icon.include({
 
@@ -259,7 +287,7 @@
             if (anchor) {
                 img.style.marginLeft = (-anchor.x) + 'px';
                 img.style.marginTop = (-anchor.y) + 'px';
-                // TODO: use iconProto._setIconStyles
+                /** @TODO use iconProto._setIconStyles */
                 img.style[L.DomUtil.TRANSFORM + "Origin"] = anchor.x + "px " + anchor.y + "px 0px";
             }
 
@@ -272,33 +300,55 @@
     });
 
     /**
-     * L.Handler.MarkerDrag
+     * @external L.Marker
+     * @external L.Handler.MarkerDrag
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/marker/Marker.js
      */
-    var markerDragProto;
+
+    const markerProto = L.extend({}, L.Marker.prototype);
+
+    L.Marker.mergeOptions({
+
+        // @option rotation: Number = 0
+        // Rotation of this marker in rad
+        rotation: 0,
+
+        // @option rotateWithView: Boolean = false
+        // Rotate this marker when map rotates
+        rotateWithView: false,
+
+        // @option scale: Number = undefined
+        // Scale of the marker icon
+        scale: undefined,
+
+    });
+
+    var markerDragProto; // retrived at runtime (see below: L.Marker::_initInteraction())
 
     var MarkerDrag = {
 
-        _onDragStart: function() {
-            if (!this._marker._map._rotate) {
-                return markerDragProto._onDragStart.call(this)
-            }
-            this._draggable.updateMapBearing(this._marker._map._bearing);
-        },
+        // _onDragStart: function() {
+        //     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,
-                // TODO: use markerDragProto._onDrag
+                /** @TODO use markerDragProto._onDrag */
                 rotated_marker = marker.options.rotation || marker.options.rotateWithView,
                 shadow = marker._shadow,
                 iconPos = L.DomUtil.getPosition(marker._icon);
 
-            // TODO: use markerDragProto._onDrag
+            /** @TODO use markerDragProto._onDrag */
             // update shadow position
             if (!rotated_marker && shadow) {
                 L.DomUtil.setPosition(shadow, iconPos);
             }
 
-            // TODO: use markerDragProto._onDrag
+            /** @TODO use markerDragProto._onDrag */
             if (marker._map._rotate) {
                 // Reverse calculation from mapPane coordinates to rotatePane coordinates
                 iconPos = marker._map.mapPanePointToRotatedPoint(iconPos);
@@ -309,7 +359,7 @@
             e.latlng = latlng;
             e.oldLatLng = this._oldLatLng;
 
-            // TODO: use markerDragProto._onDrag
+            /** @TODO use markerDragProto._onDrag */
             if (rotated_marker) marker.setLatLng(latlng); // use `setLatLng` to presisit rotation. low efficiency
             else marker.fire('move', e); // `setLatLng` will trig 'move' event. we imitate here.
 
@@ -323,47 +373,32 @@
             if (this._marker._map._rotate) {
                 this._marker.update();
             }
-            markerDragProto._onDragEnd.call(this, e);
+            markerDragProto._onDragEnd.apply(this, arguments);
         },
 
     };
 
-    /**
-     * L.Marker
-     */
-    const markerProto = L.extend({}, L.Marker.prototype);
-
-    L.Marker.mergeOptions({
-
-        // @option rotation: Number = 0
-        // Rotation of this marker in rad
-        rotation: 0,
-
-        // @option rotateWithView: Boolean = false
-        // Rotate this marker when map rotates
-        rotateWithView: false,
-
-    });
-
     L.Marker.include({
 
         getEvents: function() {
-            return L.extend(markerProto.getEvents.call(this), { rotate: this.update });
+            return L.extend(markerProto.getEvents.apply(this, arguments), { rotate: this.update });
         },
 
         onAdd: function(map) {
-            markerProto.onAdd.call(this, map);
+            markerProto.onAdd.apply(this, arguments);
             map.on('rotate', this.update, this);
         },
 
         _initInteraction: function() {
-            var ret = markerProto._initInteraction.call(this);
+            var ret = markerProto._initInteraction.apply(this, arguments);
             if (this.dragging && this.dragging.enabled() && this._map && this._map._rotate) {
                 // L.Handler.MarkerDrag is used internally by L.Marker to make the markers draggable
                 markerDragProto = markerDragProto || Object.getPrototypeOf(this.dragging);
-                this.dragging._onDragStart = MarkerDrag._onDragStart.bind(this.dragging);
-                this.dragging._onDrag = MarkerDrag._onDrag.bind(this.dragging);
-                this.dragging._onDragEnd = MarkerDrag._onDragEnd.bind(this.dragging);
+                Object.assign(this.dragging, {
+                    // _onDragStart: MarkerDrag._onDragStart.bind(this.dragging),
+                    _onDrag: MarkerDrag._onDrag.bind(this.dragging),
+                    _onDragEnd: MarkerDrag._onDragEnd.bind(this.dragging),
+                });
                 this.dragging.disable();
                 this.dragging.enable();
             }
@@ -372,23 +407,25 @@
 
         _setPos: function(pos) {
 
-            // TODO: use markerProto._setPos
+            /** @TODO use markerProto._setPos */
             if (this._map._rotate) {
                 pos = this._map.rotatedPointToMapPanePoint(pos);
             }
 
-            // TODO: use markerProto._setPos
+            /** @TODO use markerProto._setPos */
             var bearing = this.options.rotation || 0;
             if (this.options.rotateWithView) {
                 bearing += this._map._bearing;
             }
 
-            // TODO: use markerProto._setPos
-            L.DomUtil.setPosition(this._icon, pos, bearing, pos);
+            /** @TODO use markerProto._setPos */
+            if (this._icon) {
+                L.DomUtil.setPosition(this._icon, pos, bearing, pos, this.options.scale);
+            }
 
-            // TODO: use markerProto._setPos
+            /** @TODO use markerProto._setPos */
             if (this._shadow) {
-                L.DomUtil.setPosition(this._shadow, pos, bearing, pos);
+                L.DomUtil.setPosition(this._shadow, pos, bearing, pos, this.options.scale);
             }
 
             this._zIndex = pos.y + this.options.zIndexOffset;
@@ -398,7 +435,7 @@
 
         _updateZIndex: function(offset) {
             if (!this._map._rotate) {
-                return markerProto._updateZIndex.call(this, offset)
+                return markerProto._updateZIndex.apply(this, arguments);
             }
             this._icon.style.zIndex = Math.round(this._zIndex + offset);
         },
@@ -411,14 +448,17 @@
     });
 
     /**
-     * L.GridLayer
+     * @external L.GridLayer
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/tile/GridLayer.js
      */
+
     const gridLayerProto = L.extend({}, L.GridLayer.prototype);
 
     L.GridLayer.include({
 
         getEvents: function() {
-            var events = gridLayerProto.getEvents.call(this);
+            var 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);
@@ -430,72 +470,71 @@
 
         _getTiledPixelBounds: function(center) {
             if (!this._map._rotate) {
-                return gridLayerProto._getTiledPixelBounds.call(this, center);
+                return gridLayerProto._getTiledPixelBounds.apply(this, arguments);
             }
 
-            var map = this._map,
-                mapZoom = map._animatingZoom ? Math.max(map._animateToZoom, map.getZoom()) : map.getZoom(),
-                scale = map.getZoomScale(mapZoom, this._tileZoom),
-                pixelCenter = map.project(center, this._tileZoom).floor(),
-                size = map.getSize(),
-                halfSize = new L.Bounds([
-                    map.containerPointToLayerPoint([0, 0]).floor(),
-                    map.containerPointToLayerPoint([size.x, 0]).floor(),
-                    map.containerPointToLayerPoint([0, size.y]).floor(),
-                    map.containerPointToLayerPoint([size.x, size.y]).floor()
-                ]).getSize().divideBy(scale * 2);
-
-            return new L.Bounds(pixelCenter.subtract(halfSize), pixelCenter.add(halfSize));
+            return this._map._getNewPixelBounds(center, this._tileZoom);
         },
 
     });
 
     /**
-     * L.Canvas
+     * @external L.Canvas
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/vector/Canvas.js
      */
-    const canvasProto = L.extend({}, L.Canvas.prototype);
+
+    L.extend({}, L.Canvas.prototype);
 
     L.Canvas.include({
 
-        onAdd: function() {
-            canvasProto.onAdd.call(this);
-            // When rotating the canvas itself, it is cleared by some weird reason, so redraw.
-            this._map.on('rotate', this._redraw, this);
-        },
+        // onAdd: function() {
+        //     canvasProto.onAdd.apply(this, arguments);
+        //     // When rotating the canvas itself, it is cleared by some weird reason, so redraw.
+        //     this._map.on('rotate', this._redraw, this);
+        // },
 
-        onRemove: function() {
-            canvasProto.onRemove.call(this);
-            this._map.off('rotate', this._redraw, this);
-        },
+        // onRemove: function() {
+        //     canvasProto.onRemove.apply(this, arguments);
+        //     this._map.off('rotate', this._redraw, this);
+        // },
 
-        _update: function() {
-            canvasProto._update.call(this);
-            // Tell paths to redraw themselves
-            this.fire('update');
-        },
+        // _update: function() {
+        //     canvasProto._update.apply(this, arguments);
+        //     // Tell paths to redraw themselves
+        //     this.fire('update')
+        // },
 
     });
 
     /**
-     * L.Renderer
+     * @external L.Renderer
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/vector/Renderer.js
      */
+
     const rendererProto = L.extend({}, L.Renderer.prototype);
 
     L.Renderer.include({
 
-        onAdd: function() {
-            rendererProto.onAdd.call(this);
-            // this._map.on('rotate', this._update, this);
-        },
+        // onAdd: function() {
+        //     rendererProto.onAdd.apply(this, arguments);
+        //     // this._map.on('rotate', this._update, this);
+        // },
 
-        onRemove: function() {
-            rendererProto.onRemove.call(this);
-            // this._map.off('rotate', this._update, this);
-        },
+        // onRemove: function() {
+        //     rendererProto.onRemove.apply(this, arguments);
+        //     // this._map.off('rotate', this._update, this);
+        // },
 
+        /**
+         * @TODO rechek this changes from leaflet@v1.9.3
+         * 
+         * @see https://github.com/Leaflet/Leaflet/compare/v1.7.0...v1.9.3
+         */
         _updateTransform: function(center, zoom) {
             if (!this._map._rotate) {
-                return rendererProto._updateTransform.call(this, center, zoom);
+                return rendererProto._updateTransform.apply(this, arguments);
             }
             var scale = this._map.getZoomScale(zoom, this._zoom),
                 offset = this._map._latLngToNewLayerPoint(this._topLeft, zoom, center);
@@ -508,29 +547,12 @@
 
         _update: function() {
             if (!this._map._rotate) {
-                return rendererProto._update.call(this);
+                return rendererProto._update.apply(this, arguments);
             }
             // Update pixel bounds of renderer container (for positioning/sizing/clipping later)
             // Subclasses are responsible of firing the 'update' event.
-            var p = this.options.padding,
-                map = this._map,
-                size = this._map.getSize(),
-                padMin = size.multiplyBy(-p),
-                padMax = size.multiplyBy(1 + p),
-                //// TODO: Somehow refactor this out into map.something() - the code is
-                ////   pretty much the same as in GridLayer.
-                clip = new L.Bounds([
-                    map.containerPointToLayerPoint([padMin.x, padMin.y]).floor(),
-                    map.containerPointToLayerPoint([padMin.x, padMax.y]).floor(),
-                    map.containerPointToLayerPoint([padMax.x, padMin.y]).floor(),
-                    map.containerPointToLayerPoint([padMax.x, padMax.y]).floor()
-                ]);
-            //min = this._map.containerPointToLayerPoint(size.multiplyBy(-p)).round();
-
-            this._bounds = clip;
-            // this._topLeft = clip.min;
-            this._topLeft = this._map.layerPointToLatLng(clip.min);
-
+            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();
         },
@@ -538,57 +560,62 @@
     });
 
     /**
-     * L.SVG
+     * @external L.SVG
+     * 
+     * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/vector/SVG.js
      */
-    const svgProto = L.extend({}, L.SVG.prototype);
+
+    L.extend({}, L.SVG.prototype);
 
     L.SVG.include({
 
-        _update: function() {
-            svgProto._update.call(this);
-            if (this._map._rotate) {
-                this.fire('update');
-            }
-        },
+        // _update: function() {
+        //     svgProto._update.apply(this, arguments);
+        //     if (this._map._rotate) {
+        //         this.fire('update');
+        //     }
+        // },
 
     });
 
     /**
-     * L.Map
+     * @external L.Map
+     * 
+     * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/map/Map.js
      */
+
     const mapProto = L.extend({}, L.Map.prototype);
 
     L.Map.mergeOptions({ rotate: false, bearing: 0, });
 
     L.Map.include({
 
-        initialize: function(id, options) { // (HTMLElement or String, Object)
+        /**
+         * @param {(HTMLElement|String)} id html selector
+         * @param {Object} [options={}] leaflet map options
+         */
+        initialize: function(id, options) {
             if (options.rotate) {
                 this._rotate = true;
                 this._bearing = 0;
             }
-            mapProto.initialize.call(this, id, options);
+            mapProto.initialize.apply(this, arguments);
             if(this.options.rotate){
               this.setBearing(this.options.bearing);
             }
         },
 
-        // createPane: function(name, container) {
-        //     if (!this._rotate || name == 'mapPane') {
-        //         return mapProto.createPane.call(this, name, container);
-        //     }
-        //     // init "rotatePane"
-        //     if (!this._rotatePane) {
-        //         // this._pivot = this.getSize().divideBy(2);
-        //         this._rotatePane = mapProto.createPane.call(this, 'rotatePane', this._mapPane);
-        //         L.DomUtil.setPosition(this._rotatePane, new L.Point(0, 0), this._bearing, this._pivot);
-        //     }
-        //     return mapProto.createPane.call(this, name, container || this._rotatePane);
-        // },
-
-        containerPointToLayerPoint: function(point) { // (Point)
+        /**
+         * Given a pixel coordinate relative to the map container,
+         * 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
+         */
+        containerPointToLayerPoint: function(point) {
             if (!this._rotate) {
-                return mapProto.containerPointToLayerPoint.call(this, point);
+                return mapProto.containerPointToLayerPoint.apply(this, arguments);
             }
             return L.point(point)
                 .subtract(this._getMapPanePos())
@@ -596,23 +623,16 @@
                 .subtract(this._getRotatePanePos());
         },
 
-        getBounds: function() {
+        /**
+         * 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
+         */
+        layerPointToContainerPoint: function(point) {
             if (!this._rotate) {
-                return mapProto.getBounds.call(this);
-            }
-            var size = this.getSize();
-            var topleft = this.layerPointToLatLng(this.containerPointToLayerPoint([0, 0])),
-                topright = this.layerPointToLatLng(this.containerPointToLayerPoint([size.x, 0])),
-                bottomright = this.layerPointToLatLng(this.containerPointToLayerPoint([size.x, size.y])),
-                bottomleft = this.layerPointToLatLng(this.containerPointToLayerPoint([0, size.y]));
-
-            // Use LatLngBounds' build-in constructor that automatically extends the bounds to fit the passed points
-            return new L.LatLngBounds([topleft, topright, bottomright, bottomleft]);
-        },
-
-        layerPointToContainerPoint: function(point) { // (Point)
-            if (!this._rotate) {
-                return mapProto.layerPointToContainerPoint.call(this, point);
+                return mapProto.layerPointToContainerPoint.apply(this, arguments);
             }
             return L.point(point)
                 .add(this._getRotatePanePos())
@@ -620,89 +640,215 @@
                 .add(this._getMapPanePos());
         },
 
-        // Rotation methods
-        // setBearing will work with just the 'theta' parameter.
+        /**
+         * Converts a coordinate from the rotated pane reference system
+         * to the reference system of the not rotated map pane.
+         * 
+         * (rotatePane) --> (mapPane)
+         * (rotatePane) --> (norotatePane)
+         * 
+         * @param {L.Point} point pixel screen coordinates
+         * @returns {L.Point}
+         * 
+         * @since leaflet-rotate (v0.1)
+         */
+        rotatedPointToMapPanePoint: function(point) {
+            return L.point(point)
+                .rotate(this._bearing)
+                ._add(this._getRotatePanePos());
+        },
+
+        /**
+         * Converts a coordinate from the not rotated map pane reference system
+         * to the reference system of the rotated pane.
+         * 
+         * (mapPane) --> (rotatePane)
+         * (norotatePane) --> (rotatePane)
+         * 
+         * @param {L.Point} point pixel screen coordinates
+         * 
+         * @since leaflet-rotate (v0.1)
+         */
+        mapPanePointToRotatedPoint: function(point) {
+            return L.point(point)
+                ._subtract(this._getRotatePanePos())
+                .rotate(-this._bearing);
+        },
+
+        /**
+         * Given latlng bounds, returns the bounds in projected pixel
+         * relative to the map container.
+         * 
+         * @see https://github.com/ronikar/Leaflet/blob/5c480ef959b947c3beed7065425a5a36c486262b/src/map/Map.js#L1114-L1135
+         * 
+         * @param {L.LatLngBounds} bounds 
+         * @returns {L.Bounds}
+         * 
+         * @since leaflet-rotate (v0.2)
+         */
+        mapBoundsToContainerBounds: function (bounds) {
+            if (!this._rotate && mapProto.mapBoundsToContainerBounds) {
+                return mapProto.mapBoundsToContainerBounds.apply(this, arguments);
+            }
+            const nw = this.latLngToContainerPoint(bounds.getNorthWest()),
+                ne = this.latLngToContainerPoint(bounds.getNorthEast()),
+                sw = this.latLngToContainerPoint(bounds.getSouthWest()),
+                se = this.latLngToContainerPoint(bounds.getSouthEast());
+            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 ]
+            ]);
+        },
+
+        /**
+         * Returns geographical bounds visible in the current map view
+         * 
+         * @TODO find out  if map bounds calculated by `L.Map::getBounds()`
+         *       function should match the `rotatePane` or `norotatePane` bounds
+         * 
+         * @see https://github.com/fnicollet/Leaflet/issues/7
+         * 
+         * @returns {L.LatLngBounds}
+         */
+        getBounds: function() {
+            if (!this._rotate) {
+                return mapProto.getBounds.apply(this, arguments);
+            }
+
+            // SEE: https://github.com/fnicollet/Leaflet/pull/22
+            //
+            // var bounds = this.getPixelBounds(),
+            // sw = this.unproject(bounds.getBottomLeft()),
+            // ne = this.unproject(bounds.getTopRight());
+            // return new LatLngBounds(sw, ne);
+            //
+
+            // LatLngBounds' constructor automatically
+            // extends the bounds to fit the passed points
+            var size = this.getSize();
+            return new L.LatLngBounds([
+                this.containerPointToLatLng([0, 0]),           // topleft
+                this.containerPointToLatLng([size.x, 0]),      // topright 
+                this.containerPointToLatLng([size.x, size.y]), // bottomright
+                this.containerPointToLatLng([0, size.y]),      // bottomleft
+            ]);
+        },
+
+        /**
+         * Returns the bounds of the current map view in projected pixel
+         * coordinates (sometimes useful in layer and overlay implementations).
+         * 
+         * @TODO find out if map bounds calculated by `L.Map::getPixelBounds()`
+         *       function should match the `rotatePane` or `norotatePane` bounds
+         *
+         * @see https://github.com/fnicollet/Leaflet/issues/7
+         * 
+         * @returns {L.Bounds}
+         */
+        // getPixelBounds(center, zoom) {
+        //     // const topLeftPoint = map.containerPointToLayerPoint(this._getTopLeftPoint());
+        //     const topLeftPoint = this._getTopLeftPoint(center, zoom);
+        //       return new L.Bounds(topLeftPoint, topLeftPoint.add(this.getSize()));
+        // },
+
+        /**
+         * Change map rotation
+         * 
+         * @param {number} theta map degrees
+         * 
+         * @since leaflet-rotate (v0.1)
+         */
         setBearing: function(theta) {
             if (!L.Browser.any3d || !this._rotate) { return; }
 
-            var rotatePanePos = this._getRotatePanePos();
-            var halfSize = this.getSize().divideBy(2);
-            this._pivot = this._getMapPanePos().clone().multiplyBy(-1).add(halfSize);
-
-            rotatePanePos = rotatePanePos.rotateFrom(-this._bearing, this._pivot);
+            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);
 
-            this._bearing = theta * L.DomUtil.DEG_TO_RAD; // TODO: mod 360
-            this._rotatePanePos = rotatePanePos.rotateFrom(this._bearing, this._pivot);
+            // CSS transform
+            L.DomUtil.setPosition(this._rotatePane, oldPos, bearing, center);
 
-            L.DomUtil.setPosition(this._rotatePane, rotatePanePos, this._bearing, this._pivot);
+            this._pivot = center;
+            this._bearing = bearing;
+            this._rotatePanePos = newPos;
 
             this.fire('rotate');
         },
 
+        /**
+         * Get current map rotation
+         * 
+         * @returns {number} theta map degrees
+         * 
+         * @since leaflet-rotate (v0.1)
+         */
         getBearing: function() {
             return this._bearing * L.DomUtil.RAD_TO_DEG;
         },
 
+        /**
+         * Creates a new [map pane](#map-pane) with the given name if it doesn't
+         * exist already, then returns it. The pane is created as a child of
+         * `container`, or as a child of the main map pane if not set.
+         * 
+         * @param {String} name leaflet pane
+         * @param {HTMLElement} [container] parent element
+         * @returns {HTMLElement} pane container
+         */
+        // createPane: function(name, container) {
+        //     if (!this._rotate || name == 'mapPane') {
+        //         return mapProto.createPane.apply(this, arguments);
+        //     }
+        //     // init "rotatePane"
+        //     if (!this._rotatePane) {
+        //         // this._pivot = this.getSize().divideBy(2);
+        //         this._rotatePane = mapProto.createPane.call(this, 'rotatePane', this._mapPane);
+        //         L.DomUtil.setPosition(this._rotatePane, new L.Point(0, 0), this._bearing, this._pivot);
+        //     }
+        //     return mapProto.createPane.call(this, name, container || this._rotatePane);
+        // },
+
+        /**
+         * Panes are DOM elements used to control the ordering of layers on
+         * the map. You can access panes with [`map.getPane`](#map-getpane)
+         * or [`map.getPanes`](#map-getpanes) methods. New panes can be created
+         * with the [`map.createPane`](#map-createpane) method.
+         * 
+         * Every map has the following default panes that differ only in zIndex:
+         * 
+         * - mapPane     [HTMLElement = 'auto'] - Pane that contains all other map panes
+         * - tilePane    [HTMLElement = 2]      - Pane for tile layers
+         * - overlayPane [HTMLElement = 4]      - Pane for overlays like polylines and polygons
+         * - shadowPane  [HTMLElement = 5]      - Pane for overlay shadows (e.g. marker shadows)
+         * - markerPane  [HTMLElement = 6]      - Pane for marker icons
+         * - tooltipPane [HTMLElement = 650]    - Pane for tooltips.
+         * - popupPane   [HTMLElement = 700]    - Pane for popups.
+         */
         _initPanes: function() {
             var panes = this._panes = {};
             this._paneRenderers = {};
 
-            // @section
-            //
-            // Panes are DOM elements used to control the ordering of layers on the map. You
-            // can access panes with [`map.getPane`](#map-getpane) or
-            // [`map.getPanes`](#map-getpanes) methods. New panes can be created with the
-            // [`map.createPane`](#map-createpane) method.
-            //
-            // Every map has the following default panes that differ only in zIndex.
-            //
-            // @pane mapPane: HTMLElement = 'auto'
-            // Pane that contains all other map panes
-
             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);
-
-                // @pane tilePane: HTMLElement = 2
-                // Pane for tile layers
+                // rotatePane
                 this.createPane('tilePane', this._rotatePane);
-                // @pane overlayPane: HTMLElement = 4
-                // Pane for overlays like polylines and polygons
                 this.createPane('overlayPane', this._rotatePane);
-
-                // @pane shadowPane: HTMLElement = 5
-                // Pane for overlay shadows (e.g. marker shadows)
+                // norotatePane
                 this.createPane('shadowPane', this._norotatePane);
-                // @pane markerPane: HTMLElement = 6
-                // Pane for marker icons
                 this.createPane('markerPane', this._norotatePane);
-                // @pane tooltipPane: HTMLElement = 650
-                // Pane for tooltips.
                 this.createPane('tooltipPane', this._norotatePane);
-                // @pane popupPane: HTMLElement = 700
-                // Pane for popups.
                 this.createPane('popupPane', this._norotatePane);
             } else {
-                // @pane tilePane: HTMLElement = 2
-                // Pane for tile layers
                 this.createPane('tilePane');
-                // @pane overlayPane: HTMLElement = 4
-                // Pane for overlays like polylines and polygons
                 this.createPane('overlayPane');
-                // @pane shadowPane: HTMLElement = 5
-                // Pane for overlay shadows (e.g. marker shadows)
                 this.createPane('shadowPane');
-                // @pane markerPane: HTMLElement = 6
-                // Pane for marker icons
                 this.createPane('markerPane');
-                // @pane tooltipPane: HTMLElement = 650
-                // Pane for tooltips.
                 this.createPane('tooltipPane');
-                // @pane popupPane: HTMLElement = 700
-                // Pane for popups.
                 this.createPane('popupPane');
             }
 
@@ -712,37 +858,205 @@
             }
         },
 
-        // @method rotatedPointToMapPanePoint(point: Point): Point
-        // Converts a coordinate from the rotated pane reference system
-        // to the reference system of the not rotated map pane.
-        rotatedPointToMapPanePoint: function(point) {
-            return L.point(point).rotate(this._bearing)._add(this._getRotatePanePos());
-        },
+        /**
+         * Pans the map the minimum amount to make the `latlng` visible. Use
+         * padding options to fit the display to more restricted bounds.
+         * If `latlng` is already within the (optionally padded) display bounds,
+         * the map will not be panned.
+         * 
+         * @see https://github.com/Raruto/leaflet-rotate/issues/18
+         * 
+         * @param {L.LatLng} latlng coordinates
+         * @param {Object} [options={}] padding options
+         * 
+         * @returns {L.Map} current map instance
+         */
+        panInside(latlng, options) {
+            options = options || {};
+
+            const paddingTL = L.point(options.paddingTopLeft || options.padding || [0, 0]),
+                paddingBR = L.point(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()) ]),
+                pixelCenter = pixelBounds.getCenter(),
+                //
+                paddedBounds = 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());
+                const offset = paddedBounds.extend(pixelPoint).getSize().subtract(paddedSize);
+                pixelCenter.x += centerOffset.x < 0 ? -offset.x : offset.x;
+                pixelCenter.y += centerOffset.y < 0 ? -offset.y : offset.y;
+                /** @TODO use mapProto.panInside */
+                // this.panTo(this.unproject(pixelCenter), options);
+                this.panTo(this.containerPointToLatLng(pixelCenter), options);
+                //
+                this._enforcingBounds = false;
+            }
+            return this;
+        },
+
+        /**
+         * Pans the map to the closest view that would lie inside the given bounds
+         * (if it's not already), controlling the animation using the options specific,
+         * if any.
+         * 
+         * @TODO check if map bounds calculated by `L.Map::panInsideBounds()`
+         *       function should match the `rotatePane` or `norotatePane` bounds
+         *
+         * @see https://github.com/fnicollet/Leaflet/issues/7
+         * 
+         * @param {L.LatLngBounds} bounds coordinates
+         * @param {Object} [options] pan options
+         * @returns {L.Map} current map instance
+         */
+        // panInsideBounds: function (bounds, options) {
+        //     this._enforcingBounds = true;
+        //     var center = this.getCenter(),
+        //         newCenter = this._limitCenter(center, this._zoom, L.latLngBounds(bounds));
+        //
+        //     if (!center.equals(newCenter)) {
+        //         this.panTo(newCenter, options);
+        //     }
+        //
+        //     this._enforcingBounds = false;
+        //     return this;
+        // },
 
-        // @method mapPanePointToRotatedPoint(point: Point): Point
-        // Converts a coordinate from the not rotated map pane reference system
-        // to the reference system of the rotated pane.
-        mapPanePointToRotatedPoint: function(point) {
-            return L.point(point)._subtract(this._getRotatePanePos()).rotate(-this._bearing);
+        // adjust center for view to get inside bounds
+        // _limitCenter(center, zoom, bounds) {
+        //
+        //     if (!bounds) { return center; }
+        //
+        //     const centerPoint = this.project(center, zoom),
+        //         viewHalf = this.getSize().divideBy(2),
+        //         viewBounds = new Bounds(centerPoint.subtract(viewHalf), centerPoint.add(viewHalf)),
+        //         offset = this._getBoundsOffset(viewBounds, bounds, zoom);
+        //
+        //     // If offset is less than a pixel, ignore.
+        //     // This prevents unstable projections from getting into
+        //     // an infinite loop of tiny offsets.
+        //     if (Math.abs(offset.x) <= 1 && Math.abs(offset.y) <= 1) {
+        //             return center;
+        //     }
+        //
+        //     return this.unproject(centerPoint.add(offset), zoom);
+        // },
+
+        // @method flyToBounds(bounds: LatLngBounds, options?: fitBounds options): this
+        // Sets the view of the map with a smooth animation like [`flyTo`](#map-flyto),
+        // but takes a bounds parameter like [`fitBounds`](#map-fitbounds).
+        // flyToBounds(bounds, options) {
+        //     const target = this._getBoundsCenterZoom(bounds, options);
+        //     return this.flyTo(target.center, target.zoom, options);
+        // },
+
+        // _getBoundsCenterZoom(bounds, options) {
+        //
+        //     options = options || {};
+        //     bounds = bounds.getBounds ? bounds.getBounds() : toLatLngBounds(bounds);
+        //
+        //     const paddingTL = L.point(options.paddingTopLeft || options.padding || [0, 0]),
+        //           paddingBR = L.point(options.paddingBottomRight || options.padding || [0, 0]);
+        //
+        //     let zoom = this.getBoundsZoom(bounds, false, paddingTL.add(paddingBR));
+        //
+        //     zoom = (typeof options.maxZoom === 'number') ? Math.min(options.maxZoom, zoom) : zoom;
+        //
+        //     if (zoom === Infinity) {
+        //         return { center: bounds.getCenter(), zoom };
+        //     }
+        //
+        //     return { center, zoom };
+        //
+        // },
+
+        /**
+         * Returns the maximum zoom level on which the given bounds fit to the map
+         * view in its entirety. If `inside` (optional) is set to `true`, the method
+         * 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]]
+         * 
+         * @returns {Number} zoom level
+         */
+        getBoundsZoom(bounds, inside, padding) {
+            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]);
+
+            let zoom = this.getZoom() || 0;
+            const min = this.getMinZoom(),
+                    max = this.getMaxZoom(),
+                    /** @TODO use mapProto.getBoundsZoom */
+                    // nw = bounds.getNorthWest(),
+                    // se = bounds.getSouthEast(),
+                    // size = this.getSize().subtract(padding),
+                    // boundsSize = L.bounds(this.project(se, zoom), this.project(nw, zoom)).getSize(),
+                    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);
+
+            if (snap) {
+                zoom = Math.round(zoom / (snap / 100)) * (snap / 100); // don't jump if within 1% of a snap level
+                zoom = inside ? Math.ceil(zoom / snap) * snap : Math.floor(zoom / snap) * snap;
+            }
+
+            return Math.max(min, Math.min(max, zoom));
         },
 
-        // offset of the specified place to the current center in pixels
+        /**
+         * Layer point of the current center
+         * 
+         * @returns {L.Point} layer center
+         */
+        // _getCenterLayerPoint: function () {
+        //    return this.containerPointToLayerPoint(this.getSize()._divideBy(2));
+        // },
+
+        /**
+         * Offset of the specified place to the current center in pixels
+         * 
+         * @param {L.LatLng} latlng map coordinates
+         */
         _getCenterOffset: function(latlng) {
-            var centerOffset = mapProto._getCenterOffset.call(this, latlng);
+            var centerOffset = mapProto._getCenterOffset.apply(this, arguments);
             if (this._rotate) {
                 centerOffset = centerOffset.rotate(this._bearing);
             }
             return centerOffset;
         },
 
+        /**
+         * @since leaflet-rotate (v0.1)
+         */
         _getRotatePanePos: function() {
             return this._rotatePanePos || new L.Point(0, 0);
+            // return L.DomUtil.getPosition(this._rotatePane) || new L.Point(0, 0);
         },
 
         _getNewPixelOrigin: function(center, zoom) {
             var viewHalf = this.getSize()._divideBy(2);
             if (!this._rotate) {
-                mapProto._getNewPixelOrigin.call(this, center, zoom);
+                return mapProto._getNewPixelOrigin.apply(this, arguments);
             }
             return this.project(center, zoom)
                 .rotate(this._bearing)
@@ -753,10 +1067,72 @@
                 ._round();
         },
 
+        /**
+         * @since leaflet-rotate (v0.2)
+         * 
+         * @see src\layer\tile\GridLayer::_getTiledPixelBounds()
+         */
+        _getNewPixelBounds: function(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([
+                    this.containerPointToLayerPoint([0, 0]).floor(),
+                    this.containerPointToLayerPoint([size.x, 0]).floor(),
+                    this.containerPointToLayerPoint([0, size.y]).floor(),
+                    this.containerPointToLayerPoint([size.x, size.y]).floor()
+                ]).getSize().divideBy(scale * 2);
+
+            return new L.Bounds(pixelCenter.subtract(halfSize), pixelCenter.add(halfSize));
+        },
+
+        /**
+         * @since leaflet-rotate (v0.2)
+         * 
+         * @return {L.Point} map pivot point (center)
+         */
+        _getPixelCenter: function() {
+            if (!this._rotate && mapProto._getPixelCenter) {
+                return mapProto._getPixelCenter.apply(this, arguments);
+            }
+            return this.getSize()._divideBy(2)._subtract(this._getMapPanePos());
+        },
+
+        /**
+         * @since leaflet-rotate (v0.2)
+         * 
+         * @see src\layer\vector\Renderer::_update()
+         */
+        _getPaddedPixelBounds: function(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);
+                //min = this.containerPointToLayerPoint(size.multiplyBy(-p)).round();
+
+            return new L.Bounds([
+                this.containerPointToLayerPoint([padMin.x, padMin.y]).floor(),
+                this.containerPointToLayerPoint([padMin.x, padMax.y]).floor(),
+                this.containerPointToLayerPoint([padMax.x, padMin.y]).floor(),
+                this.containerPointToLayerPoint([padMax.x, padMax.y]).floor()
+            ]);
+        },
+
         _handleGeolocationResponse: function(pos) {
+            if (!this._container._leaflet_id) { return; }
+
             var lat = pos.coords.latitude,
                 lng = pos.coords.longitude,
-                // TODO: use mapProto._handleGeolocationResponse
+                /** @TODO use mapProto._handleGeolocationResponse */
                 hdg = pos.coords.heading,
                 latlng = new L.LatLng(lat, lng),
                 bounds = latlng.toBounds(pos.coords.accuracy),
@@ -771,7 +1147,7 @@
                 latlng: latlng,
                 bounds: bounds,
                 timestamp: pos.timestamp,
-                // TODO: use mapProto._handleGeolocationResponse
+                /** @TODO use mapProto._handleGeolocationResponse */
                 heading: hdg
             };
 
@@ -787,39 +1163,50 @@
             this.fire('locationfound', data);
         },
 
+        /**
+         * @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),
+        //         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);
+        //
+        //     return L.bounds(L.point(minX, minY), L.point(maxX, maxY));
+        // },
+
     });
 
-    /*
-     * L.Map.CompassBearing will rotate the map according to a smartphone's compass.
+    /**
+     * Rotates the map according to a smartphone's compass.
+     * 
+     * @typedef L.Map.CompassBearing
      */
 
     L.Map.CompassBearing = L.Handler.extend({
 
         initialize: function(map) {
-            if (!window.DeviceOrientationEvent) {
-                this._capable = false;
-                return;
-            }
-            this._capable = true;
             this._map = map;
-
             this._throttled = L.Util.throttle(this._onDeviceOrientation, 1000, this);
         },
 
         addHooks: function() {
-            if (this._capable && this._map._rotate) {
+            if (this._map._rotate && window.DeviceOrientationEvent) {
                 L.DomEvent.on(window, 'deviceorientation', this._throttled, this);
             }
         },
 
         removeHooks: function() {
-            if (this._capable && this._map._rotate) {
+            if (this._map._rotate && window.DeviceOrientationEvent) {
                 L.DomEvent.off(window, 'deviceorientation', this._throttled, this);
             }
         },
 
         _onDeviceOrientation: function(event) {
-            if (event.alpha !== null) {
+            if (event.alpha !== null && window.orientation !== undefined) {
                 this._map.setBearing(event.alpha - window.orientation);
             }
         },
@@ -831,8 +1218,10 @@
     // Compass bearing handler.
     L.Map.addInitHook('addHandler', 'compassBearing', L.Map.CompassBearing);
 
-    /*
-     * L.Handler.ContainerMutation triggers `invalidateResize` when the map's DOM container mutates.
+    /**
+     * Triggers `invalidateResize` when the map's DOM container mutates.
+     * 
+     * @typedef L.Map.ContainerMutation
      */
 
     // @namespace Map
@@ -850,9 +1239,10 @@
     L.Map.ContainerMutation = L.Handler.extend({
 
         addHooks: function() {
-            if (!L.Browser.mutation) {
-                return;
-            }
+            /** @TODO check again this property. Will likely be added in future releases (leaflet > v1.9.3) */
+            // if (!L.Browser.mutation) {
+            //     return;
+            // }
 
             if (!this._observer) {
                 this._observer = new MutationObserver(L.Util.bind(this._onMutation, this));
@@ -868,9 +1258,10 @@
         },
 
         removeHooks: function() {
-            if (!L.Browser.mutation) {
-                return;
-            }
+            /** @TODO check again this property. Will likely be added in future releases (leaflet > v1.9.3) */
+            // if (!L.Browser.mutation) {
+            //     return;
+            // }
             this._observer.disconnect();
         },
 
@@ -885,8 +1276,13 @@
     // Container mutation handler (disabled unless [`trackContainerMutation`](#map-trackcontainermutation) is set).
     L.Map.addInitHook('addHandler', 'trackContainerMutation', L.Map.ContainerMutation);
 
-    /*
-     * L.Handler.TouchGestures is both TouchZoom plus TouchRotate.
+    /**
+     * TouchGestures is both TouchZoom plus TouchRotate
+     * 
+     * @see https://github.com/fnicollet/Leaflet/commit/a77af51a6b10f308d1b9a16552091d1d0aee8834
+     * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/map/handler/Map.TouchZoom.js
+     * 
+     * @typedef L.Map.TouchGestures
      */
 
     // @namespace Map
@@ -950,11 +1346,11 @@
 
             this._moved = false;
 
-            map.stop();
+            map._stop();
 
             L.DomEvent
                 .on(document, 'touchmove', this._onTouchMove, this)
-                .on(document, 'touchend', this._onTouchEnd, this);
+                .on(document, 'touchend touchcancel', this._onTouchEnd, this);
 
             L.DomEvent.preventDefault(e);
         },
@@ -1005,20 +1401,20 @@
             }
 
             if (!this._moved) {
-                map._moveStart(true);
+                map._moveStart(true, false);
                 this._moved = true;
             }
 
             L.Util.cancelAnimFrame(this._animRequest);
 
-            var moveFn = L.bind(map._move, map, this._center, this._zoom, { pinch: true, round: false });
+            var moveFn = map._move.bind(map, this._center, this._zoom, { pinch: true, round: false }, undefined);
             this._animRequest = L.Util.requestAnimFrame(moveFn, this, true);
 
             L.DomEvent.preventDefault(e);
         },
 
         _onTouchEnd: function() {
-            if (!this._moved || !this._zooming) {
+            if (!this._moved || !(this._zooming || this._rotating)) {
                 this._zooming = false;
                 return;
             }
@@ -1028,13 +1424,13 @@
             L.Util.cancelAnimFrame(this._animRequest);
 
             L.DomEvent
-                .off(document, 'touchmove', this._onTouchMove)
-                .off(document, 'touchend', this._onTouchEnd);
+                .off(document, 'touchmove', this._onTouchMove, this)
+                .off(document, 'touchend touchcancel', this._onTouchEnd, this);
 
             if (this.zoom) {
-                // Pinch updates GridLayers' levels only when snapZoom is off, so snapZoom becomes noUpdate.
+                // Pinch updates GridLayers' levels only when zoomSnap is off, so zoomSnap becomes noUpdate.
                 if (this._map.options.zoomAnimation) {
-                    this._map._animateZoom(this._center, this._map._limitZoom(this._zoom), true, this._map.options.snapZoom);
+                    this._map._animateZoom(this._center, this._map._limitZoom(this._zoom), true, this._map.options.zoomSnap);
                 } else {
                     this._map._resetView(this._center, this._map._limitZoom(this._zoom));
                 }
@@ -1048,8 +1444,10 @@
     // Touch gestures handler.
     L.Map.addInitHook('addHandler', 'touchGestures', L.Map.TouchGestures);
 
-    /*
-     * L.Handler.TouchRotate is used by L.Map to add two-finger rotation gestures.
+    /**
+     * Rotates the map on two-finger (touch devices).
+     * 
+     * @typedef L.Map.TouchRotate
      */
 
     // @namespace Map
@@ -1081,8 +1479,10 @@
     // Touch rotate handler.
     L.Map.addInitHook('addHandler', 'touchRotate', L.Map.TouchRotate);
 
-    /*
-     * L.Handler.ShiftKeyRotate is used by L.Map to add shift-wheel rotation.
+    /**
+     * Rotates the map on shift key + mouseheel scrolling (desktop).
+     * 
+     * @typedef L.Map.ShiftKeyRotate
      */
 
     // @namespace Map
@@ -1134,8 +1534,12 @@
         }
     });
 
-    /*
-     * L.Handler.TouchZoom is used by L.Map to add pinch zoom on supported mobile browsers.
+    /**
+     * Adds pinch zoom rotation on mobile browsers
+     * 
+     * @see https://github.com/Leaflet/Leaflet/blob/v1.9.3/src/map/handler/Map.TouchZoom.js
+     * 
+     * @external L.Map.TouchZoom
      */
 
     // @namespace Map
@@ -1147,10 +1551,18 @@
         // Whether the map can be zoomed by touch-dragging with two fingers. If
         // passed `'center'`, it will zoom to the center of the view regardless of
         // where the touch events (fingers) were. Enabled for touch-capable web
-        // browsers except for old Androids.
-        touchZoom: L.Browser.touch && !L.Browser.android23,
+        // browsers.
+        touchZoom: L.Browser.touch,
+
+        /**
+         * @TODO check if this is a duplicate of `L.Map.TouchGestures::bounceAtZoomLimits`
+         */
 
+        // @option bounceAtZoomLimits: Boolean = true
+        // Set it to false if you don't want the map to zoom beyond min/max zoom
+        // and then bounce back when pinch-zooming.
         bounceAtZoomLimits: false,
+
     });
 
     L.Map.TouchZoom = L.Handler.extend({
@@ -1174,13 +1586,15 @@
     L.Map.addInitHook('addHandler', 'touchZoom', L.Map.TouchZoom);
 
     /**
-     * L.Control.Rotate
+     * A tri-state control for map rotation, states are:
+     * 
+     * - Locked (default)
+     * - Unlocked (user can pinch-rotate)
+     * - Follow (rotation follows device orientation, if available)
+     * 
+     * @typedef L.Control.Rotate
      */
 
-    // A tri-state control for map rotation. States are:
-    // Locked (default)
-    // Unlocked (user can pinch-rotate)
-    // Follow (rotation follows device orientation, if available)
     L.Control.Rotate = L.Control.extend({
 
         options: {
@@ -1210,6 +1624,7 @@
             link.appendChild(arrow);
             link.href = '#';
             link.title = 'Rotate map';
+            // link.draggable = false;
 
             L.DomEvent
                 .on(link, 'dblclick', L.DomEvent.stopPropagation)
@@ -1238,7 +1653,7 @@
         },
 
         _handleMouseDown: function(e) {
-            L.DomEvent.stopPropagation(e);
+            L.DomEvent.stop(e); // L.DomEvent.stopPropagation(e);
             this.dragging = true;
             this.dragstartX = e.pageX;
             this.dragstartY = e.pageY;
@@ -1248,7 +1663,7 @@
         },
 
         _handleMouseUp: function(e) {
-            L.DomEvent.stopPropagation(e);
+            L.DomEvent.stop(e); // L.DomEvent.stopPropagation(e);
             this.dragging = false;
 
             L.DomEvent
@@ -1342,5 +1757,5 @@
         }
     });
 
-})));
+}));
 //# sourceMappingURL=leaflet-rotate-src.js.map