From a540347059b63b10550658bafd7c12e89bf0de4f Mon Sep 17 00:00:00 2001
From: Anand Thakker <vestibule@anandthakker.net>
Date: Wed, 16 Nov 2016 16:50:21 -0800
Subject: [PATCH] Clear source tiles for removed/re-added layer

Fixes #3633 by distinguishing the cases where the source tiles need to
be _reloaded_ from those where they need to be _cleared_
---
 js/style/style.js | 32 ++++++++++++++++++++++++++------
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/js/style/style.js b/js/style/style.js
index ea408ef2e05..24934a8def6 100644
--- a/js/style/style.js
+++ b/js/style/style.js
@@ -1,5 +1,6 @@
 'use strict';
 
+const assert = require('assert');
 const Evented = require('../util/evented');
 const StyleLayer = require('./style_layer');
 const ImageSprite = require('./image_sprite');
@@ -275,7 +276,13 @@ class Style extends Evented {
             this._updateWorkerLayers(updatedIds, removedIds);
         }
         for (const id in this._updatedSources) {
-            this._reloadSource(id);
+            const action = this._updatedSources[id];
+            assert(action === 'reload' || action === 'clear');
+            if (action === 'reload') {
+                this._reloadSource(id);
+            } else if (action === 'clear') {
+                this._clearSource(id);
+            }
         }
 
         this._applyClasses(classes, options);
@@ -429,7 +436,16 @@ class Style extends Evented {
 
         this._layers[id] = layer;
 
-        delete this._removedLayers[id];
+        if (this._removedLayers[id]) {
+            // If, in the current batch, we have already removed this layer
+            // and we are now re-adding it, then we need to clear (rather
+            // than just reload) the underyling source's tiles.
+            // Otherwise, tiles marked 'reloading' will have buffers that are
+            // set up for the _previous_ version of this layer, confusing
+            // https://github.com/mapbox/mapbox-gl-js/issues/3633
+            delete this._removedLayers[id];
+            this._updatedSources[layer.source] = 'clear';
+        }
         this._updateLayer(layer);
 
         if (layer.type === 'symbol') {
@@ -460,8 +476,8 @@ class Style extends Evented {
 
         if (layer.type === 'symbol') {
             this._updatedSymbolOrder = true;
-            if (layer.source) {
-                this._updatedSources[layer.source] = true;
+            if (layer.source && !this._updatedSources[layer.source]) {
+                this._updatedSources[layer.source] = 'reload';
             }
         }
     }
@@ -621,8 +637,8 @@ class Style extends Evented {
 
     _updateLayer(layer) {
         this._updatedLayers[layer.id] = true;
-        if (layer.source) {
-            this._updatedSources[layer.source] = true;
+        if (layer.source && !this._updatedSources[layer.source]) {
+            this._updatedSources[layer.source] = 'reload';
         }
         this._changed = true;
     }
@@ -738,6 +754,10 @@ class Style extends Evented {
         this.dispatcher.remove();
     }
 
+    _clearSource(id) {
+        this.sourceCaches[id].clearTiles();
+    }
+
     _reloadSource(id) {
         this.sourceCaches[id].reload();
     }