How can i put the layer control into a div ??? (or any other controls)

[Kolam Training Center Admin]

Hi,
I would like to modifiy our UI design, including some leaflet controls outsaide the map area...to a DIV of course, but how ?
thanks for your answer !
I'm using 0.4.0 !

[Stefan Göppert]

Hi,

define a global map object and you can access it in this way: <a onclick="map.zoomIn(); return false;" href="#">
Have a look at this page: http://leaflet.cloudmade.com/reference.html#map-set-methods

Best regards,
Stefan

[Kolam Training Center Admin]

Hi Stefan, thanks for your answer, actually, it covers an other question of mine !!! Great !

But this question is more about "How to move the layer control out of the map and include it into an html <div> ?"

[Vladimir Agafonkin]

Actually control's onAdd returns the DOM element in which it is rendered, so you can do this:

myDiv.appendChild(L.control.layers(...).onAdd(map));

2012/8/3 Kolam Training Center Admin <kola...@gmail.com>

--
 
 
 

--
Vladimir Agafonkin
http://agafonkin.com/en
+380 (93) 745 44 61

[Kolam Training Center Admin]

Hi Vladimir, thanks for your prompt answer !
but i miss a point :

in my js, i have now:
<code>
myDiv.appendChild(L.control.layers(baseLayers, overlays, {
            autoZIndex: true,
            collapsed: false)
.onAdd(map));
</code>

and in my html:
<code>
<div id="myDiv></div>
</code>

but nothing show up !!!
What i miss ?

[Andreas Günther]

Same here. what is wrong?

[amrit karmacharya]

i did

 $('#layersControl').appendChild(new L.control.layers(baseLayers, overlays,{collapsed:false}).onAdd(map));

and the console says Uncaught TypeError: Cannot read property 'hasLayer' of undefined

if i do L.control.layers(baseLayers,overlays).addTo(map); everything is fine.

[scott rivas]

We have had some success on a project using the following code:

var myControl = L.control.layers(overlays,null,{collapsed:false});
myControl._map = map;
var myControlDiv = myControl.onAdd(map);

document.getElementById('controlDiv').appendChild(myControlDiv);

however the control does not seem to function correctly when selecting which layers should be visible

[GeoVision Environmental]

Try $('#layersControl').append(new L.control.layers(baseLayers, overlays,{collapsed:false}).onAdd(map));
Then to hide layerControl in map view:
$('.leaflet-top.leaflet-right').hide();

[Jeff Mitzelfelt]

This worked for me

var layerControl = L.control.layers(baseLayers, overLayers,{

collapsed: false//

});

layerControl.addTo(map);

layerControl._container.remove();

document.getElementById('divMapInfo').appendChild(layerControl.onAdd(map));