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

— Mauricio Santos
quelle

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

— RomaH
quelle

Gute Arbeit. Sie haben bereits abgestimmt, aber möchten Sie Ihrer Antwort das entsprechende JavaScript hinzufügen?

— Elrobis

a.appendChild(control.onAdd(map))sollte genug sein. Siehe auch stackoverflow.com/questions/36041651/…

— ghybs

Mit der getContainer-Lösung hat es gut funktioniert. Aber als ich es mit dem a.appendChild (control.onAdd (map)) versuchte, verschwanden alle WMS-Ebenen und die Ebenensteuerung.

— Mauricio Santos

Ich aktualisiere meine Antwort mit einer rekursiven Schleife, um Kinder zu bekommen, sorry. Bitte lassen Sie mich wissen, wenn dies nicht funktioniert.

— RomaH

@mauriciosantos Meine schlechte, es funktioniert nicht so einfach für L.control.layers.

— Ghybs

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

— Rahul Mahadik
quelle