[GIS] Leaflet Layer Control appended to panel but duplicated

leaflet

So I've used jquery append to attempt to move my leaflet group layer controls on to a panel. This was successful, however the original still exists on the right side of the map object. I've tried to remove this using jquery and css with no luck. I think my problem is I have set an id to the control but the id is only applied to the second instance of it, so the original control remains…Any ideas?

$("<input type='button' name='layercontrol' value='EMEA' id='buttonstyle' /><br />").click(function() {
$("#emealayer").toggle("slow");
}).appendTo(".panel");

var EMEA = {
"EMEA":object
};
var layerControlEMEA = L.control.groupedLayers({},EMEA, {collapsed:false} );

layerControlEMEA.addTo(edit.map);
$('.panel').append(layerControlEMEA.onAdd(edit.map));

layerControlEMEA._container.setAttribute('id','emealayer');

Best Answer

This is my solution

layersControlSettings = L.control.groupedLayers(baseLayers, overlays, {
    collapsed: false
});
layersControlSettings.addTo(map);
$('#layersControl').append(layersControlSettings.onAdd(map));  // layersControl is the div i want to add it to

I Added this line after adding to the panel

$('.leaflet-top.leaflet-right').hide(); // temporary solution for hiding layers control
Related Question