From 1c1ab851e4f1a39609df82beac4cb15dbc6680e4 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 2f78d72867f..bd331ffa49f 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');
@@ -252,7 +253,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);
@@ -362,7 +369,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') {
@@ -393,8 +409,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';
             }
         }
     }
@@ -559,8 +575,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;
     }
@@ -676,6 +692,10 @@ class Style extends Evented {
         this.dispatcher.remove();
     }
 
+    _clearSource(id) {
+        this.sourceCaches[id].clearTiles();
+    }
+
     _reloadSource(id) {
         this.sourceCaches[id].reload();
     }