From e555657ad50313f55d8550433ec5f67acc34f676 Mon Sep 17 00:00:00 2001
From: Lucas Wojciechowski <lucas@mapbox.com>
Date: Mon, 13 Mar 2017 11:22:09 -0700
Subject: [PATCH] Add "Map#removeImage"

---
 debug/addimage.html        | 46 +++++++++++++++++++++-----------------
 package.json               |  2 +-
 src/symbol/sprite_atlas.js | 16 +++++++++++++
 src/ui/map.js              |  4 ++++
 4 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/debug/addimage.html b/debug/addimage.html
index 6f1b10d2649..28e9865f4a2 100644
--- a/debug/addimage.html
+++ b/debug/addimage.html
@@ -26,29 +26,35 @@
 
 map.on('load', () => {
     const img = document.createElement('img');
-    img.src = '/test/integration/image/marker.png';
+    img.src = '/test/integration/image/0.png';
     img.onload = () => {
         map.addImage('img', img);
-        map.addLayer({
-            "id": "points",
-            "type": "symbol",
-            "source": {
-                "type": "geojson",
-                "data": {
-                    "type": "FeatureCollection",
-                    "features": [{
-                        "type": "Feature",
-                        "geometry": {
-                            "type": "Point",
-                            "coordinates": [-122.414, 37.776]
-                        }
-                    }]
+        const img1 = document.createElement('img');
+        img1.src = '/test/integration/image/marker.png';
+        img1.onload = () => {
+            map.removeImage('img');
+            map.addImage('img', img1);
+            map.addLayer({
+                "id": "points",
+                "type": "symbol",
+                "source": {
+                    "type": "geojson",
+                    "data": {
+                        "type": "FeatureCollection",
+                        "features": [{
+                            "type": "Feature",
+                            "geometry": {
+                                "type": "Point",
+                                "coordinates": [-122.414, 37.776]
+                            }
+                        }]
+                    }
+                },
+                "layout": {
+                    "icon-image": "img"
                 }
-            },
-            "layout": {
-                "icon-image": "img"
-            }
-        });
+            });
+        };
     };
 });
 
diff --git a/package.json b/package.json
index 8cdae269c02..f83e7bcd203 100644
--- a/package.json
+++ b/package.json
@@ -118,7 +118,7 @@
     "test": "run-s lint test-unit test-flow",
     "test-suite": "run-s test-render test-query",
     "test-suite-clean": "find test/integration/*-tests -mindepth 2 -type d  -not \\( -exec test -e \"{}/style.json\" \\; \\) -print | xargs -t rm -r",
-    "test-unit": "tap --reporter dot --no-coverage test/unit",
+    "test-unit": "tap --no-coverage test/unit",
     "test-render": "node test/render.test.js",
     "test-query": "node test/query.test.js",
     "test-flow": "flow .",
diff --git a/src/symbol/sprite_atlas.js b/src/symbol/sprite_atlas.js
index 8e0b700b649..5190203d49d 100644
--- a/src/symbol/sprite_atlas.js
+++ b/src/symbol/sprite_atlas.js
@@ -87,6 +87,22 @@ class SpriteAtlas extends Evented {
         this.fire('data', {dataType: 'style'});
     }
 
+    removeImage(name) {
+        const image = this.images[name];
+        delete this.images[name];
+
+        if (!image) {
+            this.fire('error', {error: new Error('No image with this name exists.')});
+        }
+
+        const rect = image.rect;
+
+        this.copy(new Uint32Array(image.width * image.height), image.width, rect, {pixelRatio: this.pixelRatio, x: 0, y: 0, width: image.width, height: image.height}, false);
+        this.atlas.unref(rect);
+
+        this.fire('data', {dataType: 'style'});
+    }
+
     getImage(name, wrap) {
         if (this.images[name]) {
             return this.images[name];
diff --git a/src/ui/map.js b/src/ui/map.js
index 713f2b15a81..8780d40beb5 100755
--- a/src/ui/map.js
+++ b/src/ui/map.js
@@ -821,6 +821,10 @@ class Map extends Camera {
         this.style.spriteAtlas.addImage(name, image, width, height);
     }
 
+    removeImage(name) {
+        this.style.spriteAtlas.removeImage(name);
+    }
+
     /**
      * Adds a [Mapbox style layer](https://www.mapbox.com/mapbox-gl-style-spec/#layers)
      * to the map's style.