Placer les contrôles à l'extérieur du conteneur de carte avec Leaflet?

Quelqu'un peut-il me dire comment placer des contrôles en dehors du contenu de la carte avec Leaflet?

Dans ce cas, je veux juste placer le contrôle de changement de couche à l'extérieur de l'objet de carte.

Leaflet fait beaucoup de gestes pour masquer la mise en œuvre du portail de la carte, mais heureusement pour vous, ils ont pensé à une solution!

La getContainerfonction est exactement ce dont vous avez besoin. Cela renvoie le nœud HTML réel, pas seulement le balisage.

Il est alors aussi simple que d'annuler (?) Le nœud et de l'affecter à un nouveau parent, avec quelques lignes de Javascript.

Exemple de travail et commentaires (et un ensemble de tuiles kick-ass)!

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

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

Vous devez parcourir récursivement tous les enfants et les réaffecter à leurs parents. Voir la deuxième réponse pour une boucle récursive simple.

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

Simple moyen possible que j'ai utilisé:

Ajoutez la balise html ci-dessous, où vous souhaitez déplacer les contrôles du dépliant:

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

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