# Making one marker adjustable at a time

This screenshot is an example of what I have to do :

This picture was taken on a different and older version of what I have now, since all of the present images were NOT markers bound to the map

After my images became elements of the map, I had to rewrite this script :

var angle = 0;
var width = 60;
var height = 40;

$(document).keydown(function(e){ if(e.which == 65){ //"A" key angle-=5; left(); }; if(e.which == 69){ //"E" key angle+=5; right(); }; if(e.which == 83){ //"S" key height+=5; smaller(); }; if(e.which == 90){ //"Z" key height-=5; bigger(); }; if(e.which == 81){ //"Q" key width-=5; thinner(); }; if(e.which == 68){ //"D" key width+=5; wider(); }; }); 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'};  and it was working the way I wanted to : having only one image that can rotate, can be resized at a time. Where as now, I'm using this script (with leaflet.rotatedMarker for the rotation): var opened = 0; var angle = 0; var markerNumber = 0; var divider = 0; var markerList = []; var width = 60; var height = 40; var marker = L.marker(coordinates, {icon: L.icon({iconUrl: imagePath, iconSize: [60,40]}),draggable: true}).bindPopup('Use A, E, Z, Q, S or D to adjust me !').addTo(mymap); divider += 1; markerList += markerNumber;$(document).keydown(function(e){
if(e.which == 65){angle-=5/divider;setAngle();}; //"A" key
if(e.which == 69){angle+=5/divider;setAngle();}; //"E" key
if(e.which == 90){height-=5/divider;smaller();}; //"Z" key
if(e.which == 81){ width-=5/divider;thinner();}; //"Q" key
if(e.which == 83){height+=5/divider;taller();}; //"S" key
if(e.which == 68){width+=5/divider;wider();}; //"D" key
});
marker.on('popupopen', function(e){
opened = 1;
if(opened == 1){
$('.leaflet-marker-icon').addClass('adjustable'); marker.setRotationOrigin('center center'); }; }); marker.on('popupclose', function(e){ opened -= 1; markerNumber +=1 ; if(opened == 0){$('.leaflet-marker-icon').removeClass('adjustable');
};
});

function setAngle(){marker.setRotationAngle(angle)};
function smaller(){$('.adjustable')[markerNumber].style.height = height + 'px'}; function taller(){$('.adjustable')[markerNumber].style.height = height + 'px'};
function wider(){$('.adjustable')[markerNumber].style.width = width + 'px'}; function thinner(){$('.adjustable')[markerNumber].style.width = width + 'px'};
};


I identified two or three problems:

• The setRotationAngle impact ALL markers on the map [FIXED]
• The getElementsById('rotate') only makes the FIRST marker resizable [FIXED]
• after each popupclose :
1. the width and height vlaue wil automatically be increased by 5 [FIXED]
2. I can still rotate my markers, which isn't what I want [FIXED]

What I need:

• Using popupopen : having only the marker bound to the opened popup resizable and spinnable. DONE
• Using popupclose : removing the resizable and spinnable functions of the marker bound to the closed popup. DONE

All I'm trying to do now is to remove the rotationOrigin option when I close the popup

I know this sound extremely familiar to what I've asked before, but now, I'll need to apply this to multiple markers

• If you have a solution to your question, please describe it in an answer. – Stefan Oct 4 '18 at 8:00

What I did to make everything work (compared to the previous script)

I added a setAdjustments(true OR false) inside my popupop event like so :

marker.on('popupopen', function(e){
$('.leaflet-marker-icon').addClass('adjustable'); marker.setRotationOrigin('center center'); }; }); marker.on('popupclose', function(e){ markerNumber +=1;$('.leaflet-marker-icon').removeClass('adjustable');
});
};
};
};


I aslo added a isPopupOpen() test inside my setAngle() to allow rotation if the popup is open, like so :

function setAngle(){
if(marker.isPopupOpen(marker) == true){
marker.setRotationAngle(angle);
};
};


About the getElementById('rotate'), I replaced it with a getElementsByClassName('adjustable')[markerNumber], with the value markerNumber incrementing by 1 each time a popup has been closed (which leads to other problems, I'll work on that on my own)