leaflet-rotate 0.3.0 → 0.5.0

package/lib/debug.js

@@ -1,6 +1,9 @@
-L.Rotate = {
+(function() {
+  const L = Object.isExtensible(globalThis.L) ? globalThis.L : Object.assign({}, globalThis.L);
+  globalThis.L = L;
+  L.Rotate = {
 
-    debug: function(map, options = {}) {
+    debug(map, options = {}) {
 
         this._map = map;
 
@@ -187,8 +190,8 @@ L.Rotate = {
         this.___mainBounds = L.DomUtil.create('div', 'panebounds main', map._mapPane);
         this.updatePaneBounds();
 
-        var rhoInput = document.getElementById('rho_input');
-        var padInput = document.getElementById('pad_input');
+        const rhoInput = document.getElementById('rho_input');
+        const padInput = document.getElementById('pad_input');
 
         rhoInput.addEventListener('change', L.Rotate.rotate.bind(this));
         rhoInput.addEventListener('mousemove', L.Rotate.rotate.bind(this));
@@ -224,7 +227,23 @@ L.Rotate = {
             map.compassBearing.enable();
         }
 
-        map.on('mousemove', this.logMouse);
+        if (L.version.startsWith('2.')) {
+            const container = map.getContainer();
+            container.addEventListener('mousemove', function(e) {
+                const rect = container.getBoundingClientRect(),
+                    containerPoint = new L.Point(
+                        e.clientX - rect.left - container.clientLeft,
+                        e.clientY - rect.top - container.clientTop
+                    );
+                L.Rotate.logMouse.call(map, {
+                    latlng: map.containerPointToLatLng(containerPoint),
+                    layerPoint: map.containerPointToLayerPoint(containerPoint),
+                    containerPoint: containerPoint
+                });
+            });
+        } else {
+            map.on('mousemove', this.logMouse);
+        }
         map.on('locationfound', this.resetHeading);
 
         if (options.log) {
@@ -236,11 +255,11 @@ L.Rotate = {
 
     },
 
-    logEvent: function(e) {
+    logEvent(e) {
         console.log(e, e.type);
     },
 
-    logMouse: function(e) {
+    logMouse(e) {
         document.getElementById('llx').innerHTML = e.latlng.lng;
         document.getElementById('lly').innerHTML = e.latlng.lat;
         document.getElementById('lyx').innerHTML = e.layerPoint.x;
@@ -252,11 +271,11 @@ L.Rotate = {
     /**
      * Debug L.Map.setBearing()
      */
-    rotate: function(e) {
+    rotate(e) {
         return (e.type !== 'mousemove' || e.buttons !== 0) && this._map.setBearing(e.target.valueAsNumber);
     },
 
-    updatePaneBounds: function() {
+    updatePaneBounds() {
       const size = this._map.getSize();
       for (const bounds of [this.___rotateBounds, this.___mainBounds]) {
         bounds.style.width = size.x + 'px';
@@ -267,7 +286,7 @@ L.Rotate = {
     /**
      * Debug L.Map._pixelOrigin
      */
-    updatePixelOrigin: function() {
+    updatePixelOrigin() {
       if (this._pixelOrigin) {
         document.getElementById('ogx').innerHTML = this._pixelOrigin.x;
         document.getElementById('ogy').innerHTML = this._pixelOrigin.y;
@@ -279,7 +298,7 @@ L.Rotate = {
     /**
      * Debug L.Map._pivot
      */
-    updatePivotDot: function() {
+    updatePivotDot() {
       if (this._pivot) {
         document.getElementById('pvx').innerHTML = this._pivot.x;
         document.getElementById('pvy').innerHTML = this._pivot.y;
@@ -291,8 +310,8 @@ L.Rotate = {
     /**
      * Debug L.Map._getMapPanePos()
      */
-    updatePanePos: function() {
-        var panePos = this._getMapPanePos();
+    updatePanePos() {
+        const panePos = this._getMapPanePos();
         document.getElementById('pox').innerHTML = panePos.x;
         document.getElementById('poy').innerHTML = panePos.y;
     },
@@ -300,26 +319,26 @@ L.Rotate = {
     /**
      * Debug L.Map.getBearing()
      */
-    updateRhoInput: function() {
+    updateRhoInput() {
       document.getElementById('rho_input').value = this.getBearing();
     },
 
     /**
      * Debug L.Map.setBearing()
      */
-    rotateOneDegree: function() {
-        var angle = document.getElementById('rho_input').valueAsNumber++;
+    rotateOneDegree() {
+        const angle = document.getElementById('rho_input').valueAsNumber++;
         this.setBearing(angle < 360 ? angle : 0);
     },
 
     /**
      * Debug L.Marker.setRotation()
      */
-    randomRotateMarkers: function(map) {
-        var markers = [],
+    randomRotateMarkers(map) {
+        const markers = [],
             steps = [];
 
-        for (var i in map._layers) {
+        for (const i in map._layers) {
             if (map._layers[i] instanceof L.Marker) {
                 markers.push(map._layers[i]);
                 steps.push(Math.random() * Math.PI / 30 + 0.1);
@@ -327,7 +346,7 @@ L.Rotate = {
         }
 
         function stepOn(steps_left) {
-            for (var i = 0; i < markers.length; i++) {
+            for (let 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);
@@ -339,17 +358,17 @@ L.Rotate = {
     /**
      * Debug L.Map.panInside()
      */
-    randomMarkers: function(map, number) {
-      var map = this._map;
-      var populate = function() {
+    randomMarkers(map, number) {
+      map = this._map;
+      const 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()) );
+        for (let i = 0; i < number; i++) {
+          const bounds = map.getBounds();
+          const southWest = bounds.getSouthWest();
+          const northEast = bounds.getNorthEast();
+          const lngSpan = northEast.lng - southWest.lng;
+          const latSpan = northEast.lat - southWest.lat;
+          const m = new L.Marker(new L.LatLng(southWest.lat + latSpan * Math.random(), southWest.lng + lngSpan * Math.random()));
           // m.addTo(L.Rotate._map);
           L.Rotate.___cluster.addLayer(m);
         }
@@ -381,12 +400,12 @@ L.Rotate = {
     /**
      * Debug L.Map.getCenter()
      */
-    displayCenter: function() {
-        var map = this._map;
+    displayCenter() {
+        const map = this._map;
         if (this.___centerMarker) {
             this.___centerMarker.remove();
         }
-        this.___centerMarker = L.circleMarker(map.getCenter(), {
+        this.___centerMarker = new L.CircleMarker(map.getCenter(), {
             radius: 3,
             color: 'red',
         }).addTo(map).bindTooltip('<b>center</b>', { direction: 'right', permanent: true, });
@@ -396,15 +415,15 @@ L.Rotate = {
     /**
      * Debug L.Map.getCenter()
      */
-    displayBounds: function() {
-      var map = this._map;
+    displayBounds() {
+      const 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, {
+      const padding = document.getElementById('pad_input').valueAsNumber;
+      const latLngBounds = map.getBounds().pad(padding)
+      this.___bounds = new L.Rectangle(latLngBounds, {
           fill: false,
           lineCap: 'square',
           color: 'yellow',
@@ -417,17 +436,17 @@ L.Rotate = {
     /**
      * DEBUG: map.flyToBounds(path.getBounds())
      */
-    displayLayersBounds: function() {
+    displayLayersBounds() {
       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, {
+        const layer = globalThis[flytopath];
+        const layerBounds = layer.getBounds();
+        this[`___${flytopath}bounds`] = new L.FeatureGroup([
+          new L.Rectangle(layerBounds, {
             fill: false,
             lineCap: 'square',
             color: 'yellow',
@@ -435,10 +454,10 @@ L.Rotate = {
             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'}),
+          new L.Marker(layerBounds.getNorthWest(), { scale: 0.5, rotation: -45 * (Math.PI / 180), rotateWithView: true }).bindTooltip('<b>NW</b>', {direction: 'center'}),
+          new L.Marker(layerBounds.getNorthEast(), { scale: 0.5, rotation: 45 * (Math.PI / 180), rotateWithView: true }).bindTooltip('<b>NE</b>', {direction: 'center'}),
+          new L.Marker(layerBounds.getSouthEast(), { scale: 0.5, rotation: 135 * (Math.PI / 180), rotateWithView: true }).bindTooltip('<b>SE</b>', {direction: 'center'}),
+          new L.Marker(layerBounds.getSouthWest(), { scale: 0.5, rotation: -135 * (Math.PI / 180), rotateWithView: true }).bindTooltip('<b>SW</b>', {direction: 'center'}),
         ]).addTo(map).eachLayer(m => { if (m.getElement && m.getElement()) m.getElement().style.filter = 'hue-rotate(150deg)'; });
       }
     },
@@ -446,25 +465,23 @@ L.Rotate = {
     /**
      * @TODO Debug L.Map.getPixelBounds()
      */
-    displayPixelBounds: function() {
-      var map = this._map;
+    displayPixelBounds() {
+      const map = this._map;
       this.___corners     && this.___corners.remove();
       this.___pixelbounds && this.___pixelbounds.remove();
 
       const size = map.getSize();
       const pixelBounds = map.getPixelBounds();
 
-      const TL = L.point(0, 0);
-      const TR = L.point(size.x, 0);
-      const BR = L.point(size.x, size.y);
-      const BL = L.point(0, size.y);
-
-      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)');
+      const TL = new L.Point(0, 0);
+      const TR = new L.Point(size.x, 0);
+      const BR = new L.Point(size.x, size.y);
+      const BL = new L.Point(0, size.y);
+      const topLeft     = new L.Marker(map.containerPointToLatLng(TL), { title: 'Top Left corner', rotation: -45 * (Math.PI / 180) });
+      const topRight    = new L.Marker(map.containerPointToLatLng(TR), { title: 'Top Right corner', rotation: 45 * (Math.PI / 180) });
+      const bottomRight = new L.Marker(map.containerPointToLatLng(BR), { title: 'Bottom Right corner', rotation: 135 * (Math.PI / 180) });
+      const bottomLeft  = new L.Marker(map.containerPointToLatLng(BL), { title: 'Bottom Left corner', rotation: -135 * (Math.PI / 180) });
+      this.___corners = new L.FeatureGroup([topLeft, topRight, bottomRight, bottomLeft]).addTo(map).eachLayer(marker => marker.getElement().style.filter = 'hue-rotate(150deg)');
 
       // L.polyline([
       //   [topLeft.getLatLng(), topRight.getLatLng()],
@@ -504,9 +521,9 @@ L.Rotate = {
       //     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()) ]),
+      // const paddingTL = new L.Point(L.Marker.prototype.options.icon.options.iconAnchor || [0, 0]),
+      //   paddingBR = new L.Point(L.Marker.prototype.options.icon.options.iconSize || [0, 0]).subtract(paddingTL),
+      //   pixelBounds = new L.Bounds([new L.Point(rect), new L.Point(rect).add(map.getSize()) ]),
       //   paddedBounds = L.latLngBounds([
       //     map.layerPointToLatLng(pixelBounds.min.add(paddingTL)),
       //     map.layerPointToLatLng(pixelBounds.max.subtract(paddingBR))
@@ -517,7 +534,7 @@ L.Rotate = {
       document.getElementById('ogby').innerHTML = JSON.stringify(pixelBounds.max);
     },
 
-    resetHeading: function(e) {
+    resetHeading(e) {
         if (e.heading !== null) {
             this.setBearing(e.heading);
         }
@@ -526,11 +543,12 @@ L.Rotate = {
     /**
      * Debug L.Map.locate()
      */
-    locate: function() {
+    locate() {
         this._map.locate({
             setView: true,
             enableHighAccuracy: true
         });
     }
 
-};
+  };
+})();

package/lib/debug.min.js

@@ -1 +1 @@
-L.Rotate={debug:function(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=L.DomUtil.create("div","pixelorigin",t._rotatePane),t.___rotatePivotDot=L.DomUtil.create("div","pivot",t._mapPane),this.___rotateBounds=L.DomUtil.create("div","panebounds rotate",t._rotatePane),this.___mainBounds=L.DomUtil.create("div","panebounds main",t._mapPane),this.updatePaneBounds();var e=document.getElementById("rho_input"),o=document.getElementById("pad_input");e.addEventListener("change",L.Rotate.rotate.bind(this)),e.addEventListener("mousemove",L.Rotate.rotate.bind(this)),o.addEventListener("change",L.Rotate.displayCenter.bind(this)),o.addEventListener("mousemove",L.Rotate.displayCenter.bind(this)),o.addEventListener("change",L.Rotate.displayBounds.bind(this)),o.addEventListener("mousemove",L.Rotate.displayBounds.bind(this)),o.addEventListener("change",L.Rotate.displayLayersBounds.bind(this)),o.addEventListener("mousemove",L.Rotate.displayLayersBounds.bind(this)),o.addEventListener("change",L.Rotate.displayPixelBounds.bind(this)),o.addEventListener("mousemove",L.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),L.Browser.mobile&&t.compassBearing.enable(),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:function(t){console.log(t,t.type)},logMouse:function(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:function(t){return(t.type!=="mousemove"||t.buttons!==0)&&this._map.setBearing(t.target.valueAsNumber)},updatePaneBounds:function(){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: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 t=this._getMapPanePos();document.getElementById("pox").innerHTML=t.x,document.getElementById("poy").innerHTML=t.y},updateRhoInput:function(){document.getElementById("rho_input").value=this.getBearing()},rotateOneDegree:function(){var t=document.getElementById("rho_input").valueAsNumber++;this.setBearing(t<360?t:0)},randomRotateMarkers:function(t){var n=[],e=[];for(var o in t._layers)t._layers[o]instanceof L.Marker&&(n.push(t._layers[o]),e.push(Math.random()*Math.PI/30+.1));function a(r){for(var i=0;i<n.length;i++)n[i].setRotation(n[i].options.rotation+e[i]);--r&&setTimeout(a.bind(null,r),20)}a(25)},randomMarkers:function(e,n){var e=this._map,o=function(){for(var a=0;a<n;a++){var r=e.getBounds(),i=r.getSouthWest(),s=r.getNorthEast(),d=s.lng-i.lng,l=s.lat-i.lat,c=L.marker(L.latLng(i.lat+l*Math.random(),i.lng+d*Math.random()));L.Rotate.___cluster.addLayer(c)}};this.___cluster?typeof L.markerClusterGroup=="function"&&o():this.___cluster=import("https://unpkg.com/leaflet.markercluster@1.4.1/src/index.js").then(a=>{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,a),this.___cluster=L.markerClusterGroup({spiderfyOnMaxZoom:!1,showCoverageOnHover:!1,zoomToBoundsOnClick:!1}).on("clusterclick",r=>r.layer.spiderfy()).addTo(e),o()})},displayCenter:function(){var t=this._map;this.___centerMarker&&this.___centerMarker.remove(),this.___centerMarker=L.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:function(){var t=this._map;this.___bounds&&this.___bounds.remove();var n=document.getElementById("pad_input").valueAsNumber,e=t.getBounds().pad(n);this.___bounds=L.rectangle(e,{fill:!1,lineCap:"square",color:"yellow",dashArray:"5, 10",weight:2}).addTo(t)},displayLayersBounds:function(){for(const t of["path","polygon","circle"]){if(globalThis[t])this[`___${t}bounds`]&&this[`___${t}bounds`].remove();else continue;let e=globalThis[t].getBounds();this[`___${t}bounds`]=L.featureGroup([L.rectangle(e,{fill:!1,lineCap:"square",color:"yellow",dashArray:"5, 10",weight:1,opacity:.5}),L.marker(e.getNorthWest(),{scale:.5,rotation:-45*L.DomUtil.DEG_TO_RAD,rotateWithView:!0}).bindTooltip("<b>NW</b>",{direction:"center"}),L.marker(e.getNorthEast(),{scale:.5,rotation:45*L.DomUtil.DEG_TO_RAD,rotateWithView:!0}).bindTooltip("<b>NE</b>",{direction:"center"}),L.marker(e.getSouthEast(),{scale:.5,rotation:135*L.DomUtil.DEG_TO_RAD,rotateWithView:!0}).bindTooltip("<b>SE</b>",{direction:"center"}),L.marker(e.getSouthWest(),{scale:.5,rotation:-135*L.DomUtil.DEG_TO_RAD,rotateWithView:!0}).bindTooltip("<b>SW</b>",{direction:"center"})]).addTo(map).eachLayer(o=>{o.getElement&&o.getElement()&&(o.getElement().style.filter="hue-rotate(150deg)")})}},displayPixelBounds:function(){var t=this._map;this.___corners&&this.___corners.remove(),this.___pixelbounds&&this.___pixelbounds.remove();const n=t.getSize(),e=t.getPixelBounds(),o=L.point(0,0),a=L.point(n.x,0),r=L.point(n.x,n.y),i=L.point(0,n.y),s=L.marker(t.containerPointToLatLng(o),{title:"Top Left corner",rotation:-45*L.DomUtil.DEG_TO_RAD}),d=L.marker(t.containerPointToLatLng(a),{title:"Top Right corner",rotation:45*L.DomUtil.DEG_TO_RAD}),l=L.marker(t.containerPointToLatLng(r),{title:"Bottom Right corner",rotation:135*L.DomUtil.DEG_TO_RAD}),c=L.marker(t.containerPointToLatLng(i),{title:"Bottom Left corner",rotation:-135*L.DomUtil.DEG_TO_RAD});this.___corners=L.featureGroup([s,d,l,c]).addTo(t).eachLayer(u=>u.getElement().style.filter="hue-rotate(150deg)"),document.getElementById("ogbx").innerHTML=JSON.stringify(e.min),document.getElementById("ogby").innerHTML=JSON.stringify(e.max)},resetHeading:function(t){t.heading!==null&&this.setBearing(t.heading)},locate:function(){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,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})}}})();

package/misc/leaflet-heat-rotate.js

@@ -1,3 +1,10 @@
+/*
+ * For Leaflet.heat (https://github.com/Leaflet/Leaflet.heat) or the heatmap.js
+ * Leaflet plugin (https://github.com/pa7/heatmap.js/tree/master/plugins/leaflet-heatmap),
+ * load this file after the heatmap plugin. It adapts heat redraw coordinates to
+ * the rotated pane.
+ */
+
 if (!L.HeatLayer && !globalThis.HeatmapOverlay) {
     throw new Error('Load Leaflet.heat or heatmap.js Leaflet plugin before this adapter.');
 }
@@ -9,7 +16,7 @@ if (L.HeatLayer) {
     const heatLayerAnimateZoom = L.HeatLayer.prototype._animateZoom;
 
     L.HeatLayer.include({
-        onAdd: function(map) {
+        onAdd(map) {
             heatLayerOnAdd.apply(this, arguments);
             if (map._rotate) {
                 map.getPane('norotatePane').appendChild(this._canvas);
@@ -18,7 +25,7 @@ if (L.HeatLayer) {
             }
         },
 
-        onRemove: function(map) {
+        onRemove(map) {
             if (map._rotate) {
                 map.off('rotate', this._reset, this);
                 map.getPane('overlayPane').appendChild(this._canvas);
@@ -26,7 +33,7 @@ if (L.HeatLayer) {
             return heatLayerOnRemove.apply(this, arguments);
         },
 
-        _reset: function() {
+        _reset() {
             if (!this._map._rotate) {
                 return heatLayerReset.apply(this, arguments);
             }
@@ -44,7 +51,7 @@ if (L.HeatLayer) {
             this._redraw();
         },
 
-        _animateZoom: function(event) {
+        _animateZoom(event) {
             if (!this._map._rotate) {
                 return heatLayerAnimateZoom.apply(this, arguments);
             }
@@ -66,7 +73,7 @@ if (globalThis.HeatmapOverlay) {
     const heatmapDraw = globalThis.HeatmapOverlay.prototype._draw;
 
     globalThis.HeatmapOverlay.include({
-        onAdd: function(map) {
+        onAdd(map) {
             heatmapOnAdd.apply(this, arguments);
             if (map._rotate) {
                 map.getPane('norotatePane').appendChild(this._el);
@@ -75,7 +82,7 @@ if (globalThis.HeatmapOverlay) {
             }
         },
 
-        onRemove: function(map) {
+        onRemove(map) {
             if (map._rotate) {
                 map.off('rotate', this._draw, this);
                 map.getPane('overlayPane').appendChild(this._el);
@@ -83,7 +90,7 @@ if (globalThis.HeatmapOverlay) {
             return heatmapOnRemove.apply(this, arguments);
         },
 
-        _draw: function() {
+        _draw() {
             const map = this._map;
             if (!map._rotate) {
                 return heatmapDraw.apply(this, arguments);

package/misc/loremIpsum.js

@@ -1 +1 @@
-var loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>";
+globalThis.loremIpsum = "<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p><p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque.</p>";

package/misc/places.js

@@ -1,4 +1,4 @@
-var places = {
+globalThis.places = {
   'Kyiv': [50.5, 30.5],
   'London': [51.51, -0.12],
   'San Francisco': [37.77, -122.42],