Make sure parent tiles are retained for fading

Closes #2467
mapbox · Jan 21, 2017 · 5ea41a7 · 5ea41a7
1 parent 81d6715
commit 5ea41a7
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 14 deletions.
diff --git a/debug/satellite.html b/debug/satellite.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-77.01866, 38.888],
+    style: 'mapbox://styles/mapbox/satellite-v9',
+    hash: true
+});
+
+</script>
+</body>
+</html>
diff --git a/js/source/image_source.js b/js/source/image_source.js
@@ -50,6 +50,7 @@ class ImageSource extends Evented {
         this.dispatcher = dispatcher;
         this.coordinates = options.coordinates;
 
+        this.type = 'image';
         this.minzoom = 0;
         this.maxzoom = 22;
         this.tileSize = 512;

diff --git a/js/source/raster_tile_source.js b/js/source/raster_tile_source.js
@@ -14,6 +14,7 @@ class RasterTileSource extends Evented {
         this.dispatcher = dispatcher;
         this.setEventedParent(eventedParent);
 
+        this.type = 'raster';
         this.minzoom = 0;
         this.maxzoom = 22;
         this.roundZoom = true;

diff --git a/js/source/source_cache.js b/js/source/source_cache.js
@@ -156,6 +156,7 @@ class SourceCache extends Evented {
 
         tile.sourceCache = this;
         tile.timeAdded = new Date().getTime();
+
         this._source.fire('data', {tile: tile, coord: tile.coord, dataType: 'tile'});
 
         // HACK this is nescessary to fix https://github.com/mapbox/mapbox-gl-js/issues/2986
@@ -341,19 +342,26 @@ class SourceCache extends Evented {
 
         const parentsForFading = {};
 
-        const ids = Object.keys(retain);
-        for (let k = 0; k < ids.length; k++) {
-            const id = ids[k];
-            coord = TileCoord.fromID(id);
-            tile = this._tiles[id];
-            if (tile && tile.fadeEndTime >= Date.now()) {
-                // This tile is still fading in. Find tiles to cross-fade with it.
-                if (this.findLoadedChildren(coord, maxCoveringZoom, retain)) {
-                    retain[id] = true;
-                }
-                parentTile = this.findLoadedParent(coord, minCoveringZoom, parentsForFading);
-                if (parentTile) {
-                    this.addTile(parentTile.coord);
+        if (isRasterType(this._source.type)) {
+            const ids = Object.keys(retain);
+            for (let k = 0; k < ids.length; k++) {
+                const id = ids[k];
+                coord = TileCoord.fromID(id);
+                tile = this._tiles[id];
+                if (!tile) continue;
+
+                // If the drawRasterTile has never seen this tile, then
+                // tile.fadeEndTime may be unset.  In that case, or if
+                // fadeEndTime is in the future, then this tile is still
+                // fading in. Find tiles to cross-fade with it.
+                if (typeof tile.fadeEndTime === 'undefined' || tile.fadeEndTime >= Date.now()) {
+                    if (this.findLoadedChildren(coord, maxCoveringZoom, retain)) {
+                        retain[id] = true;
+                    }
+                    parentTile = this.findLoadedParent(coord, minCoveringZoom, parentsForFading);
+                    if (parentTile) {
+                        this.addTile(parentTile.coord);
+                    }
                 }
             }
         }
@@ -554,4 +562,8 @@ function compareKeyZoom(a, b) {
     return (a % 32) - (b % 32);
 }
 
+function isRasterType(type) {
+    return type === 'raster' || type === 'image' || type === 'video';
+}
+
 module.exports = SourceCache;
diff --git a/js/source/video_source.js b/js/source/video_source.js
@@ -40,6 +40,7 @@ class VideoSource extends ImageSource {
     constructor(id, options, dispatcher, eventedParent) {
         super(id, options, dispatcher, eventedParent);
         this.roundZoom = true;
+        this.type = 'video';
         this.options = options;
     }
 

diff --git a/test/js/source/source_cache.test.js b/test/js/source/source_cache.test.js
@@ -388,7 +388,7 @@ test('SourceCache#update', (t) => {
         sourceCache.onAdd();
     });
 
-    t.test('includes partially covered tiles in rendered tiles', (t) => {
+    t.test('retains covered child tiles while parent tile is fading in', (t) => {
         const transform = new Transform();
         transform.resize(511, 511);
         transform.zoom = 2;
@@ -403,6 +403,8 @@ test('SourceCache#update', (t) => {
             }
         });
 
+        sourceCache._source.type = 'raster';
+
         sourceCache.on('source.load', () => {
             sourceCache.update(transform);
             t.deepEqual(sourceCache.getIds(), [
@@ -437,6 +439,8 @@ test('SourceCache#update', (t) => {
             }
         });
 
+        sourceCache._source.type = 'raster';
+
         sourceCache.on('source.load', () => {
             sourceCache.update(transform);