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 1da0a8b..7ff1857 100644
--- a/src/leaflet.groupedlayercontrol.js
+++ b/src/leaflet.groupedlayercontrol.js
@@ -9,7 +9,10 @@ L.Control.GroupedLayers = L.Control.extend({
position: 'topright',
autoZIndex: true,
exclusiveGroups: [],
- groupCheckboxes: false
+ groupCheckboxes: false,
+ groupsCollapsable: false,
+ groupsExpandedClass: "leaflet-control-layers-group-collapse-default",
+ groupsCollapsedClass: "leaflet-control-layers-group-expand-default",
},
initialize: function (baseLayers, groupedOverlays, options) {
@@ -66,7 +69,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;
@@ -276,6 +279,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;
@@ -296,8 +314,19 @@ L.Control.GroupedLayers = L.Control.extend({
return label;
},
+
+ _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 () {
+ _onGroupInputClick: function (event) {
+ L.DomEvent.stopPropagation(event);
var i, input, obj;
var this_legend = this.legend;