Resize Leaflet/Leaflet extras buttons

shiny
1

Hi there,

I was trying to resize the buttons on the leaflet map but doing so I noticed some of the icons are actually being referenced via co-ordinates to one large sprite sheet.

Is there a way to enlarge Leaflet plugin buttons/change the icons so that they can be resized?

I get something like this when I try to resize them from the default 26x26px to 50x50px:

leaflet_sizing
leaflet_sizing2374×976 464 KB

Many thanks,

Ciaran

2

Are you using a Leaflet plugin to add those buttons? I've been doing a bit of work with Leaflet (just in JS, not using the R wrapper), and most of the buttons for the default controls don't work this way. For example, the zoom control just uses + and - characters pulled from the DOM element contents, and the layer control uses an icon that's stored in a separate file:

50

47

If that's just the way the plugin does it, it might take some more involved CSS to resize the buttons neatly. I'd try background-size and background-position. Still, that's tough :confused:

If you're writing CSS to style the controls, you could also just swap in your own background images too! Then you don't need to piss around with trying to resize the graphics to match your buttons (especially if you're using SVG icons).

1 Like
3

Thanks for the reply!

I'll admit, I'm no CSS expert, I've somehow managed to miss web development in 4 years of Computer Science (SIGH).

The buttons going awol are indeed from plugins, I suppose I could enlarge the background image and try to re-position the icons, that sounds like some hassle.

Might just do what you suggest and use my own images for the icons, a shame as they're pretty self explanatory.

Thanks again!

4

That's okay, I'm picking it up as I go along :laughing: I think using your own images is probably the best way, unless you want to file an issue with the plugin developer and cross your fingers. Althoooooough... since the spritesheet is SVG, you could just copy the shapes out into individual files (since SVG files are just XML files under the hood) :wink:

5

I could try, not sure where I'd even find the SVG file. Worth a shot!

6

It's right there, in your Developer Tools: right-click on images/spritesheet.svg in the styles panel, and you should be able to open the SVG file in a new tab :slight_smile:

7

Doh. That was simple.

Now to figure out how to handle the buttons that have states...

1 Like