https://github.com/ismyrnow/leaflet-groupedlayercontrol
Leaflet layer control with support for grouping overlays together.
https://github.com/ismyrnow/leaflet-groupedlayercontrol
javascript leaflet
Last synced: 4 months ago
JSON representation
Leaflet layer control with support for grouping overlays together.
- Host: GitHub
- URL: https://github.com/ismyrnow/leaflet-groupedlayercontrol
- Owner: ismyrnow
- License: mit
- Created: 2013-06-26T18:01:11.000Z (almost 13 years ago)
- Default Branch: gh-pages
- Last Pushed: 2023-05-17T19:54:38.000Z (almost 3 years ago)
- Last Synced: 2025-05-11T00:28:28.583Z (11 months ago)
- Topics: javascript, leaflet
- Language: JavaScript
- Size: 87.9 KB
- Stars: 277
- Watchers: 16
- Forks: 142
- Open Issues: 28
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
leaflet-groupedlayercontrol
===========================
Leaflet layer control with support for grouping overlays together.
Also supports making groups exclusive (radio instead of checkbox).
> This project is looking for a maintainer. Interested? Open an issue.
Demos: [Basic](http://ismyrnow.github.io/leaflet-groupedlayercontrol/example/basic.html) |
[Advanced](http://ismyrnow.github.io/leaflet-groupedlayercontrol/example/advanced.html)
## Installation
Include the compressed JavaScript and CSS files located in the `/dist` folder.
This project is also available via bower and jspm:
```
bower install leaflet-groupedlayercontrol
```
## Usage
### Initialization
Add groupings to your overlay layers object, and swap out the default layer
control with the new one.
```javascript
var groupedOverlays = {
"Landmarks": {
"Motorways": motorways,
"Cities": cities
},
"Points of Interest": {
"Restaurants": restaurants
}
};
L.control.groupedLayers(baseLayers, groupedOverlays).addTo(map);
```
### Advanced usage
For added functionality, pass options when creating the layer control.
```javascript
var options = {
// Make the "Landmarks" group exclusive (use radio inputs)
exclusiveGroups: ["Landmarks"],
// Show a checkbox next to non-exclusive group labels for toggling all
groupCheckboxes: true
};
L.control.groupedLayers(baseLayers, groupedOverlays, options).addTo(map);
```
### Adding a layer
Adding a layer individually works similarly to the default layer control,
except that you can also specify a group name, along with the layer and layer name.
```javascript
layerControl.addOverlay(cities, "Cities", "Landmarks");
```
## Note
This plugin only affects how the layers are displayed in the layer control,
and not how they are rendered or layered on the map.
Grouping base layers is not currently supported, but adding exclusive layer
groups is. Layers in an exclusive layer group render as radio inputs.
## License
leaflet-groupedlayercontrol is free software, and may be redistributed under
the MIT-LICENSE.