1

This screenshot is an example of what I have to do : 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
1

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){
    var Adjustments = setAdjustements(false);
    if(Adjustments == true){
        $('.leaflet-marker-icon').addClass('adjustable');
        marker.setRotationOrigin('center center');
    };
});
marker.on('popupclose', function(e){
    markerNumber +=1;
    $('.leaflet-marker-icon').removeClass('adjustable');
    var Adjustments = setAdjustements(true);
});
function setAdjustements(Adjustments){
    if(Adjustments == false){
        NewAdjustments = true;
        return NewAdjustments;
    };
    if(Adjustments == true){
        NewAdjustments = false;
        return NewAdjustments;
    };
};

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)

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.