A MapLibre GL JS plugin for managing layer visibility, opacity, and styles
npm install maplibre-gl-layer-managerA powerful and user-friendly layer management plugin for MapLibre GL JS that provides comprehensive controls for managing layer visibility, opacity, and styles.
- Layer Visibility Control: Toggle individual layers or all layers at once
- Opacity Adjustment: Fine-tune layer opacity with intuitive sliders
- Style Editor: Modify layer paint properties in real-time:
- Circle layers: color, radius, opacity, blur, stroke properties
- Line layers: color, width, opacity, blur
- Fill layers: color, opacity, outline color
- Raster layers: opacity, brightness, saturation, contrast
- Layer Management: Remove unwanted layers from the map
- Collapsible Interface: Clean, space-saving design
- Responsive Design: Works on desktop and mobile devices
``bash`
npm install maplibre-gl-layer-manager
Include the CSS and JS files in your HTML:
`html
rel="stylesheet"
/>
`
`javascript
// Initialize your MapLibre GL map
const map = new maplibregl.Map({
container: "map",
style: "your-map-style.json",
center: [-98.5795, 39.8283],
zoom: 4,
});
// Wait for the map to load
map.on("load", function () {
// Create the layer manager
const layerManager = new LayerManager({
layers: [
{
id: "background",
name: "Background",
visible: true,
opacity: 1.0,
},
{
id: "cities",
name: "World Cities",
visible: true,
opacity: 0.8,
originalStyle: {
"circle-radius": 5,
"circle-color": "#3388ff",
"circle-opacity": 0.8,
},
},
],
position: "top-left",
collapsed: false,
});
// Add the control to the map
map.addControl(layerManager, "top-left");
});
`
#### LayerManager Constructor Options
| Option | Type | Default | Description |
| ----------- | ------- | ------------ | ------------------------------------ |
| layers | Array | [] | Array of layer configuration objects |position
| | String | 'top-left' | Position of the control on the map |collapsed
| | Boolean | false | Whether the panel starts collapsed |
#### Layer Configuration Object
| Property | Type | Required | Description |
| --------------- | ------- | -------- | ---------------------------------------------------- |
| id | String | Yes | Layer ID (must match the layer ID in your map style) |name
| | String | No | Display name for the layer (defaults to id) |visible
| | Boolean | No | Initial visibility state (default: true) |opacity
| | Number | No | Initial opacity (0-1, default: 1.0) |originalStyle
| | Object | No | Original paint properties for the Reset function |minzoom
| | Number | No | Minimum zoom level for the layer |maxzoom
| | Number | No | Maximum zoom level for the layer |
#### addLayer(layer)
Add a new layer to the layer manager.
`javascript`
layerManager.addLayer({
id: "new-layer",
name: "New Layer",
visible: true,
opacity: 1.0,
});
#### removeLayer(layerId)
Remove a layer from the layer manager.
`javascript`
layerManager.removeLayer("layer-id");
#### getPosition()
Get the current position of the control.
`javascript`
const position = layerManager.getPosition();
The Layer Manager supports styling for the following MapLibre GL layer types:
- Circle: Point features rendered as circles
- Line: Linear features
- Fill: Polygon features
- Raster: Raster tile layers (imagery, terrain)
- Circle Color
- Circle Radius (0-20)
- Circle Opacity (0-1)
- Circle Blur (0-5)
- Circle Stroke Color
- Circle Stroke Width (0-5)
- Circle Stroke Opacity (0-1)
- Line Color
- Line Width (0-20)
- Line Opacity (0-1)
- Line Blur (0-5)
- Fill Color
- Fill Opacity (0-1)
- Fill Outline Color
- Raster Opacity (0-1)
- Raster Brightness Min (-1 to 1)
- Raster Brightness Max (-1 to 1)
- Raster Saturation (-1 to 1)
- Raster Contrast (-1 to 1)
To run the demo:
1. Clone this repository
2. Open demo/index.html in your web browser
3. Interact with the layer manager in the top-left corner
The demo showcases:
- Base map background layer
- USGS satellite imagery layer
- US States polygon layer
- World Cities point layer
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)
`
maplibre-gl-layer-manager/
├── src/
│ ├── layer-manager.js # Main plugin code
│ └── layer-manager.css # Styles
├── demo/
│ └── index.html # Demo page
├── package.json
└── README.md
Contributions are welcome! Please feel free to submit a Pull Request.
MIT License
Built with MapLibre GL JS
For issues and questions, please open an issue on GitHub.
Future enhancements planned:
- [ ] Layer grouping
- [ ] Search/filter layers
- [ ] Export layer configurations
- [ ] Import layer configurations
- [ ] Layer reordering
- [ ] Symbol layer styling support
- [ ] Custom style templates
- [ ] Keyboard shortcuts
- [ ] Accessibility improvements (ARIA labels)
`javascript
const layerManager = new LayerManager({
layers: [
{
id: "satellite",
name: "Satellite Imagery",
visible: false,
opacity: 0.8,
originalStyle: {
"raster-opacity": 0.8,
"raster-brightness-min": 0,
"raster-brightness-max": 1,
},
},
{
id: "boundaries",
name: "State Boundaries",
visible: true,
opacity: 0.6,
originalStyle: {
"fill-color": "#627BC1",
"fill-opacity": 0.6,
"fill-outline-color": "#ffffff",
},
},
],
position: "top-right",
collapsed: true,
});
map.addControl(layerManager, "top-right");
`
`javascript
// Add a new GeoJSON source to the map
map.addSource("earthquakes", {
type: "geojson",
data: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson",
});
// Add the layer to the map
map.addLayer({
id: "earthquakes",
type: "circle",
source: "earthquakes",
paint: {
"circle-radius": 8,
"circle-color": "#ff0000",
"circle-opacity": 0.6,
},
});
// Add it to the layer manager
layerManager.addLayer({
id: "earthquakes",
name: "Recent Earthquakes",
visible: true,
opacity: 0.6,
});
`
Q: Can I use this with Mapbox GL JS?
A: This plugin is designed for MapLibre GL JS, but it may work with Mapbox GL JS v1.x with minor modifications.
Q: How do I save the user's layer configuration?
A: You can access the layer configurations through the layerConfigs Map property and save it to localStorage or a backend.
Q: Can I customize the colors and styling?
A: Yes! Override the CSS variables and classes in layer-manager.css` to match your design.
Q: Does it support 3D layers?
A: Currently, the plugin supports 2D layers (circle, line, fill, raster). 3D layer support is planned for future releases.
- Initial release
- Layer visibility controls
- Opacity adjustment
- Style editor for circle, line, fill, and raster layers
- Layer removal
- Collapsible interface