Skip to content

Adding feature to make individual groups collapsable #46

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ForgottenLords wants to merge 7 commits into
base: gh-pages
Choose a base branch
from
Open

Adding feature to make individual groups collapsable #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
af52090
Added option to enable collapsing layer groups
ForgottenLords Mar 16, 2017
515dc04
Collapsable Groups.
ForgottenLords Mar 16, 2017
e29fa73
Fixed interaction between collapsable groups and group checkboxes
ForgottenLords Mar 16, 2017
3e7f28a
Fixed bug when removing a layer from the control.
ForgottenLords Mar 17, 2017
c788ee6
Merge branch 'gh-pages' of https://github.com/ismyrnow/leaflet-groupe…
ForgottenLords Oct 12, 2017
76f8766
two-space indenting
ForgottenLords Oct 12, 2017
60db308
Add Documentation and Examples
ForgottenLords Oct 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
42 changes: 42 additions & 0 deletions example/collapsable-advanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
39 changes: 39 additions & 0 deletions example/collapsable-basic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Binary file added preview-collapsable.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 20 additions & 0 deletions src/leaflet.groupedlayercontrol.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
35 changes: 32 additions & 3 deletions src/leaflet.groupedlayercontrol.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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);

@ForgottenLords ForgottenLords Mar 17, 2017

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a bug fix independent from my collapsable groups feature.

@ismyrnow ismyrnow Oct 5, 2017

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch! Someone else opened a PR for this which I just merged (#50). Can you take this commit out of your branch?

}
this._update();
return this;
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand Down