leaflet-rotate 0.5.2 → 0.5.4

package/lib/debug.js

@@ -34,6 +34,9 @@
             .leaflet-rotate-info tr[title] {
               cursor: help;
             }
+            div.crosshair, div.pivot, div.pixelorigin, div.panebounds {
+              pointer-events: none;
+            }
             div.crosshair {
               position:absolute;
               width:1px;

package/lib/debug.min.js

@@ -1,4 +1,4 @@
-(function(){const e=Object.isExtensible(globalThis.L)?globalThis.L:Object.assign({},globalThis.L);globalThis.L=e,e.Rotate={debug(t,o={}){this._map=t,document.head.insertAdjacentHTML("beforeend",'<style>.leaflet-rotate-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-bottom:6px}.leaflet-rotate-tools input,.leaflet-rotate-tools button{vertical-align:middle}.leaflet-rotate-info{border-collapse:collapse}.leaflet-rotate-info td,.leaflet-rotate-info th{padding:1px 12px 1px 0;text-align:left;white-space:nowrap;vertical-align:top}.leaflet-rotate-info td:nth-of-type(1),.leaflet-rotate-info td:nth-of-type(2){font-family:monospace;min-width:12ch}.leaflet-rotate-info tr[title]{cursor:help}div.crosshair{position:absolute;width:1px;height:1px;border:1px solid green;z-index:100;left:50%;right:50%}div.pivot,div.pixelorigin{position:absolute;width:1px;height:1px;border:5px solid yellow;border-radius:100%;z-index:1000}div.pivot:before{left:-1.5em;bottom:-2em;position:absolute;content:"PIVOT";color:#ff0}div.pixelorigin:before{left:-1.75em;top:-2em;position:absolute;content:"ORIGIN";color:#ff0}div.panebounds.main{position:absolute;width:800px;height:600px;box-sizing:border-box;border:1px solid red;border-bottom:1px red dashed;border-right:1px red dashed;z-index:100}div.panebounds.rotate{position:absolute;width:800px;height:600px;box-sizing:border-box;border:1px solid purple;border-bottom:1px purple dashed;border-right:1px purple dashed;z-index:100}div.crosshair.c1{left:calc(50% - 5px);top:50%;height:0;width:10px}div.crosshair.c2{left:50%;top:calc(50% - 5px);width:0;height:10px}#rho_input{vertical-align:middle}.panebounds:before{padding:1ch}.panebounds.rotate:before{float:right;content:"ROTATED"}.panebounds.main:before{float:left;content:"MAIN"}</style>'),t._container.insertAdjacentHTML("afterbegin",'<div class="crosshair c1"></div><div class="crosshair c2"></div>');const i=`
+(function(){const e=Object.isExtensible(globalThis.L)?globalThis.L:Object.assign({},globalThis.L);globalThis.L=e,e.Rotate={debug(t,o={}){this._map=t,document.head.insertAdjacentHTML("beforeend",'<style>.leaflet-rotate-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-bottom:6px}.leaflet-rotate-tools input,.leaflet-rotate-tools button{vertical-align:middle}.leaflet-rotate-info{border-collapse:collapse}.leaflet-rotate-info td,.leaflet-rotate-info th{padding:1px 12px 1px 0;text-align:left;white-space:nowrap;vertical-align:top}.leaflet-rotate-info td:nth-of-type(1),.leaflet-rotate-info td:nth-of-type(2){font-family:monospace;min-width:12ch}.leaflet-rotate-info tr[title]{cursor:help}div.crosshair,div.pivot,div.pixelorigin,div.panebounds{pointer-events:none}div.crosshair{position:absolute;width:1px;height:1px;border:1px solid green;z-index:100;left:50%;right:50%}div.pivot,div.pixelorigin{position:absolute;width:1px;height:1px;border:5px solid yellow;border-radius:100%;z-index:1000}div.pivot:before{left:-1.5em;bottom:-2em;position:absolute;content:"PIVOT";color:#ff0}div.pixelorigin:before{left:-1.75em;top:-2em;position:absolute;content:"ORIGIN";color:#ff0}div.panebounds.main{position:absolute;width:800px;height:600px;box-sizing:border-box;border:1px solid red;border-bottom:1px red dashed;border-right:1px red dashed;z-index:100}div.panebounds.rotate{position:absolute;width:800px;height:600px;box-sizing:border-box;border:1px solid purple;border-bottom:1px purple dashed;border-right:1px purple dashed;z-index:100}div.crosshair.c1{left:calc(50% - 5px);top:50%;height:0;width:10px}div.crosshair.c2{left:50%;top:calc(50% - 5px);width:0;height:10px}#rho_input{vertical-align:middle}.panebounds:before{padding:1ch}.panebounds.rotate:before{float:right;content:"ROTATED"}.panebounds.main:before{float:left;content:"MAIN"}</style>'),t._container.insertAdjacentHTML("afterbegin",'<div class="crosshair c1"></div><div class="crosshair c2"></div>');const i=`
         <div class="leaflet-rotate-tools">
           <span>Bearing
             ${[0,15,30,45,60,75,90,180].map(n=>`<button onclick="L.Rotate._map.setBearing(${n});" title="map.setBearing(${n});">${n}</button>`).join("")}

package/package.json

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

package/src/dom/Draggable.js

@@ -1,6 +1,6 @@
 /**
- * This plugin does not modify the `L.Draggable` API; it adapts marker drag
- * coordinates in `L.Marker` when rotation or pitch is enabled.
+ * Preserve the final position when an active drag returns within its starting
+ * click tolerance. Marker geographic coordinates are adapted in `L.Marker`.
  *
  * @external L.Draggable
  * 
@@ -15,11 +15,23 @@
  * @since leaflet-rotate (v0.1.0)
  */
 
-L.Draggable.include({
-
-    /** @TODO */
-    // updateMapBearing(mapBearing) {
-    //     this._mapBearing = mapBearing;
-    // },
+const draggableProto = Object.defineProperties({}, Object.getOwnPropertyDescriptors(L.Draggable.prototype));
 
+L.Draggable.include({
+    _onMove(e) {
+        const pointer = e.touches ? e.touches[0] : e;
+        if (this._enabled && this._moving && (!e.touches || e.touches.length === 1)) {
+            const offset = new L.Point(pointer.clientX, pointer.clientY).subtract(this._startPoint);
+            if ((!offset.x && !offset.y) || Math.abs(offset.x) + Math.abs(offset.y) < this.options.clickTolerance) {
+                L.DomEvent.preventDefault(e);
+                this._newPos = this._startPos.add(new L.Point(
+                    offset.x / this._parentScale.x, offset.y / this._parentScale.y
+                ));
+                this._lastEvent = e;
+                this._updatePosition();
+                return;
+            }
+        }
+        return draggableProto._onMove.apply(this, arguments);
+    },
 });

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

@@ -71,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.
      *
@@ -110,6 +124,7 @@ L.Map.include({
             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);
         }
@@ -528,22 +543,34 @@ L.Map.include({
      * @param {L.Point|number[]} point Input pixel coordinate.
      * @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
+        );
     },
 
     /**
@@ -576,7 +603,6 @@ L.Map.include({
      */
     _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,
@@ -584,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,
@@ -670,7 +701,7 @@ L.Map.include({
 
     /**
      * 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)
      */
@@ -684,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 = '';
@@ -856,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';
@@ -899,10 +932,11 @@ L.Map.include({
      * @since leaflet-rotate (v0.1.4)
      */
     panInside(latlng, options) {
-        if (!this._rotate || (!this._pitch && Math.abs(this._bearing).toFixed(1) < 0.1)) {
+        if (!this._rotate) {
             return mapProto.panInside.apply(this, arguments);
         }
 
+        // The rotate pane can retain an offset after returning to bearing zero.
         options = options || {};
 
         const paddingTL = toPoint(options.paddingTopLeft || options.padding || [0, 0]),
@@ -934,54 +968,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),
@@ -1089,7 +1180,8 @@ L.Map.include({
                 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));
+        return this.layerPointToContainerPoint(this.project(latlng).subtract(this._pixelOrigin))
+            ._subtract(this.getSize()._divideBy(2));
     },
 
     /**
@@ -1125,9 +1217,9 @@ L.Map.include({
         }
         // the layer point under the view center doesn't depend on zoom (pane transforms only rotate/pitch around the pivot),
         // so this matches `_setBearing` also when the pivot is no longer the view center (eg. after panning)
+        // Keep subpixel centers exact: wheel bursts magnify rounding from earlier zooms.
         return this.project(center, zoom)
-            ._subtract(this.containerPointToLayerPoint(this.getSize()._divideBy(2)))
-            ._round();
+            ._subtract(this.containerPointToLayerPoint(this.getSize()._divideBy(2)));
     },
 
     /**
@@ -1188,23 +1280,25 @@ L.Map.include({
      * @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/example.feature

@@ -51,6 +51,11 @@ Feature: Rotating a Leaflet map
     When I inspect debugger geometry after resizing and moving the map
     Then the debugger reports the current map geometry
 
+  @debugger @issue-76
+  Scenario: Debugger overlays do not intercept marker clicks
+    When I place the debugger overlays over a marker
+    Then the marker receives the pointer events
+
   @example-ui
   Scenario: Example base-layer radios select one layer
     When I switch between the example base layers

package/test/features/harness.feature

@@ -0,0 +1,84 @@
+Feature: Interactive regression scenarios have executable BDD coverage
+  Background:
+    Given the interactive regression page is open
+
+  Scenario: Every interactive scenario has a BDD example
+    Then every interactive scenario is listed in the BDD examples
+
+  Scenario: An active drag can finish within its starting click tolerance
+    Then active drags return to their starting position without turning clicks into drags
+
+  Scenario Outline: Camera gestures retain their intended behavior
+    When I run the interactive scenario "<scenario>"
+    Then the interactive camera result is "<result>"
+
+    Examples:
+      | scenario                                               | result        |
+      | Ctrl+drag up: pitch from center                         | pitch up      |
+      | Ctrl+drag down: pitch clamps at 0                       | pitch zero    |
+      | Ctrl+drag far up: pitch clamps at max                   | pitch max     |
+      | Ctrl+drag right, just above center                      | clockwise     |
+      | Ctrl+drag right, just below center                      | counterclockwise |
+      | Ctrl+drag right, far above center (angular)              | clockwise     |
+      | Ctrl+drag right, far below center (angular)              | counterclockwise |
+      | Ctrl+drag diagonal, pitched + rotated                   | pitch and bearing |
+      | Ctrl+drag fast (2 big steps)                            | pitch and bearing |
+      | Ctrl+drag full circle around center                     | pitch and bearing |
+      | Ctrl+drag leaving the map                               | pitch and bearing |
+      | Ctrl+drag starting on a marker                          | pitch and bearing |
+      | Ctrl released mid-drag                                 | pitch and bearing |
+      | Ctrl pressed mid-pan (should keep panning)               | pan           |
+      | Right-drag up + right                                  | pitch and bearing |
+      | Ctrl+drag then plain pan                               | rotate then pan |
+      | Shift+wheel rotate                                     | shift rotate  |
+      | Wheel then Ctrl+drag while zoom pending                 | cancel zoom   |
+      | Wheel during Ctrl+drag                                 | zoom and rotate |
+
+  Scenario Outline: Wheel input zooms around its geographic anchor
+    When I run the interactive scenario "<scenario>"
+    Then the interactive camera result is "<result>"
+
+    Examples:
+      | scenario                                               | result    |
+      | Wheel in at top-right, flat (control case)               | zoom in   |
+      | Wheel in at top-right, rotated                          | zoom in   |
+      | Wheel in at top-right, pitch 60                         | zoom in   |
+      | Wheel out at bottom-left, pitch 45                      | zoom out  |
+      | Wheel near horizon, pitch 75                           | zoom in   |
+      | Ctrl+wheel pinch-in burst (trackpad), pitch 50           | zoom in   |
+      | Ctrl+wheel pinch-out burst (trackpad), rotated           | zoom out  |
+      | Ctrl+wheel mouse notches at center                      | zoom in   |
+      | Low zoom rotated, wheel in (layer jump check)           | zoom in   |
+
+  Scenario Outline: Pitched drags retain their geographic anchor
+    When I run the interactive scenario "<scenario>"
+    Then the interactive camera result is "pan"
+
+    Examples:
+      | scenario                                               |
+      | Pan pitched 70                                         |
+      | Pan pitched 70: vertical up                            |
+      | Pan pitched 70: vertical down                          |
+      | Pan pitched 70: horizontal left                        |
+      | Pan pitched 70: horizontal right                       |
+      | Pan pitched 70: diagonal up-right                       |
+      | Pan pitched 70: diagonal down-left                      |
+      | Pan pitched 70: reverse vertical drag                   |
+      | Pan pitched 70: multi-direction loop                    |
+      | Pan pitched 70, bearing 225: diagonal                   |
+
+  Scenario Outline: Navigation reaches its destination while pitched and rotated
+    When I run the interactive scenario "<scenario>"
+    Then the interactive camera result is "navigate"
+
+    Examples:
+      | scenario                                               |
+      | Go to: Circle                                          |
+      | Go to: Polygon                                         |
+      | Go to: Path                                            |
+      | Go to: Kyiv                                            |
+      | Go to: London                                          |
+      | Go to: San Francisco                                   |
+      | Go to: Washington                                      |
+      | Go to: Trondheim                                       |
+      | Go to: Rectangle (fit from z 0)                         |