diff --git a/README.md b/README.md
index 1de8bc5..0398c38 100644
--- a/README.md
+++ b/README.md
@@ -59,6 +59,25 @@ L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
+#### Collapsable Groups
+
+Enabling collapsable groups in the switcher can be done with the following options
+
+```javascript
+var options = {
+ // enable basic collapsability
+ groupsCollapsable: true,
+ // (Optional) The css class(es) used to indicated the group is expanded
+ groupsExpandedClass: "glyphicon glyphicon-chevron-down",
+ // (Optional) The css class(es) used to indicated the group is collapsed
+ groupsCollapsedClass: "glyphicon glyphicon-chevron-right"
+};
+
+L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
+```
+
+
+
### Adding a layer
Adding a layer individually works similarly to the default layer control,
diff --git a/example/collapsable-advanced.html b/example/collapsable-advanced.html
new file mode 100644
index 0000000..c47a091
--- /dev/null
+++ b/example/collapsable-advanced.html
@@ -0,0 +1,42 @@
+
+
+
+ Collapsable Example (Bootstrap Glyphicons)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/example/collapsable-basic.html b/example/collapsable-basic.html
new file mode 100644
index 0000000..ecac5ff
--- /dev/null
+++ b/example/collapsable-basic.html
@@ -0,0 +1,39 @@
+
+
+
+ Collapsable Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/preview-collapsable.png b/preview-collapsable.png
new file mode 100644
index 0000000..a55157d
Binary files /dev/null and b/preview-collapsable.png differ
diff --git a/src/leaflet.groupedlayercontrol.css b/src/leaflet.groupedlayercontrol.css
index 3be2cc4..aebaaaa 100644
--- a/src/leaflet.groupedlayercontrol.css
+++ b/src/leaflet.groupedlayercontrol.css
@@ -12,3 +12,23 @@
overflow-y: scroll;
padding-right: 10px;
}
+
+.leaflet-control-layers-group.group-collapsable.collapsed .leaflet-control-layers-group-collapse,
+.leaflet-control-layers-group.group-collapsable:not(.collapsed) .leaflet-control-layers-group-expand,
+.leaflet-control-layers-group.group-collapsable.collapsed label:not(.leaflet-control-layers-group-label){
+ display: none;
+}
+
+.leaflet-control-layers-group-expand-default:before{
+ content: "+";
+ width: 12px;
+ display: inline-block;
+ text-align: center;
+}
+
+.leaflet-control-layers-group-collapse-default:before{
+ content: "-";
+ width: 12px;
+ display: inline-block;
+ text-align: center;
+}
\ No newline at end of file
diff --git a/src/leaflet.groupedlayercontrol.js b/src/leaflet.groupedlayercontrol.js
index a660cea..b7f20b6 100644
--- a/src/leaflet.groupedlayercontrol.js
+++ b/src/leaflet.groupedlayercontrol.js
@@ -10,10 +10,13 @@ L.Control.GroupedLayers = L.Control.extend({
autoZIndex: true,
exclusiveGroups: [],
groupCheckboxes: false,
+ groupsCollapsable: false,
+ groupsExpandedClass: 'leaflet-control-layers-group-collapse-default',
+ groupsCollapsedClass: 'leaflet-control-layers-group-expand-default',
// Whether to sort the layers. When `false`, layers will keep the order
// in which they were added to the control.
sortLayers: false,
- // A [compare function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
+ // A [compare function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)
// that will be used for sorting the layers, when `sortLayers` is `true`.
// The function receives both the `L.Layer` instances and their names, as in
// `sortFunction(layerA, layerB, nameA, nameB)`.
@@ -83,7 +86,7 @@ L.Control.GroupedLayers = L.Control.extend({
var id = L.Util.stamp(layer);
var _layer = this._getLayer(id);
if (_layer) {
- delete this.layers[this.layers.indexOf(_layer)];
+ this._layers.splice(this._layers.indexOf(_layer), 1);
}
this._update();
return this;
@@ -296,6 +299,21 @@ L.Control.GroupedLayers = L.Control.extend({
}
}
+ if (this.options.groupsCollapsable) {
+ groupContainer.classList.add('group-collapsable');
+ groupContainer.classList.add('collapsed');
+
+ var groupMin = document.createElement('span');
+ groupMin.className = 'leaflet-control-layers-group-collapse '+this.options.groupsExpandedClass;
+ groupLabel.appendChild(groupMin);
+
+ var groupMax = document.createElement('span');
+ groupMax.className = 'leaflet-control-layers-group-expand '+this.options.groupsCollapsedClass;
+ groupLabel.appendChild(groupMax);
+
+ L.DomEvent.on(groupLabel, 'click', this._onGroupCollapseToggle, groupContainer);
+ }
+
var groupName = document.createElement('span');
groupName.className = 'leaflet-control-layers-group-name';
groupName.innerHTML = obj.group.name;
@@ -317,7 +335,18 @@ L.Control.GroupedLayers = L.Control.extend({
return label;
},
- _onGroupInputClick: function () {
+ _onGroupCollapseToggle: function (event) {
+ L.DomEvent.stopPropagation(event);
+ L.DomEvent.preventDefault(event);
+ if (this.classList.contains('group-collapsable') && this.classList.contains('collapsed')) {
+ this.classList.remove('collapsed');
+ } else if (this.classList.contains('group-collapsable') && !this.classList.contains('collapsed')) {
+ this.classList.add('collapsed');
+ }
+ },
+
+ _onGroupInputClick: function (event) {
+ L.DomEvent.stopPropagation(event);
var i, input, obj;
var this_legend = this.legend;