Posizionamento dei controlli all'esterno del contenitore della mappa con Leaflet?

Qualcuno può dirmi come posso posizionare i controlli al di fuori del contenuto della mappa con Leaflet?

In questo caso, voglio solo posizionare il controllo dell'interruttore di livello all'esterno dell'oggetto mappa.

Il volantino fa molto agitando le mani per nascondere l'implementazione del portale della mappa ma per fortuna hanno pensato a una soluzione!

La getContainerfunzione è proprio ciò di cui hai bisogno. Ciò restituisce il nodo HTML effettivo, non solo il markup.

È quindi semplice come non figlio (?) Il nodo e assegnarlo a un nuovo genitore, con un paio di righe di Javascript.

Esempio funzionante e commenti (e un set di piastrelle kick-ass)!

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

Il codice

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

Devi ricorrere in modo ricorsivo a tutti i bambini e riassegnarli al loro genitore. Vedi la seconda risposta per un semplice ciclo ricorsivo.

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

Modo semplice possibile che ho usato:

Aggiungi sotto il tag html, dove vuoi spostare i controlli del volantino:

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

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