Closed
Description
There is an event triggered when a tile is loaded and one when all tiles have been loaded, in file TileLayer.js :
_tileOnLoad: function(e) {
var layer = this._layer;
this.className += ' leaflet-tile-loaded';
layer.fire('tileload', {tile: this, url: this.src});
layer._tilesToLoad--;
if (!layer._tilesToLoad) {
layer.fire('load');
}
},But there is nothing to know when it starts loading. I need this to popup a "loading" box.
My suggestion here :
- in function _loadTile(), fire a new event (tileloading for instance) for every tiles :
_loadTile: function(tile, tilePoint, zoom) {
tile._layer = this;
tile.onload = this._tileOnLoad;
tile.onerror = this._tileOnError;
tile.src = this.getTileUrl(tilePoint, zoom);
/*NEW!*/tile._layer.fire('tileloading', {tile: this, url: this.src});
},- in function addTilesFromCenterOut(), fire a new event (loading for instance) for the layer :
_addTilesFromCenterOut: function(bounds) {
var queue = [],
center = bounds.getCenter();
for (var j = bounds.min.y; j <= bounds.max.y; j++) {
for (var i = bounds.min.x; i <= bounds.max.x; i++) {
if ((i + ':' + j) in this._tiles) { continue; }
queue.push(new L.Point(i, j));
}
}
// load tiles in order of their distance to center
queue.sort(function(a, b) {
return a.distanceTo(center) - b.distanceTo(center);
});
var fragment = document.createDocumentFragment();
/*NEW!*/this.fire('loading');
this._tilesToLoad = queue.length;
for (var k = 0, len = this._tilesToLoad; k < len; k++) {
this._addTile(queue[k], fragment);
}
this._container.appendChild(fragment);
},/Lapi