leaflet-rotate 0.5.0 → 0.5.2

package/lib/debug.js

@@ -8,21 +8,31 @@
         this._map = map;
 
         document.head.insertAdjacentHTML('beforeend', `<style>
-            .leaflet-rotate-info {
-              width: 100%;
+            .leaflet-rotate-tools {
+              display: flex;
+              flex-wrap: wrap;
+              align-items: center;
+              gap: 4px 16px;
+              margin-bottom: 6px;
             }
-            .leaflet-rotate-info td {
-              /* width: 7em; */
-              overflow: hidden;
-              /* max-width: 7em; */
-              text-overflow: ellipsis;
-              /* white-space: nowrap; */
+            .leaflet-rotate-tools input, .leaflet-rotate-tools button {
+              vertical-align: middle;
             }
-            .leaflet-rotate-info td:nth-of-type(3) {
-              font-family: Monospace;
+            .leaflet-rotate-info {
+              border-collapse: collapse;
             }
-            .leaflet-rotate-info th {
+            .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;
@@ -115,73 +125,35 @@
             `<div class="crosshair c1"></div><div class="crosshair c2"></div>`
         );
 
-        map._container.insertAdjacentHTML('afterend', `<hr>
+        const html = `
+        <div class="leaflet-rotate-tools">
+          <span>Bearing
+            ${[0, 15, 30, 45, 60, 75, 90, 180].map(b => `<button onclick="L.Rotate._map.setBearing(${b});" title="map.setBearing(${b});">${b}</button>`).join('')}
+            <input title="increase/decrease rotation angle" type="range" min="0" max="360" step="1" value="0" name="rho" id='rho_input' /><span id='rho'></span>
+          </span>
+          <label>Bounds padding <input title="increase/decrease padding bounds" type="range" min="-0.25" max="0" value="0" step="0.01" name="pad" id='pad_input' /></label>
+          <span>Markers
+            <button onclick="L.Rotate.randomRotateMarkers(L.Rotate._map);" title="markers.setRotation(Math.random() * Math.PI / 30 + 0.1)">Rotate</button>
+            <button onclick="L.Rotate.randomMarkers(L.Rotate._map, 100);" title="add 100 random markers to map">Add 100</button>
+          </span>
+        </div>
         <table class="leaflet-rotate-info">
-          <tr>
-            <td>
-              <button onclick="L.Rotate._map.setBearing(0);" title="map.setBearing(0);"> 0</button>
-              <button onclick="L.Rotate._map.setBearing(15);" title="map.setBearing(15);">15</button>
-              <button onclick="L.Rotate._map.setBearing(30);" title="map.setBearing(30);">30</button>
-              <button onclick="L.Rotate._map.setBearing(45);" title="map.setBearing(45);">45</button>
-              <button onclick="L.Rotate._map.setBearing(60);" title="map.setBearing(60);">60</button>
-              <button onclick="L.Rotate._map.setBearing(75);" title="map.setBearing(75);">75</button>
-              <button onclick="L.Rotate._map.setBearing(90);" title="map.setBearing(90);">90</button>
-              <button onclick="L.Rotate._map.setBearing(180);" title="map.setBearing(180);">180</button>
-            </td>
-            <td>
-              <input title="increase/decrease rotation angle" type="range" min="0" max="360" step="1" value="0" name="rho" id='rho_input' /><span id='rho'></span>
-            </td>
-            <td>
-              <input title="increase/decrease padding bounds" type="range" min="-0.25" max="0" value="0" step="0.01" name="pad" id='pad_input' />
-            </td>
-            <td>
-              <button onclick="L.Rotate.randomRotateMarkers(L.Rotate._map);" title="markers.setRotation(Math.random() * Math.PI / 30 + 0.1)">Rotate Markers</button>
-              <button onclick="L.Rotate.randomMarkers(L.Rotate._map, 100);" title="add 100 random markers to map">Add Markers</button>
-            </td>
-          </tr>
-          <tr>
-            <th>LatLng </th>
-            <td id='llx'></td>
-            <td id='lly'></td>
-            <td class='long'>LatLng of mouse pointer</td>
-          </tr>
-          <tr>
-            <th>Rel to pane </th>
-            <td id='lyx'></td>
-            <td id='lyy'></td>
-            <td class='long'>Mouse pointer pixel coords relative to _rotatePane</td>
-          </tr>
-          <tr>
-            <th>Rel to container</th>
-            <td id='cnx'></td>
-            <td id='cny'></td>
-            <td class='long'>Mouse pointer coords relative to map &lt;div&gt;</td>
-          </tr>
-          <tr>
-            <th>Pivot </th>
-            <td id='pvx'></td>
-            <td id='pvy'></td>
-            <td class='long'>Last _rotationPane pivot pixel coords relative to _rotationPane</td>
-          </tr>
-          <tr>
-            <th>Pane offset </th>
-            <td id='pox'></td>
-            <td id='poy'></td>
-            <td class='long'>Pixel offset of _mapPane</td>
-          </tr>
-          <tr>
-            <th>Pixel origin </th>
-            <td id='ogx'></td>
-            <td id='ogy'></td>
-            <td class='long'>Negative pixel coords of the (0,0) CRS point relative to _rotatePane</td>
-          </tr>
-          <tr>
-            <th>Pixel bounds </th>
-            <td id='ogbx'></td>
-            <td id='ogby'></td>
-            <td class='long'>Bounds of the current map view in projected pixel coordinates {min, max}.</td>
-          </tr>
-        </table>`);
+          <tr><th></th><th>x / lng</th><th>y / lat</th></tr>
+          ${[
+            ['LatLng', 'LatLng of mouse pointer', 'llx', 'lly'],
+            ['Rel to pane', 'Mouse pointer pixel coords relative to _rotatePane', 'lyx', 'lyy'],
+            ['Rel to container', 'Mouse pointer coords relative to map <div>', 'cnx', 'cny'],
+            ['Pivot', 'Last _rotationPane pivot pixel coords relative to _rotationPane', 'pvx', 'pvy'],
+            ['Pane offset', 'Pixel offset of _mapPane', 'pox', 'poy'],
+            ['Pixel origin', 'Negative pixel coords of the (0,0) CRS point relative to _rotatePane', 'ogx', 'ogy'],
+            ['Pixel bounds (min / max)', 'Bounds of the current map view in projected pixel coordinates {min, max}', 'ogbx', 'ogby'],
+          ].map(([label, title, x, y]) => `<tr title="${title.replace('<', '&lt;').replace('>', '&gt;')}"><th>${label}</th><td id='${x}'></td><td id='${y}'></td></tr>`).join('')}
+        </table>`;
+        if (options.container) {
+            options.container.insertAdjacentHTML('beforeend', `<details open><summary>Debug</summary>${html}</details>`);
+        } else {
+            map._container.insertAdjacentHTML('afterend', '<hr>' + html);
+        }
 
         map.___rotatePixelOrigin = L.DomUtil.create('div', 'pixelorigin', map._rotatePane);
         map.___rotatePivotDot = L.DomUtil.create('div', 'pivot', map._mapPane);
@@ -260,12 +232,13 @@
     },
 
     logMouse(e) {
-        document.getElementById('llx').innerHTML = e.latlng.lng;
-        document.getElementById('lly').innerHTML = e.latlng.lat;
-        document.getElementById('lyx').innerHTML = e.layerPoint.x;
-        document.getElementById('lyy').innerHTML = e.layerPoint.y;
-        document.getElementById('cnx').innerHTML = e.containerPoint.x;
-        document.getElementById('cny').innerHTML = e.containerPoint.y;
+        const fmt = (n, d) => +n.toFixed(d);
+        document.getElementById('llx').innerHTML = fmt(e.latlng.lng, 6);
+        document.getElementById('lly').innerHTML = fmt(e.latlng.lat, 6);
+        document.getElementById('lyx').innerHTML = fmt(e.layerPoint.x, 1);
+        document.getElementById('lyy').innerHTML = fmt(e.layerPoint.y, 1);
+        document.getElementById('cnx').innerHTML = fmt(e.containerPoint.x, 1);
+        document.getElementById('cny').innerHTML = fmt(e.containerPoint.y, 1);
     },
 
     /**
@@ -288,8 +261,8 @@
      */
     updatePixelOrigin() {
       if (this._pixelOrigin) {
-        document.getElementById('ogx').innerHTML = this._pixelOrigin.x;
-        document.getElementById('ogy').innerHTML = this._pixelOrigin.y;
+        document.getElementById('ogx').innerHTML = +this._pixelOrigin.x.toFixed(1);
+        document.getElementById('ogy').innerHTML = +this._pixelOrigin.y.toFixed(1);
         this.___rotatePixelOrigin.style.left = (-this._pixelOrigin.x - 1) + 'px';
         this.___rotatePixelOrigin.style.top = (-this._pixelOrigin.y - 1) + 'px';
       }
@@ -530,8 +503,9 @@
       //   ]);
       //   // paddedSize = paddedBounds.getSize();
 
-      document.getElementById('ogbx').innerHTML = JSON.stringify(pixelBounds.min);
-      document.getElementById('ogby').innerHTML = JSON.stringify(pixelBounds.max);
+      const xy = p => `${+p.x.toFixed(1)}, ${+p.y.toFixed(1)}`;
+      document.getElementById('ogbx').innerHTML = xy(pixelBounds.min);
+      document.getElementById('ogby').innerHTML = xy(pixelBounds.max);
     },
 
     resetHeading(e) {
@@ -551,4 +525,4 @@
     }
 
   };
-})();
+})();

package/lib/debug.min.js

@@ -1 +1,16 @@
-(function(){const e=Object.isExtensible(globalThis.L)?globalThis.L:Object.assign({},globalThis.L);globalThis.L=e,e.Rotate={debug(t,n={}){this._map=t,document.head.insertAdjacentHTML("beforeend",'<style>.leaflet-rotate-info{width:100%}.leaflet-rotate-info td{overflow:hidden;text-overflow:ellipsis}.leaflet-rotate-info td:nth-of-type(3){font-family:Monospace}.leaflet-rotate-info th{text-align:left}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>'),t._container.insertAdjacentHTML("afterend",`<hr><table class="leaflet-rotate-info"><tr><td><button onclick="L.Rotate._map.setBearing(0);" title="map.setBearing(0);"> 0</button><button onclick="L.Rotate._map.setBearing(15);" title="map.setBearing(15);">15</button><button onclick="L.Rotate._map.setBearing(30);" title="map.setBearing(30);">30</button><button onclick="L.Rotate._map.setBearing(45);" title="map.setBearing(45);">45</button><button onclick="L.Rotate._map.setBearing(60);" title="map.setBearing(60);">60</button><button onclick="L.Rotate._map.setBearing(75);" title="map.setBearing(75);">75</button><button onclick="L.Rotate._map.setBearing(90);" title="map.setBearing(90);">90</button><button onclick="L.Rotate._map.setBearing(180);" title="map.setBearing(180);">180</button></td><td><input title="increase/decrease rotation angle" type="range" min="0" max="360" step="1" value="0" name="rho" id='rho_input' /><span id='rho'></span></td><td><input title="increase/decrease padding bounds" type="range" min="-0.25" max="0" value="0" step="0.01" name="pad" id='pad_input' /></td><td><button onclick="L.Rotate.randomRotateMarkers(L.Rotate._map);" title="markers.setRotation(Math.random() * Math.PI / 30 + 0.1)">Rotate Markers</button><button onclick="L.Rotate.randomMarkers(L.Rotate._map, 100);" title="add 100 random markers to map">Add Markers</button></td></tr><tr><th>LatLng </th><td id='llx'></td><td id='lly'></td><td class='long'>LatLng of mouse pointer</td></tr><tr><th>Rel to pane </th><td id='lyx'></td><td id='lyy'></td><td class='long'>Mouse pointer pixel coords relative to _rotatePane</td></tr><tr><th>Rel to container</th><td id='cnx'></td><td id='cny'></td><td class='long'>Mouse pointer coords relative to map &lt;div&gt;</td></tr><tr><th>Pivot </th><td id='pvx'></td><td id='pvy'></td><td class='long'>Last _rotationPane pivot pixel coords relative to _rotationPane</td></tr><tr><th>Pane offset </th><td id='pox'></td><td id='poy'></td><td class='long'>Pixel offset of _mapPane</td></tr><tr><th>Pixel origin </th><td id='ogx'></td><td id='ogy'></td><td class='long'>Negative pixel coords of the (0,0) CRS point relative to _rotatePane</td></tr><tr><th>Pixel bounds </th><td id='ogbx'></td><td id='ogby'></td><td class='long'>Bounds of the current map view in projected pixel coordinates {min, max}.</td></tr></table>`),t.___rotatePixelOrigin=e.DomUtil.create("div","pixelorigin",t._rotatePane),t.___rotatePivotDot=e.DomUtil.create("div","pivot",t._mapPane),this.___rotateBounds=e.DomUtil.create("div","panebounds rotate",t._rotatePane),this.___mainBounds=e.DomUtil.create("div","panebounds main",t._mapPane),this.updatePaneBounds();const i=document.getElementById("rho_input"),o=document.getElementById("pad_input");if(i.addEventListener("change",e.Rotate.rotate.bind(this)),i.addEventListener("mousemove",e.Rotate.rotate.bind(this)),o.addEventListener("change",e.Rotate.displayCenter.bind(this)),o.addEventListener("mousemove",e.Rotate.displayCenter.bind(this)),o.addEventListener("change",e.Rotate.displayBounds.bind(this)),o.addEventListener("mousemove",e.Rotate.displayBounds.bind(this)),o.addEventListener("change",e.Rotate.displayLayersBounds.bind(this)),o.addEventListener("mousemove",e.Rotate.displayLayersBounds.bind(this)),o.addEventListener("change",e.Rotate.displayPixelBounds.bind(this)),o.addEventListener("mousemove",e.Rotate.displayPixelBounds.bind(this)),t.on("move rotate zoomend",this.updatePanePos),t.on("resize",this.updatePaneBounds.bind(this)),t.on("rotate zoomend load",this.updatePixelOrigin),t.on("rotate",this.updateRhoInput),t.on("rotate",this.updatePivotDot),t.on("moveend zoomend resetview rotate",this.displayCenter.bind(this)),t.on("moveend zoomend resetview rotate",this.displayBounds.bind(this)),t.on("moveend zoomend resetview rotate",this.displayLayersBounds.bind(this)),t.on("moveend zoomend resetview rotate",this.displayPixelBounds.bind(this)),this.updatePixelOrigin.call(t),this.updateRhoInput.call(t),this.updatePivotDot.call(t),this.displayCenter.call(this),this.displayBounds.call(this),this.displayLayersBounds.call(this),this.displayPixelBounds.call(this),e.Browser.mobile&&t.compassBearing.enable(),e.version.startsWith("2.")){const a=t.getContainer();a.addEventListener("mousemove",function(r){const s=a.getBoundingClientRect(),d=new e.Point(r.clientX-s.left-a.clientLeft,r.clientY-s.top-a.clientTop);e.Rotate.logMouse.call(t,{latlng:t.containerPointToLatLng(d),layerPoint:t.containerPointToLayerPoint(d),containerPoint:d})})}else t.on("mousemove",this.logMouse);t.on("locationfound",this.resetHeading),n.log&&t.on("click movestart move moveend zoomstart zoomend locationfound locationerror locationfound",this.logEvent)},logEvent(t){console.log(t,t.type)},logMouse(t){document.getElementById("llx").innerHTML=t.latlng.lng,document.getElementById("lly").innerHTML=t.latlng.lat,document.getElementById("lyx").innerHTML=t.layerPoint.x,document.getElementById("lyy").innerHTML=t.layerPoint.y,document.getElementById("cnx").innerHTML=t.containerPoint.x,document.getElementById("cny").innerHTML=t.containerPoint.y},rotate(t){return(t.type!=="mousemove"||t.buttons!==0)&&this._map.setBearing(t.target.valueAsNumber)},updatePaneBounds(){const t=this._map.getSize();for(const n of[this.___rotateBounds,this.___mainBounds])n.style.width=t.x+"px",n.style.height=t.y+"px"},updatePixelOrigin(){this._pixelOrigin&&(document.getElementById("ogx").innerHTML=this._pixelOrigin.x,document.getElementById("ogy").innerHTML=this._pixelOrigin.y,this.___rotatePixelOrigin.style.left=-this._pixelOrigin.x-1+"px",this.___rotatePixelOrigin.style.top=-this._pixelOrigin.y-1+"px")},updatePivotDot(){this._pivot&&(document.getElementById("pvx").innerHTML=this._pivot.x,document.getElementById("pvy").innerHTML=this._pivot.y,this.___rotatePivotDot.style.left=this._pivot.x-1+"px",this.___rotatePivotDot.style.top=this._pivot.y-1+"px")},updatePanePos(){const t=this._getMapPanePos();document.getElementById("pox").innerHTML=t.x,document.getElementById("poy").innerHTML=t.y},updateRhoInput(){document.getElementById("rho_input").value=this.getBearing()},rotateOneDegree(){const t=document.getElementById("rho_input").valueAsNumber++;this.setBearing(t<360?t:0)},randomRotateMarkers(t){const n=[],i=[];for(const a in t._layers)t._layers[a]instanceof e.Marker&&(n.push(t._layers[a]),i.push(Math.random()*Math.PI/30+.1));function o(a){for(let r=0;r<n.length;r++)n[r].setRotation(n[r].options.rotation+i[r]);--a&&setTimeout(o.bind(null,a),20)}o(25)},randomMarkers(t,n){t=this._map;const i=function(){for(let o=0;o<n;o++){const a=t.getBounds(),r=a.getSouthWest(),s=a.getNorthEast(),d=s.lng-r.lng,l=s.lat-r.lat,c=new e.Marker(new e.LatLng(r.lat+l*Math.random(),r.lng+d*Math.random()));e.Rotate.___cluster.addLayer(c)}};this.___cluster?typeof e.markerClusterGroup=="function"&&i():this.___cluster=import("https://unpkg.com/leaflet.markercluster@1.4.1/src/index.js").then(o=>{document.head.insertAdjacentHTML("beforeend",'<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"><link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">'),Object.assign(globalThis.L,o),this.___cluster=e.markerClusterGroup({spiderfyOnMaxZoom:!1,showCoverageOnHover:!1,zoomToBoundsOnClick:!1}).on("clusterclick",a=>a.layer.spiderfy()).addTo(t),i()})},displayCenter(){const t=this._map;this.___centerMarker&&this.___centerMarker.remove(),this.___centerMarker=new e.CircleMarker(t.getCenter(),{radius:3,color:"red"}).addTo(t).bindTooltip("<b>center</b>",{direction:"right",permanent:!0}),this.___centerMarker.getTooltip().getElement().setAttribute("tabindex","-1")},displayBounds(){const t=this._map;this.___bounds&&this.___bounds.remove();const n=document.getElementById("pad_input").valueAsNumber,i=t.getBounds().pad(n);this.___bounds=new e.Rectangle(i,{fill:!1,lineCap:"square",color:"yellow",dashArray:"5, 10",weight:2}).addTo(t)},displayLayersBounds(){for(const t of["path","polygon","circle"]){if(globalThis[t])this[`___${t}bounds`]&&this[`___${t}bounds`].remove();else continue;const i=globalThis[t].getBounds();this[`___${t}bounds`]=new e.FeatureGroup([new e.Rectangle(i,{fill:!1,lineCap:"square",color:"yellow",dashArray:"5, 10",weight:1,opacity:.5}),new e.Marker(i.getNorthWest(),{scale:.5,rotation:-45*(Math.PI/180),rotateWithView:!0}).bindTooltip("<b>NW</b>",{direction:"center"}),new e.Marker(i.getNorthEast(),{scale:.5,rotation:45*(Math.PI/180),rotateWithView:!0}).bindTooltip("<b>NE</b>",{direction:"center"}),new e.Marker(i.getSouthEast(),{scale:.5,rotation:135*(Math.PI/180),rotateWithView:!0}).bindTooltip("<b>SE</b>",{direction:"center"}),new e.Marker(i.getSouthWest(),{scale:.5,rotation:-135*(Math.PI/180),rotateWithView:!0}).bindTooltip("<b>SW</b>",{direction:"center"})]).addTo(map).eachLayer(o=>{o.getElement&&o.getElement()&&(o.getElement().style.filter="hue-rotate(150deg)")})}},displayPixelBounds(){const t=this._map;this.___corners&&this.___corners.remove(),this.___pixelbounds&&this.___pixelbounds.remove();const n=t.getSize(),i=t.getPixelBounds(),o=new e.Point(0,0),a=new e.Point(n.x,0),r=new e.Point(n.x,n.y),s=new e.Point(0,n.y),d=new e.Marker(t.containerPointToLatLng(o),{title:"Top Left corner",rotation:-45*(Math.PI/180)}),l=new e.Marker(t.containerPointToLatLng(a),{title:"Top Right corner",rotation:45*(Math.PI/180)}),c=new e.Marker(t.containerPointToLatLng(r),{title:"Bottom Right corner",rotation:135*(Math.PI/180)}),h=new e.Marker(t.containerPointToLatLng(s),{title:"Bottom Left corner",rotation:-135*(Math.PI/180)});this.___corners=new e.FeatureGroup([d,l,c,h]).addTo(t).eachLayer(u=>u.getElement().style.filter="hue-rotate(150deg)"),document.getElementById("ogbx").innerHTML=JSON.stringify(i.min),document.getElementById("ogby").innerHTML=JSON.stringify(i.max)},resetHeading(t){t.heading!==null&&this.setBearing(t.heading)},locate(){this._map.locate({setView:!0,enableHighAccuracy:!0})}}})();
+(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=`
+        <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("")}
+            <input title="increase/decrease rotation angle" type="range" min="0" max="360" step="1" value="0" name="rho" id='rho_input' /><span id='rho'></span>
+          </span>
+          <label>Bounds padding <input title="increase/decrease padding bounds" type="range" min="-0.25" max="0" value="0" step="0.01" name="pad" id='pad_input' /></label>
+          <span>Markers
+            <button onclick="L.Rotate.randomRotateMarkers(L.Rotate._map);" title="markers.setRotation(Math.random() * Math.PI / 30 + 0.1)">Rotate</button>
+            <button onclick="L.Rotate.randomMarkers(L.Rotate._map, 100);" title="add 100 random markers to map">Add 100</button>
+          </span>
+        </div>
+        <table class="leaflet-rotate-info">
+          <tr><th></th><th>x / lng</th><th>y / lat</th></tr>
+          ${[["LatLng","LatLng of mouse pointer","llx","lly"],["Rel to pane","Mouse pointer pixel coords relative to _rotatePane","lyx","lyy"],["Rel to container","Mouse pointer coords relative to map <div>","cnx","cny"],["Pivot","Last _rotationPane pivot pixel coords relative to _rotationPane","pvx","pvy"],["Pane offset","Pixel offset of _mapPane","pox","poy"],["Pixel origin","Negative pixel coords of the (0,0) CRS point relative to _rotatePane","ogx","ogy"],["Pixel bounds (min / max)","Bounds of the current map view in projected pixel coordinates {min, max}","ogbx","ogby"]].map(([n,s,d,l])=>`<tr title="${s.replace("<","&lt;").replace(">","&gt;")}"><th>${n}</th><td id='${d}'></td><td id='${l}'></td></tr>`).join("")}
+        </table>`;o.container?o.container.insertAdjacentHTML("beforeend",`<details open><summary>Debug</summary>${i}</details>`):t._container.insertAdjacentHTML("afterend","<hr>"+i),t.___rotatePixelOrigin=e.DomUtil.create("div","pixelorigin",t._rotatePane),t.___rotatePivotDot=e.DomUtil.create("div","pivot",t._mapPane),this.___rotateBounds=e.DomUtil.create("div","panebounds rotate",t._rotatePane),this.___mainBounds=e.DomUtil.create("div","panebounds main",t._mapPane),this.updatePaneBounds();const r=document.getElementById("rho_input"),a=document.getElementById("pad_input");if(r.addEventListener("change",e.Rotate.rotate.bind(this)),r.addEventListener("mousemove",e.Rotate.rotate.bind(this)),a.addEventListener("change",e.Rotate.displayCenter.bind(this)),a.addEventListener("mousemove",e.Rotate.displayCenter.bind(this)),a.addEventListener("change",e.Rotate.displayBounds.bind(this)),a.addEventListener("mousemove",e.Rotate.displayBounds.bind(this)),a.addEventListener("change",e.Rotate.displayLayersBounds.bind(this)),a.addEventListener("mousemove",e.Rotate.displayLayersBounds.bind(this)),a.addEventListener("change",e.Rotate.displayPixelBounds.bind(this)),a.addEventListener("mousemove",e.Rotate.displayPixelBounds.bind(this)),t.on("move rotate zoomend",this.updatePanePos),t.on("resize",this.updatePaneBounds.bind(this)),t.on("rotate zoomend load",this.updatePixelOrigin),t.on("rotate",this.updateRhoInput),t.on("rotate",this.updatePivotDot),t.on("moveend zoomend resetview rotate",this.displayCenter.bind(this)),t.on("moveend zoomend resetview rotate",this.displayBounds.bind(this)),t.on("moveend zoomend resetview rotate",this.displayLayersBounds.bind(this)),t.on("moveend zoomend resetview rotate",this.displayPixelBounds.bind(this)),this.updatePixelOrigin.call(t),this.updateRhoInput.call(t),this.updatePivotDot.call(t),this.displayCenter.call(this),this.displayBounds.call(this),this.displayLayersBounds.call(this),this.displayPixelBounds.call(this),e.Browser.mobile&&t.compassBearing.enable(),e.version.startsWith("2.")){const n=t.getContainer();n.addEventListener("mousemove",function(s){const d=n.getBoundingClientRect(),l=new e.Point(s.clientX-d.left-n.clientLeft,s.clientY-d.top-n.clientTop);e.Rotate.logMouse.call(t,{latlng:t.containerPointToLatLng(l),layerPoint:t.containerPointToLayerPoint(l),containerPoint:l})})}else t.on("mousemove",this.logMouse);t.on("locationfound",this.resetHeading),o.log&&t.on("click movestart move moveend zoomstart zoomend locationfound locationerror locationfound",this.logEvent)},logEvent(t){console.log(t,t.type)},logMouse(t){const o=(i,r)=>+i.toFixed(r);document.getElementById("llx").innerHTML=o(t.latlng.lng,6),document.getElementById("lly").innerHTML=o(t.latlng.lat,6),document.getElementById("lyx").innerHTML=o(t.layerPoint.x,1),document.getElementById("lyy").innerHTML=o(t.layerPoint.y,1),document.getElementById("cnx").innerHTML=o(t.containerPoint.x,1),document.getElementById("cny").innerHTML=o(t.containerPoint.y,1)},rotate(t){return(t.type!=="mousemove"||t.buttons!==0)&&this._map.setBearing(t.target.valueAsNumber)},updatePaneBounds(){const t=this._map.getSize();for(const o of[this.___rotateBounds,this.___mainBounds])o.style.width=t.x+"px",o.style.height=t.y+"px"},updatePixelOrigin(){this._pixelOrigin&&(document.getElementById("ogx").innerHTML=+this._pixelOrigin.x.toFixed(1),document.getElementById("ogy").innerHTML=+this._pixelOrigin.y.toFixed(1),this.___rotatePixelOrigin.style.left=-this._pixelOrigin.x-1+"px",this.___rotatePixelOrigin.style.top=-this._pixelOrigin.y-1+"px")},updatePivotDot(){this._pivot&&(document.getElementById("pvx").innerHTML=this._pivot.x,document.getElementById("pvy").innerHTML=this._pivot.y,this.___rotatePivotDot.style.left=this._pivot.x-1+"px",this.___rotatePivotDot.style.top=this._pivot.y-1+"px")},updatePanePos(){const t=this._getMapPanePos();document.getElementById("pox").innerHTML=t.x,document.getElementById("poy").innerHTML=t.y},updateRhoInput(){document.getElementById("rho_input").value=this.getBearing()},rotateOneDegree(){const t=document.getElementById("rho_input").valueAsNumber++;this.setBearing(t<360?t:0)},randomRotateMarkers(t){const o=[],i=[];for(const a in t._layers)t._layers[a]instanceof e.Marker&&(o.push(t._layers[a]),i.push(Math.random()*Math.PI/30+.1));function r(a){for(let n=0;n<o.length;n++)o[n].setRotation(o[n].options.rotation+i[n]);--a&&setTimeout(r.bind(null,a),20)}r(25)},randomMarkers(t,o){t=this._map;const i=function(){for(let r=0;r<o;r++){const a=t.getBounds(),n=a.getSouthWest(),s=a.getNorthEast(),d=s.lng-n.lng,l=s.lat-n.lat,h=new e.Marker(new e.LatLng(n.lat+l*Math.random(),n.lng+d*Math.random()));e.Rotate.___cluster.addLayer(h)}};this.___cluster?typeof e.markerClusterGroup=="function"&&i():this.___cluster=import("https://unpkg.com/leaflet.markercluster@1.4.1/src/index.js").then(r=>{document.head.insertAdjacentHTML("beforeend",'<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"><link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">'),Object.assign(globalThis.L,r),this.___cluster=e.markerClusterGroup({spiderfyOnMaxZoom:!1,showCoverageOnHover:!1,zoomToBoundsOnClick:!1}).on("clusterclick",a=>a.layer.spiderfy()).addTo(t),i()})},displayCenter(){const t=this._map;this.___centerMarker&&this.___centerMarker.remove(),this.___centerMarker=new e.CircleMarker(t.getCenter(),{radius:3,color:"red"}).addTo(t).bindTooltip("<b>center</b>",{direction:"right",permanent:!0}),this.___centerMarker.getTooltip().getElement().setAttribute("tabindex","-1")},displayBounds(){const t=this._map;this.___bounds&&this.___bounds.remove();const o=document.getElementById("pad_input").valueAsNumber,i=t.getBounds().pad(o);this.___bounds=new e.Rectangle(i,{fill:!1,lineCap:"square",color:"yellow",dashArray:"5, 10",weight:2}).addTo(t)},displayLayersBounds(){for(const t of["path","polygon","circle"]){if(globalThis[t])this[`___${t}bounds`]&&this[`___${t}bounds`].remove();else continue;const i=globalThis[t].getBounds();this[`___${t}bounds`]=new e.FeatureGroup([new e.Rectangle(i,{fill:!1,lineCap:"square",color:"yellow",dashArray:"5, 10",weight:1,opacity:.5}),new e.Marker(i.getNorthWest(),{scale:.5,rotation:-45*(Math.PI/180),rotateWithView:!0}).bindTooltip("<b>NW</b>",{direction:"center"}),new e.Marker(i.getNorthEast(),{scale:.5,rotation:45*(Math.PI/180),rotateWithView:!0}).bindTooltip("<b>NE</b>",{direction:"center"}),new e.Marker(i.getSouthEast(),{scale:.5,rotation:135*(Math.PI/180),rotateWithView:!0}).bindTooltip("<b>SE</b>",{direction:"center"}),new e.Marker(i.getSouthWest(),{scale:.5,rotation:-135*(Math.PI/180),rotateWithView:!0}).bindTooltip("<b>SW</b>",{direction:"center"})]).addTo(map).eachLayer(r=>{r.getElement&&r.getElement()&&(r.getElement().style.filter="hue-rotate(150deg)")})}},displayPixelBounds(){const t=this._map;this.___corners&&this.___corners.remove(),this.___pixelbounds&&this.___pixelbounds.remove();const o=t.getSize(),i=t.getPixelBounds(),r=new e.Point(0,0),a=new e.Point(o.x,0),n=new e.Point(o.x,o.y),s=new e.Point(0,o.y),d=new e.Marker(t.containerPointToLatLng(r),{title:"Top Left corner",rotation:-45*(Math.PI/180)}),l=new e.Marker(t.containerPointToLatLng(a),{title:"Top Right corner",rotation:45*(Math.PI/180)}),h=new e.Marker(t.containerPointToLatLng(n),{title:"Bottom Right corner",rotation:135*(Math.PI/180)}),u=new e.Marker(t.containerPointToLatLng(s),{title:"Bottom Left corner",rotation:-135*(Math.PI/180)});this.___corners=new e.FeatureGroup([d,l,h,u]).addTo(t).eachLayer(c=>c.getElement().style.filter="hue-rotate(150deg)");const p=c=>`${+c.x.toFixed(1)}, ${+c.y.toFixed(1)}`;document.getElementById("ogbx").innerHTML=p(i.min),document.getElementById("ogby").innerHTML=p(i.max)},resetHeading(t){t.heading!==null&&this.setBearing(t.heading)},locate(){this._map.locate({setView:!0,enableHighAccuracy:!0})}}})();

package/package.json

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

package/src/control/Rotate.js

@@ -1,17 +1,19 @@
 /**
- * Leaflet control for changing map rotation and selecting a rotation mode.
- * Its modes are:
+ * Leaflet control showing the map bearing and pitch, MapLibre-like (`NavigationControl` compass):
  * 
- * - Locked: rotation gestures are disabled.
- * - Touch: two-finger rotation is enabled.
- * - Compass: bearing follows device orientation when supported and permitted.
+ * - Click: animate back to north (and to zero pitch when `visualizePitch` is enabled).
+ * - Drag: horizontal movement changes the bearing, vertical movement changes the pitch.
+ * 
+ * Touch rotation and compass bearing are configured with the `touchRotate` and `compassBearing`
+ * map handlers (eg. `map.compassBearing.enable()`).
  * 
  * @class L.Control.Rotate
  * 
  * @extends L.Control
  * 
  * @property {string} [position='topleft'] Leaflet control position.
- * @property {boolean} [closeOnZeroBearing=true] Hide the control when bearing is zero.
+ * @property {boolean} [closeOnZeroBearing=true] Hide the control when both bearing and pitch are zero.
+ * @property {boolean} [visualizePitch=true] Tilt the icon with the pitch, reset the pitch on click and change it on drag.
  * 
  * @since leaflet-rotate (v0.1.0)
  */
@@ -20,11 +22,12 @@ L.Control.Rotate = L.Control.extend({
 
     options: {
         position: 'topleft',
-        closeOnZeroBearing: true
+        closeOnZeroBearing: true,
+        visualizePitch: true,
     },
 
     /**
-     * Create the control element and subscribe to map rotation.
+     * Create the control element and subscribe to map rotation and pitch.
      * 
      * @param {L.Map} map
      * 
@@ -35,46 +38,42 @@ L.Control.Rotate = L.Control.extend({
     onAdd(map) {
         const container = this._container = L.DomUtil.create('div', 'leaflet-control-rotate leaflet-bar');
 
-        // this.button = L.Control.Zoom.prototype._createButton.call(this, 'R', 'leaflet-control-rotate', 'leaflet-control-rotate', container, this._toggleLock);
-
         const arrow = this._arrow = L.DomUtil.create('span', 'leaflet-control-rotate-arrow');
 
         arrow.style.backgroundImage = `url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 29 29' xmlns='http://www.w3.org/2000/svg' fill='%23333'%3E%3Cpath d='M10.5 14l4-8 4 8h-8z'/%3E%3Cpath d='M10.5 16l4 8 4-8h-8z' fill='%23ccc'/%3E%3C/svg%3E")`;
