Permalink
Browse files

When zooming, if the current foreground layer doesn't have many tiles…

… and the current background layer does, keep the current background layer rather than swapping in the current foreground. Makes continuous zooming look more awesome, rather than going blank after 2 quick zooms. (Has a big of debug output to be cleaned up later)
  • Loading branch information...
1 parent 53afad9 commit e54bc27a18451a07ddca7243fa937f5edabe3ddd @danzel danzel committed Jun 13, 2012
Showing with 30 additions and 4 deletions.
  1. +30 −4 src/map/anim/Map.ZoomAnimation.js
@@ -22,11 +22,24 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
this._mapPane.className += ' leaflet-zoom-anim';
- this
+ this
.fire('movestart')
.fire('zoomstart');
- this._prepareTileBg();
+ if (this._tileBg)
+ console.log("bg : " + this._getLoadedTilesPercentage(this._tileBg) + ", fg: " + this._getLoadedTilesPercentage(this._tilePane));
+ //Foreground layer doesn't have many tiles but bg layer does, keep the existing bg layer
+ if (this._tileBg && this._getLoadedTilesPercentage(this._tileBg) > 0.5 && this._getLoadedTilesPercentage(this._tilePane) < 0.5) { //fg isn't very loaded and BG is
+ //Leave current bg and just zoom it some more
+ console.log("Skipping");
+
+ this._tilePane.style.visibility = 'hidden';
+ this._tilePane.empty = true;
+ this._stopLoadingImages(this._tilePane);
+ this._stopLoadingImages(this._tileBg);
+ } else {
+ this._prepareTileBg();
+ }
var centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
origin = centerPoint.add(offset);
@@ -88,9 +101,10 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
tileBg.style.visibility = 'hidden';
// tells tile layers to reinitialize their containers
- tileBg.empty = true;
- tilePane.empty = false;
+ tileBg.empty = true; //new FG
+ tilePane.empty = false; //new BG
+ //Switch out the current layer to be the new bg layer (And vice-versa)
this._tilePane = this._panes.tilePane = tileBg;
var newTileBg = this._tileBg = tilePane;
@@ -106,6 +120,18 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
this._stopLoadingImages(newTileBg);
},
+ _getLoadedTilesPercentage: function (container) {
+ var tiles = Array.prototype.slice.call(container.getElementsByTagName('img')),
+ i, len, count = 0;
+
+ for (i = 0, len = tiles.length; i < len; i++) {
+ if (tiles[i].complete) {
+ count++;
+ }
+ }
+ return count / len;
+ },
+
// stops loading all tiles in the background layer
_stopLoadingImages: function (container) {
var tiles = Array.prototype.slice.call(container.getElementsByTagName('img')),

0 comments on commit e54bc27

Please sign in to comment.