leaflet-rotate 0.1.4 → 0.2.0

package/lib/debug.js

@@ -9,10 +9,14 @@ L.Rotate = {
               width: 100%;
             }
             .leaflet-rotate-info td {
-              width: 7em;
+              /* width: 7em; */
               overflow: hidden;
-              max-width: 7em;
+              /* max-width: 7em; */
               text-overflow: ellipsis;
+              /* white-space: nowrap; */
+            }
+            .leaflet-rotate-info td:nth-of-type(3) {
+              font-family: Monospace;
             }
             .leaflet-rotate-info th {
               text-align: left;
@@ -30,15 +34,31 @@ L.Rotate = {
               position:absolute;
               width:1px;
               height:1px;
-              border: 1px solid purple;
-              z-index: 100;
+              border: 5px solid yellow;
+              border-radius: 100%;
+              z-index: 1000;
             }
             div.pixelorigin {
-              position:absolute;
-              width:1px;
-              height:1px;
-              border: 1px solid cyan;
-              z-index: 100;
+              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: yellow;
+            }
+            div.pixelorigin:before {
+              left: -1.75em;
+              top: -2em;
+              position: absolute;
+              content: 'ORIGIN';
+              color: yellow;
             }
             div.panebounds.main {
               position:absolute;
@@ -111,6 +131,7 @@ L.Rotate = {
             </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>
@@ -149,6 +170,12 @@ L.Rotate = {
             <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>`);
 
         map.___rotatePixelOrigin = L.DomUtil.create('div', 'pixelorigin', map._rotatePane);
@@ -165,15 +192,25 @@ L.Rotate = {
 
         padInput.addEventListener('change', L.Rotate.displayCenter.bind(this));
         padInput.addEventListener('mousemove', L.Rotate.displayCenter.bind(this));
+        padInput.addEventListener('change', L.Rotate.displayBounds.bind(this));
+        padInput.addEventListener('mousemove', L.Rotate.displayBounds.bind(this));
+        padInput.addEventListener('change', L.Rotate.displayPixelBounds.bind(this));
+        padInput.addEventListener('mousemove', L.Rotate.displayPixelBounds.bind(this));
 
         map.on('move rotate zoomend', this.updatePanePos);
         map.on('rotate zoomend load', this.updatePixelOrigin);
+        map.on('rotate', this.updateRhoInput);
+        map.on('rotate', this.updatePivotDot);
         map.on('moveend zoomend resetview rotate', this.displayCenter.bind(this));
+        map.on('moveend zoomend resetview rotate', this.displayBounds.bind(this));
+        map.on('moveend zoomend resetview rotate', this.displayPixelBounds.bind(this));
 
         this.updatePixelOrigin.call(map);
+        this.updateRhoInput.call(map);
+        this.updatePivotDot.call(map);
         this.displayCenter.call(this);
-
-        map.on('rotate', this.updatePivotDot);
+        this.displayBounds.call(this);
+        this.displayPixelBounds.call(this);
 
         if (L.Browser.mobile) {
             map.compassBearing.enable();
@@ -204,10 +241,16 @@ L.Rotate = {
         document.getElementById('cny').innerHTML = e.containerPoint.y;
     },
 
+    /**
+     * Debug L.Map.setBearing()
+     */
     rotate: function(e) {
         return e.buttons !== 0 && this._map.setBearing(e.target.valueAsNumber);
     },
 
+    /**
+     * Debug L.Map._pixelOrigin
+     */
     updatePixelOrigin: function() {
         document.getElementById('ogx').innerHTML = this._pixelOrigin.x;
         document.getElementById('ogy').innerHTML = this._pixelOrigin.y;
@@ -215,6 +258,9 @@ L.Rotate = {
         this.___rotatePixelOrigin.style.top = (-this._pixelOrigin.y - 1) + 'px';
     },
 
+    /**
+     * Debug L.Map._pivot
+     */
     updatePivotDot: function() {
         document.getElementById('pvx').innerHTML = this._pivot.x;
         document.getElementById('pvy').innerHTML = this._pivot.y;
@@ -222,17 +268,33 @@ L.Rotate = {
         this.___rotatePivotDot.style.top = (this._pivot.y - 1) + 'px';
     },
 
+    /**
+     * Debug L.Map._getMapPanePos()
+     */
     updatePanePos: function() {
         var panePos = this._getMapPanePos();
         document.getElementById('pox').innerHTML = panePos.x;
         document.getElementById('poy').innerHTML = panePos.y;
     },
 
+    /**
+     * Debug L.Map.getBearing()
+     */
+    updateRhoInput: function() {
+      document.getElementById('rho_input').value = this.getBearing();
+    },
+
+    /**
+     * Debug L.Map.setBearing()
+     */
     rotateOneDegree: function() {
         var angle = document.getElementById('rho_input').valueAsNumber++;
         this.setBearing(angle < 360 ? angle : 0);
     },
 
+    /**
+     * Debug L.Marker.setRotation()
+     */
     randomRotateMarkers: function(map) {
         var markers = [],
             steps = [];
@@ -254,27 +316,156 @@ L.Rotate = {
         stepOn(25);
     },
 
+    /**
+     * Debug L.Map.panInside()
+     */
+    randomMarkers: function(map, number) {
+      var map = this._map;
+      var populate = function() {
+        // populate map with a cluster of random markers
+        for (var i = 0; i < number; i++) {
+          var bounds = map.getBounds();
+          var southWest = bounds.getSouthWest();
+          var northEast = bounds.getNorthEast();
+          var lngSpan = northEast.lng - southWest.lng;
+          var latSpan = northEast.lat - southWest.lat;
+          var m = L.marker( L.latLng(southWest.lat + latSpan * Math.random(), southWest.lng + lngSpan * Math.random()) );
+          m.addTo(L.Rotate._map);
+          L.Rotate.___cluster.addLayer(m);
+        }
+      }
+      if (!this.___cluster) {
+        // import and initialize "leaflet.markercluster" plugin
+        this.___cluster = import("https://unpkg.com/leaflet.markercluster@1.4.1/src/index.js")
+          .then(m => {
+            document.head.insertAdjacentHTML('beforeend', `
+              <!-- Leaflet-MarkerCluster -->
+              <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, m);
+            this.___cluster = L.markerClusterGroup({
+              spiderfyOnMaxZoom: false,
+              showCoverageOnHover: false,
+              zoomToBoundsOnClick: false
+            })
+            .on('clusterclick', (a) => a.layer.spiderfy())
+            .addTo(map);
+            populate();
+          });
+      } else if (typeof L.markerClusterGroup === 'function') {
+        populate();
+      }
+    },
+
+    /**
+     * Debug L.Map.getCenter()
+     */
     displayCenter: function() {
         var map = this._map;
         if (this.___centerMarker) {
             this.___centerMarker.remove();
         }
         this.___centerMarker = L.circleMarker(map.getCenter(), {
-            radius: 0,
-            color: 'green',
-        }).addTo(map);
+            radius: 3,
+            color: 'red',
+        }).addTo(map).bindTooltip('<b>center</b>', { direction: 'right', permanent: true, });
+        this.___centerMarker.getTooltip().getElement().setAttribute("tabindex", "-1");
+    },
 
