リーフレット:レイヤーコントロールメニューを移動するには?


11

これはばかげた質問かもしれませんが、これを達成するための文書化された方法を見つけることができませんでした。

レイヤーコントロールメニューを、デフォルトのズームイン/アウトボタンの近くの左上に自由に配置したいと思います。

私のレイヤーコントロールは次のようになります:

// Group layers as overlay pane
overlayPane = {
  "Endpoints" : endpointMarkerLayer,
  "Links" : linkLineLayer
};

// Add a layer control element to the map
layerControl = L.control.layers(null, overlayPane);
layerControl.addTo(map);

Where endpointMarkerLayerlinkLineLayerは、それぞれマーカーとポリラインを含むレイヤーです。

メニューが表示される場所を指定するオプションはありますか?あるいは、コントロールメニューのDOMオブジェクトへの参照を取得して、カスタムクラスを割り当て、CSSでの配置をオーバーライドするにはどうすればよいですか?

回答:


14

ここのドキュメントによると、レイヤーコントロールを作成するときに、オプションとして位置を渡すことができます。

募集職種はこちら

overlayPane = {
  "Endpoints" : endpointMarkerLayer,
  "Links" : linkLineLayer,
};

// Add a layer control element to the map
layerControl = L.control.layers(null, overlayPane, {position: 'topleft'});
layerControl.addTo(map);

うわー、どうしてそれを逃したの?愚かな感じ。^^
fgysinがモニカを復活させる

ここでは同じように... Feeking
Stender

5

ケルソの答えは正しいです。ただし、ドキュメント(およびAPI)は少し混乱します。たとえば、次の例に基づいてカスタム情報ボックスを作成するには、http//leafletjs.com/examples/choropleth.htmlこれを実行できます。

var mapInfo = L.control({position:'topleft'});

info.onAdd = function (map) {
  this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
  this.update();
  return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
    '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
    : 'Hover over a state');
};

info.addTo(map);

オプションは、コントロールオブジェクトで設定されます。したがって、オーバーレイコントロールを配置するためにこれを行うことができると思うかもしれません。

// incorrect
var layerControl = L.control({position:'topleft'}).layers(null, mapOverlays).addTo(map);

上記のように、これを行う正しい方法は次のとおりです。

// correct
var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.