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

모든 어린이를 재귀 적으로 살펴보고 부모에게 다시 할당해야합니다. 간단한 재귀 루프에 대해서는 두 번째 답변을 참조하십시오.

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

내가 사용한 간단한 가능한 방법 :

전단지 컨트롤을 이동할 html 태그 아래에 추가하십시오.

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

자바 스크립트 코드 :

$(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]);
        }
 });