-        if (this.___bounds) {
-            this.___bounds.remove();
-        }
-        var padding = document.getElementById('pad_input').valueAsNumber;
-        this.___bounds = L.rectangle(map.getBounds().pad(padding), {
-            fill: false,
-            lineCap: 'square',
-            color: 'green',
-            dashArray: '5, 10',
-            weight: 2,
-        }).addTo(map);
+    /**
+     * Debug L.Map.getCenter()
+     */
+    displayBounds: function() {
+      var map = this._map;
+      if (this.___bounds) {
+        this.___bounds.remove();
+      }
+      var padding = document.getElementById('pad_input').valueAsNumber;
+      var latLngBounds = map.getBounds().pad(padding)
+      this.___bounds = L.rectangle(latLngBounds, {
+          fill: false,
+          lineCap: 'square',
+          color: 'yellow',
+          dashArray: '5, 10',
+          weight: 2,
+          // pane: 'norotatePane',
+      }).addTo(map);
+    },
+
+    /**
+     * @TODO Debug L.Map.getPixelBounds()
+     */
+    displayPixelBounds: function() {
+      var map = this._map;
+      this.___corners     && this.___corners.remove();
+      this.___pixelbounds && this.___pixelbounds.remove();
+
+      const size = map.getSize();
+      const rect = map._container.getBoundingClientRect();
+      const pixelBounds = map.getPixelBounds();
+
+      const TL = L.point(rect);
+      const TR = L.point(rect).add(L.point(rect.width, 0));
+      const BR = L.point(rect).add(L.point(rect.width, rect.height))
+      const BL = L.point(rect).add(L.point(0, rect.height));
+
+      const topLeft     = L.marker( map.containerPointToLatLng(TL), { title: 'Top Left corner', rotation: 135 * L.DomUtil.DEG_TO_RAD } );
+      const topRight    = L.marker( map.containerPointToLatLng(TR), { title: 'Top Right corner', rotation: -135 * L.DomUtil.DEG_TO_RAD } );
+      const bottomRight = L.marker( map.containerPointToLatLng(BR), { title: 'Bottom Right corner', rotation: -45 * L.DomUtil.DEG_TO_RAD } );
+      const bottomLeft  = L.marker( map.containerPointToLatLng(BL), { title: 'Bottom Left corner', rotation: -135 * L.DomUtil.DEG_TO_RAD } );
+
+      this.___corners = L.featureGroup([topLeft, topRight, bottomRight, bottomLeft]).addTo(map).eachLayer(marker => marker.getElement().style.filter = 'hue-rotate(150deg)');
+
+      // L.polyline([
+      //   [topLeft.getLatLng(), topRight.getLatLng()],
+      //   [topRight.getLatLng(), bottomRight.getLatLng()],
+      //   [bottomRight.getLatLng(), bottomLeft.getLatLng()],
+      //   [bottomLeft.getLatLng(), topLeft.getLatLng()],
+      // ], {
+      //   lineCap: 'square',
+      //   dashArray: '5, 1, 5',
+      //   color: 'yellow',
+      //   weight: 2,
+      // }).addTo(this.___corners);
+
+      // this.___latLngBounds = L.latLngBounds([
+      //   // map.containerPointToLatLng(TL),
+      //   //map.containerPointToLatLng(BR)
+      //   topLeft.getLatLng(),
+      //   topRight.getLatLng(),
+      //   bottomRight.getLatLng(),
+      //   bottomLeft.getLatLng(),
+      // ]);
+
+      // this.___pixelbounds = L.rectangle(this.___latLngPixelBounds, {
+      //   fill: false,
+      //   lineCap: 'square',
+      //   dashArray: '5, 1, 5',
+      //   color: 'yellow',
+      //   weight: 2,
+      //   pane: 'norotatePane',
+      // }).addTo(map);
+      
+
+      // this.___latLngPixelBounds = L.latLngBounds([
+      //     map.layerPointToLatLng([0, 0]),                     // topleft
+      //     map.layerPointToLatLng([size.x, 0]),           // topright 
+      //     map.layerPointToLatLng([size.x, size.y]), // bottomright
+      //     map.layerPointToLatLng([0, size.y]),           // bottomleft
+      // ]);
+
+      // const paddingTL = L.point(L.Marker.prototype.options.icon.options.iconAnchor || [0, 0]),
+      //   paddingBR = L.point(L.Marker.prototype.options.icon.options.iconSize || [0, 0]).subtract(paddingTL),
+      //   pixelBounds = L.bounds([ L.point(rect), L.point(rect).add(map.getSize()) ]),
+      //   paddedBounds = L.latLngBounds([
+      //     map.layerPointToLatLng(pixelBounds.min.add(paddingTL)),
+      //     map.layerPointToLatLng(pixelBounds.max.subtract(paddingBR))
+      //   ]);
+      //   // paddedSize = paddedBounds.getSize();
+
+      document.getElementById('ogbx').innerHTML = JSON.stringify(pixelBounds.min);
+      document.getElementById('ogby').innerHTML = JSON.stringify(pixelBounds.max);
     },
 
     resetHeading: function(e) {
@@ -283,6 +474,9 @@ L.Rotate = {
         }
     },
 
