FeatureGroup that fires "loading" and "load" events.
CSS JavaScript HTML
Latest commit 26e3803 May 4, 2016 @glathoud glathoud example
Permalink
Failed to load latest commit information.
leaflet/v0.7.7 implemented it + doc May 3, 2016
.gitignore implemented it + doc May 3, 2016
FeatureGroup.LoadEvents.js implemented it + doc May 3, 2016
LICENSE implemented it + doc May 3, 2016
README.md example May 4, 2016
index.html implemented it + doc May 3, 2016

README.md

FeatureGroup with "loading" and "load" events for Leaflet 0.7.*

This Leaflet plugin extends L.FeatureGroup into a new class L.FeatureGroup.LoadEvents that supports the "loading" and "load" events, by aggregating the "loading" and "load" events fired by the sublayers.

For example, for a FeatureGroup.LoadEvents with 3 sublayers L1,L2,L3:

  • L1 fires "loading"
    • => the FeatureGroup.LoadEvents fires "loading" as well.
  • L2:"loading", L1:"load", L3:"loading", L3:"load"
    • => the FeatureGroup.LoadEvents remains silent, because in all cases at least one sublayer is still loading.
  • L2:"load"
    • => the FeatureGroup.LoadEvents fires "load", because all sublayers have loaded.

Some possible uses:

  • design your own loading indicator for groups of tilelayers.
  • circumvent difficulties with existing loading indicators like Control.Loading.

Note: If none of the sublayer fires "loading" and "load", then FeatureGroup.LoadEvents won't fire those events either.

Example

var map = L.map(div).setView([51.505, -0.09], 13);
var tileLayer_1 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
var tileLayer_2 = L.tileLayer(...);
var tileLayer_3 = L.tileLayer(...);
var group = L.FeatureGroup.loadEvents([ tileLayer_1, tilelayer_2, tilelayer_3 ]);
// test
group.on({
  loading : function () { 
    console.log( 'The layer group just fired the "loading" event!' ); 
    document.body.className="loading"; 
  }
  , load  : function () { 
    console.log( 'The layer group just fired the "load" event!' ); 
    document.body.className=""; 
  }
});
group.addTo(map);

See also a complete HTML example.

Live Example

http://outdooractive.github.io/Leaflet.FeatureGroup.LoadEvents/

Remark

One could patch FeatureGroup directly, but on the other hand:

  • that might be too much additional code for Leaflet's core, for a not-so-core-ish functionality,
  • and there are deeper design issues.