12

Can someone tell me how I can place controls outside of the map content with Leaflet?

In this case, I just want to place the layer switch control outside the map object.

enter image description here

17

Leaflet does a lot of hand-waving to hide implementation of the map portal but lucky for you they have thought of a solution!

The getContainer function is just what you need. This returns the actual HTML node, not just the markup.

It is then just as easy as un-childing(?) the node and assign it to a new parent, with a couple lines of Javascript.

Working example and comments (and a kick-ass tileset)!

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

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

You must recursively go through all the children and reassign them to their parent. See the second answer for a simple recursive loop.

https://stackoverflow.com/questions/20910147/how-to-move-all-html-element-children-to-another-parent-using-javascript

  • Nice work. Already up-voted you, but would you mind adding the relevant JavaScript to your answer? – elrobis Mar 22 '16 at 18:01
  • a.appendChild(control.onAdd(map)) should be enough. See also stackoverflow.com/questions/36041651/… – ghybs Mar 22 '16 at 19:56
  • It worked well with the getContainer solution. But when i tried with the a.appendChild(control.onAdd(map)), all the wms layers and layer control disappear. – mauricio santos Mar 23 '16 at 10:03
  • I update my answer with a recursive loop to get children, sorry. Please let me know if this doesn't work. – RomaH Mar 23 '16 at 12:40
  • @mauriciosantos My bad, it does not work as simply for L.control.layers. – ghybs Mar 23 '16 at 16:33
0

Simple possible way i have used:

Add below html tag, where you want move the leaflet controls:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.