Customize Zoom in/out button in leaflet.js

35
votes

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/

2
javascriptcssleaflet
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

2 Answers

98
votes

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

54
votes

Currently you can use:

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