Update leaflet loading.

assets/leaflet-loading/Control.Loading.js

@@ -13,17 +13,18 @@
     function defineLeafletLoading(L) {
         L.Control.Loading = L.Control.extend({
             options: {
+                delayIndicator: null,
                 position: 'topleft',
                 separate: false,
                 zoomControl: null,
                 spinjs: false,
                 spin: { 
-                  lines: 7, 
+                    lines: 7, 
-                  length: 3, 
+                    length: 3, 
-                  width: 3, 
+                    width: 3, 
-                  radius: 5, 
+                    radius: 5, 
-                  rotate: 13, 
+                    rotate: 13, 
-                  top: "83%"
+                    top: "83%"
                 }
             },
 
@@ -74,8 +75,8 @@
                 }
                 this._indicator = L.DomUtil.create('a', classes, container);
                 if (this.options.spinjs) {
-                  this._spinner = new Spinner(this.options.spin).spin();
+                    this._spinner = new Spinner(this.options.spin).spin();
-                  this._indicator.appendChild(this._spinner.el);
+                    this._indicator.appendChild(this._spinner.el);
                 }
                 return container;
             },
@@ -103,12 +104,32 @@
 
             addLoader: function(id) {
                 this._dataLoaders[id] = true;
-                this.updateIndicator();
+                if (this.options.delayIndicator && !this.delayIndicatorTimeout) {
+                    // If we are delaying showing the indicator and we're not
+                    // already waiting for that delay, set up a timeout.
+                    var that = this;
+                    this.delayIndicatorTimeout = setTimeout(function () {
+                        that.updateIndicator();
+                        that.delayIndicatorTimeout = null;
+                    }, this.options.delayIndicator);
+                }
+                else {
+                    // Otherwise show the indicator immediately
+                    this.updateIndicator();
+                }
             },
 
             removeLoader: function(id) {
                 delete this._dataLoaders[id];
                 this.updateIndicator();
+
+                // If removing this loader means we're in no danger of loading,
+                // clear the timeout. This prevents old delays from instantly 
+                // triggering the indicator.
+                if (this.options.delayIndicator && this.delayIndicatorTimeout && !this.isLoading()) {
+                    clearTimeout(this.delayIndicatorTimeout);
+                    this.delayIndicatorTimeout = null;
+                }
             },
 
             updateIndicator: function() {
@@ -183,6 +204,26 @@
                 this.addLoader(this.getEventId(e));
             },
 
+            _handleBaseLayerChange: function (e) {
+                var that = this;
+
+                // Check for a target 'layer' that contains multiple layers, such as
+                // L.LayerGroup. This will happen if you have an L.LayerGroup in an
+                // L.Control.Layers.
+                if (e.layer && e.layer.eachLayer && typeof e.layer.eachLayer === 'function') {
+                    e.layer.eachLayer(function (layer) {
+                        that._handleBaseLayerChange({ layer: layer });
+                    });
+                }
+                else {
+                    // If we're changing to a canvas layer, don't handle loading
+                    // as canvas layers will not fire load events.
+                    if (!(L.TileLayer.Canvas && e.layer instanceof L.TileLayer.Canvas)) {
+                        that._handleLoading(e);
+                    }
+                }
+            },
+
             _handleLoad: function(e) {
                 this.removeLoader(this.getEventId(e));
             },
@@ -212,6 +253,21 @@
                 }
             },
 
+            _layerRemove: function(e) {
+                if (!e.layer || !e.layer.off) return;
+                try {
+                    e.layer.off({
+                        loading: this._handleLoading,
+                        load: this._handleLoad
+                    }, this);
+                }
+                catch (exception) {
+                    console.warn('L.Control.Loading: Tried and failed to remove ' +
+                                 'event handlers from layer', e.layer);
+                    console.warn('L.Control.Loading: Full details', exception);
+                }
+            },
+
             _addLayerListeners: function(map) {
                 // Add listeners for begin and end of load to any layers already on the 
                 // map
@@ -226,6 +282,7 @@
                 // When a layer is added to the map, add listeners for begin and end
                 // of load
                 map.on('layeradd', this._layerAdd, this);
+                map.on('layerremove', this._layerRemove, this);
             },
 
             _removeLayerListeners: function(map) {
@@ -238,8 +295,9 @@
                     }, this);
                 }, this);
 
-                // Remove layeradd listener from map
+                // Remove layeradd/layerremove listener from map
                 map.off('layeradd', this._layerAdd, this);
+                map.off('layerremove', this._layerRemove, this);
             },
 
             _addMapListeners: function(map) {
@@ -247,6 +305,7 @@
                 // events, eg, for AJAX calls that affect the map but will not be
                 // reflected in the above layer events.
                 map.on({
+                    baselayerchange: this._handleBaseLayerChange,
                     dataloading: this._handleLoading,
                     dataload: this._handleLoad,
                     layerremove: this._handleLoad
@@ -255,6 +314,7 @@
 
             _removeMapListeners: function(map) {
                 map.off({
+                    baselayerchange: this._handleBaseLayerChange,
                     dataloading: this._handleLoading,
                     dataload: this._handleLoad,
                     layerremove: this._handleLoad

module/config/config.php

@@ -55,7 +55,7 @@ $GLOBALS['LEAFLET_LIBRARIES']['leaflet-markercluster'] = array
 $GLOBALS['LEAFLET_LIBRARIES']['leaflet-loading'] = array
 (
     'name'       => 'Leaflet.loading',
-    'version'    => '0.1.16',
+    'version'    => '0.1.23',
     'license'    => '<a href="https://github.com/ebrelsford/Leaflet.loading/blob/master/LICENSE" target="_blank">MIT</a>',
     'homepage'   => 'https://github.com/ebrelsford/Leaflet.loading',
     'css'        => 'assets/leaflet/libs/leaflet-loading/Control.Loading.min.css',