Leafletでマップコンテナーの外部にコントロールを配置しますか？

Leafletを使用して、マップコンテンツの外部にコントロールを配置する方法を教えてもらえますか？

この場合、レイヤースイッチコントロールをマップオブジェクトの外側に配置するだけです。

Leafletは多くの手を振ってマップポータルの実装を隠しますが、幸運なことに彼らは解決策を考えました！

getContainer機能はあなたが必要なものだけです。これは、マークアップだけでなく、実際のHTMLノードを返します。

その後、ノードを子育て解除（？）するだけで簡単になり、数行のJavascriptを使用して新しい親に割り当てます。

作業例とコメント（およびキックタイルタイルセット）！

http://codepen.io/romahicks/pen/ONmPmp

コード

//Create Layer
var baseMap = new    L.TileLayer('http://{s}.tiles.mapbox.com/v3/gvenech.m13knc8e/{z}/{x}/{y}.png'   );

var baseMapIndex = {
  "Map": baseMap
};

// Create the map
var map = new L.map('map', {
  center: new L.LatLng(41.019829, 28.989864),
  zoom: 14,
  maxZoom: 18,
  zoomControl: false, // Disable the default zoom controls.
  layers: baseMap
});

// Create the control and add it to the map;
var control = L.control.layers(baseMapIndex);
control.addTo(map);

 // Call the getContainer routine.
 var htmlObject = control.getContainer();
 // Get the desired parent node.
 var a = document.getElementById('new-parent');

 // Finally append that node to the new parent, recursively searching out and re-parenting nodes.
 function setParent(el, newParent)
 {
    newParent.appendChild(el);
 }
 setParent(htmlObject, a);

すべての子を再帰的に調べて、親に再割り当てする必要があります。単純な再帰ループの2番目の答えを参照してください。

/programming/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript

私が使用した簡単な可能な方法：

リーフレットコントロールを移動する場所に以下のhtmlタグを追加します。

<div id="custom-map-controls"></div>

JavaScriptコード：

$(document).ready(function () {

var newParent = document.getElementById('custom-map-controls');
        var oldParent = document.getElementsByClassName("leaflet-top leaflet-right")

        while (oldParent[0].childNodes.length > 0) {
            newParent.appendChild(oldParent[0].childNodes[0]);
        }
 });