I'm trying to make some markers spinnable using this :

target = document.getElementById("mapid");
target.ondragover = function(e){
    e.dataTransfer.dropEffect = "move";

target.ondrop = function(e){
    imagePath = e.dataTransfer.getData("text/plain");
    coordinates = mymap.containerPointToLatLng(L.point([e.clientX,e.clientY]));
    L.marker(coordinates, {icon: L.icon({iconUrl: imagePath, iconSize: [60,40]}),draggable: true}).addTo(mymap);
var angle = 0;
var width = 60;
var height = 40;

    if(e.which == 65){angle-=5;left();angle = 0;}; //"A" key
    if(e.which == 69){angle+=5;right();angle = 0;}; //"E" key
    if(e.which == 83){height+=5;bigger();}; //"S" key
    if(e.which == 90){height-=5;smaller();}; //"Z" key
    if(e.which == 81){ width-=5;thinner();}; //"Q" key
    if(e.which == 68){ width+=5;wider();}; //"D" key
    if(e.which == 87){ $('.leaflet-marker-icon').attr('id', 'rotate');}; //"W" key
    if(e.which == 88){ $('.leaflet-marker-icon').removeAttr('id');}; //"X" key

function left(){document.getElementById('rotate').style.transform += "rotate("+angle+"deg)";};
function right(){document.getElementById('rotate').style.transform += "rotate("+angle+"deg)";};
function smaller(){document.getElementById('rotate').style.height = height + 'px'};
function bigger(){document.getElementById('rotate').style.height = height + 'px'};
function wider(){document.getElementById('rotate').style.width = width + 'px'};
function thinner(){document.getElementById('rotate').style.width = width + 'px'};


  • Only the first dropped marker can rotate, readjusts its size
  • I can rotate my marker as I want, it will now stays in place, but If I drag the icon around, zoom/unzoom the map, the rotate(Value) will be gone forever.

What I've tried and didn't work:

  • replace the ID with some sort of class (makes ALL the elements adjustable at the exam same time)
  • a keybind to remove the ID from the current marker (after a new marker is dropped, the ID will be set for the first one)

What I want: multiples markers that can rotate, and modify their size.

UPDATES: I found why my marker keeps losing thr rotate function when dragging it, zooming in/out, it's simply bcz these actions are modifying the translate3d values, thus removing the rotate style

  • Also, I've realized that if a marker that has been readjust, the width and height will be returned (not what I want too) for the next marker – Nylak Sep 25 '18 at 14:22
  • 1
    You should try out this plugin: github.com/bbecquet/Leaflet.RotatedMarker – Stefan Oct 1 '18 at 10:44
  • How should I use it since setRotationAngle is not a function ? – Nylak Oct 1 '18 at 11:31
  • Manage to make it work, thanks ! BUT, I'll have at least 2 markers on the map, and I've found that ALL markers will rotate at the exact same time... I only want one marker to rotate at a time @Stefan_Fairphone – Nylak Oct 1 '18 at 12:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.