# Leaflet.LayerGroup.Conditional / ConditionalLayerGroup
An extension of [Leaflet.LayerGroup](http://leafletjs.com/reference.html#layergroup) that allows you to add layers with conditions on when they should be shown.
A typical use is to render different layers depending on zoom level - e.g. showing a heatmap on low zoom levels and marker on higher zoom levels.
## Requirements
Should work with Leaflet ^1.0.0.'and 2.0
Has been tested with Leaflet 1.7.1, 1.9.2, 1.94 and 2.0.0+-alpha.1
## Demos
* [Different layers depending on zoom level (Leaflet v.1)](https://solfisk.github.io/Leaflet.LayerGroup.Conditional/examples/zoom.html)
* [Different layers depending on zoom level (Leaflet v.2)](https://solfisk.github.io/Leaflet.LayerGroup.Conditional/examples/zoom2.html)
* [Heatmap or GeoJSON based on zoom level](https://solfisk.github.io/Leaflet.LayerGroup.Conditional/examples/heatmap.html)
## Usage
### Leaflet v.1
#### HTML
```html
```
#### JavaScript
```javascript
// Create map
var map = L.map("map");
// Create a few layers. Could also be LayerGroups. Do not add to map.
var layer1 = L.circle([55.6867243, 12.5700724], {color: "blue"});
var layer2 = L.marker([55.6867243, 12.5700724]);
// Create conditional layergroup.
// Add layers to it with separate conditions.
// Add the layer group to the map.
var layerGroup = L.layerGroup.conditional()
.addConditionalLayer((level) => level < 12, layer1)
.addConditionalLayer((level) => level >= 12, layer2)
.addTo(map);
// Set up a zoom handler to update conditional layers when the user zooms.
var zoomHandler = function(event) {
var zoomLevel = map.getZoom();
layerGroup.updateConditionalLayers(zoomLevel);
}
map.on('zoomend', zoomHandler);
// Set initial state of conditional layers
layerGroup.updateConditionalLayers(map.getZoom());
```
### Leaflet v.2
```html
ConditionalLayerGroup
```
### Installing the sub-plugin
#### Local copy
1. Download the [`leaflet.layergroup.conditional.js`](https://solfisk.github.io/Leaflet.LayerGroup.Conditional/leaflet.layergroup.conditional.js) (for Leaflet v.1) or [`ConditionalLayerGroup.js`](https://solfisk.github.io/Leaflet.LayerGroup.Conditional/ConditionalLayerGroup.js) (for Leaflet v.2) file from the latest release.
2. Place the file alongside your page.
3. Add the `script` tag to your page after Leaflet script.
#### npm
1. Add this package to your project:
```bash
npm install leaflet-layergroup-conditional --save
```
## API Reference
### Creation
| Factory | Description |
| :-------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------- |
| **L.layerGroup.conditional**( layers?,