Customize Zoom in/out button in leaflet.js

Question

I am trying to customize zoom control (+/-), so it should appear in the right side like Google maps (https://www.google.com/maps/)

I tried to add float:right; but it didn't work.

From the CSS file :

/* zoom control */

.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
  font: bold 18px 'Lucida Console', Monaco, monospace;
  text-indent: 1px;
  }
.leaflet-control-zoom-out {
  font-size: 20px;
  }

.leaflet-touch .leaflet-control-zoom-in {
  font-size: 22px;
  }
.leaflet-touch .leaflet-control-zoom-out {
  font-size: 24px;
  }

http://jsfiddle.net/hsy7v/1/

Solution 1

Your zoom in/out controls are wrapped with absolutely positioned element with left:0 (due to .leaflet-left class), so float:left wouldn't help, you could align it to right by overriding left:0 by right:0, or changing .leaflet-left class to .leaflet-right

But more correct way would be to use provided api.

//disable zoomControl when initializing map (which is topleft by default)
var map = L.map("map", {
    zoomControl: false
    //... other options
});

//add zoom control with your options
L.control.zoom({
     position:'topright'
}).addTo(map);

see updated fiddle

api reference for the library you use can be found here

Solution 2

Currently you can use:

var map = L.map('map', {
  zoomControl: true
});
map.zoomControl.setPosition('topright');

Comments

[Monduiz]

Because I have seen many questions about customizing the position of controls in Leaflet, here is a simple CSS approach: Use .leaflet-top { padding-top: 50px; }. This will offset both the zoom control and the layer control down. You can target them individually by using their positions.

[user3378649]

But it's limited ! I'd like to control the position ( position:'topright') but padding-top 30 px ? How can I do that ?

[paulitto]

as I said, your control are wrapped in absolutely positioned element, e.g. in case of 'topright' it would have .leafleft-right class, so you can just add something like top:30px to it in css

[user3378649]

I turned to use the same, few weeks later. Thanks for pointing out

[dimitris93]

Actually this deletes the control and re-creates it with the correct position. The accepted answer is better. But this answer helped me understand the API.

[Trevor]

Any idea why you can't chain these together?

[Admin]

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.