Giter VIP home page Giter VIP logo

leaflet.layergroup.conditional's Introduction

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

  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

leaflet.layergroup.conditional's People

Contributors

elhaard avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

jcalan8907

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.