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

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

Download the leaflet.layergroup.conditional.js file from the latest release.
Place the file alongside your page.
Add the script tag to your page after Leaflet script.

npm

Add this package to your project:

npm install leaflet-layergroup-conditional --save

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

Solfisk/Leaflet.LayerGroup.Conditional