Wie Faltblatt Zoomsteuerung in einer gewünschten Position lokalisieren

Question

ich die Zoomsteuerung in der Mitte rechts neben der Karte das heißt in der Mitte der am weitesten rechts stehenden Seite der Karte platziert werden soll. Ich habe Lösung gefunden, die Zoom-Steuerung in verschiedenen Ecken zu setzen mit dem folgenden Code

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

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

So ist die Positionen

topleft 
topright 
bottomleft 
bottomright 

sein können, aber mein Ziel ist es, das Kontrollfenster in der Mitte rechts zu setzen. Oder sogar ich setze das Steuerelement in die Ecke, ich möchte etwas Rand an die Spitze hinzufügen. Wie kann ich das machen? Gibt es eine Idee?

Answer 1

Ein andere Lösung (und wahrscheinlich sauber) wären zusätzliche Steuer Platzhalter zu erstellen (s), neben den 4 vorgesehen Ecken.

Ein schöner Vorteil ist, dass es mehrere Steuerelemente in einem dieser Platzhalter erlaubt setzen. Sie werden gestapelt, ohne sich zu überlappen, wie in den Standardecken.

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

Dann wird es einfach Styling diese Platzhalter mit CSS, weil ihre DOM Eltern der Behälter selbst Karte ist. Daher können top, bottom, left und right mit Prozentsätzen angegeben werden (die die Dimensionen des übergeordneten Elements verwenden).

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

Was vertical centering der Platzhalter selbst, können Sie Ihre Lieblings-Technik verwenden. Hier habe ich die CSS3-Transformation verwendet, um den Platzhalter um die Hälfte seiner eigenen Höhe zu versetzen.

Falls erforderlich (beispielsweise für alte Browser-Kompatibilität), können Sie eher eine „berechnen-on-load“ Methode verwenden, um diese, ähnlich wie iH8 den Offset durchzuführen. Sie müssen es jedoch nicht mehr auf der Karten-Größenänderung ausführen, wenn Sie dem Platzhalter neue Steuerelemente hinzufügen.

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

Answer 2

Greifen Sie die Höhe des Kartencontainers, teilen Sie ihn durch zwei. Subtrahieren Sie die Containerhöhe des Zooms, geteilt durch zwei. Verwenden Sie absolute Positionierung und weisen Sie die Top-Position:

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; 

Beispiel auf Plunker: http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

Beachten Sie, dass, wenn Sie nicht eine feste Größe Karte Container mit, dass Sie die Karte der dies jedes Mal tun müssen, Container wird skaliert. Wirf es in eine Methode und verknüpfe es wie im Beispiel mit dem Größenänderungs-Event der Map.

Answer 3

Dies kann ein bisschen einfacher, mit einer Zeile CSS erfolgen. Funktioniert mit Responsive Design (Bootstrap) und verschiebt zusätzliche Buttons, die mit Leaflet.EasyButton hinzugefügt wurden.

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