leaflet-rotate 0.5.1 → 0.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "leaflet-rotate",
-	"version": "0.5.1",
+	"version": "0.5.3",
 	"description": "A Leaflet plugin that allows to add rotation functionality to map tiles",
 	"type": "module",
 	"main": "dist/leaflet-rotate.js",

package/src/index.js

@@ -53,6 +53,7 @@ export * from './layer/vector/Renderer';
 export * from './map/Map';
 export * from './map/handler/CompassBearing';
 export * from './map/handler/ContainerMutation';
+export * from './map/handler/Drag';
 export * from './map/handler/TouchGestures';
 export * from './map/handler/TouchRotate';
 export * from './map/handler/TouchPitch';

package/src/layer/marker/Marker.js

@@ -201,17 +201,7 @@ L.Marker.include({
         }
 
         /** @TODO use markerProto._setPos */
-        let bearing = this.options.rotation || 0;
-        if (this.options.rotateWithView) {
-            bearing += this._map._bearing;
-        }
-        if (this.options.keepUpright) {
-            bearing = ((bearing % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
-            if (bearing > Math.PI / 2 && bearing < 3 * Math.PI / 2) {
-                bearing += Math.PI;
-            }
-            bearing %= 2 * Math.PI;
-        }
+        const bearing = this._getIconBearing();
 
         /** @TODO use markerProto._setPos */
         if (this._icon) {
@@ -228,6 +218,29 @@ L.Marker.include({
         this._resetZIndex();
     },
 
+    /**
+     * Compute the on-screen icon rotation from `rotation`, `rotateWithView` and `keepUpright`.
+     *
+     * @returns {number} Angle in radians.
+     *
+     * @since leaflet-rotate (0.5.3)
+     */
+    _getIconBearing() {
+        let bearing = this.options.rotation || 0;
+        if (this.options.rotateWithView) {
+            bearing += this._map._bearing;
+        }
+        if (this.options.keepUpright) {
+            bearing = ((bearing % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
+            if (bearing > Math.PI / 2 && bearing < 3 * Math.PI / 2) {
+                bearing += Math.PI;
+            }
+            bearing %= 2 * Math.PI;
+        }
+
+        return bearing;
+    },
+
     // _updateZIndex(offset) {
     //     if (!this._map._rotate) {
     //         return markerProto._updateZIndex.apply(this, arguments);

package/src/layer/tile/GridLayer.js

@@ -32,9 +32,24 @@ L.GridLayer.include({
         return events;
     },
 
+    /**
+     * Preserve the 3D context on tile containers without making individual tile levels 3D.
+     *
+     * @since leaflet-rotate (0.5.3)
+     */
+    _initContainer() {
+        gridLayerProto._initContainer.apply(this, arguments);
+        if (!this._map._rotate || !this._container) { return; }
+        // Tile levels stay flat: preserving 3D on them also clips images in Firefox.
+        for (let pane = this._container; pane && pane !== this._map._rotatePane; pane = pane.parentElement) {
+            pane.style.transformStyle = 'preserve-3d';
+        }
+    },
+
     /**
      * Keep tile levels aligned when a bearing/pitch change shifts the pixel origin
      * (eg. when the rotation pivot is not the view center), then refresh tiles (throttled).
+     * The first event also synchronizes levels created before any accumulated pans.
      * 
      * @listens L.Map~rotate
      * 
@@ -44,7 +59,7 @@ L.GridLayer.include({
         const map = this._map;
         if (!map) { return; }
         const origin = map.getPixelOrigin();
-        if (this._rotateOrigin && !this._rotateOrigin.equals(origin) && !map._animatingZoom && this._levels) {
+        if ((!this._rotateOrigin || !this._rotateOrigin.equals(origin)) && !map._animatingZoom && this._levels) {
             this._setZoomTransforms(map.getCenter(), map.getZoom());
         }
         this._rotateOrigin = origin;

package/src/map/Map.js

@@ -1,6 +1,17 @@
 /**
  * Extends Leaflet maps with bearing rotation and 3D pitch.
  *
+ * Coordinate spaces used by the overrides below:
+ * - projected pixels: CRS coordinates at a given zoom;
+ * - layer points: projected pixels minus `_pixelOrigin`, on the flat ground plane;
+ * - map-pane points: layer points after bearing/pitch, before the outer pane translation;
+ * - container points: map-pane points plus `_getMapPanePos()`, in viewport pixels.
+ *
+ * Tiles and vectors share `rotatePane`; upright markers and popups use `norotatePane`
+ * and the same point conversions. Public angles are degrees; `_bearing` and `_pitch`
+ * are radians. With pitch enabled, CSS and coordinate conversions must use the same
+ * projective transform, including while the outer map pane is being dragged.
+ *
  * @external L.Map
  * 
  * @since leaflet-rotate (v0.1.0)
@@ -60,6 +71,20 @@ L.Map.mergeOptions({
 
 L.Map.include({
 
+    /**
+     * Rebuild perspective before Leaflet calculates the origin of a reset view.
+     * A reset clears the outer pane translation, unlike a completed pan.
+     */
+    _resetView() {
+        if (this._pitch) {
+            delete this._pitchPan;
+            L.DomUtil.setPosition(this._mapPane, new L.Point(0, 0));
+            this._updatePitchTransform();
+            arguments[0] = this._limitCenter(arguments[0], arguments[1], this.options.maxBounds);
+        }
+        return mapProto._resetView.apply(this, arguments);
+    },
+
     /**
      * Apply an immediate animated-zoom frame without waiting for a transition delay.
      *
@@ -95,7 +120,11 @@ L.Map.include({
         mapProto.initialize.apply(this, arguments);
         if (this.options.rotate) {
             this.on('resize', this._updatePitchTransform, this);
+            this.on('movestart dragstart', this._startPitchPan, this);
+            this.on('move', this._updatePitchPan, this);
+            this.on('moveend', this._endPitchPan, this);
             this.on('move', this._updatePitchSky, this);
+            this.on('rotate', this._panInsideMaxBounds, this);
             this.setBearing(this.options.bearing);
             this.setPitch(this.options.pitch);
         }
@@ -242,7 +271,8 @@ L.Map.include({
     /**
      * Return the geographic bounds of the current viewport, accounting for rotation and pitch.
      * 
-     * The result is the smallest geographic bounds containing all four viewport corners.
+     * The result encloses the four corners of the visible ground rectangle. With pitch,
+     * the rectangle stops at the configured far plane, excluding the sky.
      * 
      * @returns {L.LatLngBounds} Geographic bounds visible in the map viewport.
      * 
@@ -507,26 +537,40 @@ L.Map.include({
     },
 
     /**
-     * Transform a point with a projective matrix, accepting DOMMatrix or its 2D inverse.
+     * Transform a ground-plane point with a DOMMatrix, or reverse its screen projection.
+     * Both branches divide by the homogeneous coordinate after applying the matrix.
      * 
      * @param {L.Point|number[]} point Input pixel coordinate.
-     * @param {DOMMatrix|Object} matrix Forward or inverse transformation matrix.
+     * @param {DOMMatrix|Object} matrix Forward CSS matrix or inverse homography with
+     *                                row-major coefficients `a` through `i`.
+     * @param {L.Point} [anchor] Keep inverse pan coordinates on this anchor's side of the horizon.
      * 
      * @returns {L.Point} Transformed pixel coordinate.
      * 
      * @since leaflet-rotate (0.5.0)
      */
-    _transformPitchPoint(point, matrix) {
+    _transformPitchPoint(point, matrix, anchor) {
         point = toPoint(point);
         if (!(matrix instanceof DOMMatrix)) {
+            if (anchor) {
+                const anchorW = matrix.g * anchor.x + matrix.h * anchor.y + matrix.i,
+                    pointW = matrix.g * point.x + matrix.h * point.y + matrix.i;
+                // Keep a constrained pan on the near side of the horizon.
+                if (pointW * anchorW <= 0) {
+                    point = anchor.add(point.subtract(anchor).multiplyBy(anchorW / (anchorW - pointW) * (1 - 1e-6)));
+                }
+            }
             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);
+        const denominator = matrix.m14 * point.x + matrix.m24 * point.y + matrix.m44;
+        return new L.Point(
+            (matrix.m11 * point.x + matrix.m21 * point.y + matrix.m41) / denominator,
+            (matrix.m12 * point.x + matrix.m22 * point.y + matrix.m42) / denominator
+        );
     },
 
     /**
@@ -543,8 +587,22 @@ L.Map.include({
             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._setPitchTransform(transform);
+    },
+
+    /**
+     * Apply the CSS transform and cache matching forward/inverse point conversions.
+     *
+     * Ground points have z = 0, so the 4x4 CSS matrix reduces to the homography
+     * [a b c; d e f; g h i]. Its inverse maps screen points back onto that plane;
+     * inverting the full 4x4 matrix at screen z = 0 would not undo perspective.
+     *
+     * @param {string} transform CSS transform list, including a serialized DOMMatrix.
+     * 
+     * @since leaflet-rotate (0.5.2)
+     */
+    _setPitchTransform(transform) {
         this._rotatePane.style.transformOrigin = '0 0';
-        this._rotatePane.style.transform = transform;
         // parse the transform directly: getComputedStyle() would force a style recalculation on every frame
         const matrix = this._pitchTransform = new DOMMatrix(transform),
             a = matrix.m11, b = matrix.m21, c = matrix.m41,
@@ -552,6 +610,11 @@ L.Map.include({
             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);
 
+        // Preserve invertibility for Firefox and scale homogeneous coefficients to avoid CSS rounding.
+        const ground = DOMMatrix.fromMatrix(matrix);
+        ground.m13 = ground.m23 = ground.m43 = 0;
+        this._rotatePane.style.transform = `matrix3d(${Array.from(ground.toFloat64Array(), value => value * 1000).join(',')})`;
+
         this._pitchInverseTransform = {
             a: (e * i - f * h) / determinant,
             b: (c * h - b * i) / determinant,
@@ -566,9 +629,79 @@ L.Map.include({
         this._updatePitchSky();
     },
 
+    /**
+     * Capture a fixed projection baseline for a pitched drag or programmatic pan.
+     *
+     * `movestart` uses the viewport center; `dragstart` replaces it with the original
+     * pointer position. Store both the screen anchor and its ground-plane coordinate
+     * so subsequent frames can keep the grabbed geographic point under the pointer.
+     * Pane positions are in screen pixels and the baseline matrices stay unchanged.
+     *
+     * @param {L.Event} e Leaflet `movestart` or `dragstart` event.
+     * 
+     * @since leaflet-rotate (0.5.2)
+     */
+    _startPitchPan(e) {
+        if (!this._pitch || !this._loaded) { return; }
+        const draggable = this.dragging && this.dragging._draggable,
+            anchor = e.type === 'dragstart' && draggable
+                ? (this.pointerEventToContainerPoint || this.mouseEventToContainerPoint).call(this, {
+                    clientX: draggable._startPoint.x, clientY: draggable._startPoint.y,
+                })
+                : this.getSize().divideBy(2),
+            panePos = this._getMapPanePos().clone();
+        this._pitchPan = {
+            anchor,
+            panePos,
+            lastPanePos: panePos,
+            matrix: this._pitchTransform,
+            inverse: this._pitchInverseTransform,
+            layerAnchor: this.containerPointToLayerPoint(anchor),
+            zoom: this._zoom,
+        };
+    },
+
+    /**
+     * Translate the ground plane without moving the camera's vanishing point.
+     *
+     * For pane displacement delta, invert the displaced anchor with the baseline
+     * projection to find the required layer-space shift. Compose
+     * T(-delta) * baseline * T(shift): the left translation cancels Leaflet's outer
+     * pane movement, while the right translation moves geography before perspective.
+     * Always derive this from the baseline, not the previous frame, to avoid drift.
+     * Zoom frames are handled by Leaflet's zoom/origin updates instead.
+     * 
+     * @since leaflet-rotate (0.5.2)
+     */
+    _updatePitchPan() {
+        const pan = this._pitchPan;
+        if (!this._pitch || !pan || this._animatingZoom || this._zoom !== pan.zoom) { return; }
+        const panePos = this._getMapPanePos();
+        if (panePos.equals(pan.lastPanePos)) { return; }
+        const delta = panePos.subtract(pan.panePos),
+            target = this._transformPitchPoint(pan.anchor.add(delta).subtract(pan.panePos), pan.inverse),
+            shift = target.subtract(pan.layerAnchor);
+        const matrix = new DOMMatrix().translate(-delta.x, -delta.y)
+            .multiply(pan.matrix).translate(shift.x, shift.y);
+        this._setPitchTransform(matrix.toString());
+        pan.lastPanePos = panePos.clone();
+        delete this._lastCenter;
+    },
+
+    /**
+     * Discard the baseline only at `moveend`, after any drag inertia has completed.
+     * Keep the final transform and pixel origin: resetting the view here would
+     * reproject layers abruptly and cause a visible jump on release.
+     * 
+     * @since leaflet-rotate (0.5.2)
+     */
+    _endPitchPan() {
+        delete this._pitchPan;
+    },
+
     /**
      * Fill the area above the far plane (where no tiles are loaded) with a sky gradient.
-     * Style it through the `.leaflet-pitch-sky` class.
+     * Style it through `.leaflet-pitch-sky` or the `--leaflet-sky-background` CSS property.
      * 
      * @since leaflet-rotate (0.5.1)
      */
@@ -582,7 +715,7 @@ L.Map.include({
             this._pitchSky = L.DomUtil.create('div', 'leaflet-pitch-sky', this._container);
             Object.assign(this._pitchSky.style, {
                 position: 'absolute', left: 0, top: 0, width: '100%', zIndex: 0, pointerEvents: 'none',
-                background: 'linear-gradient(#9ec5e8, #dfe9f0)',
+                background: 'var(--leaflet-sky-background, linear-gradient(#9ec5e8, #dfe9f0))',
             });
         }
         this._pitchSky.style.display = '';
@@ -754,6 +887,8 @@ L.Map.include({
 
         if (this._rotate) {
             this._rotatePane = this.createPane('rotatePane', this._mapPane);
+            // Keep the context stable at pitch zero too: Firefox clips tiles when it is removed.
+            this._mapPane.style.transformStyle = this._rotatePane.style.transformStyle = 'preserve-3d';
             this._norotatePane = this.createPane('norotatePane', this._mapPane);
             if (L.version.startsWith('2.')) {
                 this._rotatePane.style.transformOrigin = '0 0';
@@ -832,54 +967,111 @@ L.Map.include({
     },
 
     /**
-     * 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
+     * Constrain the visible ground footprint, including its asymmetric pitched far side.
+     * When it is larger than maxBounds, Leaflet's rebound centers the excess on each axis.
+     */
+    _limitCenter(center, zoom, bounds) {
+        if (!this._rotate || !bounds) {
+            return mapProto._limitCenter.apply(this, arguments);
+        }
+        const centerPoint = this.project(center, zoom),
+            layerCenter = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
+            footprint = this._getPaddedPixelBounds(0, false),
+            viewBounds = new L.Bounds(
+                centerPoint.add(footprint.min.subtract(layerCenter)),
+                centerPoint.add(footprint.max.subtract(layerCenter))
+            ),
+            offset = this._getBoundsOffset(viewBounds, bounds, zoom);
+        if (Math.abs(offset.x) <= 1 && Math.abs(offset.y) <= 1) { return center; }
+        return this.unproject(centerPoint.add(offset), zoom);
+    },
+
+    /**
+     * Reapply configured maximum bounds after a map transform.
      *
-     * @see https://github.com/fnicollet/Leaflet/issues/7
-     * 
-     * @param {L.LatLngBounds} bounds Geographic bounds to fit inside the viewport.
-     * @param {Object} [options] Pan animation options.
-     * 
+     * @since leaflet-rotate (0.5.3)
+     */
+    _panInsideMaxBounds() {
+        if (this.options.maxBounds) {
+            return mapProto._panInsideMaxBounds.apply(this, arguments);
+        }
+    },
+
+    /**
+     * Keep the visible ground footprint inside the given bounds.
+     *
+     * @param {L.LatLngBounds|Array} bounds Geographic bounds.
+     * @param {Object} [options] Pan options passed to Leaflet.
      * @returns {L.Map} This map instance.
-     * 
-     * @since leaflet-rotate (v0.1.0)
+     *
+     * @since leaflet-rotate (0.5.3)
      */
-    // panInsideBounds(bounds, options) {
-    //     this._enforcingBounds = true;
-    //     const 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;
-    // },
+    panInsideBounds(bounds, options) {
+        if (this._rotate) {
+            bounds = bounds instanceof L.LatLngBounds ? bounds : new L.LatLngBounds(bounds);
+            const center = this.getCenter(),
+                limited = this._limitCenter(center, this._zoom, bounds);
+            const offset = this._getCenterOffset(limited);
+            // Screen-space rounding cannot reliably apply subpixel pans at high pitch.
+            if (!center.equals(limited) && Math.abs(offset.x) <= 1 && Math.abs(offset.y) <= 1) {
+                this._enforcingBounds = true;
+                this.setView(limited, this._zoom, { reset: true });
+                this._enforcingBounds = false;
+                return this;
+            }
+        }
+        return mapProto.panInsideBounds.apply(this, arguments);
+    },
 
-    // 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);
-    // },
+    /**
+     * Leaflet supplies inertia offsets in screen pixels, not projected CRS pixels.
+     * Keep the drag's moving anchor when inertia continues a pitched pan.
+     */
+    _limitOffset(offset, bounds) {
+        if (!this._rotate || !bounds) {
+            return mapProto._limitOffset.apply(this, arguments);
+        }
+        const pan = this._pitchPan,
+            anchor = pan ? pan.anchor.add(this._getMapPanePos().subtract(pan.panePos)) : this.getSize().divideBy(2),
+            layerAnchor = this.containerPointToLayerPoint(anchor),
+            panePos = this._getMapPanePos(),
+            target = anchor.subtract(offset).subtract(panePos),
+            shift = (this._pitch
+                ? this._transformPitchPoint(target, this._pitchInverseTransform, anchor.subtract(panePos))
+                : this.containerPointToLayerPoint(anchor.subtract(offset))).subtract(layerAnchor),
+            footprint = this._getPaddedPixelBounds(0, false),
+            origin = this.getPixelOrigin().subtract(shift),
+            correction = this._getBoundsOffset(new L.Bounds(
+                footprint.min.add(origin), footprint.max.add(origin)
+            ), bounds);
+        return anchor.subtract(this.layerPointToContainerPoint(layerAnchor.add(shift).subtract(correction)));
+    },
+
+    /**
+     * Pan by a screen-pixel offset, constraining large immediate pans to maxBounds.
+     *
+     * @param {L.Point|number[]} offset Pan offset in pixels.
+     * @param {Object} [options] Pan options passed to Leaflet.
+     * @returns {L.Map} This map instance.
+     *
+     * @since leaflet-rotate (0.5.3)
+     */
+    panBy(offset, options) {
+        offset = toPoint(offset);
+        if (this._rotate && this._loaded && !this.getSize().contains(offset) && !(options && options.animate)) {
+            const anchor = this.getSize().divideBy(2),
+                panePos = this._getMapPanePos(),
+                layerAnchor = this.containerPointToLayerPoint(anchor),
+                target = anchor.subtract(offset).subtract(panePos),
+                shift = (this._pitch
+                    ? this._transformPitchPoint(target, this._pitchInverseTransform, anchor.subtract(panePos))
+                    : this.containerPointToLayerPoint(anchor.subtract(offset))).subtract(layerAnchor),
+                center = this.unproject(this.project(this.getCenter()).subtract(shift));
+            this._resetView(this._limitCenter(center, this._zoom, this.options.maxBounds), this._zoom);
+            return this;
+        }
+        return mapProto.panBy.call(this, offset, options);
+    },
 
     // @method flyToBounds(bounds: LatLngBounds, options?: fitBounds options): this
     // Sets the view of the map with a smooth animation like [`flyTo`](#map-flyto),
@@ -966,7 +1158,10 @@ L.Map.include({
     // },
 
     /**
-     * Return the pixel offset from the current center to the given geographic point.
+     * Return the screen-space pan offset needed to center the given geographic point.
+     * Under perspective, projecting a negated layer offset is not equivalent to
+     * negating its screen projection. Reflect the target about the layer center
+     * to match the opposite anchor displacement performed by Leaflet's `panBy`.
      * 
      * @param {L.LatLng} latlng Geographic point.
      * 
@@ -978,6 +1173,12 @@ L.Map.include({
         if (!this._rotate) {
             return mapProto._getCenterOffset.apply(this, arguments);
         }
+        if (this._pitch) {
+            const center = this.getSize().divideBy(2),
+                layerCenter = this.containerPointToLayerPoint(center),
+                opposite = layerCenter.multiplyBy(2).subtract(this.project(latlng).subtract(this._pixelOrigin));
+            return center.subtract(this.layerPointToContainerPoint(opposite));
+        }
         return this.latLngToContainerPoint(latlng)._subtract(this.getSize()._divideBy(2));
     },
 
@@ -1056,9 +1257,12 @@ L.Map.include({
     },
 
     /**
+     * Return the viewport center before the outer map-pane translation.
+     * Used as the bearing/pitch pivot in map-pane coordinates, not layer coordinates.
+     *
      * @since leaflet-rotate (v0.2.0)
      * 
-     * @returns {L.Point} Map pivot point in pixel coordinates.
+     * @returns {L.Point} Map pivot in map-pane pixels.
      */
     _getPixelCenter() {
         if (!this._rotate && mapProto._getPixelCenter) {
@@ -1068,26 +1272,31 @@ L.Map.include({
     },
 
     /**
+     * Convert the padded visible ground rectangle to layer bounds for vector renderers.
+     * Clip its far edge before reversing perspective to avoid unbounded render areas.
+     *
      * @see src\layer\vector\Renderer::_update()
      * 
      * @param {number} padding Bounds padding as a fraction of map size.
+     * @param {boolean} [round=true] Round renderer bounds; navigation needs exact ground coordinates.
      * 
      * @returns {L.Bounds} Padded bounds in layer-point coordinates.
      * 
      * @since leaflet-rotate (v0.2.0)
      */
-    _getPaddedPixelBounds(padding) {
+    _getPaddedPixelBounds(padding, round = true) {
         if (!this._rotate && mapProto._getPaddedPixelBounds) {
             return mapProto._getPaddedPixelBounds.apply(this, arguments);
         }
         const [padMin, padMax] = this._getPitchedContainerBounds(padding);
 
         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()
-        ]);
+            [padMin.x, padMin.y], [padMin.x, padMax.y],
+            [padMax.x, padMin.y], [padMax.x, padMax.y]
+        ].map(point => {
+            const projected = this.containerPointToLayerPoint(point);
+            return round ? projected.floor() : projected;
+        }));
     },
 
     /**

package/src/map/handler/Drag.js

@@ -0,0 +1,59 @@
+/**
+ * Apply maxBoundsViscosity in projected ground coordinates before moving the map pane.
+ */
+const dragProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Map.Drag.prototype));
+
+L.Map.Drag.include({
+
+    /**
+     * Capture the ground footprint and pointer anchor before a constrained drag.
+     */
+    _onDragStart() {
+        dragProto._onDragStart.apply(this, arguments);
+        const map = this._map;
+        this._rotateLimit = null;
+        if (!map._rotate || !map.options.maxBounds || !map.options.maxBoundsViscosity) { return; }
+        const anchor = (map.pointerEventToContainerPoint || map.mouseEventToContainerPoint).call(map, {
+                clientX: this._draggable._startPoint.x, clientY: this._draggable._startPoint.y,
+            }),
+            footprint = map._getPaddedPixelBounds(0, false),
+            origin = map.getPixelOrigin();
+        this._rotateLimit = {
+            anchor,
+            layerAnchor: map.containerPointToLayerPoint(anchor),
+            panePos: map._getMapPanePos().clone(),
+            footprint: new L.Bounds(footprint.min.add(origin), footprint.max.add(origin)),
+            matrix: map._pitch ? map._pitchTransform : null,
+            inverse: map._pitchInverseTransform,
+            bearing: map._bearing,
+        };
+    },
+
+    /**
+     * Apply max-bounds viscosity in ground coordinates during a rotated drag.
+     */
+    _onPreDragLimit() {
+        const limit = this._rotateLimit;
+        if (!this._map._rotate || !limit) {
+            return dragProto._onPreDragLimit.apply(this, arguments);
+        }
+        const map = this._map,
+            draggable = this._draggable,
+            offset = draggable._newPos.subtract(draggable._startPos),
+            shift = limit.matrix
+                ? map._transformPitchPoint(limit.anchor.add(offset).subtract(limit.panePos), limit.inverse,
+                    limit.anchor.subtract(limit.panePos))
+                    .subtract(limit.layerAnchor)
+                : offset.rotate(-limit.bearing),
+            correction = map._getBoundsOffset(new L.Bounds(
+                limit.footprint.min.subtract(shift), limit.footprint.max.subtract(shift)
+            ), map.options.maxBounds);
+        shift._subtract(correction.multiplyBy(this._viscosity));
+        const limitedOffset = limit.matrix
+            ? map._transformPitchPoint(limit.layerAnchor.add(shift), limit.matrix)
+                .add(limit.panePos).subtract(limit.anchor)
+            : shift.rotate(limit.bearing);
+        draggable._newPos = draggable._startPos.add(limitedOffset);
+    },
+
+});

package/test/features/navigation-bounds.feature

@@ -0,0 +1,33 @@
+@navigation-bounds
+Feature: Navigation limits on rotated and pitched maps
+  Background:
+    Given a standalone map with navigation limits is open
+
+  @issue-75
+  Scenario Outline: Zoom and programmatic navigation respect the transformed viewport
+    When navigation rotation is <enabled> with bearing <bearing> and pitch <pitch>
+    Then minimum zoom 14 applies to view changes, wheel zoom and pinch zoom
+    And maximum bounds constrain programmatic pans and camera changes
+
+    Examples:
+      | enabled | bearing | pitch |
+      | false   | 0       | 0     |
+      | true    | 0       | 0     |
+      | true    | 45      | 0     |
+      | true    | 135     | 45    |
+      | true    | 270     | 85    |
+
+  @issue-75
+  Scenario Outline: Viscosity limits the geographic footprint during dragging
+    When navigation rotation is <enabled> with bearing <bearing> and pitch <pitch>
+    Then viscosity 1 prevents crossing maximum bounds during a mouse drag
+    And viscosities 0 and 0.5 allow progressively less overshoot
+    And maximum bounds are restored after drag inertia
+
+    Examples:
+      | enabled | bearing | pitch |
+      | false   | 0       | 0     |
+      | true    | 0       | 0     |
+      | true    | 45      | 0     |
+      | true    | 135     | 45    |
+      | true    | 270     | 85    |