+    /**
+     * Debug L.Map.locate()
+     */
     locate: function() {
         this._map.locate({
             setView: true,

package/lib/debug.min.js

@@ -1,9 +1 @@
-'use strict';L.Rotate={debug:function(map,options={}){this._map=map;document.head.insertAdjacentHTML("beforeend",`<style>\n            .leaflet-rotate-info {\n              width: 100%;\n            }\n            .leaflet-rotate-info td {\n              width: 7em;\n              overflow: hidden;\n              max-width: 7em;\n              text-overflow: ellipsis;\n            }\n            .leaflet-rotate-info th {\n              text-align: left;\n            }\n            div.crosshair {\n              position:absolute;\n              width:1px;\n              height:1px;\n              border: 1px solid green;\n              z-index: 100;\n              left: 50%;\n              right: 50%;\n            }\n            div.pivot {\n              position:absolute;\n              width:1px;\n              height:1px;\n              border: 1px solid purple;\n              z-index: 100;\n            }\n            div.pixelorigin {\n              position:absolute;\n              width:1px;\n              height:1px;\n              border: 1px solid cyan;\n              z-index: 100;\n            }\n            div.panebounds.main {\n              position:absolute;\n              width:800px;\n              height:600px;\n              border: 1px solid red;\n              border-bottom: 1px red dashed;\n              border-right: 1px red dashed;\n              z-index: 100;\n            }\n            div.panebounds.rotate {\n              position:absolute;\n              width:800px;\n              height:600px;\n              border: 1px solid purple;\n              border-bottom: 1px purple dashed;\n              border-right: 1px purple dashed;\n              z-index: 100;\n            }\n            div.crosshair.c1 {\n              left:calc(50% - 5px);\n              top:50%;\n              height: 0;\n              width: 10px;\n            }\n            div.crosshair.c2 {\n              left:50%;\n              top:calc(50% - 5px);\n              width: 0;\n              height: 10px;\n            }\n            #rho_input {\n              vertical-align: middle;\n            }\n            .panebounds:before {\n              padding: 1ch;\n            }\n            .panebounds.rotate:before {\n              float: right;\n              content: 'ROTATED';\n            }\n            .panebounds.main:before {\n              float: left;\n              content: 'MAIN';\n            }\n          </style>`);
-map._container.insertAdjacentHTML("afterbegin",`<div class="crosshair c1"></div><div class="crosshair c2"></div>`);map._container.insertAdjacentHTML("afterend",`<hr>\n        <table class="leaflet-rotate-info">\n          <tr>\n            <td>\n              <button onclick="L.Rotate._map.setBearing(0);" title="map.setBearing(0);"> 0</button>\n              <button onclick="L.Rotate._map.setBearing(15);" title="map.setBearing(15);">15</button>\n              <button onclick="L.Rotate._map.setBearing(30);" title="map.setBearing(30);">30</button>\n              <button onclick="L.Rotate._map.setBearing(45);" title="map.setBearing(45);">45</button>\n              <button onclick="L.Rotate._map.setBearing(60);" title="map.setBearing(60);">60</button>\n              <button onclick="L.Rotate._map.setBearing(75);" title="map.setBearing(75);">75</button>\n              <button onclick="L.Rotate._map.setBearing(90);" title="map.setBearing(90);">90</button>\n              <button onclick="L.Rotate._map.setBearing(180);" title="map.setBearing(180);">180</button>\n            </td>\n            <td>\n              <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>\n            </td>\n            <td>\n              <input title="increase/decrease padding bounds" type="range" min="-0.25" max="0" value="0" step="0.01" name="pad" id='pad_input' />\n            </td>\n            <td>\n              <button onclick="L.Rotate.randomRotateMarkers(L.Rotate._map);" title="markers.setRotation(Math.random() * Math.PI / 30 + 0.1)">Rotate Markers</button>\n            </td>\n          </tr>\n          <tr>\n            <th>LatLng </th>\n            <td id='llx'></td>\n            <td id='lly'></td>\n            <td class='long'>LatLng of mouse pointer</td>\n          </tr>\n          <tr>\n            <th>Rel to pane </th>\n            <td id='lyx'></td>\n            <td id='lyy'></td>\n            <td class='long'>Mouse pointer pixel coords relative to _rotatePane</td>\n          </tr>\n          <tr>\n            <th>Rel to container</th>\n            <td id='cnx'></td>\n            <td id='cny'></td>\n            <td class='long'>Mouse pointer coords relative to map &lt;div&gt;</td>\n          </tr>\n          <tr>\n            <th>Pivot </th>\n            <td id='pvx'></td>\n            <td id='pvy'></td>\n            <td class='long'>Last _rotationPane pivot pixel coords relative to _rotationPane</td>\n          </tr>\n          <tr>\n            <th>Pane offset </th>\n            <td id='pox'></td>\n            <td id='poy'></td>\n            <td class='long'>Pixel offset of _mapPane</td>\n          </tr>\n          <tr>\n            <th>Pixel origin </th>\n            <td id='ogx'></td>\n            <td id='ogy'></td>\n            <td class='long'>Negative pixel coords of the (0,0) CRS point relative to _rotatePane</td>\n          </tr>\n        </table>`);
-map.___rotatePixelOrigin=L.DomUtil.create("div","pixelorigin",map._rotatePane);map.___rotatePivotDot=L.DomUtil.create("div","pivot",map._mapPane);L.DomUtil.create("div","panebounds rotate",map._rotatePane);L.DomUtil.create("div","panebounds main",map._mapPane);var rhoInput=document.getElementById("rho_input");var padInput=document.getElementById("pad_input");rhoInput.addEventListener("change",L.Rotate.rotate.bind(this));rhoInput.addEventListener("mousemove",L.Rotate.rotate.bind(this));padInput.addEventListener("change",
-L.Rotate.displayCenter.bind(this));padInput.addEventListener("mousemove",L.Rotate.displayCenter.bind(this));map.on("move rotate zoomend",this.updatePanePos);map.on("rotate zoomend load",this.updatePixelOrigin);map.on("moveend zoomend resetview rotate",this.displayCenter.bind(this));this.updatePixelOrigin.call(map);this.displayCenter.call(this);map.on("rotate",this.updatePivotDot);if(L.Browser.mobile)map.compassBearing.enable();map.on("mousemove",this.logMouse);map.on("locationfound",this.resetHeading);
-if(options.log)map.on("click movestart move moveend zoomstart zoomend locationfound locationerror locationfound",this.logEvent)},logEvent:function(e){console.log(e,e.type)},logMouse:function(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},rotate:function(e){return e.buttons!==0&&this._map.setBearing(e.target.valueAsNumber)},updatePixelOrigin:function(){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:function(){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:function(){var panePos=this._getMapPanePos();document.getElementById("pox").innerHTML=panePos.x;document.getElementById("poy").innerHTML=panePos.y},rotateOneDegree:function(){var angle=document.getElementById("rho_input").valueAsNumber++;this.setBearing(angle<360?angle:0)},randomRotateMarkers:function(map){var markers=[],steps=[];for(var i in map._layers)if(map._layers[i]instanceof
-L.Marker){markers.push(map._layers[i]);steps.push(Math.random()*Math.PI/30+.1)}function stepOn(steps_left){for(var i=0;i<markers.length;i++)markers[i].setRotation(markers[i].options.rotation+steps[i]);if(--steps_left)setTimeout(stepOn.bind(null,steps_left),20)}stepOn(25)},displayCenter:function(){var map=this._map;if(this.___centerMarker)this.___centerMarker.remove();this.___centerMarker=L.circleMarker(map.getCenter(),{radius:0,color:"green"}).addTo(map);if(this.___bounds)this.___bounds.remove();
-var padding=document.getElementById("pad_input").valueAsNumber;this.___bounds=L.rectangle(map.getBounds().pad(padding),{fill:false,lineCap:"square",color:"green",dashArray:"5, 10",weight:2}).addTo(map)},resetHeading:function(e){if(e.heading!==null)this.setBearing(e.heading)},locate:function(){this._map.locate({setView:true,enableHighAccuracy:true})}};
+L.Rotate={debug:function(map,options={}){this._map=map,document.head.insertAdjacentHTML("beforeend","<style>\n            .leaflet-rotate-info {\n              width: 100%;\n            }\n            .leaflet-rotate-info td {\n              /* width: 7em; */\n              overflow: hidden;\n              /* max-width: 7em; */\n              text-overflow: ellipsis;\n              /* white-space: nowrap; */\n            }\n            .leaflet-rotate-info td:nth-of-type(3) {\n              font-family: Monospace;\n            }\n            .leaflet-rotate-info th {\n              text-align: left;\n            }\n            div.crosshair {\n              position:absolute;\n              width:1px;\n              height:1px;\n              border: 1px solid green;\n              z-index: 100;\n              left: 50%;\n              right: 50%;\n            }\n            div.pivot {\n              position:absolute;\n              width:1px;\n              height:1px;\n              border: 5px solid yellow;\n              border-radius: 100%;\n              z-index: 1000;\n            }\n            div.pixelorigin {\n              position: absolute;\n              width: 1px;\n              height: 1px;\n              border: 5px solid yellow;\n              border-radius: 100%;\n              z-index: 1000;\n            }\n            div.pivot:before {\n              left: -1.5em;\n              bottom: -2em;\n              position: absolute;\n              content: 'PIVOT';\n              color: yellow;\n            }\n            div.pixelorigin:before {\n              left: -1.75em;\n              top: -2em;\n              position: absolute;\n              content: 'ORIGIN';\n              color: yellow;\n            }\n            div.panebounds.main {\n              position:absolute;\n              width:800px;\n              height:600px;\n              border: 1px solid red;\n              border-bottom: 1px red dashed;\n              border-right: 1px red dashed;\n              z-index: 100;\n            }\n            div.panebounds.rotate {\n              position:absolute;\n              width:800px;\n              height:600px;\n              border: 1px solid purple;\n              border-bottom: 1px purple dashed;\n              border-right: 1px purple dashed;\n              z-index: 100;\n            }\n            div.crosshair.c1 {\n              left:calc(50% - 5px);\n              top:50%;\n              height: 0;\n              width: 10px;\n            }\n            div.crosshair.c2 {\n              left:50%;\n              top:calc(50% - 5px);\n              width: 0;\n              height: 10px;\n            }\n            #rho_input {\n              vertical-align: middle;\n            }\n            .panebounds:before {\n              padding: 1ch;\n            }\n            .panebounds.rotate:before {\n              float: right;\n              content: 'ROTATED';\n            }\n            .panebounds.main:before {\n              float: left;\n              content: 'MAIN';\n            }\n          </style>"),map._container.insertAdjacentHTML("afterbegin",'<div class="crosshair c1"></div><div class="crosshair c2"></div>'),map._container.insertAdjacentHTML("afterend",'<hr>\n        <table class="leaflet-rotate-info">\n          <tr>\n            <td>\n              <button onclick="L.Rotate._map.setBearing(0);" title="map.setBearing(0);"> 0</button>\n              <button onclick="L.Rotate._map.setBearing(15);" title="map.setBearing(15);">15</button>\n              <button onclick="L.Rotate._map.setBearing(30);" title="map.setBearing(30);">30</button>\n              <button onclick="L.Rotate._map.setBearing(45);" title="map.setBearing(45);">45</button>\n              <button onclick="L.Rotate._map.setBearing(60);" title="map.setBearing(60);">60</button>\n              <button onclick="L.Rotate._map.setBearing(75);" title="map.setBearing(75);">75</button>\n              <button onclick="L.Rotate._map.setBearing(90);" title="map.setBearing(90);">90</button>\n              <button onclick="L.Rotate._map.setBearing(180);" title="map.setBearing(180);">180</button>\n            </td>\n            <td>\n              <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>\n            </td>\n            <td>\n              <input title="increase/decrease padding bounds" type="range" min="-0.25" max="0" value="0" step="0.01" name="pad" id=\'pad_input\' />\n            </td>\n            <td>\n              <button onclick="L.Rotate.randomRotateMarkers(L.Rotate._map);" title="markers.setRotation(Math.random() * Math.PI / 30 + 0.1)">Rotate Markers</button>\n              <button onclick="L.Rotate.randomMarkers(L.Rotate._map, 100);" title="add 100 random markers to map">Add Markers</button>\n            </td>\n          </tr>\n          <tr>\n            <th>LatLng </th>\n            <td id=\'llx\'></td>\n            <td id=\'lly\'></td>\n            <td class=\'long\'>LatLng of mouse pointer</td>\n          </tr>\n          <tr>\n            <th>Rel to pane </th>\n            <td id=\'lyx\'></td>\n            <td id=\'lyy\'></td>\n            <td class=\'long\'>Mouse pointer pixel coords relative to _rotatePane</td>\n          </tr>\n          <tr>\n            <th>Rel to container</th>\n            <td id=\'cnx\'></td>\n            <td id=\'cny\'></td>\n            <td class=\'long\'>Mouse pointer coords relative to map &lt;div&gt;</td>\n          </tr>\n          <tr>\n            <th>Pivot </th>\n            <td id=\'pvx\'></td>\n            <td id=\'pvy\'></td>\n            <td class=\'long\'>Last _rotationPane pivot pixel coords relative to _rotationPane</td>\n          </tr>\n          <tr>\n            <th>Pane offset </th>\n            <td id=\'pox\'></td>\n            <td id=\'poy\'></td>\n            <td class=\'long\'>Pixel offset of _mapPane</td>\n          </tr>\n          <tr>\n            <th>Pixel origin </th>\n            <td id=\'ogx\'></td>\n            <td id=\'ogy\'></td>\n            <td class=\'long\'>Negative pixel coords of the (0,0) CRS point relative to _rotatePane</td>\n          </tr>\n          <tr>\n            <th>Pixel bounds </th>\n            <td id=\'ogbx\'></td>\n            <td id=\'ogby\'></td>\n            <td class=\'long\'>Bounds of the current map view in projected pixel coordinates {min, max}.</td>\n          </tr>\n        </table>'),map.___rotatePixelOrigin=L.DomUtil.create("div","pixelorigin",map._rotatePane),map.___rotatePivotDot=L.DomUtil.create("div","pivot",map._mapPane),L.DomUtil.create("div","panebounds rotate",map._rotatePane),L.DomUtil.create("div","panebounds main",map._mapPane);var rhoInput=document.getElementById("rho_input"),padInput=document.getElementById("pad_input");rhoInput.addEventListener("change",L.Rotate.rotate.bind(this)),rhoInput.addEventListener("mousemove",L.Rotate.rotate.bind(this)),padInput.addEventListener("change",L.Rotate.displayCenter.bind(this)),padInput.addEventListener("mousemove",L.Rotate.displayCenter.bind(this)),padInput.addEventListener("change",L.Rotate.displayBounds.bind(this)),padInput.addEventListener("mousemove",L.Rotate.displayBounds.bind(this)),padInput.addEventListener("change",L.Rotate.displayPixelBounds.bind(this)),padInput.addEventListener("mousemove",L.Rotate.displayPixelBounds.bind(this)),map.on("move rotate zoomend",this.updatePanePos),map.on("rotate zoomend load",this.updatePixelOrigin),map.on("rotate",this.updateRhoInput),map.on("rotate",this.updatePivotDot),map.on("moveend zoomend resetview rotate",this.displayCenter.bind(this)),map.on("moveend zoomend resetview rotate",this.displayBounds.bind(this)),map.on("moveend zoomend resetview rotate",this.displayPixelBounds.bind(this)),this.updatePixelOrigin.call(map),this.updateRhoInput.call(map),this.updatePivotDot.call(map),this.displayCenter.call(this),this.displayBounds.call(this),this.displayPixelBounds.call(this),L.Browser.mobile&&map.compassBearing.enable(),map.on("mousemove",this.logMouse),map.on("locationfound",this.resetHeading),options.log&&map.on("click movestart move moveend zoomstart zoomend locationfound locationerror locationfound",this.logEvent)},logEvent:function(e){console.log(e,e.type)},logMouse:function(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},rotate:function(e){return 0!==e.buttons&&this._map.setBearing(e.target.valueAsNumber)},updatePixelOrigin:function(){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:function(){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:function(){var panePos=this._getMapPanePos();document.getElementById("pox").innerHTML=panePos.x,document.getElementById("poy").innerHTML=panePos.y},updateRhoInput:function(){document.getElementById("rho_input").value=this.getBearing()},rotateOneDegree:function(){var angle=document.getElementById("rho_input").valueAsNumber++;this.setBearing(angle<360?angle:0)},randomRotateMarkers:function(map){var markers=[],steps=[];for(var i in map._layers)map._layers[i]instanceof L.Marker&&(markers.push(map._layers[i]),steps.push(Math.random()*Math.PI/30+.1));function stepOn(steps_left){for(var i=0;i<markers.length;i++)markers[i].setRotation(markers[i].options.rotation+steps[i]);--steps_left&&setTimeout(stepOn.bind(null,steps_left),20)}stepOn(25)},randomMarkers:function(map,number){var map=this._map,populate=function(){for(var i=0;i<number;i++){var bounds=map.getBounds(),southWest=bounds.getSouthWest(),northEast=bounds.getNorthEast(),lngSpan=northEast.lng-southWest.lng,latSpan=northEast.lat-southWest.lat,m=L.marker(L.latLng(southWest.lat+latSpan*Math.random(),southWest.lng+lngSpan*Math.random()));m.addTo(L.Rotate._map),L.Rotate.___cluster.addLayer(m)}};this.___cluster?"function"==typeof L.markerClusterGroup&&populate():this.___cluster=import("https://unpkg.com/leaflet.markercluster@1.4.1/src/index.js").then(m=>{document.head.insertAdjacentHTML("beforeend",'\n              \x3c!-- Leaflet-MarkerCluster --\x3e\n              <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css">\n              <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css">\n            '),Object.assign(globalThis.L,m),this.___cluster=L.markerClusterGroup({spiderfyOnMaxZoom:!1,showCoverageOnHover:!1,zoomToBoundsOnClick:!1}).on("clusterclick",a=>a.layer.spiderfy()).addTo(map),populate()})},displayCenter:function(){var map=this._map;this.___centerMarker&&this.___centerMarker.remove(),this.___centerMarker=L.circleMarker(map.getCenter(),{radius:3,color:"red"}).addTo(map).bindTooltip("<b>center</b>",{direction:"right",permanent:!0}),this.___centerMarker.getTooltip().getElement().setAttribute("tabindex","-1")},displayBounds:function(){var map=this._map;this.___bounds&&this.___bounds.remove();var padding=document.getElementById("pad_input").valueAsNumber,latLngBounds=map.getBounds().pad(padding);this.___bounds=L.rectangle(latLngBounds,{fill:!1,lineCap:"square",color:"yellow",dashArray:"5, 10",weight:2}).addTo(map)},displayPixelBounds:function(){var map=this._map;this.___corners&&this.___corners.remove(),this.___pixelbounds&&this.___pixelbounds.remove();const size=map.getSize(),rect=map._container.getBoundingClientRect(),pixelBounds=map.getPixelBounds(),TL=L.point(rect),TR=L.point(rect).add(L.point(rect.width,0)),BR=L.point(rect).add(L.point(rect.width,rect.height)),BL=L.point(rect).add(L.point(0,rect.height)),topLeft=L.marker(map.containerPointToLatLng(TL),{title:"Top Left corner",rotation:135*L.DomUtil.DEG_TO_RAD}),topRight=L.marker(map.containerPointToLatLng(TR),{title:"Top Right corner",rotation:-135*L.DomUtil.DEG_TO_RAD}),bottomRight=L.marker(map.containerPointToLatLng(BR),{title:"Bottom Right corner",rotation:-45*L.DomUtil.DEG_TO_RAD}),bottomLeft=L.marker(map.containerPointToLatLng(BL),{title:"Bottom Left corner",rotation:-135*L.DomUtil.DEG_TO_RAD});this.___corners=L.featureGroup([topLeft,topRight,bottomRight,bottomLeft]).addTo(map).eachLayer(marker=>marker.getElement().style.filter="hue-rotate(150deg)"),document.getElementById("ogbx").innerHTML=JSON.stringify(pixelBounds.min),document.getElementById("ogby").innerHTML=JSON.stringify(pixelBounds.max)},resetHeading:function(e){null!==e.heading&&this.setBearing(e.heading)},locate:function(){this._map.locate({setView:!0,enableHighAccuracy:!0})}};

package/package.json

@@ -1,13 +1,16 @@
 {
 	"name": "leaflet-rotate",
-	"version": "0.1.4",
+	"version": "0.2.0",
 	"description": "A Leaflet plugin that allows to add rotation functionality to map tiles",
+	"type": "module",
 	"main": "dist/leaflet-rotate.js",
+	"browser": "dist/leaflet-rotate.js",
 	"module": "src/index.js",
 	"scripts": {
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"build": "rollup -c build/rollup.config.js",
-		"watch": "rollup -c build/rollup.config.js --watch",
+		"dev": "rollup -c build/rollup.config.js --watch",
+		"watch": "npm run dev",
 		"version": "npm run build && git add -A dist"
 	},
 	"repository": {
@@ -45,12 +48,12 @@
 	},
 	"homepage": "https://github.com/Raruto/leaflet-rotate#readme",
 	"devDependencies": {
-		"rollup": "^1.31.0",
-		"rollup-plugin-commonjs": "^10.1.0",
-		"rollup-plugin-node-resolve": "^5.2.0",
-		"rollup-plugin-terser": "^7.0.2"
+		"rollup": "^3.10.0",
+		"@rollup/plugin-commonjs": "^24.0.0",
+		"@rollup/plugin-node-resolve": "^15.0.1",
+		"@rollup/plugin-terser": "^0.3.0"
 	},
 	"peerDependencies": {
-		"leaflet": "^1.7.0"
+		"leaflet": "^1.9.3"
 	}
 }

package/src/control/Rotate.js

@@ -1,11 +1,13 @@
 /**
- * L.Control.Rotate
+ * A tri-state control for map rotation, states are:
+ * 
+ * - Locked (default)
+ * - Unlocked (user can pinch-rotate)
+ * - Follow (rotation follows device orientation, if available)
+ * 
+ * @typedef L.Control.Rotate
  */
 
-// A tri-state control for map rotation. States are:
-// Locked (default)
-// Unlocked (user can pinch-rotate)
-// Follow (rotation follows device orientation, if available)
 L.Control.Rotate = L.Control.extend({
 
     options: {
@@ -35,6 +37,7 @@ L.Control.Rotate = L.Control.extend({
         link.appendChild(arrow);
         link.href = '#';
         link.title = 'Rotate map';
+        // link.draggable = false;
 
         L.DomEvent
             .on(link, 'dblclick', L.DomEvent.stopPropagation)
@@ -63,7 +66,7 @@ L.Control.Rotate = L.Control.extend({
     },
 
     _handleMouseDown: function(e) {
-        L.DomEvent.stopPropagation(e);
+        L.DomEvent.stop(e); // L.DomEvent.stopPropagation(e);
         this.dragging = true;
         this.dragstartX = e.pageX;
         this.dragstartY = e.pageY;
@@ -73,7 +76,7 @@ L.Control.Rotate = L.Control.extend({
     },
 
     _handleMouseUp: function(e) {
-        L.DomEvent.stopPropagation(e);
+        L.DomEvent.stop(e); // L.DomEvent.stopPropagation(e);
         this.dragging = false;
 
         L.DomEvent

package/src/dom/DomUtil.js

@@ -1,6 +1,9 @@
 /**
- * L.DomUtil
+ * @external L.DomUtil
+ * 
+ * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/DomUtil.js
  */
+
 const domUtilProto = L.extend({}, L.DomUtil);
 
 L.extend(L.DomUtil, {

package/src/dom/Draggable.js

@@ -1,10 +1,13 @@
 /**
- * L.Draggable
+ * @external L.Draggable
+ * 
+ * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/dom/Draggable.js
  */
+
 L.Draggable.include({
 
-    updateMapBearing: function(mapBearing) {
-        this._mapBearing = mapBearing;
-    },
+    // updateMapBearing: function(mapBearing) {
+    //     this._mapBearing = mapBearing;
+    // },
 
-});
+});

package/src/geometry/Point.js

@@ -1,28 +1,32 @@
 /**
- * L.Point
+ * @external L.Point
+ * 
+ * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/geometry/Point.js
  */
+
 L.extend(L.Point.prototype, {
 
-    // Rotate around (0,0) by applying the 2D rotation matrix:
-    // ⎡ x' ⎤ = ⎡ cos θ  -sin θ ⎤ ⎡ x ⎤
-    // ⎣ y' ⎦   ⎣ sin θ   cos θ ⎦ ⎣ y ⎦
-    // Theta must be given in radians.
+    /**
+     * Rotate around (0,0) by applying the 2D rotation matrix:
+     * 
+     * ⎡ x' ⎤ = ⎡ cos θ  -sin θ ⎤ ⎡ x ⎤
+     * ⎣ y' ⎦   ⎣ sin θ   cos θ ⎦ ⎣ y ⎦
+     * 
+     * @param theta must be given in radians.
+     */
     rotate: function(theta) {
-        if (!theta) { return this; }
-        var sinTheta = Math.sin(theta);
-        var cosTheta = Math.cos(theta);
-
-        return new L.Point(
-            this.x * cosTheta - this.y * sinTheta,
-            this.x * sinTheta + this.y * cosTheta
-        );
+        return this.rotateFrom(theta, new L.Point(0,0))
     },
 
-    // Rotate around (pivot.x, pivot.y) by:
-    // 1. subtract (pivot.x, pivot.y)
-    // 2. rotate around (0, 0)
-    // 3. add (pivot.x, pivot.y) back
-    // same as `this.subtract(pivot).rotate(theta).add(pivot)`
+    /**
+     * Rotate around (pivot.x, pivot.y) by:
+     * 
+     * 1. subtract (pivot.x, pivot.y)
+     * 2. rotate around (0, 0)
+     * 3. add (pivot.x, pivot.y) back
+     * 
+     * same as `this.subtract(pivot).rotate(theta).add(pivot)`
+     */
     rotateFrom: function(theta, pivot) {
         if (!theta) { return this; }
         var sinTheta = Math.sin(theta);

package/src/index.js

@@ -1,12 +1,14 @@
 /**
- * Based on Leaflet structure (ver. 1.7)
+ * @external L
  *
- * @see https://github.com/Leaflet/Leaflet/blob/master/src/Leaflet.js
+ * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/Leaflet.js
  */
 
 // import {version} from '../package.json';
 // export {version};
 
+// control
+// export * from './core/index';
 
 // core
 // export * from './core/index';
@@ -41,5 +43,5 @@ export * from './map/handler/TouchRotate';
 export * from './map/handler/ShiftKeyRotate';
 export * from './map/handler/TouchZoom';
 
-// control
+// custom controls
 export * from './control/Rotate';

package/src/layer/DivOverlay.js

@@ -1,6 +1,9 @@
 /**
- * L.DivOverlay
+ * @external L.DivOverlay
+ * 
+ * @see https://github.com/Leaflet/Leaflet/tree/v1.9.3/src/layer/DivOverlay.js
  */
+
 const divOverlayProto = L.extend({}, L.DivOverlay.prototype);
 
 L.DivOverlay.include({
@@ -10,28 +13,17 @@ L.DivOverlay.include({
     },
 
     _updatePosition: function() {
-        if (!this._map) { return; }
-
-        var pos = this._map.latLngToLayerPoint(this._latlng),
-            offset = L.point(this.options.offset),
-            anchor = this._getAnchor();
-
-        if (this._zoomAnimated) {
-            // TODO: use divOverlayProto._updatePosition
-            if (this._map._rotate) {
-                pos = this._map.rotatedPointToMapPanePoint(pos);
-            }
-            L.DomUtil.setPosition(this._container, pos.add(anchor));
-        } else {
-            offset = offset.add(pos).add(anchor);
+        // 0. update anchor (leaflet v1.9.3)
+        divOverlayProto._updatePosition.call(this);
+        // 1. subtract anchor
+        // 2. rotate element
+        // 3. restore anchor
+        if (this._map && this._map._rotate && this._zoomAnimated) {
+            var anchor = this._getAnchor();
+            var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
+            L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
         }
 
-        var bottom = this._containerBottom = -offset.y,
-            left = this._containerLeft = -Math.round(this._containerWidth / 2) + offset.x;
-
-        // bottom position the popup in case the height of the popup changes (images loading etc)
-        this._container.style.bottom = bottom + 'px';
-        this._container.style.left = left + 'px';
     },
 
 });