Leaflet.LayerGroup.Conditional

An extension of Leaflet.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.

Has been tested with Leaflet 1.7.1 and 1.9.2

Demos

• Different layers depending on zoom level
• Heatmap or GeoJSON based on zoom level

Usage

Quick guide

HTML

<!-- after Leaflet script -->
<script src="leaflet.layergroup.conditional.js"></script>

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());

Installing the sub-plugin

Local copy

1. Download the leaflet.layergroup.conditional.js 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:

   npm install leaflet-layergroup-conditional --save

2. Add script tag to your page after Leaflet script:

   <!-- After Leaflet script -->
   <script src="node_modules/leaflet-layergroup-conditional/leaflet.layergroup.conditional.js"></script>

API Reference

Creation

Factory	Description
L.layerGroup.conditional(<Layer[]> layers?, options?)	Create a conditional layer group, optionally given an initial set of fixed layers and an options object.

Methods

Methods are the same as those of LayerGroup, plus

Method	Returns	Description
addConditionalLayer(<(Object)=>bool> function, <Layer> layer)	this	Adds a conditional layer. The function is evaluated whenever updateConditionalLayers() are called. Optionally, updateConditionalLayers() can be called with a single argument which is then passed on to the function of each conditional layer.
removeConditionalLayer(<Layer> layer)	this	Removes a conditional layer.
removeConditionalLayer(<Number> id)	this	Removes a conditional layer with the specified internal ID.
hasConditionalLayer(<Layer> layer)	bool	Returns true if the given layer is currently added to the group with a condition, regardless of whether it is currently active
hasConditionalLayer(<Number> id)	bool	Returns true if a layer with the given internal ID is currently added to the group with a condition, regardless of whether it is currently active
isConditionalLayerActive(<Layer> layer)	bool	Returns true if the given layer is currently added to the group with a condition, and is currently active
isConditionalLayerActive(<Number> id)	bool	Returns true if a layer with the given internal ID is currently added to the group with a condition, and is currently active
clearConditionalLayers()	this	Removes all conditional layers from the group
getConditionalLayers()	Layer[]	Returns an array of conditional layers in the group, regardless of whether they are currently active.
updateConditionalLayers(<Object> arg?)	this	Update the status of all conditional layers, passing an optional argument to each layer's condition function.

License

GNU GPLv3 or later