Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add sizes #3

Open
coryasilva opened this issue Jan 1, 2015 · 8 comments
Open

Add sizes #3

coryasilva opened this issue Jan 1, 2015 · 8 comments

Comments

@coryasilva
Copy link
Owner

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

@bogind
Copy link

bogind commented Jun 25, 2019

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
                    });

@coryasilva
Copy link
Owner Author

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

@donfmorrison
Copy link

+1

@celalo
Copy link

celalo commented Jan 21, 2020

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

@coryasilva
Copy link
Owner Author

@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?

@bloombar
Copy link

+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.

@coryasilva
Copy link
Owner Author

coryasilva commented Mar 15, 2020

@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.

@bagaskarala
Copy link

so how to change size in an easy way?

@coryasilva coryasilva added the faq label Jul 23, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants