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() {

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



This is my solution

layersControlSettings = L.control.groupedLayers(baseLayers, overlays, {
    collapsed: false
$('#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
  • Aw interesting..that does remove it, thanks.. but how did you keep the image tile server control still visible or move it elsewhere? – vis Jun 4 '14 at 12:40
  • Sorry, which tile server are you using? maybe you could post a new question with more info. – neogeomat Jun 4 '14 at 16:42
  • for now i used this to remove it, thanks for help – yussan Nov 5 '19 at 5:08

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.