leaflet-rotate 0.2.8 → 0.3.0

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})}};
+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})}};

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: function(map) {
+            heatLayerOnAdd.apply(this, arguments);
+            if (map._rotate) {
+                map.getPane('norotatePane').appendChild(this._canvas);
+                this._reset();
+                map.on('rotate', this._reset, this);
+            }
+        },
+
+        onRemove: function(map) {
+            if (map._rotate) {
+                map.off('rotate', this._reset, this);
+                map.getPane('overlayPane').appendChild(this._canvas);
+            }
+            return heatLayerOnRemove.apply(this, arguments);
+        },
+
+        _reset: function() {
+            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: function(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: function(map) {
+            heatmapOnAdd.apply(this, arguments);
+            if (map._rotate) {
+                map.getPane('norotatePane').appendChild(this._el);
+                this._draw();
+                map.on('rotate', this._draw, this);
+            }
+        },
+
+        onRemove: function(map) {
+            if (map._rotate) {
+                map.off('rotate', this._draw, this);
+                map.getPane('overlayPane').appendChild(this._el);
+            }
+            return heatmapOnRemove.apply(this, arguments);
+        },
+
+        _draw: function() {
+            const map = this._map;
+            if (!map._rotate) {
+                return heatmapDraw.apply(this, arguments);
+            }
+
+            L.DomUtil.setPosition(this._el, map._getMapPanePos().multiplyBy(-1));
+            this._update();
+        },
+    });
+}

package/package.json

