leaflet-groupedlayercontrol
Advanced tools
A Leaflet layer control with support for grouping overlays together
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.
Install via npm:
npm install leaflet-groupedlayercontrol
Note: This installs v0.x which works with Leaflet 1.x (stable). For Leaflet 2.x (alpha), use:
npm install leaflet-groupedlayercontrol@next
import { GroupedLayers } from 'leaflet-groupedlayercontrol';
import 'leaflet-groupedlayercontrol/dist/leaflet.groupedlayercontrol.min.css';
Include the CSS in your HTML <head>:
<link rel="stylesheet" href="https://unpkg.com/leaflet-groupedlayercontrol@2.0.0-alpha.1/dist/leaflet.groupedlayercontrol.min.css" />
Then import the JavaScript module:
import { GroupedLayers } from 'https://unpkg.com/leaflet-groupedlayercontrol@2.0.0-alpha.1/dist/leaflet.groupedlayercontrol.min.js';
Import the control and create grouped overlays:
import { Map, TileLayer, LayerGroup } from 'leaflet';
import { GroupedLayers } from 'leaflet-groupedlayercontrol';
const groupedOverlays = {
"Landmarks": {
"Motorways": motorways,
"Cities": cities
},
"Points of Interest": {
"Restaurants": restaurants
}
};
new GroupedLayers(baseLayers, groupedOverlays).addTo(map);
For added functionality, pass options when creating the layer control.
const 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
};
const layerControl = new GroupedLayers(baseLayers, groupedOverlays, options);
map.addControl(layerControl);
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.
layerControl.addOverlay(cities, "Cities", "Landmarks");
Add groupings to your overlay layers object, and swap out the default layer control with the new one.
var groupedOverlays = {
"Landmarks": {
"Motorways": motorways,
"Cities": cities
},
"Points of Interest": {
"Restaurants": restaurants
}
};
L.control.groupedLayers(baseLayers, groupedOverlays).addTo(map);
For added functionality, pass options when creating the layer control.
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);
layerControl.addOverlay(cities, "Cities", "Landmarks");
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.
leaflet-groupedlayercontrol is free software, and may be redistributed under the MIT-LICENSE.
FAQs
A Leaflet layer control with support for grouping overlays together
The npm package leaflet-groupedlayercontrol receives a total of 4,072 weekly downloads. As such, leaflet-groupedlayercontrol popularity was classified as popular.
We found that leaflet-groupedlayercontrol demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
An emerging npm supply chain attack that infects repos, steals CI secrets, and targets developer AI toolchains for further compromise.
Company News
Socket is proud to join the OpenJS Foundation as a Silver Member, deepening our commitment to the long-term health and security of the JavaScript ecosystem.
Security News
npm now links to Socket's security analysis on every package page. Here's what you'll find when you click through.