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;
}
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