@@ -1,17 +1,15 @@
 {
 	"name": "leaflet-rotate",
-	"version": "0.2.8",
+	"version": "0.3.0",
 	"description": "A Leaflet plugin that allows to add rotation functionality to map tiles",
 	"type": "module",
 	"main": "dist/leaflet-rotate.js",
 	"browser": "dist/leaflet-rotate.js",
 	"module": "src/index.js",
 	"scripts": {
-		"test": "uvu . \"(examples|src)[\\\\/].*\\.spec\\.js$\"",
-		"build": "rollup -c build/rollup.config.js",
-		"watch": "rollup -c build/rollup.config.js --watch",
-		"dev": "npm-run-all --print-label --parallel serve watch",
-		"serve": "http-server",
+		"dev": "node build/dev.js",
+		"build": "node build/build.js",
+		"test": "npm run build && cucumber-js",
 		"version": "npm run build && git add -A dist"
 	},
 	"repository": {
@@ -49,14 +47,9 @@
 	},
 	"homepage": "https://github.com/Raruto/leaflet-rotate#readme",
 	"devDependencies": {
-		"rollup": "^3.20.6",
-		"@rollup/plugin-commonjs": "^24.1.0",
-		"@rollup/plugin-node-resolve": "^15.0.2",
-		"@rollup/plugin-terser": "^0.4.1",
-		"http-server": "^14.1.1",
-		"npm-run-all": "^4.1.5",
-		"playwright": "^1.32.3",
-		"uvu": "^0.5.6"
+		"@cucumber/cucumber": "^10.3.1",
+		"esbuild": "^0.28.2",
+		"playwright": "^1.64.1"
 	},
 	"peerDependencies": {
 		"leaflet": "^1.9.3"

package/src/control/Rotate.js

@@ -106,7 +106,11 @@ L.Control.Rotate = L.Control.extend({
         // Compass mode
         else if (!map.compassBearing.enabled()) {
             map.touchRotate.disable();
-            map.compassBearing.enable();
+            (
+                DeviceOrientationEvent && DeviceOrientationEvent.requestPermission
+                    ? DeviceOrientationEvent.requestPermission() // iOS compass
+                    : Promise.resolve('granted')                 // others
+            ).then(state => "granted" === state && map.compassBearing.enable())
         }
 
         // Locked mode

package/src/layer/DivOverlay.js

@@ -25,10 +25,22 @@ L.DivOverlay.include({
     _updatePosition: function() {
         if (!this._map) { return; }
         divOverlayProto._updatePosition.apply(this, arguments);
-        if (this._map && this._map._rotate && this._zoomAnimated) {
+        if (this._map._rotate && this._zoomAnimated) {
             var anchor = this._getAnchor();
             var pos = L.DomUtil.getPosition(this._container).subtract(anchor);
             L.DomUtil.setPosition(this._container, this._map.rotatedPointToMapPanePoint(pos).add(anchor));
+        } else if (this._map._rotate) {
+            var mapPanePoint = this._map.rotatedPointToMapPanePoint(this._map.latLngToLayerPoint(this._latlng)),
+                offset = L.point(this.options.offset),
+                anchor = this._getAnchor();
+
+            this._containerLeft = -Math.round(this._containerWidth / 2) + mapPanePoint.x + offset.x + anchor.x;
+            this._containerBottom = -(mapPanePoint.y + offset.y + anchor.y);
+            this._container.style.left = this._containerLeft + 'px';
+            this._container.style.bottom = this._containerBottom + 'px';
+            this._container.style.top = '';
+            L.DomUtil.setPosition(this._container, new L.Point(0, 0));
+            this._container.style.transform = '';
         }
 
     },

package/src/layer/marker/Marker.js

@@ -25,6 +25,13 @@ L.Marker.mergeOptions({
      */
     rotateWithView: false,
 
+    /**
+     * Flip a rotated marker when needed to keep it upright
+     *
+     * @type {Boolean}
+     */
+    keepUpright: false,
+
     /**
      * Scale of the marker icon
      * 
@@ -128,6 +135,13 @@ L.Marker.include({
         if (this.options.rotateWithView) {
             bearing += this._map._bearing;
         }
+        if (this.options.keepUpright) {
+            bearing = ((bearing % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
+            if (bearing > Math.PI / 2 && bearing < 3 * Math.PI / 2) {
+                bearing += Math.PI;
+            }
+            bearing %= 2 * Math.PI;
+        }
 
         /** @TODO use markerProto._setPos */
         if (this._icon) {

package/src/layer/vector/Renderer.js

@@ -54,6 +54,10 @@ L.Renderer.include({
         if (!this._map._rotate) {
             return rendererProto._updateTransform.apply(this, arguments);
         }
+        if (zoom === this._zoom) {
+            // _reset() has already repositioned the renderer at the current zoom.
+            return;
+        }
         /**
          * @FIXME see path._renderer._reset();
          */

package/src/map/Map.js

@@ -10,6 +10,16 @@ L.Map.mergeOptions({ rotate: false, bearing: 0, });
 
 L.Map.include({
 
+    _animateZoomNoDelay: function(center, zoom) {
+        if (!this._mapPane) { return; }
+
+        this._animatingZoom = true;
+        this._animateToCenter = center;
+        this._animateToZoom = zoom;
+        this._move(center, zoom, undefined, true);
+        this._onZoomTransitionEnd();
+    },
+
     /**
      * @param {(HTMLElement|String)} id html selector
      * @param {Object} [options={}] leaflet map options
@@ -193,12 +203,62 @@ L.Map.include({
      * Change map rotation
      * 
      * @param {number} theta map degrees
+     * @param {Object} [options] animation options
+     * @param {boolean} [options.animate=false]
+     * @param {number} [options.duration=0.25] animation duration in seconds
+     * @param {number} [options.easeLinearity=0.5]
      * 
      * @since leaflet-rotate (v0.1)
      */
-    setBearing: function(theta) {
+    setBearing: function(theta, options) {
         if (!L.Browser.any3d || !this._rotate) { return; }
 
+        if (options && options.animate) {
+            this._bearingAnimationId = (this._bearingAnimationId || 0) + 1;
+            var animationId = this._bearingAnimationId;
+            if (this._bearingAnimationFrame) {
+                L.Util.cancelAnimFrame(this._bearingAnimationFrame);
+            }
+
+            var startBearing = this.getBearing(),
+                endBearing = L.Util.wrapNum(theta, [0, 360]),
+                delta = ((endBearing - startBearing + 540) % 360) - 180,
+                duration = Math.max(0, options.duration == null ? 0.25 : options.duration) * 1000,
+                easeLinearity = Math.max(options.easeLinearity || 0.5, 0.2),
+                startTime = performance.now();
+
+            var animate = function() {
+                if (!this._mapPane) {
+                    delete this._bearingAnimationFrame;
+                    return;
+                }
+
+                var progress = duration ? Math.min((performance.now() - startTime) / duration, 1) : 1,
+                    eased = 1 - Math.pow(1 - progress, 1 / easeLinearity);
+
+                this._setBearing(progress === 1 ? endBearing : startBearing + delta * eased);
+                if (this._bearingAnimationId !== animationId) { return; }
+                if (progress < 1) {
+                    this._bearingAnimationFrame = L.Util.requestAnimFrame(animate, this);
+                } else {
+                    delete this._bearingAnimationFrame;
+                }
+            };
+
+            this._bearingAnimationFrame = L.Util.requestAnimFrame(animate, this);
+            return;
+        }
+
+        this._bearingAnimationId = (this._bearingAnimationId || 0) + 1;
+        if (this._bearingAnimationFrame) {
+            L.Util.cancelAnimFrame(this._bearingAnimationFrame);
+            delete this._bearingAnimationFrame;
+        }
+
+        this._setBearing(theta);
+    },
+
+    _setBearing: function(theta) {
         var bearing = L.Util.wrapNum(theta, [0, 360]) * L.DomUtil.DEG_TO_RAD,
             center = this._getPixelCenter(),
             oldPos = this._getRotatePanePos().rotateFrom(-this._bearing, center),
@@ -322,9 +382,8 @@ L.Map.include({
             // pixelPoint = this.project(latlng),
             // pixelBounds = this.getPixelBounds(),
             // pixelCenter = this.project(this.getCenter()),
-            rect = this._container.getBoundingClientRect(),
             pixelPoint = this.latLngToContainerPoint(latlng),
-            pixelBounds = L.bounds([ L.point(rect), L.point(rect).add(this.getSize()) ]),
+            pixelBounds = L.bounds([L.point(0, 0), this.getSize()]),
             pixelCenter = pixelBounds.getCenter(),
             //
             paddedBounds = L.bounds([pixelBounds.min.add(paddingTL), pixelBounds.max.subtract(paddingBR)]),

package/src/map/handler/CompassBearing.js

@@ -52,11 +52,13 @@ L.Map.CompassBearing = L.Handler.extend({
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation
      */
     _onDeviceOrientation: function(e) {
-        var angle = e.webkitCompassHeading || e.alpha;
+         var angle = e.webkitCompassHeading != null ? e.webkitCompassHeading : e.alpha;
         var deviceOrientation = 0;
 
-        // Safari iOS
-        if (!e.absolute && e.webkitCompassHeading) {
+         if (!Number.isFinite(angle)) { return; }
+
+         // Safari iOS
+         if (!e.absolute && e.webkitCompassHeading) {
             angle = 360 - angle;
         }
 

package/src/map/handler/TouchGestures.js

@@ -140,6 +140,14 @@ L.Map.TouchGestures = L.Handler.extend({
         var moveFn = map._move.bind(map, this._center, this._zoom, { pinch: true, round: false }, undefined);
         this._animRequest = L.Util.requestAnimFrame(moveFn, this, true);
 
+        if (this.zoom) {
+            if (map.options.zoomAnimation) {
+                map._animateZoomNoDelay(this._center, map._limitZoom(this._zoom));
+            } else {
+                map._resetView(this._center, map._limitZoom(this._zoom));
+            }
+        }
+
         L.DomEvent.preventDefault(e);
     },
 

package/test/features/example.feature

@@ -0,0 +1,87 @@
+Feature: Rotating a Leaflet map
+  Background:
+    Given the example page is open
+
+  @issue-55 @issue-58
+  Scenario: Leaflet heat redraws stay aligned after map rotation
+    When I redraw a heat layer after rotating, panning, and zooming
+    Then the heat points remain aligned with their coordinates
+
+  @issue-11
+  Scenario: The default rotate control appears only when the map is rotated
+    When I rotate a map with the default rotate control
+    Then the default rotate control visibility follows the bearing
+
+  @issue-13
+  Scenario: Dragging the rotate control changes the map bearing
+    When I drag the rotate control
+    Then the map bearing follows the control drag
+
+  @issue-44
+  Scenario: The compass control requests device-orientation permission
+    When I activate compass mode on a permission-based device
+    Then device-orientation permission is requested
+
+  @issue-7
+  Scenario: Compass headings handle absolute, iOS, and unavailable readings
+    When I apply compass heading readings
+    Then valid compass readings update bearing and invalid readings are ignored
+
+  @debugger
+  Scenario: Debugger rotation presets and keyboard slider stay synchronized
+    When I use the debugger rotation controls
+    Then every debugger rotation control matches the map bearing
+
+  @debugger
+  Scenario: Debugger bounds padding updates from the keyboard
+    When I change the debugger bounds padding from the keyboard
+    Then the displayed bounds use the selected padding
+
+  @debugger
+  Scenario: Debugger geometry follows an offset and resized map
+    When I inspect debugger geometry after resizing and moving the map
+    Then the debugger reports the current map geometry
+
+  @example-ui
+  Scenario: Example base-layer radios select one layer
+    When I switch between the example base layers
+    Then exactly the selected base layer is visible
+
+  @example-ui
+  Scenario: Example zoom controls change and restore the zoom
+    When I use the example zoom controls
+    Then the zoom returns to its starting level
+
+  @example-ui
+  Scenario: Debugger rotates all example markers
+    When I rotate the example markers from the debugger
+    Then every example marker has a new rotation
+
+  @example-ui
+  Scenario Outline: Example destination buttons fly to the selected place
+    When I select "<place>" from the example page
+    Then the map settles at "<place>" at zoom 10
+
+    Examples:
+      | place          |
+      | Kyiv           |
+      | London         |
+      | San Francisco  |
+      | Washington     |
+      | Trondheim      |
+
+  @example-ui
+  Scenario Outline: Example bounds buttons fit the selected layer
+    When I fit the "<layer>" bounds from the example page
+    Then the map view contains the "<layer>" bounds
+
+    Examples:
+      | layer   |
+      | circle  |
+      | polygon |
+      | path    |
+
+  @example-ui
+  Scenario: Rectangle button resets zoom and fits the rectangle
+    When I fit the rectangle from the example page
+    Then the rectangle is fitted at zoom 14

package/test/features/gestures.feature

@@ -0,0 +1,33 @@
+Feature: Rotating a Leaflet map
+  Background:
+    Given the example page is open
+
+  @issue-43
+  Scenario: Pinch zoom refreshes paths during the gesture
+    When I move a two-finger pinch gesture
+    Then the zoom transition ends before the gesture ends
+
+  @issue-43
+  Scenario: Vector paths follow a rotated two-finger gesture
+    When I rotate and zoom two fingers over a vector path
+    Then the vector path remains aligned during the gesture
+
+  @issue-56
+  Scenario: Dragging a max-bounds marker preserves callback coordinates on a rotated map
+    When I drag a constrained marker on a rotated map
+    Then its drag callbacks match the marker and pointer coordinates
+
+  @issue-60
+  Scenario: Interactive layers stay aligned while dragging and rotating the map
+    When I drag a map with interactive layers while rotated
+    Then the marker and vector path stay at their geographic coordinates
+
+  @issue-59 @issue-52
+  Scenario: Focusing an in-bounds point does not pan an offset rotated map
+    When I focus a point near the left edge of an offset map
+    Then the map center remains unchanged
+
+  @issue-65
+  Scenario: Two-finger rotation can be disabled
+    When I disable touch rotation and rotate two fingers
+    Then the map bearing remains unchanged

package/test/features/overlays.feature

@@ -0,0 +1,58 @@
+Feature: Rotating a Leaflet map
+  Background:
+    Given the example page is open
+
+  @issue-4 @issue-35 @issue-62
+  Scenario: Rotated road labels stay upright and aligned with the map
+    When I rotate a label marker with the view
+    Then the label remains upright while following the map bearing
+
+  @issue-2 @issue-54
+  Scenario: GeoJSON in a custom pane rotates with the map
+    When I add GeoJSON to a custom pane inside the rotate pane
+    Then the custom-pane GeoJSON stays aligned with its coordinates
+
+  @issue-32
+  Scenario: Canvas overlays rotate with the map
+    When I render a Canvas vector layer on a rotated map
+    Then the Canvas renderer belongs to the rotating pane
+
+  @issue-57
+  Scenario: SVG paths stay aligned near the latitude limit without zoom animation
+    When I zoom an SVG path near the latitude limit
+    Then the path stays at its geographic coordinate
+
+  @issue-15 @issue-51
+  Scenario: Popup tip remains anchored when zoom animation is disabled
+    When I open a popup on a rotated map without zoom animation
+    Then the popup tip stays at the marker coordinate
+
+  @issue-23
+  Scenario: Removing the rotate control detaches its map listener
+    When I remove the rotate control and change the map bearing
+    Then the map rotates without invoking the removed control
+
+  @issue-3
+  Scenario: Markers remain non-draggable unless requested
+    When I create default and draggable markers
+    Then only the requested marker is draggable
+
+  @issue-46
+  Scenario: Click coordinates match the rotated map location
+    When I click a rotated map at a known container point
+    Then the click event reports the matching geographic coordinate
+
+  @issue-18 @issue-59
+  Scenario: Focusing an in-bounds marker does not pan the rotated map
+    When I focus a marker near the edge of a rotated map
+    Then the map center remains unchanged
+
+  @issue-51
+  Scenario: Opening an edge popup pans only enough to keep it visible
+    When I open a popup near the edge of a rotated map
+    Then the popup stays inside the map without a large jump
+
+  @issue-52
+  Scenario: Opening a popup in a second rotated map does not move it
+    When I open a popup in a second rotated map with map listeners
+    Then the second map center remains unchanged and its popup stays anchored

package/test/features/rotation.feature

@@ -0,0 +1,36 @@
+Feature: Rotating a Leaflet map
+  Background:
+    Given the example page is open
+
+  @issue-43
+  Scenario: Rotation is enabled
+    Then rotation is enabled on the map
+
+  @issue-19
+  Scenario: Bearing survives zoom
+    When I set the bearing to 10 and zoom in twice
+    Then the bearing remains 10
+
+  @issue-19
+  Scenario: Bearing survives setting the view
+    When I set the bearing to 10 and change the view twice
+    Then the bearing remains 10
+
+  @issue-63
+  Scenario: Bearing can animate
+    When I animate the bearing to 90 degrees
+    Then the bearing reaches 90 degrees gradually
+
+  @issue-25
+  Scenario: Fit bounds zoom is stable
+    When I fit the same bounds twice
+    Then the map zoom is 14 both times
+
+  @issue-28
+  Scenario: Panning inside a marker keeps its bounds stable
+    When I pan inside the Trondheim marker
+    Then panning inside keeps the expected bounds
+
+  @issue-34
+  Scenario: Draggable marker listeners are not duplicated
+    Then the draggable marker has one drag listener and one drag-end listener