Platzieren von Steuerelementen außerhalb des Kartencontainers mit Leaflet?

Kann mir jemand sagen, wie ich mit Leaflet Steuerelemente außerhalb des Karteninhalts platzieren kann?

In diesem Fall möchte ich nur das Ebenenwechsel-Steuerelement außerhalb des Kartenobjekts platzieren.

Leaflet wedelt viel mit der Hand, um die Implementierung des Kartenportals zu verbergen, aber zum Glück haben sie sich eine Lösung ausgedacht!

Die getContainerFunktion ist genau das, was Sie brauchen. Dies gibt den eigentlichen HTML-Knoten zurück, nicht nur das Markup.

Es ist dann genauso einfach, den Knoten zu ent-childen (?) Und ihn mit ein paar Zeilen Javascript einem neuen Elternteil zuzuweisen.

Arbeitsbeispiel und Kommentare (und ein Kick-Ass-Kachelset)!

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

Der Code

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

Sie müssen alle Kinder rekursiv durchgehen und sie ihren Eltern neu zuweisen. In der zweiten Antwort finden Sie eine einfache rekursive Schleife.

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

Einfacher möglicher Weg, den ich benutzt habe:

Fügen Sie unter dem HTML-Tag Folgendes hinzu, um die Steuerelemente der Broschüre zu verschieben:

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

JavaScript-Code:

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