javascript - print - leaflet search
Personalizar el botón de acercar/alejar en leaflet.js (2)
Actualmente puedes usar:
var map = L.map(''map'', {
zoomControl: true
});
map.zoomControl.setPosition(''topright'');
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;
}
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