Add sizes
sm, md, lg or 1,2,3. This might be best done with css transformations.
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
});
Thanks for sharing Dror. I will take a look at adding these transformations into css (along with the needed classes).
+1
@coryasilva have you had a chance to look into this?
@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?
+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 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.
so how to change size in an easy way?