Kontrolleri Leaflet ile harita konteynerinin dışına yerleştirmek?

Birisi bana Leaflet ile harita içeriğinin dışına nasıl kontrol yerleştirebileceğimi söyleyebilir mi?

Bu durumda, katman anahtarı denetimini harita nesnesinin dışına yerleştirmek istiyorum.

Leaflet, harita portalının uygulanmasını gizlemek için çok fazla el sallıyor, ancak sizin için bir çözüm düşündükleri için şanslı!

getContainerFonksiyon İhtiyacınız olan şey. Bu, yalnızca biçimlendirmeyi değil, gerçek HTML düğümünü döndürür.

Daha sonra düğümü alttan çıkarma (?) Kadar kolay ve birkaç satır Javascript ile yeni bir üst öğeye atar.

Çalışma örneği ve yorumları (ve bir tekme karo seti)!

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

Kod

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

Tüm çocukları özyinelemeli olarak geçmeli ve ebeveynlerine yeniden atamalısınız. Basit bir özyinelemeli döngü için ikinci cevaba bakın.

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

Basit olası yolu kullandım:

Broşür kontrollerini taşımak istediğiniz html etiketinin altına ekleyin:

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

JavaScript kodu:

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