Menempatkan kontrol di luar wadah peta dengan Leaflet?

Dapatkah seseorang memberi tahu saya bagaimana saya bisa menempatkan kontrol di luar konten peta dengan Leaflet?

Dalam hal ini, saya hanya ingin menempatkan kontrol sakelar layer di luar objek peta.

Leaflet memang banyak melambaikan tangan untuk menyembunyikan implementasi portal peta tetapi beruntung bagi Anda mereka telah memikirkan solusinya!

The getContainerFungsi hanya apa yang Anda butuhkan. Ini mengembalikan simpul HTML yang sebenarnya, bukan hanya markup.

Ini kemudian semudah un-childing (?) Node dan menugaskannya ke induk baru, dengan beberapa baris Javascript.

Contoh dan komentar yang berfungsi (dan tileset kick-ass)!

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

Kode

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

Anda harus melalui semua anak secara rekursif dan memindahkan mereka ke orang tua mereka. Lihat jawaban kedua untuk loop rekursif sederhana.

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

Cara sederhana yang mungkin saya gunakan:

Tambahkan tag html di bawah ini, tempat Anda ingin memindahkan kontrol leaflet:

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

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