¿Colocar controles fuera del contenedor del mapa con Leaflet?

¿Alguien puede decirme cómo puedo colocar controles fuera del contenido del mapa con Leaflet?

En este caso, solo quiero colocar el control de cambio de capa fuera del objeto del mapa.

leaflet

— mauricio santos
fuente

Leaflet agita las manos para ocultar la implementación del portal del mapa, pero por suerte, ¡han pensado en una solución!

La getContainerfunción es justo lo que necesitas. Esto devuelve el nodo HTML real, no solo el marcado.

Entonces es tan fácil como desanudar (?) El nodo y asignarlo a un nuevo padre, con un par de líneas de Javascript.

Ejemplo de trabajo y comentarios (¡y un juego de fichas increíble!)

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

El código

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

Debe revisar recursivamente a todos los niños y reasignarlos a sus padres. Vea la segunda respuesta para un bucle recursivo simple.

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

— RomaH
fuente

Buen trabajo. Ya lo votó, pero ¿le importaría agregar el JavaScript relevante a su respuesta?

— elrobis

a.appendChild(control.onAdd(map))debería ser suficiente. Ver también stackoverflow.com/questions/36041651/…

— ghybs el

Funcionó bien con la solución getContainer. Pero cuando probé con a.appendChild (control.onAdd (mapa)), todas las capas de wms y el control de capa desaparecen.

— mauricio santos

Actualizo mi respuesta con un bucle recursivo para atraer a los niños, lo siento. Avísame si esto no funciona.

— RomaH

@mauriciosantos Mi mal, no funciona tan simplemente para L.control.layers.

— ghybs

Manera simple posible que he usado:

Agregue la etiqueta html a continuación, donde desee mover los controles del prospecto:

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

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

— Rahul Mahadik
fuente