-        arrow.style.cursor = 'grab';
         arrow.style.display = 'block';
         arrow.style.width = '100%';
         arrow.style.height = '100%';
         arrow.style.backgroundRepeat = 'no-repeat';
         arrow.style.backgroundPosition = '50%';
+        arrow.style.pointerEvents = 'none';
 
-        // Copy-pasted from L.Control.Zoom
         const link = this._link = L.DomUtil.create('a', 'leaflet-control-rotate-toggle', container);
         link.appendChild(arrow);
         link.href = '#';
-        link.title = 'Rotate map';
+        link.title = this.options.visualizePitch ? 'Reset bearing and pitch' : 'Reset bearing to north';
+        link.setAttribute('role', 'button');
+        link.setAttribute('aria-label', link.title);
+        link.style.cursor = 'grab';
+        link.style.touchAction = 'none';
+
+        this._onPointerMoveBound = this._onPointerMove.bind(this);
+        this._onPointerUpBound = this._onPointerUp.bind(this);
 
         L.DomEvent
-            .on(link, 'dblclick', L.DomEvent.stopPropagation)
-            .on(link, 'mousedown', this._handleMouseDown, this)
+            .on(link, 'dblclick contextmenu', L.DomEvent.stop)
             .on(link, 'click', L.DomEvent.stop)
