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/

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. — Monduiz, Apr 02 '16 at 20:16

paulitto · Accepted Answer · 2014-11-25T15:35:38.217

101

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

edited Nov 25 '14 at 15:35

answered Apr 08 '14 at 08:20

paulitto

4,585
2
22
28

But it's limited ! I'd like to control the position ( position:'topright') but padding-top 30 px ? How can I do that ? – user3378649 Apr 14 '14 at 06:19
2

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 – paulitto Apr 17 '14 at 13:49

score 59 · Answer 2 · answered Feb 25 '15 at 16:36

59

Currently you can use:

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

answered Feb 25 '15 at 16:36

Sebastian Nowak

5,607
8
67
107

I turned to use the same, few weeks later. Thanks for pointing out – user3378649 Feb 26 '15 at 12:39
1

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. – dimitris93 Apr 14 '16 at 01:39
Any idea why you can't chain these together? – Trevor Jun 07 '18 at 19:19

score 1 · Answer 3 · answered Feb 11 '22 at 13:36

1

if your using leaflet in angular don't forget about ::ngdeep without this styles do not apply

answered Feb 11 '22 at 13:36

Kot14

11
1

1

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](/help/how-to-answer). – Community Feb 11 '22 at 13:57

Customize Zoom in/out button in leaflet.js

3 Answers3

Linked