Increase size of zoom in/out button

[gaurav bajaj]

Hi,

I want to increase the size of zoom in/out buttons.

Right now they are very tiny and not big enough for mobile device maps.

What is the right way to increase size of the buttons/control.

-Big O

[Paulo Vieira]

I also needed this feature. Here is how I did it.

The size of the zoom control is defined with CSS (in leaflet.css, see the class selector "leaflet-control-zoom"). The "+" and "-" icons are simply .png files in the "images" directory.

With CSS3, it is possible to change the size of the images using the "background-size" property. So the simplest approach is to use that property and change the other CSS properties of the zoom control.

Instead of messing with the original leaflet.css, it is better to create a new "my-leaflet.css" file. In this file we copy-paste all the "leaflet-control-zoom" selectors, changing to name to "my-leaflet-control-zoom". Now we can hack the values at will. For example, since the .png icons are 9x9 pixels, we can make them 3 times bigger by using "background-size: 27px 27px;". Then we have to resize everything else (make it 3 times the original value as a first guess).

Then we have to change the class name of the div relative to the zoom control. We can extend the original L.Control.Zoom class and change only that detail:

var myZoomClass = L.Control.Zoom.extend({

  // "mutatis mutandis" here

  });


So, find the right source js file (src/control/Control.Zoom.js) and copy-paste what we need, which is the "onAdd" method. There is no need to touch the rest.

Finally we only have to add the modified zoom control to the map:

var myZoom = new myZoomClass();
myZoom.addTo(map)

Here is a demo with the result:

http://cmaf.ptmat.fc.ul.pt/~pvieira/leaflet_examples/big_zoom_control/big_zoom_control.html

However I think this approach is not very robust because CSS2 does not support the "background-size" property, so probably this wouldn't work for a lot of people. To be on the safe side, I think it's better to not use that property and instead create new scaled the .png icons. It should look better as well.

Also, this is working only if leaflet.js and leaflet.css are hosted along with the html file. When using the cnd hosted files there is a "_leaflet_id" error. Anyone knows how to solve this?