When I try to remove all layers in a group, I get an error "obj undefined" in line 69 of leaflet.groupedlayercontrol.js
Here's a quick fix that fix my needs:
Replace line 69 with:
delete this._layers[this._layers.indexOf(_layer)];
Replace line 177 with:
overlaysPresent = overlaysPresent || obj==undefined ? undefined : obj.overlay;
Enclose _addItem: function (obj) { from line 221 to 298 inserting
Line 222: if (obj != undefined) {
Line 299: }

I know I should clone and pull but I'm a bit out of time right now, sorry.
Nice, useful and simple plugin by the way, thanks a lot!

I would like the group checkbox to be set to selected if all overlays in the group is selected when adding them to the map. (Currently the group checkbox is always unselected no matter if the overlays is added to the map or not from the beginning)

I would like the group checkbox to be updated when selecting/deselecting the overlays in the group. For example, let's say I have 5 overlays and 4 of them is selected (and visible on the map). When I select the last overlay, then I want the group checkbox to be selected as well.

It would be nice if you made it available through Bower.

//Thanks!

Lets say you have a group that is exclusive, but you want it to have a none option. there is no good way to do this without throwing errors.

Would love someone to help me defined the typing's for this plugin. I've been struggling with it for a few days but haven't gotten far. It may be because I'm trying to integrate this into a project using ngx-leaflet.

Is it possible to have multiple exclusive groups where the radio button transfers between them? As in only one layer selected from all layers available?

Right now it seems there can be multiple exclusive groups, but each always has to have a layer selected

Google Chrome is now touch-enabled, so L.Browser.touch returns true, meaning line 91 is called instead of lines 93 & 94.

I'm guessing these lines are intended to correct the UX on mobile devices rather than Chrome?

Hi I could not get the "groupCheckboxes: true" option to work when using the "min" version from the dist folder.

Using the version from the src folder it worked as intended without any changes.

Does someone know how to implement this code in my python file?

It would be useful (for me, anyway) to have groups of mutually exclusive layers that could also be deselected such that none of the layers is showing. In the current implementation of exclusive layers using radio buttons, there is no way to turn off all of the layers once one has been selected. I would like to have mutually exclusive layers controlled by checkboxes that behaved as radio buttons such that when one is already selected and another is selected the first becomes unselected and turns off (as with radio buttons) but also allowing the user to deselect and turn off the currently selected layer and have none of the layers visible.

Hi Ishmael! I´ve manage to move your nice menu inside a pane in Tobias Bieniek's sidebar.v2... Both plugins works together like a charm! Two thumbs up for both of you for making so terrific pice of software...
Now I want to modify the style of your layer control so both apps can give a better user experience, but I have no clue where to start. I would like to disable the layers container box as I'm showing in next image.
I think the solution is probably inside the CSS file, but as I said, I need a hint to accomplish this. Could you give me a hand with this? Thankyou in advance, M.

PS: This is not an issue "per se", and I think it could be manage as an enhancement, but have no idea how to qualify it like that... sorry to put it inside of "Issues"...

When calling removeLayer() to remove a base layer (last one displayed in group layer control) and then calling addBaseLayer() to readd the layer; the grouplayer control only displays base layers and cannot display the group layer options.

It appears that html controls are being appended/added again/duplicated in the _domGroups[0].innerHTML

Updating the following two functions appears to fix this:

addBaseLayer: function (layer, name) {
this._addLayer(layer, name);
/Start inserted code/
this._domGroups.length = 0;
/End inserted code/
this._update();
return this;
},

addOverlay: function (layer, name, group) {
this._addLayer(layer, name, group, true);
/Start inserted code/
this._domGroups.length = 0;
/End inserted code/
this._update();
return this;
},

Hey there. Great work here.
I was checking your examples and the code is in the source view but, the demo maps aren't appearing.
Thanks!

Hi, when adding radio button option for one group, a checkbox is also added to the title of the checkbox group (see your advanced usage example). Can we delete/hide it?
Thx

Hello.

Due to massive api update in Leaflet 1.0, plugin is not working.
Error: Uncaught TypeError: this.callInitHooks is not a function

Do you plan to add support for 1.0?

It appears that the layer groups draw in the order in which they are added to the control. There are some situations where this may or may not be feasible, and you may want to manually specify the ordering of the layer groups when the control is initialized.

Add an option that when set to true, forces grouped layers to be mutually exclusive. For example: if layers A1 and A2 were in the same group, they could not both be on at the same time. Instead, turning one on would disable any others in the same group.

I've moved on from this project, and am looking for a maintainer for it. I'm willing to transfer ownership of this Github repository, as well as the NPM package.

Chime in here if you're interested. At least one contributor will need to chime in to approve the transfer.

when calling
layerControl.removeLayer(layer);
the layer is removed from the control but not from the map,
the following code appears to fix it...

removeLayer: function (layer) {
var id = L.Util.stamp(layer);
/Start inserted code/
var obj = this._layers[id];
if (obj && this._map.hasLayer(obj.layer)) {
this._map.removeLayer(obj.layer);
}
/End inserted code/
delete this._layers[id];
this._domGroups.length=0;
this._update();

return this;

}

I love this plugin!

I'm trying to add a simple close button to work with the grouped layer control, but I'm stuck on how to extend it.

Without using the grouped layer control, I'm able to use the method explained here: https://stackoverflow.com/questions/32584613/manually-close-layer-control-window-javascript

Unfortunately, when I try to merge this method with the grouped layer script, my code fails.

I feel like I'm close, but I just can't seem to get it. I'd appreciate any suggestions.

I'm trying something like this...

`
L.Control.Custom = L.control.groupedLayers.extend({
onAdd: function () {
this._initLayout();
this._addButton();
this._update();
return this._container;
},
_addButton: function () {
var elements = this._container.getElementsByClassName('leaflet-control-layers-list');
var button = L.DomUtil.create('button', 'my-button-class', elements[0]);
button.textContent = 'Close control';
L.DomEvent.on(button, 'click', function(e){
L.DomEvent.stop(e);
this._collapse();
}, this);
}
});

var controlLayer = L.Control.Custom(baseLayers, groupedOverlays, options);
map.addControl(controlLayer);
`

Apologies for the basic questions. Does this support:

1. Groups within groups?
2. Layers not in groups?

Dear contributors,

I would find nice to implement some sort of collapsing of the groups. Here is how I did it quick and dirty with jqm :

if (!groupContainer) {
    [...]

    groupLabel.innerHTML = obj.group.name + "<span class='group-button' id='layers-group-"+obj.group.id+"'>&nbsp-</span>";

    container.appendChild(groupLabel);
    container.appendChild(groupContainer);

    [...]
}

At the end, added :

$('body').delegate('.group-button', 'click', function()
{
    var myid = $(this)[0].id
    console.log(myid)
    if ($("#"+myid).html() == " +")
    {
        $("#leaflet-control-"+myid).children().show()
        $("#"+myid).html(" -")
    }
    else
    {
        $("#leaflet-control-"+myid).children().hide()
        $("#"+myid).html(" +")
    }
})

Best regards,

Here it the code-fragment for 'removeLayer':

 removeLayer: function (layer) {
    var id = L.Util.stamp(layer);
    var _layer = this._getLayer(id);
    if (_layer) {
      delete this.layers[this.layers.indexOf(_layer)]; // `this.layers` should be replaced with `this._layers`
    }
    this._update();
    return this;
  }

Instead of this.layers should be this._layers i guess.

Currently the groups and layers seem to be ordered arbitrarily in the control panel. It would be nice to preserve the order from the group definition or specify the order via a flag.

Thanks for this great plugin! But I have tried all kinds of ways to use this plugin without base layers , I have another control managing the base layers, can you add the ability to use no base layer?

Am i correct in stating that it is currently not possible to add a single layer, which is not part of any group. If you try to do that you get an error that leaflet id was not set. Looking at the code it seems it assumes every entry is a group of 1 or more children.

Has anyone had any success implementing Grouped Layer Control with Leaflet for R? This would be very helpful to have as there are limited abilities to create sub-groups, leaving one with 20 layers such as in my case with no ability to categorize existing groups.

Hi, the scenario is like this:

var geojson = L.geoJson(....);

var groupedOverlays = {
      "Landmarks": {
        "Cities": geojson,
        "Restaurants": geojson2
      },

       };

I used geojson.getLayers() also, but it didn't work.
I am new with leaflet and JS, so sorry for my big misunderstanding.
The rest is the same like in the example. Thanks!

Great plugin!

Is it possible to add custom markers for each overlay category or just in general? If so, where should this code go?

Thanks!

Currently when there's many layers, control layer component cuts and it's not possible to view all group layers.
Adding "overflow:auto" to ".leaflet-control-layers" class works fine on desktop browsers, but not on Android devices.

Hi, I'm using the L.control.groupedLayers. I have markers that get their data from a Google Sheet, in order to do that I used the Tabletop function, but I'm stuck, I don't know how to call it in order to be able to see the markers layer into the L.controlgroupedLayers.

My Tabletop is like this

'var code = "1xi5WW_I1YcLJWKZHhkL7KwEyl2cZjkVVZnnhY0y3rco"

var test = Tabletop.init({
key:code,
callback: function(sheet, tabletop){

for (var i in sheet){
  var data = sheet[i];

  var icon = L.icon({
    iconUrl: data.icon,
    iconSize : [26, 30],
    iconAnchor: [13,30],
    popupAnchor: [0,-30]
  });
  L.marker([data.latitude, data.longitude], {icon: icon}).addTo(map)
}

},
simpleSheet : true,
wanted : ["Feuille 1"]
})'

As you can see I tried to put the Tabletop function into a variable called "test" in order to include it in my GroupedOverlays variable. But when I do that, the checkbox appears on my map but it's not checked, and, when I check it/uncheck it, my Markers layer doesn't move.

My guess is that the L.control.groupedLayers doesn't recognize my Markers as a layer (that's why the box isn't check from the start and that's why when I check/uncheck it, it doesn't work).

Any idea how I can solve this ? Thanks in advance !
Ps : I'm a beginner regarding Javascript

there is no var declaration for j here:

for (i in groupedOverlays) {
  for (j in groupedOverlays[i]) {
    this._addLayer(groupedOverlays[i][j], j, i, true);
  }
}

I have an existing map You can download it here

I dont know how i can possibly make a fiddle with so many files and the map folder so i can only leave a download link.

How can i add this plugin to this project folder? I want this map tiled the way it is but have more control over the layers, etc. Im having a lot of trouble installing the plugin into this existing project.

package name is 'leaflet-groupedlayercontrol' and repo name is 'Leaflet.groupedlayercontrol'

it's somewhat misleading and cost me about 30 seconds of time

hello，i want to change the position for control，how do it，thank you

Using the scroll wheel to scroll a long layer list results in the map zooming instead.

jsfiddle showing this: https://jsfiddle.net/LnzN2/1454/
It works as expected without using grouped layer control: https://jsfiddle.net/LnzN2/1455/

I implemented the plugin in the Leaflet Version 1.0.3. and defined a lot of categorized layers.
It works all fine for initializing the map. But when you do some zooming or moving it throws the following error:

leaflet-src.js:13222 Uncaught TypeError: Cannot read property 'layer' of undefined
at NewClass._checkDisabledLayers (leaflet-src.js:13222)
at NewClass.fire (leaflet-src.js:587)
at NewClass._moveEnd (leaflet-src.js:3432)
at NewClass. (leaflet-src.js:3869)

This is my index.html:

index_1.03.html.txt

Hi there. I have an extensive set of groupedOverlays and a selector box users can choose from about 20 layers. Is there a way I could embed a GeoServer legend graphic right, ideally between the checkbox and layer title? Thanks!

I'm using two of these controls and would like them to be distinguished by different icons when collapsed. I have examined the source and can't see where the icon is specified.

I can't see it in the standard Leaflet LayerControl source either – help please!

How do you envision someone using _createRadioElement: function (name, checked)? I'm interested in creating a few groupings - each preferably radio button groups. So there might be satellite/imagery and terrain (base layers) as a radio button group, then perhaps another radio button group for reference or context, such as counties, watersheds (also polygons), or DEC region (also polygons). Then I'll need to add another dynamic grouping of checkboxes layers. Thank you! This is a good plugin....

As you might know, indexOf in arrays doesn't work in some older browsers, such as IE8. (Line 142)
You can add the function right before you call this function to make it work.

    if (!Array.prototype.indexOf) {
        Array.prototype.indexOf = function (elt) {
            var len = this.length >>> 0;
            var from = Number(arguments[1]) || 0;
            from = (from < 0) ? Math.ceil(from) : Math.floor(from);
            if (from < 0) from += len;

            for (; from < len; from++) {
                if (from in this && this[from] === elt) return from;
            }
            return -1;
        };
    }

Hi,
I'm trying to use this plug in with CartoDB layers. I was able to do so with the L.control.layers function, but not with this one... is it possible?
Thanks!