Leaflet.ExtraMarkers icon indicating copy to clipboard operation
Leaflet.ExtraMarkers copied to clipboard

Add sizes

Open coryasilva opened this issue 11 years ago • 8 comments

sm, md, lg or 1,2,3. This might be best done with css transformations.

coryasilva avatar Jan 01 '15 22:01 coryasilva

Hi, this bothered me too so i found a way to resize the icons using map events.
I added three event listeners one for zoomend another for addlayer and a third for dragend, each of them resize the icons to the size i wanted (which was smaller). The scale part of the code determines the size of the icon while you need to adjust to location using translateX and translateY. Hopefully someone else will find this useful:

    map.on('zoomend', function(){
        var ExtraMarkers = document.getElementsByClassName("extra-marker");
        for(l=0; l< ExtraMarkers.length; l++){
        oldS = ExtraMarkers[l].style.transform
        newS = oldS + " scale(0.5) translateY(100%) translateX(50%)" 
        ExtraMarkers[l].style.transform = newS
        
            }
    })
map.on("layeradd", function(layer){
    if(layer.layer._icon && 
        layer.layer._icon.classList.contains("extra-marker")){
        oldS = layer.layer._icon.style.transform;
        newS = oldS + " scale(0.5) translateY(100%) translateX(50%)" ;
        layer.layer._icon.style.transform = newS
       }
    })
L.marker([lat, lng],
                    {draggable:true, icon: L.ExtraMarkers.icon({
    icon: 'fa-number',
    markerColor: 'green',
    shape: 'penta',
    number: '1',
    prefix: 'fa'
  })
})
.on("dragend",function(e){
                        oldS = e.target._icon.style.transform;
                        newS = oldS + " scale(0.5) translateY(100%) translateX(50%)" ;
                        e.target._icon.style.transform = newS
                    });

bogind avatar Jun 25 '19 09:06 bogind

Thanks for sharing Dror. I will take a look at adding these transformations into css (along with the needed classes).

coryasilva avatar Jul 03 '19 18:07 coryasilva

+1

donfmorrison avatar Jul 16 '19 20:07 donfmorrison

@coryasilva have you had a chance to look into this?

celalo avatar Jan 21 '20 09:01 celalo

@celalo Not really. I was thinking that moving to SVG icons would be a prereq. Or we could add more sprites. What do you think?

coryasilva avatar Jan 27 '20 05:01 coryasilva

+1 Perhaps this would bloat too much, but I would love to see extra sets of sprites at a few common sizes (including in solid flat colors - my current need) and a programmatic solution like @bogind's for those of us interested in scaling with more finesse.

bloombar avatar Mar 15 '20 16:03 bloombar

@bloombar The new SVG markers are solid and you can use whatever color (flat) you would like. It should be easy to scale the with css, though I have not looked into it yet.

coryasilva avatar Mar 15 '20 17:03 coryasilva

so how to change size in an easy way?

bagaskarala avatar Sep 24 '20 02:09 bagaskarala