-            .on(link, 'click', this._cycleState, this)
+            .on(link, 'click', this._onClick, this)
             .on(link, 'click', this._refocusOnMap, this);
+        link.addEventListener('pointerdown', this._onPointerDown.bind(this));
 
+        map.on('rotate pitch', this._restyle, this);
+        this._map = map;
         this._restyle();
 
-        map.on('rotate', this._restyle, this);
-
-        // State flag
-        this._follow = false;
-        this._canFollow = false;
-
-        if (this.options.closeOnZeroBearing && map.getBearing() === 0) {
-            container.style.display = 'none';
-        }
-
         return container;
     },
-    
+
     /**
      * Remove the map event listener when the control is detached.
      * 
@@ -83,138 +82,122 @@ L.Control.Rotate = L.Control.extend({
      * @since leaflet-rotate (v0.1.0)
      */
     onRemove(map) {
-        map.off('rotate', this._restyle, this);
+        this._onPointerUp();
+        map.off('rotate pitch', this._restyle, this);
     },
 
     /**
-     * Begin dragging the control's bearing indicator.
-     * 
-     * @param {MouseEvent} e Mouse-down event.
+     * Reset bearing (and pitch) unless the click ends a drag.
      * 
-     * @since leaflet-rotate (v0.1.0)
+     * @since leaflet-rotate (0.5.1)
      */
