1

This fiddle (from Stefan_Fairphone) is a quick example of what I need to do for a project. But i need to add two features for these custom markers: make them scalable and spinnable.

I'm trying to use the L.Path.Transform plug-in, but it doesn't seem to work, I always get the error L.marker(...).transform.enable(...) is not a function OR Can't read the property of 'enable' of undefined

I also had a script Here that uses the ID of clone, but it doesn't work with what I have now (don't mind the infinite cloning), the error I have is L.marker(...).attr(...) is not a function

And if I use Leaflet.StylEditor, the custom marker will turn into a regular marker.

I'm trying to make my marker resizable by modifying the iconSize value by doing this :

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

        target.ondrop = function (e){
            e.preventDefault();
            imagePath = e.dataTransfer.getData("text/plain");
            coordinates = mymap.containerPointToLatLng(L.point([e.clientX,e.clientY]));
            function resize(){
                $(document).keydown(function(event){
                    width = 60;
                    height = 40;
                    Size = [width, height];
                    if(event.which == 83){ //S key
                        height+=5;
                    };
                    if(event.which == 90){ //Z key
                        height-=5;
                    };
                    if(event.which == 91){ //Q key
                        width-=5;
                    };
                    if(event.which == 68){ //D key
                        width+=5;
                    };
                    Size = [width, height];
                    return Size;
                });
            };
            Size = resize();
            L.marker(coordinates, {icon: L.icon({iconUrl: imagePath, iconSize: Size}),draggable: true}).addTo(mymap);
        };

But it's not working...

I'm looking for a way/workaround to make custom markers, resizable and make them spin around.

After a couples of tries, I realized I could use th attr function a little different


Made a good step forward : I'm trying to combine both of the scripts, since they complete each other for what I need, and using a class element leaflet-marker-icon with the attr, I can use it to set the ID of my marker, like so :

$('.leaflet-marker-icon').attr('id', 'rotate');
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'};

So, the resize works fine, but the rotation is kinda weird. during the rotation sequence, the marker lose the translate3d and its coordinates, and goes to the to last dropped place, and when an action occured (zoom, unzoom, drag), the marker lose its angle value and goes back to its original area, no idea why

And, I'll need to swap that ID attribute, cuz I'll have a good dozens of custom markers inside the map...

  • I've literally used everything I had, Now i'm just stuck and I don't know how to do it... – Nylak Sep 20 '18 at 8:45
  • 1
    You shouldn't define a function resize() inside an event function. The resize() function should be outside because otherwise it will only be called once when the marker is dropped, but you won't even be able to press a key so fast. PS: I think you are better off using imageOverlay as referenced here: gis.stackexchange.com/a/296173/122597 – Stefan Sep 20 '18 at 8:52
  • Instead of the L.marker i'd assume ? – Nylak Sep 20 '18 at 8:53
  • I updated my comment. Was too fast to press enter. – Stefan Sep 20 '18 at 8:55
  • It works, but it's not really what I want... Bascially, what I need to do is resizing my markers, and make sure that they can spin, pretty much what I have here : jsfiddle.net/qb9h53ur/10 The only problem that I have with this script tho, is that they won't be treated as a map elements, or if they do, they wan't keep their size nor their angle – Nylak Sep 20 '18 at 9:06

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.