The Layer Manager for Mapbox GL is a versatile and user-friendly tool designed to streamline the management of map layers within the Mapbox GL environment. This tool simplifies the process of modifying layer order and adjusting and fine-tuning each layer'
npm install @daturon/mapboxgl-layer-managerThe Layer Manager for Mapbox GL is a powerful utility that simplifies the management of layers and sources in the Mapbox GL environment. This package allows easy layer reordering, visibility toggling, opacity adjustments, and other modifications, making it an essential tool for developers working with interactive maps.
It supports dynamic management of multiple sources and layers, allowing developers to dynamically change active sources, reorder layers efficiently, and automatically free unused resources to optimize performance.
---
- Easy Layer and Source Management – Add, remove, and update layers and sources effortlessly.
- Dynamic Layer Reordering – Change layer positions in real-time.
- Customize Layer Styling – Adjust opacity, visibility, and colors dynamically.
- Manage Multiple Sources – Attach and detach different sources on the fly.
- Automatic Resource Cleanup – Unused sources and layers are removed automatically to improve efficiency.
- Advanced Filtering System – Filters have unique identifiers, making them easy to enable/disable dynamically.
---
You can install the package via npm or yarn:
``sh`
npm install @daturon/mapboxgl-layer-manager
or
`sh`
yarn add @daturon/mapboxgl-layer-manager
---
`ts
import { LayerManager } from '@daturon/mapboxgl-layer-manager';
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-74.006, 40.7128],
zoom: 10,
});
const manager = new LayerManager(map);
`
`ts
manager.addSource('my-source', {
type: 'geojson',
data: myGeoJSONData,
});
manager.addLayer({
id: 'my-layer',
type: 'circle',
source: 'my-source',
paint: { 'circle-radius': 5, 'circle-color': '#ff0000' },
});
manager.renderOrderedLayers(['my-layer']); // When we have multiple layers, we can use the renderOrderedLayers method to render them in the correct order. Call this method again when you need a new layer set to be rendered.
`
`ts`
manager.setLayerOpacity('my-layer', 0.5);
manager.toggleLayerVisibility('my-layer');
`ts`
manager.reorderLayer('my-layer', 'another-layer');
`ts`
manager.setFilter('my-layer', 'my-filter', ['==', 'type', 'park']);
manager.removeFilter('my-layer', 'my-filter');
`ts`
manager.removeLayer('my-layer');
manager.removeSource('my-source');

---
We welcome contributions! If you want to improve this package:
1. Fork the repository.
2. Clone your fork:
`sh`
git clone https://github.com/daturon/mapboxgl-layer-manager.git
`
3. Install dependencies:
sh`
yarn install
`
4. Create a feature branch:
sh`
git checkout -b feature-name
`
5. Commit changes:
sh``
git commit -m "Add new feature"
6. Push and open a pull request.
---
This project is licensed under the MIT License.
---
- GitHub Repository: Mapbox GL Layer Manager
- Report Issues: GitHub Issues
- NPM Package: npmjs.com/@daturon/mapboxgl-layer-manager
Happy Mapping!