tutorial print examples español javascript css leaflet

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

http://jsfiddle.net/hsy7v/1/


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