leaflet-rotate 0.2.8 → 0.4.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;
 
@@ -64,6 +67,7 @@ L.Rotate = {
               position:absolute;
               width:800px;
               height:600px;
+              box-sizing: border-box;
               border: 1px solid red;
               border-bottom: 1px red dashed;
               border-right: 1px red dashed;
@@ -73,6 +77,7 @@ L.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;
@@ -181,11 +186,12 @@ L.Rotate = {
         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);
+        this.___rotateBounds = L.DomUtil.create('div', 'panebounds rotate', map._rotatePane);
+        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));
@@ -200,6 +206,7 @@ L.Rotate = {
         padInput.addEventListener('mousemove', L.Rotate.displayPixelBounds.bind(this));
 
         map.on('move rotate zoomend', this.updatePanePos);
+        map.on('resize', this.updatePaneBounds.bind(this));
         map.on('rotate zoomend load', this.updatePixelOrigin);
         map.on('rotate', this.updateRhoInput);
         map.on('rotate', this.updatePivotDot);
@@ -220,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) {
@@ -232,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;
@@ -248,14 +271,22 @@ L.Rotate = {
     /**
      * Debug L.Map.setBearing()
      */
-    rotate: function(e) {
-        return e.buttons !== 0 && this._map.setBearing(e.target.valueAsNumber);
+    rotate(e) {
+        return (e.type !== 'mousemove' || e.buttons !== 0) && this._map.setBearing(e.target.valueAsNumber);
+    },
+
+    updatePaneBounds() {
+      const size = this._map.getSize();
+      for (const bounds of [this.___rotateBounds, this.___mainBounds]) {
+        bounds.style.width = size.x + 'px';
+        bounds.style.height = size.y + 'px';
+      }
     },
 
     /**
      * Debug L.Map._pixelOrigin
      */
-    updatePixelOrigin: function() {
+    updatePixelOrigin() {
       if (this._pixelOrigin) {
         document.getElementById('ogx').innerHTML = this._pixelOrigin.x;
         document.getElementById('ogy').innerHTML = this._pixelOrigin.y;
@@ -267,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;
@@ -279,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;
     },
@@ -288,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);
@@ -315,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);
@@ -327,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);
         }
@@ -369,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, });
@@ -384,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',
@@ -405,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',
@@ -423,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)'; });
       }
     },
@@ -434,26 +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 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: -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()],
@@ -493,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))
@@ -506,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);
         }
@@ -515,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(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})}};
+(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

@@ -0,0 +1,96 @@
+if (!L.HeatLayer && !globalThis.HeatmapOverlay) {
+    throw new Error('Load Leaflet.heat or heatmap.js Leaflet plugin before this adapter.');
+}
+
+if (L.HeatLayer) {
+    const heatLayerOnAdd = L.HeatLayer.prototype.onAdd;
+    const heatLayerOnRemove = L.HeatLayer.prototype.onRemove;
+    const heatLayerReset = L.HeatLayer.prototype._reset;
+    const heatLayerAnimateZoom = L.HeatLayer.prototype._animateZoom;
+
+    L.HeatLayer.include({
+        onAdd(map) {
+            heatLayerOnAdd.apply(this, arguments);
+            if (map._rotate) {
+                map.getPane('norotatePane').appendChild(this._canvas);
+                this._reset();
+                map.on('rotate', this._reset, this);
+            }
+        },
+
+        onRemove(map) {
+            if (map._rotate) {
+                map.off('rotate', this._reset, this);
+                map.getPane('overlayPane').appendChild(this._canvas);
+            }
+            return heatLayerOnRemove.apply(this, arguments);
+        },
+
+        _reset() {
+            if (!this._map._rotate) {
+                return heatLayerReset.apply(this, arguments);
+            }
+
+            const map = this._map;
+            const size = map.getSize();
+            L.DomUtil.setPosition(this._canvas, map._getMapPanePos().multiplyBy(-1));
+
+            if (this._heat._width !== size.x) {
+                this._canvas.width = this._heat._width = size.x;
+            }
+            if (this._heat._height !== size.y) {
+                this._canvas.height = this._heat._height = size.y;
+            }
+            this._redraw();
+        },
+
+        _animateZoom(event) {
+            if (!this._map._rotate) {
+                return heatLayerAnimateZoom.apply(this, arguments);
+            }
+
+            const map = this._map;
+            const scale = map.getZoomScale(event.zoom);
+            const offset = map._getCenterOffset(event.center)
+                .rotate(map._bearing)
+                .multiplyBy(-scale)
+                .subtract(map._getMapPanePos());
+            L.DomUtil.setTransform(this._canvas, offset, scale);
+        },
+    });
+}
+
+if (globalThis.HeatmapOverlay) {
+    const heatmapOnAdd = globalThis.HeatmapOverlay.prototype.onAdd;
+    const heatmapOnRemove = globalThis.HeatmapOverlay.prototype.onRemove;
+    const heatmapDraw = globalThis.HeatmapOverlay.prototype._draw;
+
+    globalThis.HeatmapOverlay.include({
+        onAdd(map) {
+            heatmapOnAdd.apply(this, arguments);
+            if (map._rotate) {
+                map.getPane('norotatePane').appendChild(this._el);
+                this._draw();
+                map.on('rotate', this._draw, this);
+            }
+        },
+
+        onRemove(map) {
+            if (map._rotate) {
+                map.off('rotate', this._draw, this);
+                map.getPane('overlayPane').appendChild(this._el);
+            }
+            return heatmapOnRemove.apply(this, arguments);
+        },
+
+        _draw() {
+            const map = this._map;
+            if (!map._rotate) {
+                return heatmapDraw.apply(this, arguments);
+            }
+
+            L.DomUtil.setPosition(this._el, map._getMapPanePos().multiplyBy(-1));
+            this._update();
+        },
+    });
+}

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],