Adding feature to make individual groups collapsable

ismyrnow#46 squashed + lint fixed Collapsable Groups. Added a config option "groupsCollapsable" which if set to true, will make each group header individually collapsable. This is useful when dealing with either small map elements, or a larger number of layers within the groups. Also added two supporting config settings: "groupsCollapseClass" and "groupsExpandClass" which control the css styles used for the toggle indicators, allowing users to override the default +/- indicators. Setting one to "glyphicon glyphicon-chevron-right" will use the glyphicon provided with bootstrap for example.
NHellFire · Feb 14, 2018 · 55358a3 · 55358a3
1 parent 992abb8
commit 55358a3
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,25 @@ L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
 
 ![advanced preview](preview-advanced.png)
 
+#### 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);
+```
+
+![collapsable preview](preview-collapsable.png)
+
 ### 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
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Collapsable Example (Bootstrap Glyphicons)</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
+  <link rel="stylesheet" href="../src/leaflet.groupedlayercontrol.css" />
+
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
+
+</head>
+<body>
+  <div id="map" style="width: 600px; height: 400px"></div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
+  <script src="../src/leaflet.groupedlayercontrol.js"></script>
+  <script src="exampledata.js"></script>
+  <script>
+    var map = L.map('map', {
+      center: [39.73, -104.99],
+      zoom: 10,
+      layers: [ExampleData.Basemaps.Grayscale, ExampleData.LayerGroups.cities]
+    });
+
+    // Overlay layers are grouped
+    var groupedOverlays = {
+      "Landmarks": {
+        "Cities": ExampleData.LayerGroups.cities,
+        "Restaurants": ExampleData.LayerGroups.restaurants
+      },
+      "Random": {
+        "Dogs": ExampleData.LayerGroups.dogs,
+        "Cats": ExampleData.LayerGroups.cats
+      }
+    };
+
+    // Use the custom grouped layer control, not "L.control.layers"
+    L.control.groupedLayers(ExampleData.Basemaps, groupedOverlays, {groupsCollapsable: true, groupsExpandedClass: "glyphicon glyphicon-chevron-down", groupsCollapsedClass: "glyphicon glyphicon-chevron-right"}).addTo(map);
+  </script>
+</body>
+</html>
diff --git a/example/collapsable-basic.html b/example/collapsable-basic.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Collapsable Example</title>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
+  <link rel="stylesheet" href="../src/leaflet.groupedlayercontrol.css" />
+</head>
+<body>
+  <div id="map" style="width: 600px; height: 400px"></div>
+
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
+  <script src="../src/leaflet.groupedlayercontrol.js"></script>
+  <script src="exampledata.js"></script>
+  <script>
+    var map = L.map('map', {
+      center: [39.73, -104.99],
+      zoom: 10,
+      layers: [ExampleData.Basemaps.Grayscale, ExampleData.LayerGroups.cities]
+    });
+
+    // Overlay layers are grouped
+    var groupedOverlays = {
+      "Landmarks": {
+        "Cities": ExampleData.LayerGroups.cities,
+        "Restaurants": ExampleData.LayerGroups.restaurants
+      },
+      "Random": {
+        "Dogs": ExampleData.LayerGroups.dogs,
+        "Cats": ExampleData.LayerGroups.cats
+      }
+    };
+
+    // Use the custom grouped layer control, not "L.control.layers"
+    L.control.groupedLayers(ExampleData.Basemaps, groupedOverlays, {groupsCollapsable: true}).addTo(map);
+  </script>
+</body>
+</html>
diff --git a/preview-collapsable.png b/preview-collapsable.png
diff --git 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;
+}
diff --git a/src/leaflet.groupedlayercontrol.js b/src/leaflet.groupedlayercontrol.js
@@ -10,6 +10,9 @@ 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,
@@ -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;