javascript - print - leaflet search

Personalizar el botón de acercar/alejar en leaflet.js

Question

Estoy tratando de personalizar el control de zoom (+/-), por lo que debería aparecer en el lado derecho como los mapas de Google ( https://www.google.com/maps/ )

Traté de añadir float:right; pero no funcionó.

Desde el archivo CSS:

/* 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/

Answer 1

Actualmente puedes usar:

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

Answer 2

Sus controles de zoom in / out están envueltos con un elemento posicionado absolutamente con la left:0 (debido a la clase .leaflet-left), por lo que float:left no ayudaría, puede alinearla a la derecha anulando a la left:0 de la right:0 , o cambiando la clase .leaflet-left a .leaflet-right

Pero la forma más correcta sería utilizar la API proporcionada.

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

ver fiddle actualizado

La referencia de api para la biblioteca que usa se puede encontrar here