Leaflet fire event when tile layer loading begins and ends

Question

I'm using Leaflet.loading to display a loading icon on a leafletjs map while L.TileLayer.WMS tile layers are loading, which works well when the map is zoomed or panned. However, if WMS tile layers are switched on by the user without moving the map, the loading icon doesn't trigger.

The Leaflet.loading instructions state:

If you want to show the loading indicator while other AJAX requests or something else [i.e. a WMS tile layer load] is occurring, simply fire the dataloading event on your map when you begin loading and dataload when you are finished loading.

How may I fire these two events on WMS tile layer load starting and finishing?

Answer 1

Assuming you have the following layer instance:

var layerInstance = L.tileLayer(layerUrl, layerOptions).addTo(mapInstance);

You can catch the load and loading events and then fire the appropriate map events like this:

layerInstance.on('loading', function (event) {
    mapInstance.fireEvent('dataloading', event);
});

layerInstance.on('load', function (event) {
    mapInstance.fireEvent('dataload', event);
});

You could also seperate the handler function if you need to do this on multiple layers:

var loadingHandler = function (event) {
    mapInstance.fireEvent('dataloading', event);
};

var loadHandler = function (event) {
    mapInstance.fireEvent('dataload', event);
};

layerInstanceFoo.on('loading', loadingHandler);
layerInstanceFoo.on('load', loadHandler);

layerInstanceBar.on('loading', loadingHandler);
layerInstanceBar.on('load', loadHandler);

See the reference for available tilelayer events and the fireEvent method