リーフレットズームコントロールを希望の位置に配置する方法

Question

ズームコントロールをマップの右上、つまりマップの右端の中央に配置したいとします。私は位置が

topleft 
topright 
bottomleft 
bottomright 

することができ、次のコード

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

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

を使用して別のコーナーでズームコントロールを配置するための解決策を発見した。しかし、私の目標は、右中央にコントロールウィンドウを置くことです。あるいは、コーナーにコントロールを置いても、上に余白を追加したい。どうやってやるの？何か考えていますか？

Answer 1

もう1つの解決策（およびおそらくよりクリーンな）は、4つのコーナーのほかに、追加のコントロールプレースホルダを作成することです。

素晴らしい利点は、複数のコントロールをそれらのプレースホルダの1つに配置できることです。標準的なコーナーのように重なり合うことなく積み重ねられます。

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

そのDOMの親がマップコンテナ自体であるので、次に、それは、CSSでそれらのプレースホルダのスタイリングが容易となります。したがって、top,bottom,leftおよびrightは、パーセンテージ（親の次元を使用する）で指定できます。

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

としてvertical centeringプレースホルダ自体のために、あなたのお気に入りの技法を使用することができます。ここでは、CSS3 Transformを使用してプレースホルダをその高さの半分だけオフセットしています。

必要に応じて（たとえば、古いブラウザとの互換性のために）、iH8と同様に、このオフセットを実行するために「負荷時に計算」メソッドを使用できます。しかし、新しいコントロールをプレースホルダに追加するときに限り、map resizeで実行する必要はありません。

デモ：これは、CSSの1行で、少し簡単に行うことができますhttp://jsfiddle.net/ve2huzxw/8/

Answer 2

マップのコンテナの高さを2で割ってください。ズームのコンテナの高さを2で割った値を減算します。絶対位置を使用し、トップの位置を割り当てます。Plunker上

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; 

例：あなたはこのにマップのたびに行う必要があります固定サイズのマップ・コンテナを使用していないことをhttp://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

注意コンテナのサイズが変更されます。指定された例のように、メソッドにスローし、マップのresizeイベントに接続します。

Answer 3

。レスポンシブデザイン（ブートストラップ）で動作し、Leaflet.EasyButtonで追加された追加のボタンも移動します。

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