-    _handleMouseDown(e) {
-        L.DomEvent.stop(e);
-        this.dragging = true;
-        this.dragstartX = e.pageX;
-        this.dragstartY = e.pageY;
-        L.DomEvent
-            .on(document, 'mousemove', this._handleMouseDrag, this)
-            .on(document, 'mouseup', this._handleMouseUp, this);
+    _onClick() {
+        if (this._moved) {
+            this._moved = false;
+            return;
+        }
+        if (!this._map || !this._map._rotate) { return; }
+        if (this.options.visualizePitch) {
+            this._map.resetNorthPitch();
+        } else {
+            this._map.resetNorth();
+        }
     },
 
     /**
-     * End bearing-indicator dragging and remove document listeners.
+     * Start dragging the control (mouse, pen or touch).
      * 
-     * @param {MouseEvent} e Mouse-up event.
+     * @param {PointerEvent} e
      * 
      * @since leaflet-rotate (v0.1.0)
      */
-    _handleMouseUp(e) {
-        L.DomEvent.stop(e);
-        this.dragging = false;
-
-        L.DomEvent
-            .off(document, 'mousemove', this._handleMouseDrag, this)
-            .off(document, 'mouseup', this._handleMouseUp, this);
+    _onPointerDown(e) {
+        if (!this._map || !this._map._rotate || e.button > 0 || this._pointerId != null) { return; }
+        e.preventDefault();
+        e.stopPropagation();
+        this._pointerId = e.pointerId;
+        this._startX = this._lastX = e.clientX;
+        this._startY = this._lastY = e.clientY;
+        this._moved = false;
+        this._link.style.cursor = 'grabbing';
+        document.addEventListener('pointermove', this._onPointerMoveBound);
+        document.addEventListener('pointerup', this._onPointerUpBound);
+        document.addEventListener('pointercancel', this._onPointerUpBound);
     },
 
     /**
-     * Set bearing from the horizontal drag distance.
+     * Horizontal movement changes the bearing, vertical movement the pitch.
      * 
-     * @param {MouseEvent} e Mouse-move event.
+     * @param {PointerEvent} e
      * 
      * @since leaflet-rotate (v0.1.0)
      */
-    _handleMouseDrag(e) {
-        if (!this.dragging) { return; }
-        const deltaX = e.clientX - this.dragstartX;
-        this._map.setBearing(deltaX);
+    _onPointerMove(e) {
+        if (e.pointerId !== this._pointerId) { return; }
+        e.preventDefault();
+        if (!this._moved && Math.hypot(e.clientX - this._startX, e.clientY - this._startY) < 3) { return; }
+        if (!this._moved) {
+            this._moved = true;
+            this._map._stopPitchBearingAnimation();
+        }
+        const map = this._map,
+            pitch = this.options.visualizePitch ? map.getPitch() + (this._lastY - e.clientY) * 0.5 : map.getPitch();
+        map._setPitchAndBearing(pitch, map.getBearing() + (e.clientX - this._lastX) * 0.8);
+        this._lastX = e.clientX;
+        this._lastY = e.clientY;
     },
 
     /**
-     * Cycle through touch, compass, and locked rotation modes.
-     * Compass mode may require permission from the browser.
+     * Stop dragging and remove document listeners.
      * 
-     * @param {Event} ev Control click event.
+     * @param {PointerEvent} [e]
      * 
      * @since leaflet-rotate (v0.1.0)
      */
-    _cycleState(ev) {
-        if (!this._map) {
-            return;
-        }
-
-        const map = this._map;
-
-        // Touch mode
-        if (!map.touchRotate.enabled() && !map.compassBearing.enabled()) {
-            map.touchRotate.enable();
+    _onPointerUp(e) {
+        if (e && e.pointerId !== this._pointerId) { return; }
+        document.removeEventListener('pointermove', this._onPointerMoveBound);
+        document.removeEventListener('pointerup', this._onPointerUpBound);
+        document.removeEventListener('pointercancel', this._onPointerUpBound);
+        // a drag ending outside the button produces no click
+        if (e && this._moved && !this._link.contains(e.target)) { this._moved = false; }
+        delete this._pointerId;
+        if (this._link) {
+            this._link.style.cursor = 'grab';
+            this._restyle();
         }
-        
-        // Compass mode
-        else if (!map.compassBearing.enabled()) {
-            map.touchRotate.disable();
-            (
-                DeviceOrientationEvent && DeviceOrientationEvent.requestPermission
-                    ? DeviceOrientationEvent.requestPermission() // iOS compass
-                    : Promise.resolve('granted')                 // others
-            ).then(state => "granted" === state && map.compassBearing.enable())
-        }
-
-        // Locked mode
-        else {
-            map.compassBearing.disable();
-            map.setBearing(0);
-            if (this.options.closeOnZeroBearing) {
-                map.touchRotate.enable();
-            }
-        }
-        this._restyle();
     },
 
     /**
-     * Update the control icon and visibility to match the current mode.
+     * Update the icon (bearing and pitch) and the control visibility.
      * 
      * @listens L.Map#rotate
+     * @listens L.Map#pitch
      * 
      * @since leaflet-rotate (v0.1.0)
      */
     _restyle() {
-        if (!this._map.options.rotate) {
+        const map = this._map;
+        if (!map) { return; }
+        if (!map.options.rotate) {
             this._link.classList.add('leaflet-disabled');
-        } else {
-            const map = this._map;
-            const bearing = map.getBearing();
-
-            this._arrow.style.transform = 'rotate(' + bearing + 'deg)';
-
-            if (bearing && this.options.closeOnZeroBearing) {
-                this._container.style.display = 'block';
-            }
-
-            // Compass mode
-            if (map.compassBearing.enabled()) {
-                this._link.style.backgroundColor = 'orange';
-            }
-            
-            // Touch mode
-            else if (map.touchRotate.enabled()) {
-                this._link.style.backgroundColor = null;
-            }
-
-            // Locked mode
-            else {
-                this._link.style.backgroundColor = 'grey';
-                if (0 === bearing && this.options.closeOnZeroBearing) {
-                    this._container.style.display = 'none';
-                }
-            }
+            return;
+        }
+
+        const bearing = map.getBearing(),
+            pitch = map.getPitch();
+
+        this._arrow.style.transform = this.options.visualizePitch && pitch
+            ? `scale(${1 / Math.sqrt(Math.cos(pitch * Math.PI / 180))}) rotateX(${pitch}deg) rotate(${bearing}deg)`
+            : `rotate(${bearing}deg)`;
+
+        if (this.options.closeOnZeroBearing) {
+            const hidden = !bearing && !(this.options.visualizePitch && pitch) && this._pointerId == null;
+            this._container.style.display = hidden ? 'none' : 'block';
         }
     },
 
 });
-
 if (L.control) {
     L.control.rotate = options => new L.Control.Rotate(options);
 }
@@ -243,3 +226,4 @@ L.Map.addInitHook(function() {
         this.addControl(this.rotateControl);
     }
 });
+

package/src/index.js

@@ -55,6 +55,7 @@ export * from './map/handler/CompassBearing';
 export * from './map/handler/ContainerMutation';
 export * from './map/handler/TouchGestures';
 export * from './map/handler/TouchRotate';
+export * from './map/handler/TouchPitch';
 export * from './map/handler/ShiftKeyRotate';
 export * from './map/handler/TouchZoom';
 

package/src/layer/tile/GridLayer.js

@@ -27,11 +27,30 @@ L.GridLayer.include({
             if (!this._onRotate) {
                 this._onRotate = L.Util.throttle(this._onMoveEnd, this.options.updateInterval, this);
             }
-            events.rotate = this._onRotate;
+            events.rotate = this._onRotateEvent;
         }
         return events;
     },
 
+    /**
+     * 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).
+     * 
+     * @listens L.Map~rotate
+     * 
+     * @since leaflet-rotate (0.5.1)
+     */
+    _onRotateEvent() {
+        const map = this._map;
+        if (!map) { return; }
+        const origin = map.getPixelOrigin();
+        if (this._rotateOrigin && !this._rotateOrigin.equals(origin) && !map._animatingZoom && this._levels) {
+            this._setZoomTransforms(map.getCenter(), map.getZoom());
+        }
+        this._rotateOrigin = origin;
+        this._onRotate();
+    },
+
     /**
      * Return tile pixel bounds that cover the rotated viewport.
      *