leaflet-rotate 0.2.0 → 0.2.1

package/lib/debug.js

@@ -194,6 +194,8 @@ L.Rotate = {
         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.displayLayersBounds.bind(this));
+        padInput.addEventListener('mousemove', L.Rotate.displayLayersBounds.bind(this));
         padInput.addEventListener('change', L.Rotate.displayPixelBounds.bind(this));
         padInput.addEventListener('mousemove', L.Rotate.displayPixelBounds.bind(this));
 
@@ -203,6 +205,7 @@ L.Rotate = {
         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.displayLayersBounds.bind(this));
         map.on('moveend zoomend resetview rotate', this.displayPixelBounds.bind(this));
 
         this.updatePixelOrigin.call(map);
@@ -210,6 +213,7 @@ L.Rotate = {
         this.updatePivotDot.call(map);
         this.displayCenter.call(this);
         this.displayBounds.call(this);
+        this.displayLayersBounds.call(this);
         this.displayPixelBounds.call(this);
 
         if (L.Browser.mobile) {
@@ -252,20 +256,24 @@ L.Rotate = {
      * Debug L.Map._pixelOrigin
      */
     updatePixelOrigin: function() {
+      if (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';
+      }
     },
 
     /**
      * Debug L.Map._pivot
      */
     updatePivotDot: function() {
+      if (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';
+      }
     },
 
     /**
@@ -330,7 +338,7 @@ L.Rotate = {
           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);
+          // m.addTo(L.Rotate._map);
           L.Rotate.___cluster.addLayer(m);
         }
       }
@@ -381,6 +389,7 @@ L.Rotate = {
       if (this.___bounds) {
         this.___bounds.remove();
       }
+
       var padding = document.getElementById('pad_input').valueAsNumber;
       var latLngBounds = map.getBounds().pad(padding)
       this.___bounds = L.rectangle(latLngBounds, {
@@ -393,6 +402,35 @@ L.Rotate = {
       }).addTo(map);
     },
 
+    /**
+     * DEBUG: map.flyToBounds(path.getBounds())
+     */
+    displayLayersBounds: function() {
+      for (const flytopath of ['path', 'polygon', 'circle']) {
+        if (!globalThis[flytopath]) {
+          continue;
+        } else if (this[`___${flytopath}bounds`]) {
+          this[`___${flytopath}bounds`].remove();
+        }
+        let layer = globalThis[flytopath];
+        let layerBounds = layer.getBounds();
+        this[`___${flytopath}bounds`] = L.featureGroup([
+          L.rectangle(layerBounds, {
+            fill: false,
+            lineCap: 'square',
+            color: 'yellow',
+            dashArray: '5, 10',
+            weight: 1,
+            opacity: 0.5
+          }),
+          L.marker(layerBounds.getNorthWest(), { scale: 0.5, rotation: -45 * L.DomUtil.DEG_TO_RAD, rotateWithView: true }).bindTooltip('<b>NW</b>', {direction: 'center'}),
+          L.marker(layerBounds.getNorthEast(), { scale: 0.5, rotation: 45 * L.DomUtil.DEG_TO_RAD, rotateWithView: true }).bindTooltip('<b>NE</b>', {direction: 'center'}),
+          L.marker(layerBounds.getSouthEast(), { scale: 0.5, rotation: 135 * L.DomUtil.DEG_TO_RAD, rotateWithView: true }).bindTooltip('<b>SE</b>', {direction: 'center'}),
+          L.marker(layerBounds.getSouthWest(), { scale: 0.5, rotation: -135 * L.DomUtil.DEG_TO_RAD, rotateWithView: true }).bindTooltip('<b>SW</b>', {direction: 'center'}),
+        ]).addTo(map).eachLayer(m => { if (m.getElement && m.getElement()) m.getElement().style.filter = 'hue-rotate(150deg)'; });
+      }
+    },
+
     /**
      * @TODO Debug L.Map.getPixelBounds()
      */
@@ -410,9 +448,9 @@ L.Rotate = {
       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 topLeft     = L.marker( map.containerPointToLatLng(TL), { title: 'Top Left corner', rotation: -45 * L.DomUtil.DEG_TO_RAD } );
+      const topRight    = L.marker( map.containerPointToLatLng(TR), { title: 'Top Right corner', rotation: 45 * L.DomUtil.DEG_TO_RAD } );
+      const bottomRight = L.marker( map.containerPointToLatLng(BR), { title: 'Bottom Right corner', rotation: 135 * 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)');

package/lib/debug.min.js

@@ -1 +1 @@
-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})}};
+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.displayLayersBounds.bind(this)),padInput.addEventListener("mousemove",L.Rotate.displayLayersBounds.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.displayLayersBounds.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.displayLayersBounds.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(){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:function(){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: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()));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)},displayLayersBounds:function(){for(const flytopath of["path","polygon","circle"]){if(!globalThis[flytopath])continue;this[`___${flytopath}bounds`]&&this[`___${flytopath}bounds`].remove();let layer,layerBounds=globalThis[flytopath].getBounds();this[`___${flytopath}bounds`]=L.featureGroup([L.rectangle(layerBounds,{fill:!1,lineCap:"square",color:"yellow",dashArray:"5, 10",weight:1,opacity:.5}),L.marker(layerBounds.getNorthWest(),{scale:.5,rotation:-45*L.DomUtil.DEG_TO_RAD,rotateWithView:!0}).bindTooltip("<b>NW</b>",{direction:"center"}),L.marker(layerBounds.getNorthEast(),{scale:.5,rotation:45*L.DomUtil.DEG_TO_RAD,rotateWithView:!0}).bindTooltip("<b>NE</b>",{direction:"center"}),L.marker(layerBounds.getSouthEast(),{scale:.5,rotation:135*L.DomUtil.DEG_TO_RAD,rotateWithView:!0}).bindTooltip("<b>SE</b>",{direction:"center"}),L.marker(layerBounds.getSouthWest(),{scale:.5,rotation:-135*L.DomUtil.DEG_TO_RAD,rotateWithView:!0}).bindTooltip("<b>SW</b>",{direction:"center"})]).addTo(map).eachLayer(m=>{m.getElement&&m.getElement()&&(m.getElement().style.filter="hue-rotate(150deg)")})}},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:-45*L.DomUtil.DEG_TO_RAD}),topRight=L.marker(map.containerPointToLatLng(TR),{title:"Top Right corner",rotation:45*L.DomUtil.DEG_TO_RAD}),bottomRight=L.marker(map.containerPointToLatLng(BR),{title:"Bottom Right corner",rotation:135*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,6 +1,6 @@
 {
 	"name": "leaflet-rotate",
-	"version": "0.2.0",
+	"version": "0.2.1",
 	"description": "A Leaflet plugin that allows to add rotation functionality to map tiles",
 	"type": "module",
 	"main": "dist/leaflet-rotate.js",

package/src/dom/DomUtil.js

@@ -13,7 +13,7 @@ L.extend(L.DomUtil, {
 
         if (!bearing) {
             offset = pos._round();
-            return domUtilProto.setTransform.call(this, el, offset, scale);
+            return domUtilProto.setTransform.apply(this, arguments);
         }
 
         pos = pos.rotateFrom(bearing, pivot);
@@ -24,9 +24,9 @@ L.extend(L.DomUtil, {
             ' rotate(' + bearing + 'rad)';
     },
 
-    setPosition: function(el, point, bearing, pivot) { // (HTMLElement, Point[, Boolean])
+    setPosition: function(el, point, bearing, pivot, scale) { // (HTMLElement, Point[, Boolean])
         if (!bearing) {
-            return domUtilProto.setPosition.call(this, el, point);
+            return domUtilProto.setPosition.apply(this, arguments);
         }
 
         /*eslint-disable */
@@ -34,7 +34,7 @@ L.extend(L.DomUtil, {
         /*eslint-enable */
 
         if (L.Browser.any3d) {
-            L.DomUtil.setTransform(el, point, undefined, bearing, pivot);
+            L.DomUtil.setTransform(el, point, scale, bearing, pivot);
         } else {
             el.style.left = point.x + 'px';
             el.style.top = point.y + 'px';

package/src/layer/DivOverlay.js

@@ -9,12 +9,12 @@ const divOverlayProto = L.extend({}, L.DivOverlay.prototype);
 L.DivOverlay.include({
 
     getEvents: function() {
-        return L.extend(divOverlayProto.getEvents.call(this), { rotate: this._updatePosition });
+        return L.extend(divOverlayProto.getEvents.apply(this, arguments), { rotate: this._updatePosition });
     },
 
     _updatePosition: function() {
         // 0. update anchor (leaflet v1.9.3)
-        divOverlayProto._updatePosition.call(this);
+        divOverlayProto._updatePosition.apply(this, arguments);
         // 1. subtract anchor
         // 2. rotate element
         // 3. restore anchor

package/src/layer/Popup.js

@@ -10,7 +10,7 @@ L.Popup.include({
 
     _animateZoom: function(e) {
         // 0. update anchor (leaflet v1.9.3)
-        popupProto._animateZoom.call(this, e);
+        popupProto._animateZoom.apply(this, arguments);
         // 1. subtract anchor
         // 2. rotate element
         // 3. restore anchor

package/src/layer/Tooltip.js

@@ -10,7 +10,7 @@ L.Tooltip.include({
 
     _animateZoom: function(e) {
         if (!this._map._rotate) {
-            return tooltipProto._animateZoom.call(this, e);
+            return tooltipProto._animateZoom.apply(this, arguments);
         }
         var pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center);
 
@@ -20,7 +20,7 @@ L.Tooltip.include({
 
     _updatePosition: function() {
         if (!this._map._rotate) {
-            return tooltipProto._updatePosition.call(this);
+            return tooltipProto._updatePosition.apply(this, arguments);
         }
         var pos = this._map.latLngToLayerPoint(this._latlng);
 

package/src/layer/marker/Marker.js

@@ -17,6 +17,10 @@ L.Marker.mergeOptions({
     // Rotate this marker when map rotates
     rotateWithView: false,
 
+    // @option scale: Number = undefined
+    // Scale of the marker icon
+    scale: undefined,
+
 });
 
 var markerDragProto; // retrived at runtime (see below: L.Marker::_initInteraction())
@@ -25,7 +29,7 @@ var MarkerDrag = {
 
     // _onDragStart: function() {
     //     if (!this._marker._map._rotate) {
-    //         return markerDragProto._onDragStart.call(this)
+    //         return markerDragProto._onDragStart.apply(this, arguments);
     //     }
     //     this._draggable.updateMapBearing(this._marker._map._bearing);
     // },
@@ -68,7 +72,7 @@ var MarkerDrag = {
         if (this._marker._map._rotate) {
             this._marker.update();
         }
-        markerDragProto._onDragEnd.call(this, e);
+        markerDragProto._onDragEnd.apply(this, arguments);
     },
 
 };
@@ -76,16 +80,16 @@ var MarkerDrag = {
 L.Marker.include({
 
     getEvents: function() {
-        return L.extend(markerProto.getEvents.call(this), { rotate: this.update });
+        return L.extend(markerProto.getEvents.apply(this, arguments), { rotate: this.update });
     },
 
     onAdd: function(map) {
-        markerProto.onAdd.call(this, map);
+        markerProto.onAdd.apply(this, arguments);
         map.on('rotate', this.update, this);
     },
 
     _initInteraction: function() {
-        var ret = markerProto._initInteraction.call(this);
+        var ret = markerProto._initInteraction.apply(this, arguments);
         if (this.dragging && this.dragging.enabled() && this._map && this._map._rotate) {
             // L.Handler.MarkerDrag is used internally by L.Marker to make the markers draggable
             markerDragProto = markerDragProto || Object.getPrototypeOf(this.dragging);
@@ -115,12 +119,12 @@ L.Marker.include({
 
         /** @TODO use markerProto._setPos */
         if (this._icon) {
-            L.DomUtil.setPosition(this._icon, pos, bearing, pos);
+            L.DomUtil.setPosition(this._icon, pos, bearing, pos, this.options.scale);
         }
 
         /** @TODO use markerProto._setPos */
         if (this._shadow) {
-            L.DomUtil.setPosition(this._shadow, pos, bearing, pos);
+            L.DomUtil.setPosition(this._shadow, pos, bearing, pos, this.options.scale);
         }
 
         this._zIndex = pos.y + this.options.zIndexOffset;
@@ -130,7 +134,7 @@ L.Marker.include({
 
     _updateZIndex: function(offset) {
         if (!this._map._rotate) {
-            return markerProto._updateZIndex.call(this, offset)
+            return markerProto._updateZIndex.apply(this, arguments);
         }
         this._icon.style.zIndex = Math.round(this._zIndex + offset);
     },

package/src/layer/tile/GridLayer.js

@@ -9,7 +9,7 @@ const gridLayerProto = L.extend({}, L.GridLayer.prototype);
 L.GridLayer.include({
 
     getEvents: function() {
-        var events = gridLayerProto.getEvents.call(this);
+        var events = gridLayerProto.getEvents.apply(this, arguments);
         if (this._map._rotate && !this.options.updateWhenIdle) {
             if (!this._onRotate) {
                 this._onRotate = L.Util.throttle(this._onMoveEnd, this.options.updateInterval, this);
@@ -21,7 +21,7 @@ L.GridLayer.include({
 
     _getTiledPixelBounds: function(center) {
         if (!this._map._rotate) {
-            return gridLayerProto._getTiledPixelBounds.call(this, center);
+            return gridLayerProto._getTiledPixelBounds.apply(this, arguments);
         }
 
         return this._map._getNewPixelBounds(center, this._tileZoom);

package/src/layer/vector/Canvas.js

@@ -9,18 +9,18 @@ const canvasProto = L.extend({}, L.Canvas.prototype);
 L.Canvas.include({
 
     // onAdd: function() {
-    //     canvasProto.onAdd.call(this);
+    //     canvasProto.onAdd.apply(this, arguments);
     //     // When rotating the canvas itself, it is cleared by some weird reason, so redraw.
     //     this._map.on('rotate', this._redraw, this);
     // },
 
     // onRemove: function() {
-    //     canvasProto.onRemove.call(this);
+    //     canvasProto.onRemove.apply(this, arguments);
     //     this._map.off('rotate', this._redraw, this);
     // },
 
     // _update: function() {
-    //     canvasProto._update.call(this);
+    //     canvasProto._update.apply(this, arguments);
     //     // Tell paths to redraw themselves
     //     this.fire('update')
     // },

package/src/layer/vector/Renderer.js

@@ -9,12 +9,12 @@ const rendererProto = L.extend({}, L.Renderer.prototype);
 L.Renderer.include({
 
     // onAdd: function() {
-    //     rendererProto.onAdd.call(this);
+    //     rendererProto.onAdd.apply(this, arguments);
     //     // this._map.on('rotate', this._update, this);
     // },
 
     // onRemove: function() {
-    //     rendererProto.onRemove.call(this);
+    //     rendererProto.onRemove.apply(this, arguments);
     //     // this._map.off('rotate', this._update, this);
     // },
 
@@ -25,7 +25,7 @@ L.Renderer.include({
      */
     _updateTransform: function(center, zoom) {
         if (!this._map._rotate) {
-            return rendererProto._updateTransform.call(this, center, zoom);
+            return rendererProto._updateTransform.apply(this, arguments);
         }
         var scale = this._map.getZoomScale(zoom, this._zoom),
             offset = this._map._latLngToNewLayerPoint(this._topLeft, zoom, center);
@@ -38,7 +38,7 @@ L.Renderer.include({
 
     _update: function() {
         if (!this._map._rotate) {
-            return rendererProto._update.call(this);
+            return rendererProto._update.apply(this, arguments);
         }
         // Update pixel bounds of renderer container (for positioning/sizing/clipping later)
         // Subclasses are responsible of firing the 'update' event.

package/src/layer/vector/SVG.js

@@ -9,7 +9,7 @@ const svgProto = L.extend({}, L.SVG.prototype);
 L.SVG.include({
 
     // _update: function() {
-    //     svgProto._update.call(this);
+    //     svgProto._update.apply(this, arguments);
     //     if (this._map._rotate) {
     //         this.fire('update');
     //     }