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