web-dev-qa-db-ja.com

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

ズームコントロールをマップの右中央、つまりマップの右端の中央に配置したい。私は次のコードを使用してズームコントロールをさまざまなコーナーに配置する解決策を見つけました

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

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

そのため、ポジションは

topleft
topright
bottomleft
bottomright

しかし、私の目標は、コントロールウィンドウを右中央に配置することです。または、コントロールをコーナーに配置して、上部にマージンを追加します。どうやってやるの？アイデアはありますか？

leaflet
33
Md Johirul Islam

デフォルトで提供される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;
    z-index: 1000;
    pointer-events: none;
    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変換を使用して、プレースホルダーを独自の高さの半分だけオフセットしました。

必要に応じて（たとえば、古いブラウザーの互換性のため）、「 iH8の答え 」と同様に、「calculate-on-load」メソッドを使用してこのオフセットを実行できます。ただし、新しいコントロールをプレースホルダーに追加する場合にのみ、マップのサイズ変更で実行する必要はなくなりました。

ライブデモ： https://plnkr.co/edit/bHJwfm598d1Ps7MpLG0k?p=preview

注：現在、オープンなPR（ Leaflet/Leaflet＃5554 ）がありますが、Internet Explorerの古いバージョンと互換性がないため、Leafletコアに統合される可能性は低いです。

29
ghybs

マップのコンテナの高さをつかみ、2で割ります。ズームのコンテナの高さを2で除算します。絶対配置を使用して、上部の位置を割り当てます。

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;

Plunkerの例： http://plnkr.co/edit/Yg8phGDcCBS1IlGgpKa2?p=preview

固定サイズのマップコンテナーを使用していない場合は、マップのコンテナーのサイズが変更されるたびにこれを行う必要があることに注意してください。メソッドにスローし、提供された例のようにマップのサイズ変更イベントにフックします。

6
iH8

最もシンプルで正確

var map = L.map('map', {
    maxZoom: 20,
    minZoom: 6,
    zoomControl: false
});

L.control.zoom({
    position: 'bottomright'
}).addTo(map);

enter image description here

5
saadat ali

これは、CSSを1行追加するだけで簡単に行えます。レスポンシブデザイン（ブートストラップ）で動作し、Leaflet.EasyButtonで追加された追加ボタンも移動します。

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

マップが複雑でない場合、最も簡単な方法はCSSを使用することです。

あなたの場合、次のCSSを追加するだけです：

.leaflet-top {
bottom: 0;
}

.leaflet-top .leaflet-control-zoom {
top:50%;
transform: translateY(-50%);
}
2
Jack J