From f8eaf07d4e95238e89c5587aadf651306a6632a4 Mon Sep 17 00:00:00 2001
From: Katherina Marcenko <marcenko@ubilabs.net>
Date: Mon, 9 Dec 2019 16:28:20 +0100
Subject: [PATCH] fix(globe): remove layers when new layer is selected

---
 src/scripts/components/globe/globe.tsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/scripts/components/globe/globe.tsx b/src/scripts/components/globe/globe.tsx
index 74fb5fe97..c94c2a2e3 100644
--- a/src/scripts/components/globe/globe.tsx
+++ b/src/scripts/components/globe/globe.tsx
@@ -173,7 +173,7 @@ const Globe: FunctionComponent<Props> = ({
 
     const url = imageUrl;
     const layers = viewer.scene.imageryLayers;
-    const oldLayer = layers.length > 1 && layers.get(1);
+
     if (url) {
       const imageProvider =
         layerType === 'tiles'
@@ -201,11 +201,21 @@ const Globe: FunctionComponent<Props> = ({
         // remove and destroy old layer if exists
         // we do not clean it up in the useEffect clean function because we want
         // to wait until the new layer is ready to prevent flickering
-        oldLayer && setTimeout(() => layers.remove(oldLayer, true), 100);
+        setTimeout(() => {
+          for (let i = 0; i < layers.length; i++) {
+            const layer = layers.get(i);
+            if (i !== 0 && layer !== newLayer) {
+              layers.remove(layer, true);
+            }
+          }
+        }, 100);
       });
-    } else if (oldLayer) {
+    } else if (layers.length > 1) {
       // remove old layer when no image should be shown anymore
-      layers.remove(oldLayer, true);
+      for (let i = 1; i < layers.length; i++) {
+        const layer = layers.get(i);
+        layers.remove(layer, true);
+      }
     }
   }, [layerType, viewer, imageUrl]);