Come individuare il controllo zoom del volantino nella posizione desiderata

Question

Desidero posizionare il controllo zoom in mezzo a destra della mappa, ad esempio nel mezzo del lato più a destra della mappa. Ho trovato la soluzione per mettere il controllo dello zoom in diversi angoli utilizzando il seguente codice

var map = new L.map("map-container",{ zoomControl: false }); 

    new L.Control.Zoom({ position: 'topleft' }).addTo(map); 

Così le posizioni possono essere

topleft 
topright 
bottomleft 
bottomright 

Ma il mio obiettivo è quello di mettere la finestra di controllo nel giusto mezzo. O anche io metto il controllo nell'angolo voglio aggiungere un po 'di margine in alto. Come lo posso fare? C'è qualche idea?

Answer 1

Un'altra soluzione (e probabilmente più pulita) sarebbe creare ulteriori segnaposto di controllo, oltre ai 4 angoli forniti.

Un buon vantaggio è che consente di inserire diversi controlli in uno di quei segnaposti. Si impilano senza sovrapposizioni, come negli angoli standard.

JavaScript:

// Create additional Control placeholders 
function addControlPlaceholders(map) { 
    var corners = map._controlCorners, 
     l = 'leaflet-', 
     container = map._controlContainer; 

    function createCorner(vSide, hSide) { 
     var className = l + vSide + ' ' + l + hSide; 

     corners[vSide + hSide] = L.DomUtil.create('div', className, container); 
    } 

    createCorner('verticalcenter', 'left'); 
    createCorner('verticalcenter', 'right'); 
} 
addControlPlaceholders(map); 

// Change the position of the Zoom Control to a newly created placeholder. 
map.zoomControl.setPosition('verticalcenterright'); 

// You can also put other controls in the same placeholder. 
L.control.scale({position: 'verticalcenterright'}).addTo(map); 

allora diventa facile styling questi segnaposto con i CSS, perché il loro genitore DOM è la mappa contenitore stesso. Quindi, top, bottom, left e right possono essere specificati con percentuali (che utilizzano le dimensioni del genitore).

CSS:

.leaflet-verticalcenter { 
    position: absolute; 
    top: 50%; /* possible because the placeholder's parent is the map */ 
    transform: translateY(-50%); /* using the CSS3 Transform technique */ 
    padding-top: 10px; 
} 

.leaflet-verticalcenter .leaflet-control { 
    margin-bottom: 10px; 
} 

Per quanto riguarda vertical centering il segnaposto per sé, è possibile utilizzare il tecnica preferita. Qui ho usato la trasformazione CSS3 per bilanciare il segnaposto di metà della sua stessa altezza.

Se necessario (ad esempio per la compatibilità con i vecchi browser), è possibile utilizzare un metodo "calcola-su-carico" per eseguire questo offset, simile a iH8. Ma non è più necessario eseguirlo sul ridimensionamento della mappa, solo quando si aggiungono nuovi Controlli al segnaposto.

Demo: http://jsfiddle.net/ve2huzxw/8/

Answer 2

Afferra l'altezza del contenitore della mappa, dividi per due. Sottrai l'altezza del contenitore dello zoom, divisa per due. Utilizzare il posizionamento assoluto ed assegnare la prima posizione:

var mapHalfHeight = map.getSize().y/2, 
    container = map.zoomControl.getContainer(), 
    containerHalfHeight = parseInt(container.offsetHeight/2), 
    containerTop = mapHalfHeight - containerHalfHeight + 'px'; 

container.style.position = 'absolute'; 
container.style.top = containerTop; 

Esempio su Plunker: http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

Si noti che quando non si sta utilizzando una mappa contenitore di dimensioni fisse che avrete bisogno di farlo ogni volta della mappa il contenitore viene ridimensionato. Buttalo in un metodo e collegalo all'evento di ridimensionamento della mappa come nell'esempio fornito.

Answer 3

Questo può essere fatto un po 'più facile, con una riga di CSS. Funziona con responsive design (Bootstrap) e sposta anche pulsanti aggiuntivi aggiunti con Leaflet.EasyButton.

.leaflet-control-container { position: absolute; right: 56px }