@eeacms/volto-arcgis-block 0.1.356 → 0.1.358

package/CHANGELOG.md

@@ -4,8 +4,25 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.358](https://github.com/eea/volto-arcgis-block/compare/0.1.357...0.1.358) - 14 May 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-285620 (bug): Fixed the but that made interacting with bookmarks freeze the map up [Unai Bolivar - [`a1c3354`](https://github.com/eea/volto-arcgis-block/commit/a1c3354591a141f5c634d4e1eee6f466017addec)]
+### [0.1.357](https://github.com/eea/volto-arcgis-block/compare/0.1.356...0.1.357) - 12 May 2025
+
+#### :hammer_and_wrench: Others
+
+- Merge pull request #946 from eea/develop [Unai Bolivar - [`4220c81`](https://github.com/eea/volto-arcgis-block/commit/4220c81bcd656e5911742b55f4b64c29f586b231)]
+- Merge pull request #945 from eea/CLMS-285178-ISOLATED-SWIPE-WIDGET-FIX [Unai Bolivar - [`617b4c4`](https://github.com/eea/volto-arcgis-block/commit/617b4c43ad4363267c4df34c72e64314ee42afb4)]
+- CLMS-285178 (bug): Separated swipe from other tickets and can push now going [Unai Bolivar - [`84efe24`](https://github.com/eea/volto-arcgis-block/commit/84efe24d964b79f54ddf17f69e389a3f57e3f867)]
+- CLMS-285178 (bug): Separated swipe from other tickets and can push [Unai Bolivar - [`3e94fd6`](https://github.com/eea/volto-arcgis-block/commit/3e94fd6d2f92817d6b0220155a7e8a0ed5d8dfdb)]
+- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`fdd39ce`](https://github.com/eea/volto-arcgis-block/commit/fdd39ce6c0d848b33f3b6d033e4b35e9bd4f2002)]
 ### [0.1.356](https://github.com/eea/volto-arcgis-block/compare/0.1.355...0.1.356) - 6 May 2025
 
+#### :hammer_and_wrench: Others
+
+- Merge pull request #944 from eea/develop [Unai Bolivar - [`a034911`](https://github.com/eea/volto-arcgis-block/commit/a0349111d5f09be64b57acccc6a14cc5617f279a)]
 ### [0.1.355](https://github.com/eea/volto-arcgis-block/compare/0.1.354...0.1.355) - 5 May 2025
 
 ### [0.1.354](https://github.com/eea/volto-arcgis-block/compare/0.1.353...0.1.354) - 24 April 2025

package/Jenkinsfile

@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-arcgis-block"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu,water.europa.eu-freshwater,clmsdemo.devel6cph.eea.europa.eu,land.copernicus.eu"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu,water.europa.eu-freshwater,clmsdemo.devel6cph.eea.europa.eu,land.copernicus.eu,ask.copernicus.eu"
         DEPENDENCIES = ""
         BACKEND_PROFILES = "eea.kitkat:testing"
         BACKEND_ADDONS = "clms.addon,clms.types,clms.downloadtool,clms.statstool"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.356",
+  "version": "0.1.358",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -5,7 +5,7 @@ import { loadModules } from 'esri-loader';
 
 export const BOOKMARK_SESSION_KEY = 'bookmark_session';
 
-var Bookmarks;
+var Bookmarks, Extent;
 class BookmarkWidget extends React.Component {
   /**
    * Creator of the Basemap widget class
@@ -31,12 +31,18 @@ class BookmarkWidget extends React.Component {
     this.sessionBookmarkOpacity = [];
     this.sessionBookmarkVisible = [];
     this.sessionBookmarkHotspot = [];
+    this.arcgisEventHandles = [];
+    this.boundLimitMaxLenth = this.limitMaxLenth.bind(this);
+    this._isMounted = false;
   }
 
   loader() {
-    return loadModules(['esri/widgets/Bookmarks']).then(([_Bookmarks]) => {
-      Bookmarks = _Bookmarks;
-    });
+    return loadModules(['esri/widgets/Bookmarks', 'esri/geometry/Extent']).then(
+      ([_Bookmarks, _Extent]) => {
+        Bookmarks = _Bookmarks;
+        Extent = _Extent;
+      },
+    );
   }
   /**
    * Method that will be invoked when the
@@ -87,6 +93,7 @@ class BookmarkWidget extends React.Component {
   }
 
   async componentDidMount() {
+    this._isMounted = true;
     await this.loader();
     if (!this.container.current) return;
     this.props.view.when(() => {
@@ -148,15 +155,173 @@ class BookmarkWidget extends React.Component {
         time: false, // don't show the time (h:m:s) next to the date
       },
       container: document.querySelector('.bookmark-panel'),
-      bookmarks: this.sessionBookmarks,
+      bookmarks: this.sessionBookmarks.map((bm) => {
+        if (bm.extent) {
+          const { extent, ...rest } = bm;
+          let geometry;
+          if (extent && typeof extent === 'object') {
+            geometry = extent.type ? extent : new Extent(extent);
+          }
+          return {
+            ...rest,
+            viewpoint: {
+              targetGeometry: geometry,
+            },
+          };
+        }
+        return bm;
+      }),
     });
     this.sessionBookmarks = [];
     this.Bookmarks.bookmarks.items.forEach((bookmark) => {
       this.sessionBookmarks.push(bookmark);
     });
     this.Bookmarks.when(() => {
-      this.Bookmarks.bookmarks.on('change', (e) => {
-        if (e.added[0]) {
+      this.arcgisEventHandles.push(
+        this.Bookmarks.bookmarks.on('change', (e) => {
+          if (!this._isMounted) return;
+          let shouldUpdate = false;
+          if (e.added[0]) {
+            let check =
+              JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
+            let visibleLayers =
+              JSON.parse(sessionStorage.getItem('visibleLayers')) || [];
+            let opacity = [];
+            let visible = [];
+            check.forEach((layer) => {
+              opacity.push(this.layers[layer].opacity);
+              if (
+                visibleLayers[layer] &&
+                visibleLayers[layer][1] === 'eye-slash'
+              ) {
+                visible.push(false);
+              } else {
+                visible.push(true);
+              }
+            });
+            this.sessionBookmarks.push(e.added[0]);
+            this.sessionBookmarkLayers.push(check);
+            this.sessionBookmarkOpacity.push(opacity);
+            this.sessionBookmarkVisible.push(visible);
+            let hotspotFilters = {
+              activeLayers: {},
+              filteredLayers: {},
+            };
+            if (this.props.hotspotData && this.props.hotspotData.activeLayers) {
+              Object.keys(this.props.hotspotData.activeLayers).forEach(
+                (key) => {
+                  hotspotFilters.activeLayers[key] = null;
+                },
+              );
+            }
+            if (
+              this.props.hotspotData &&
+              this.props.hotspotData.filteredLayers
+            ) {
+              Object.keys(this.props.hotspotData.filteredLayers).forEach(
+                (key) => {
+                  hotspotFilters.filteredLayers[
+                    key
+                  ] = this.props.hotspotData.filteredLayers[
+                    key
+                  ].customLayerParameters['CQL_FILTER'];
+                },
+              );
+            }
+            this.sessionBookmarkHotspot.push(hotspotFilters);
+            shouldUpdate = true;
+          } else if (e.removed[0]) {
+            for (let index = 0; index < this.sessionBookmarks.length; index++) {
+              if (e.removed[0] === this.sessionBookmarks[index]) {
+                this.sessionBookmarks.splice(index, 1);
+                this.sessionBookmarkLayers.splice(index, 1);
+                this.sessionBookmarkOpacity.splice(index, 1);
+                this.sessionBookmarkVisible.splice(index, 1);
+                this.sessionBookmarkHotspot.splice(index, 1);
+                shouldUpdate = true;
+                break;
+              }
+            }
+          } else {
+            let newSessionBookmark = [];
+            let newSessionBookmarkLayers = [];
+            let newSessionBookmarkOpacity = [];
+            let newSessionBookmarkVisible = [];
+            let newSessionBookmarkHotspot = [];
+            for (let i = 0; i < this.Bookmarks.bookmarks.items.length; i++) {
+              for (let j = 0; j < this.sessionBookmarks.length; j++) {
+                if (
+                  this.Bookmarks.bookmarks.items[i] === this.sessionBookmarks[j]
+                ) {
+                  newSessionBookmark.push(this.sessionBookmarks[j]);
+                  newSessionBookmarkLayers.push(this.sessionBookmarkLayers[j]);
+                  newSessionBookmarkOpacity.push(
+                    this.sessionBookmarkOpacity[j],
+                  );
+                  newSessionBookmarkVisible.push(
+                    this.sessionBookmarkVisible[j],
+                  );
+                  newSessionBookmarkHotspot.push(
+                    this.sessionBookmarkHotspot[j],
+                  );
+                }
+              }
+            }
+            if (
+              newSessionBookmark.length !== this.sessionBookmarks.length ||
+              newSessionBookmarkLayers.length !==
+                this.sessionBookmarkLayers.length ||
+              newSessionBookmarkOpacity.length !==
+                this.sessionBookmarkOpacity.length ||
+              newSessionBookmarkVisible.length !==
+                this.sessionBookmarkVisible.length ||
+              newSessionBookmarkHotspot.length !==
+                this.sessionBookmarkHotspot.length
+            ) {
+              this.sessionBookmarks = newSessionBookmark;
+              this.sessionBookmarkLayers = newSessionBookmarkLayers;
+              this.sessionBookmarkOpacity = newSessionBookmarkOpacity;
+              this.sessionBookmarkVisible = newSessionBookmarkVisible;
+              this.sessionBookmarkHotspot = newSessionBookmarkHotspot;
+              shouldUpdate = true;
+            }
+          }
+          if (shouldUpdate && this.userID != null) {
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID,
+              JSON.stringify(this.Bookmarks.bookmarks.items),
+            );
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
+              JSON.stringify(this.sessionBookmarkLayers),
+            );
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
+              JSON.stringify(this.sessionBookmarkOpacity),
+            );
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
+              JSON.stringify(this.sessionBookmarkVisible),
+            );
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
+              JSON.stringify(this.sessionBookmarkHotspot),
+            );
+          }
+          if (shouldUpdate) {
+            let bookmarkData = {
+              ...(this.props.bookmarkData || {}),
+              active: false,
+              layers: this.sessionBookmarkLayers,
+              opacity: this.sessionBookmarkOpacity,
+              visible: this.sessionBookmarkVisible,
+              position: null,
+            };
+            this.props.bookmarkHandler(bookmarkData);
+          }
+        }),
+        this.Bookmarks.on('bookmark-edit', (e) => {
+          if (!this._isMounted) return;
           let check = JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
           let visibleLayers =
             JSON.parse(sessionStorage.getItem('visibleLayers')) || [];
@@ -173,20 +338,24 @@ class BookmarkWidget extends React.Component {
               visible.push(true);
             }
           });
-          this.sessionBookmarks.push(e.added[0]);
-          this.sessionBookmarkLayers.push(check);
-          this.sessionBookmarkOpacity.push(opacity);
-          this.sessionBookmarkVisible.push(visible);
           let hotspotFilters = {
             activeLayers: {},
             filteredLayers: {},
           };
-          if (this.props.hotspotData && this.props.hotspotData.activeLayers) {
+          if (
+            this.props.hotspotData &&
+            this.props.hotspotData.activeLayers &&
+            Object.keys(this.props.hotspotData.activeLayers).length !== 0
+          ) {
             Object.keys(this.props.hotspotData.activeLayers).forEach((key) => {
               hotspotFilters.activeLayers[key] = null;
             });
           }
-          if (this.props.hotspotData && this.props.hotspotData.filteredLayers) {
+          if (
+            this.props.hotspotData &&
+            this.props.hotspotData.filteredLayers &&
+            Object.keys(this.props.hotspotData.filteredLayers).length !== 0
+          ) {
             Object.keys(this.props.hotspotData.filteredLayers).forEach(
               (key) => {
                 hotspotFilters.filteredLayers[
@@ -197,231 +366,148 @@ class BookmarkWidget extends React.Component {
               },
             );
           }
-          this.sessionBookmarkHotspot.push(hotspotFilters);
-        } else if (e.removed[0]) {
           for (let index = 0; index < this.sessionBookmarks.length; index++) {
-            if (e.removed[0] === this.sessionBookmarks[index]) {
-              this.sessionBookmarks.splice(index, 1);
-              this.sessionBookmarkLayers.splice(index, 1);
-              this.sessionBookmarkOpacity.splice(index, 1);
-              this.sessionBookmarkVisible.splice(index, 1);
-              this.sessionBookmarkHotspot.splice(index, 1);
+            if (e.bookmark === this.sessionBookmarks[index]) {
+              this.sessionBookmarks[index] = e.bookmark;
+              this.sessionBookmarkLayers[index] = check;
+              this.sessionBookmarkOpacity[index] = opacity;
+              this.sessionBookmarkVisible[index] = visible;
+              this.sessionBookmarkHotspot[index] = hotspotFilters;
             }
           }
-        } else {
-          let newSessionBookmark = [];
-          let newSessionBookmarkLayers = [];
-          let newSessionBookmarkOpacity = [];
-          let newSessionBookmarkVisible = [];
-          let newSessionBookmarkHotspot = [];
-          for (let i = 0; i < this.Bookmarks.bookmarks.items.length; i++) {
-            for (let j = 0; j < this.sessionBookmarks.length; j++) {
-              if (
-                this.Bookmarks.bookmarks.items[i] === this.sessionBookmarks[j]
-              ) {
-                newSessionBookmark.push(this.sessionBookmarks[j]);
-                newSessionBookmarkLayers.push(this.sessionBookmarkLayers[j]);
-                newSessionBookmarkOpacity.push(this.sessionBookmarkOpacity[j]);
-                newSessionBookmarkVisible.push(this.sessionBookmarkVisible[j]);
-                newSessionBookmarkHotspot.push(this.sessionBookmarkHotspot[j]);
-              }
-            }
-          }
-          this.sessionBookmarks = newSessionBookmark;
-          this.sessionBookmarkLayers = newSessionBookmarkLayers;
-          this.sessionBookmarkOpacity = newSessionBookmarkOpacity;
-          this.sessionBookmarkVisible = newSessionBookmarkVisible;
-          this.sessionBookmarkHotspot = newSessionBookmarkHotspot;
-        }
-        if (this.userID != null) {
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID,
-            JSON.stringify(this.Bookmarks.bookmarks.items),
-          );
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
-            JSON.stringify(this.sessionBookmarkLayers),
-          );
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
-            JSON.stringify(this.sessionBookmarkOpacity),
-          );
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
-            JSON.stringify(this.sessionBookmarkVisible),
-          );
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
-            JSON.stringify(this.sessionBookmarkHotspot),
-          );
-        }
-
-        let bookmarkData = {
-          ...(this.props.bookmarkData || {}),
-          active: false,
-          layers: this.sessionBookmarkLayers,
-          opacity: this.sessionBookmarkOpacity,
-          visible: this.sessionBookmarkVisible,
-          position: null,
-        };
-
-        this.props.bookmarkHandler(bookmarkData);
-      });
-      this.Bookmarks.on('bookmark-edit', (e) => {
-        let check = JSON.parse(sessionStorage.getItem('checkedLayers')) || [];
-        let visibleLayers =
-          JSON.parse(sessionStorage.getItem('visibleLayers')) || [];
-        let opacity = [];
-        let visible = [];
-        check.forEach((layer) => {
-          opacity.push(this.layers[layer].opacity);
-          if (visibleLayers[layer] && visibleLayers[layer][1] === 'eye-slash') {
-            visible.push(false);
-          } else {
-            visible.push(true);
-          }
-        });
-        let hotspotFilters = {
-          activeLayers: {},
-          filteredLayers: {},
-        };
-        if (
-          this.props.hotspotData &&
-          this.props.hotspotData.activeLayers &&
-          Object.keys(this.props.hotspotData.activeLayers).length !== 0
-        ) {
-          Object.keys(this.props.hotspotData.activeLayers).forEach((key) => {
-            hotspotFilters.activeLayers[key] = null;
-          });
-        }
-        if (
-          this.props.hotspotData &&
-          this.props.hotspotData.filteredLayers &&
-          Object.keys(this.props.hotspotData.filteredLayers).length !== 0
-        ) {
-          Object.keys(this.props.hotspotData.filteredLayers).forEach((key) => {
-            hotspotFilters.filteredLayers[
-              key
-            ] = this.props.hotspotData.filteredLayers[
-              key
-            ].customLayerParameters['CQL_FILTER'];
-          });
-        }
-        for (let index = 0; index < this.sessionBookmarks.length; index++) {
-          if (e.bookmark === this.sessionBookmarks[index]) {
-            this.sessionBookmarks[index] = e.bookmark;
-            this.sessionBookmarkLayers[index] = check;
-            this.sessionBookmarkOpacity[index] = opacity;
-            this.sessionBookmarkVisible[index] = visible;
-            this.sessionBookmarkHotspot[index] = hotspotFilters;
+          if (this.userID != null) {
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID,
+              JSON.stringify(this.Bookmarks.bookmarks.items),
+            );
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
+              JSON.stringify(this.sessionBookmarkLayers),
+            );
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
+              JSON.stringify(this.sessionBookmarkOpacity),
+            );
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
+              JSON.stringify(this.sessionBookmarkVisible),
+            );
+            localStorage.setItem(
+              BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
+              JSON.stringify(this.sessionBookmarkHotspot),
+            );
           }
-        }
-        if (this.userID != null) {
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID,
-            JSON.stringify(this.Bookmarks.bookmarks.items),
-          );
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
-            JSON.stringify(this.sessionBookmarkLayers),
-          );
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
-            JSON.stringify(this.sessionBookmarkOpacity),
-          );
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
-            JSON.stringify(this.sessionBookmarkVisible),
-          );
-          localStorage.setItem(
-            BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
-            JSON.stringify(this.sessionBookmarkHotspot),
-          );
-        }
 
-        let bookmarkData = {
-          ...(this.props.bookmarkData || {}),
-          active: false,
-          layers: this.sessionBookmarkLayers,
-          opacity: this.sessionBookmarkOpacity,
-          visible: this.sessionBookmarkVisible,
-          position: null,
-        };
+          let bookmarkData = {
+            ...(this.props.bookmarkData || {}),
+            active: false,
+            layers: this.sessionBookmarkLayers,
+            opacity: this.sessionBookmarkOpacity,
+            visible: this.sessionBookmarkVisible,
+            position: null,
+          };
 
-        this.props.bookmarkHandler(bookmarkData);
-      });
-      this.Bookmarks.on('bookmark-select', (e) => {
-        let selectLayers = [];
-        let selectOpacity = [];
-        let selectVisible = [];
-        let selectPosition;
-        for (let index = 0; index < this.Bookmarks.bookmarks.length; index++) {
-          if (e.bookmark === this.Bookmarks.bookmarks.items[index]) {
-            selectLayers = this.sessionBookmarkLayers[index];
-            selectOpacity = this.sessionBookmarkOpacity[index];
-            selectVisible = this.sessionBookmarkVisible[index];
-            selectPosition = index;
-            localStorage.setItem(
-              'bookmarkHotspotFilter',
-              JSON.stringify(this.sessionBookmarkHotspot[index]),
-            );
+          this.props.bookmarkHandler(bookmarkData);
+        }),
+        this.Bookmarks.on('bookmark-select', (e) => {
+          if (!this._isMounted) return;
+          let selectLayers = [];
+          let selectOpacity = [];
+          let selectVisible = [];
+          let selectPosition;
+          for (
+            let index = 0;
+            index < this.Bookmarks.bookmarks.length;
+            index++
+          ) {
+            if (e.bookmark === this.Bookmarks.bookmarks.items[index]) {
+              selectLayers = this.sessionBookmarkLayers[index];
+              selectOpacity = this.sessionBookmarkOpacity[index];
+              selectVisible = this.sessionBookmarkVisible[index];
+              selectPosition = index;
+              localStorage.setItem(
+                'bookmarkHotspotFilter',
+                JSON.stringify(this.sessionBookmarkHotspot[index]),
+              );
+            }
           }
-        }
-        let layerOpacities = {};
-        const layerKeys = {
-          lcc_filter: 'all_lcc',
-          lc_filter: 'all_present',
-          klc_filter: 'cop_klc',
-          pa_filter: 'protected_areas',
-        };
-        for (let index = 0; index < selectLayers.length; index++) {
-          if (selectOpacity[index]) {
-            Object.entries(layerKeys).forEach(([key, val]) => {
-              if (
-                this.props.hotspotData?.filteredLayers?.hasOwnProperty(key) &&
-                this.layers[key] &&
-                selectLayers[index].includes(val)
-              ) {
-                this.layers[key].opacity = selectOpacity[index];
-              } else {
-                this.layers[selectLayers[index]].opacity = selectOpacity[index];
-                layerOpacities[selectLayers[index]] = selectOpacity[index];
+          let layerOpacities = {};
+          const layerKeys = {
+            lcc_filter: 'all_lcc',
+            lc_filter: 'all_present',
+            klc_filter: 'cop_klc',
+            pa_filter: 'protected_areas',
+          };
+          let i = 0;
+          const chunkSize = 10;
+          const processChunk = () => {
+            let end = Math.min(i + chunkSize, selectLayers.length);
+            for (; i < end; i++) {
+              const opacityIndex = i;
+              if (selectOpacity[opacityIndex]) {
+                Object.entries(layerKeys).forEach(([key, val]) => {
+                  if (
+                    this.props.hotspotData?.filteredLayers?.hasOwnProperty(
+                      key,
+                    ) &&
+                    this.layers[key] &&
+                    selectLayers[opacityIndex].includes(val)
+                  ) {
+                    this.layers[key].opacity = selectOpacity[opacityIndex];
+                  } else {
+                    this.layers[selectLayers[opacityIndex]].opacity =
+                      selectOpacity[opacityIndex];
+                    layerOpacities[selectLayers[opacityIndex]] =
+                      selectOpacity[opacityIndex];
+                  }
+                });
               }
-            });
-          }
-          if (selectVisible[index] !== null) {
-            Object.entries(layerKeys).forEach(([key, val]) => {
-              if (
-                this.props.hotspotData?.filteredLayers?.hasOwnProperty(key) &&
-                this.layers[key] &&
-                selectLayers[index].includes(val)
-              ) {
-                this.layers[key].visible = selectVisible[index];
-              } else {
-                this.layers[selectLayers[index]].visible = selectVisible[index];
+              if (selectVisible[opacityIndex] !== null) {
+                Object.entries(layerKeys).forEach(([key, val]) => {
+                  if (
+                    this.props.hotspotData?.filteredLayers?.hasOwnProperty(
+                      key,
+                    ) &&
+                    this.layers[key] &&
+                    selectLayers[opacityIndex].includes(val)
+                  ) {
+                    this.layers[key].visible = selectVisible[opacityIndex];
+                  } else {
+                    this.layers[selectLayers[opacityIndex]].visible =
+                      selectVisible[opacityIndex];
+                  }
+                });
               }
-            });
-          }
-        }
-        sessionStorage.setItem('checkedLayers', JSON.stringify(selectLayers));
-        sessionStorage.setItem(
-          'layerOpacities',
-          JSON.stringify(layerOpacities),
-        );
-        let bookmarkData = {
-          ...(this.props.bookmarkData || {}),
-          active: true,
-          layers: this.sessionBookmarkLayers,
-          opacity: this.sessionBookmarkOpacity,
-          visible: this.sessionBookmarkVisible,
-          position: selectPosition,
-        };
+            }
+            if (i < selectLayers.length) {
+              requestAnimationFrame(processChunk);
+            } else {
+              sessionStorage.setItem(
+                'checkedLayers',
+                JSON.stringify(selectLayers),
+              );
+              sessionStorage.setItem(
+                'layerOpacities',
+                JSON.stringify(layerOpacities),
+              );
+              let bookmarkData = {
+                ...(this.props.bookmarkData || {}),
+                active: true,
+                layers: this.sessionBookmarkLayers,
+                opacity: this.sessionBookmarkOpacity,
+                visible: this.sessionBookmarkVisible,
+                position: selectPosition,
+              };
 
-        this.props.bookmarkHandler(bookmarkData);
-        this.map.layers.removeAll();
-        let firstLayer = Object.values(this.layers)[0];
-        this.map.add(firstLayer);
-      });
+              this.props.bookmarkHandler(bookmarkData);
+              this.map.layers.removeAll();
+              let firstLayer = Object.values(this.layers)[0];
+              this.map.add(firstLayer);
+            }
+          };
+          processChunk();
+        }),
+      );
     });
   }
   componentDidUpdate() {
@@ -429,12 +515,32 @@ class BookmarkWidget extends React.Component {
       this.Bookmarks.when(() => {
         this.Bookmarks.container.addEventListener(
           'keydown',
-          this.limitMaxLenth,
+          this.boundLimitMaxLenth,
+        );
+        this.Bookmarks.container.addEventListener(
+          'paste',
+          this.boundLimitMaxLenth,
         );
-        this.Bookmarks.container.addEventListener('paste', this.limitMaxLenth);
       });
     });
   }
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this.arcgisEventHandles) {
+      this.arcgisEventHandles.forEach((handle) => handle.remove());
+      this.arcgisEventHandles = [];
+    }
+    if (this.Bookmarks && this.Bookmarks.container) {
+      this.Bookmarks.container.removeEventListener(
+        'keydown',
+        this.boundLimitMaxLenth,
+      );
+      this.Bookmarks.container.removeEventListener(
+        'paste',
+        this.boundLimitMaxLenth,
+      );
+    }
+  }
   /**
    * This method renders the component
    * @returns jsx

package/src/components/MapViewer/HotspotWidget.jsx

@@ -53,6 +53,8 @@ class HotspotWidget extends React.Component {
     this.lccYear = null;
     this.urls = this.props.urls;
     this.layers = this.props.selectedLayers;
+    this.arcgisEventHandles = [];
+    this._isMounted = false;
   }
 
   loader() {
@@ -946,6 +948,7 @@ class HotspotWidget extends React.Component {
    */
 
   async componentDidMount() {
+    this._isMounted = true;
     await this.getLayerParameters();
     await this.loader();
     if (!this.container.current) return;
@@ -954,8 +957,9 @@ class HotspotWidget extends React.Component {
     });
     this.layerModelInit();
     this.getBBoxData();
+    this.arcgisEventHandles = [];
     this.props.view.when(() => {
-      this.props.view.map.layers.on('change', () => {
+      const handle = this.props.view.map.layers.on('change', () => {
         let bookmarkHotspotFilter = null;
         if (localStorage.getItem('bookmarkHotspotFilter')) {
           bookmarkHotspotFilter = JSON.parse(
@@ -964,12 +968,13 @@ class HotspotWidget extends React.Component {
         } else {
           return;
         }
+        let shouldUpdate = false;
         if (
           bookmarkHotspotFilter !== null &&
           Object.keys(bookmarkHotspotFilter?.filteredLayers).length !== 0 &&
+          this.props.bookmarkData &&
           this.props.bookmarkData.active === true
         ) {
-          // setTimeout(() => {
           let activeLayers = [];
           let filteredLayers = [];
           Object.keys(bookmarkHotspotFilter.activeLayers).forEach((key) => {
@@ -978,32 +983,51 @@ class HotspotWidget extends React.Component {
           Object.keys(bookmarkHotspotFilter.filteredLayers).forEach((key) => {
             filteredLayers[key] = null;
           });
-          this.props.hotspotData['activeLayers'] = activeLayers;
-          this.props.hotspotData['filteredLayers'] = filteredLayers;
+          if (this.props.hotspotData) {
+            this.props.hotspotData['activeLayers'] = activeLayers;
+            this.props.hotspotData['filteredLayers'] = filteredLayers;
+          }
           this.renderApplyFilterButton();
           localStorage.setItem('bookmarkHotspotFilter', null);
-          // }, 2000);
+          shouldUpdate = true;
         } else if (
           bookmarkHotspotFilter !== null &&
           Object.keys(bookmarkHotspotFilter?.filteredLayers).length === 0 &&
+          this.props.bookmarkData &&
           this.props.bookmarkData.active === true
         ) {
           this.lcYear = null;
           this.lccYear = null;
           this.selectedArea = null;
-          this.setState({ lcYear: null, lccYear: null, selectedArea: null });
+          if (this._isMounted) {
+            this.setState({ lcYear: null, lccYear: null, selectedArea: null });
+          }
+          shouldUpdate = true;
+        }
+        if (shouldUpdate && this._isMounted) {
+          this.setState({
+            activeLayersArray: Array.from(
+              document.querySelectorAll('.active-layer'),
+            ),
+          });
+          const newHotspotData = this.props.hotspotData;
+          this.props.hotspotDataHandler(newHotspotData);
         }
-        this.setState({
-          activeLayersArray: Array.from(
-            document.querySelectorAll('.active-layer'),
-          ),
-        });
-        const newHotspotData = this.props.hotspotData;
-        this.props.hotspotDataHandler(newHotspotData);
       });
+      this.arcgisEventHandles.push(handle);
     });
   }
 
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this.arcgisEventHandles) {
+      this.arcgisEventHandles.forEach(
+        (handle) => handle && handle.remove && handle.remove(),
+      );
+      this.arcgisEventHandles = [];
+    }
+  }
+
   componentDidUpdate(prevState, prevProps) {
     if (prevProps.hotspotData !== this.props.hotspotData) {
       this.getKLCNames(this.dataJSONNames, this.state.selectedArea);

package/src/components/MapViewer/InfoWidget.jsx

@@ -28,6 +28,8 @@ class InfoWidget extends React.Component {
       'esri-icon-description esri-widget--button esri-widget esri-interactive';
     this.infoData = {};
     this.Highcharts = props.highcharts;
+    this.arcgisEventHandles = [];
+    this._isMounted = false;
   }
 
   async loader() {
@@ -96,13 +98,15 @@ class InfoWidget extends React.Component {
   /**
    * This method is executed after the rener method is executed
    */ async componentDidMount() {
+    this._isMounted = true;
     await this.loader();
     //this.waitForContainer(this.container.current);
     if (!this.container.current) return;
     this.props.view.when(() => {
       this.props.view.ui.add(this.container.current, 'top-right');
     });
-    this.props.view.on('click', (e) => {
+    const clickHandle = this.props.view.on('click', (e) => {
+      if (!this._isMounted) return;
       let screenPoint = {
         x: e.x,
         y: e.y,
@@ -425,6 +429,17 @@ class InfoWidget extends React.Component {
         });
       }
     });
+    this.arcgisEventHandles.push(clickHandle);
+  }
+
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this.arcgisEventHandles) {
+      this.arcgisEventHandles.forEach(
+        (handle) => handle && handle.remove && handle.remove(),
+      );
+      this.arcgisEventHandles = [];
+    }
   }
 
   getLayerTitle(layer) {

package/src/components/MapViewer/LegendWidget.jsx

@@ -23,6 +23,8 @@ class LegendWidget extends React.Component {
     this.menuClass =
       'esri-icon-legend esri-widget--button esri-widget esri-interactive';
     this.urls = this.props.urls;
+    this.arcgisEventHandles = [];
+    this._isMounted = false;
   }
 
   hideNutsLegend() {
@@ -219,6 +221,7 @@ class LegendWidget extends React.Component {
    * This method is executed after the rener method is executed
    */
   async componentDidMount() {
+    this._isMounted = true;
     await this.loader();
     if (!this.container.current) return;
     this.props.view.when(() => {
@@ -232,14 +235,27 @@ class LegendWidget extends React.Component {
       container: document.querySelector('.legend-panel'),
     });
     this.LegendWidget.when(() => {
-      this.LegendWidget.activeLayerInfos.on('after-changes', (event) => {
-        this.setState({ loading: true });
-        //this.scanImages();
-        //this.brokenLegendImagePatch();
-      });
+      const handle = this.LegendWidget.activeLayerInfos.on(
+        'after-changes',
+        (event) => {
+          if (!this._isMounted) return;
+          this.setState({ loading: true });
+        },
+      );
+      this.arcgisEventHandles.push(handle);
     });
   }
 
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this.arcgisEventHandles) {
+      this.arcgisEventHandles.forEach(
+        (handle) => handle && handle.remove && handle.remove(),
+      );
+      this.arcgisEventHandles = [];
+    }
+  }
+
   /**
    * Method that returns true or false if session storage has any visible active layer
    */
@@ -293,6 +309,7 @@ class LegendWidget extends React.Component {
     if (prevState.loading !== this.state.loading) {
       if (this.state.loading === true) {
         setTimeout(() => {
+          if (!this._isMounted) return;
           if (this.props.download) {
             this.hideNutsLegend();
           }

package/src/components/MapViewer/LoadingSpinner.jsx

@@ -12,36 +12,36 @@ class LoadingSpinner extends React.Component {
     };
     this.showLoading = this.showLoading.bind(this);
     this.listenForLayerChanges = this.listenForLayerChanges.bind(this);
+    this.arcgisEventHandles = [];
+    this._isMounted = false;
   }
 
   listenForLayerChanges() {
-    this.props.view.map.layers.on('change', (event) => {
-      if (event.added.length > 0)
-        if (this.state.loading === false) {
-          this.setState({ loading: true });
-          this.showLoading();
-        }
+    const handle1 = this.props.view.map.layers.on('change', (event) => {
+      if (!this._isMounted) return;
+      if (event.added.length > 0 && this.state.loading === false) {
+        this.setState({ loading: true }, this.showLoading);
+      }
     });
-    this.props.view.on('layerview-create', (event) => {
+    const handle2 = this.props.view.on('layerview-create', (event) => {
+      if (!this._isMounted) return;
       if (event.layer.loadStatus === 'loaded') {
-        this.props.view.watch('updating', (isUpdating) => {
-          if (!isUpdating) {
-            if (this.state.loading === true) {
-              this.setState({ loading: false });
-              this.showLoading();
-            }
+        const watchHandle = this.props.view.watch('updating', (isUpdating) => {
+          if (!this._isMounted) return;
+          if (!isUpdating && this.state.loading === true) {
+            this.setState({ loading: false }, this.showLoading);
           }
         });
+        this.arcgisEventHandles.push(watchHandle);
       }
     });
-    this.props.view.on('layerview-create-error', (event) => {
-      if (event.layer.loadError !== null) {
-        if (this.state.loading === true) {
-          this.setState({ loading: false });
-          this.showLoading();
-        }
+    const handle3 = this.props.view.on('layerview-create-error', (event) => {
+      if (!this._isMounted) return;
+      if (event.layer.loadError !== null && this.state.loading === true) {
+        this.setState({ loading: false }, this.showLoading);
       }
     });
+    this.arcgisEventHandles.push(handle1, handle2, handle3);
   }
 
   showLoading() {
@@ -51,17 +51,10 @@ class LoadingSpinner extends React.Component {
     } else {
       this.container.current.style.display = 'block';
     }
-    this.setState({});
   }
 
-  // waitForContainer(mapdiv) {
-  //   while (mapdiv === null) {
-  //     new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
-  //   }
-  //   return mapdiv;
-  // }
-
   async componentDidMount() {
+    this._isMounted = true;
     //this.waitForContainer(this.props.view);
     if (!this.container.current) return;
     this.props.view.when(() => {
@@ -70,6 +63,16 @@ class LoadingSpinner extends React.Component {
     });
   }
 
+  componentWillUnmount() {
+    this._isMounted = false;
+    if (this.arcgisEventHandles) {
+      this.arcgisEventHandles.forEach(
+        (handle) => handle && handle.remove && handle.remove(),
+      );
+      this.arcgisEventHandles = [];
+    }
+  }
+
   render() {
     return (
       <div

package/src/components/MapViewer/SwipeWidget.jsx

@@ -25,8 +25,11 @@ class SwipeWidget extends React.Component {
     this.dpiMax = 1200;
     this.scaleMax = 600000000;
     this.map = this.props.map;
-    this.layers = this.props.layers;
+    // layers = this.props.layers;
     this.hasSwipe = false;
+    this.prevActiveLayers = this.props.mapViewer.activeLayers
+      ? this.props.mapViewer.activeLayers
+      : [];
   }
 
   loader() {
@@ -103,6 +106,27 @@ class SwipeWidget extends React.Component {
     });
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    const curr = this.props.mapViewer.activeLayers || [];
+    const prev = this.prevActiveLayers || [];
+    const changed =
+      curr.length !== prev.length || curr.some((layer, i) => layer !== prev[i]);
+    if (this.state.showMapMenu && changed) {
+      if (curr.length === 0) {
+        sessionStorage.setItem('checkedLayers', JSON.stringify([]));
+        this.map.layers.removeAll();
+        this.props.view.ui.remove(this.swipe);
+        this.hasSwipe = false;
+        this.resetSwipeWidgetToDefault();
+        // this.openMenu(this);
+      } else if (this.hasSwipe) {
+        this.loadOptions();
+        this.renderApplySwipeButton();
+      }
+    }
+    this.prevActiveLayers = curr;
+  }
+
   getLayerTitle(layer) {
     let title;
     if (layer.url && layer.url.toLowerCase().includes('wmts')) {
@@ -119,6 +143,7 @@ class SwipeWidget extends React.Component {
     return title;
   }
   loadOptions() {
+    const layers = this.props.layers;
     var selectLeadingLayer = document.getElementById('select-leading-layer');
     if (selectLeadingLayer) {
       this.removeOptions(selectLeadingLayer);
@@ -143,9 +168,9 @@ class SwipeWidget extends React.Component {
       this.map.layers.items.length > 0
     ) {
       cl = [];
-      // Find the layer ID in this.layers that corresponds to each map.layers item
+      // Find the layer ID in layers that corresponds to each map.layers item
       for (const mapLayer of this.map.layers.items) {
-        for (const [layerKey, layerObj] of Object.entries(this.layers)) {
+        for (const [layerKey, layerObj] of Object.entries(layers)) {
           if (layerObj.id === mapLayer.id) {
             cl.push(layerKey);
             break;
@@ -162,32 +187,32 @@ class SwipeWidget extends React.Component {
     // Process the layers
     if (cl && cl.length > 0) {
       cl.forEach((layer) => {
-        if (this.layers[layer]) {
-          let layerId = this.layers[layer].id;
-          if (this.layers['lcc_filter']) {
+        if (layers[layer]) {
+          let layerId = layers[layer].id;
+          if (layers['lcc_filter']) {
             if (
               layer === 'all_lcc_a_pol_1_4_1_0' ||
               layer === 'all_lcc_b_pol_1_4_1_1'
             ) {
-              layerId = this.layers['lcc_filter'].id;
+              layerId = layers['lcc_filter'].id;
             }
           }
-          if (this.layers['lc_filter']) {
+          if (layers['lc_filter']) {
             if (
               layer === 'all_present_lc_a_pol_1_4_0_0' ||
               layer === 'all_present_lc_b_pol_1_4_0_1'
             ) {
-              layerId = this.layers['lc_filter'].id;
+              layerId = layers['lc_filter'].id;
             }
           }
-          if (this.layers['klc_filter']) {
+          if (layers['klc_filter']) {
             if (layer === 'cop_klc_1_4_2_0') {
-              layerId = this.layers['klc_filter'].id;
+              layerId = layers['klc_filter'].id;
             }
           }
-          if (this.layers['pa_filter']) {
+          if (layers['pa_filter']) {
             if (layer === 'protected_areas_1_4_3_0') {
-              layerId = this.layers['pa_filter'].id;
+              layerId = layers['pa_filter'].id;
             }
           }
           if (selectLeadingLayer) {
@@ -198,7 +223,7 @@ class SwipeWidget extends React.Component {
             ) {
               selectLeadingLayer.options.add(
                 new Option(
-                  this.getLayerTitle(this.layers[layer]),
+                  this.getLayerTitle(layers[layer]),
                   layerId,
                   true,
                   true,
@@ -206,11 +231,7 @@ class SwipeWidget extends React.Component {
               );
             } else {
               selectLeadingLayer.options.add(
-                new Option(
-                  this.getLayerTitle(this.layers[layer]),
-                  layerId,
-                  false,
-                ),
+                new Option(this.getLayerTitle(layers[layer]), layerId, false),
               );
             }
           }
@@ -222,7 +243,7 @@ class SwipeWidget extends React.Component {
             ) {
               selectTrailingLayer.options.add(
                 new Option(
-                  this.getLayerTitle(this.layers[layer]),
+                  this.getLayerTitle(layers[layer]),
                   layerId,
                   true,
                   true,
@@ -230,11 +251,7 @@ class SwipeWidget extends React.Component {
               );
             } else {
               selectTrailingLayer.options.add(
-                new Option(
-                  this.getLayerTitle(this.layers[layer]),
-                  layerId,
-                  false,
-                ),
+                new Option(this.getLayerTitle(layers[layer]), layerId, false),
               );
             }
           }
@@ -242,6 +259,33 @@ class SwipeWidget extends React.Component {
       });
     }
   }
+  resetSwipeWidgetToDefault() {
+    // Remove all swipe layers
+    if (this.swipe) {
+      this.swipe.leadingLayers.removeAll();
+      this.swipe.trailingLayers.removeAll();
+      this.hasSwipe = false;
+    }
+    // Reset dropdowns to default
+    const selectLeadingLayer = document.getElementById('select-leading-layer');
+    if (selectLeadingLayer) {
+      this.removeOptions(selectLeadingLayer);
+      selectLeadingLayer.options.add(
+        new Option('Select a leading layer', 'default', false, false),
+      );
+      selectLeadingLayer.options[0].disabled = true;
+    }
+    const selectTrailingLayer = document.getElementById(
+      'select-trailing-layer',
+    );
+    if (selectTrailingLayer) {
+      this.removeOptions(selectTrailingLayer);
+      selectTrailingLayer.options.add(
+        new Option('Select a trailing layer', 'default', false, false),
+      );
+      selectTrailingLayer.options[0].disabled = true;
+    }
+  }
   removeOptions(selectElement) {
     if (selectElement.options.length > 0) {
       var i,
@@ -252,6 +296,7 @@ class SwipeWidget extends React.Component {
     }
   }
   renderApplySwipeButton() {
+    const layers = this.props.layers;
     this.props.view.ui.remove(this.swipe);
     this.props.view.ui.add(this.swipe);
     this.hasSwipe = true;
@@ -268,44 +313,44 @@ class SwipeWidget extends React.Component {
     let cl = JSON.parse(sessionStorage.getItem('checkedLayers'));
     if (cl) {
       cl.forEach((layer) => {
-        if (this.layers[layer].id === selectedLeadingLayer) {
-          this.swipe.leadingLayers.add(this.layers[layer]);
+        if (layers[layer].id === selectedLeadingLayer) {
+          this.swipe.leadingLayers.add(layers[layer]);
         }
-        if (this.layers[layer].id === selectedTrailingLayer) {
-          this.swipe.trailingLayers.add(this.layers[layer]);
+        if (layers[layer].id === selectedTrailingLayer) {
+          this.swipe.trailingLayers.add(layers[layer]);
         }
       });
     }
-    if (this.layers['lcc_filter']) {
-      if (this.layers['lcc_filter'].id === selectedLeadingLayer) {
-        this.swipe.leadingLayers.add(this.layers['lcc_filter']);
+    if (layers['lcc_filter']) {
+      if (layers['lcc_filter'].id === selectedLeadingLayer) {
+        this.swipe.leadingLayers.add(layers['lcc_filter']);
       }
-      if (this.layers['lcc_filter'].id === selectedTrailingLayer) {
-        this.swipe.trailingLayers.add(this.layers['lcc_filter']);
+      if (layers['lcc_filter'].id === selectedTrailingLayer) {
+        this.swipe.trailingLayers.add(layers['lcc_filter']);
       }
     }
-    if (this.layers['lc_filter']) {
-      if (this.layers['lc_filter'].id === selectedLeadingLayer) {
-        this.swipe.leadingLayers.add(this.layers['lc_filter']);
+    if (layers['lc_filter']) {
+      if (layers['lc_filter'].id === selectedLeadingLayer) {
+        this.swipe.leadingLayers.add(layers['lc_filter']);
       }
-      if (this.layers['lc_filter'].id === selectedTrailingLayer) {
-        this.swipe.trailingLayers.add(this.layers['lc_filter']);
+      if (layers['lc_filter'].id === selectedTrailingLayer) {
+        this.swipe.trailingLayers.add(layers['lc_filter']);
       }
     }
-    if (this.layers['klc_filter']) {
-      if (this.layers['klc_filter'].id === selectedLeadingLayer) {
-        this.swipe.leadingLayers.add(this.layers['klc_filter']);
+    if (layers['klc_filter']) {
+      if (layers['klc_filter'].id === selectedLeadingLayer) {
+        this.swipe.leadingLayers.add(layers['klc_filter']);
       }
-      if (this.layers['klc_filter'].id === selectedTrailingLayer) {
-        this.swipe.trailingLayers.add(this.layers['klc_filter']);
+      if (layers['klc_filter'].id === selectedTrailingLayer) {
+        this.swipe.trailingLayers.add(layers['klc_filter']);
       }
     }
-    if (this.layers['pa_filter']) {
-      if (this.layers['pa_filter'].id === selectedLeadingLayer) {
-        this.swipe.leadingLayers.add(this.layers['pa_filter']);
+    if (layers['pa_filter']) {
+      if (layers['pa_filter'].id === selectedLeadingLayer) {
+        this.swipe.leadingLayers.add(layers['pa_filter']);
       }
-      if (this.layers['pa_filter'].id === selectedTrailingLayer) {
-        this.swipe.trailingLayers.add(this.layers['pa_filter']);
+      if (layers['pa_filter'].id === selectedTrailingLayer) {
+        this.swipe.trailingLayers.add(layers['pa_filter']);
       }
     }
     this.map.layers.removeAll();
@@ -318,23 +363,24 @@ class SwipeWidget extends React.Component {
   }
 
   loadVisibleLayers() {
+    const layers = this.props.layers;
     let cl = JSON.parse(sessionStorage.getItem('checkedLayers'));
     if (cl) {
       cl.forEach((layer) => {
-        this.map.layers.add(this.layers[layer]);
+        this.map.layers.add(layers[layer]);
       });
     }
-    if (this.layers['lcc_filter']) {
-      this.map.layers.add(this.layers['lcc_filter']);
+    if (layers['lcc_filter']) {
+      this.map.layers.add(layers['lcc_filter']);
     }
-    if (this.layers['lc_filter']) {
-      this.map.layers.add(this.layers['lc_filter']);
+    if (layers['lc_filter']) {
+      this.map.layers.add(layers['lc_filter']);
     }
-    if (this.layers['klc_filter']) {
-      this.map.layers.add(this.layers['klc_filter']);
+    if (layers['klc_filter']) {
+      this.map.layers.add(layers['klc_filter']);
     }
-    if (this.layers['pa_filter']) {
-      this.map.layers.add(this.layers['pa_filter']);
+    if (layers['pa_filter']) {
+      this.map.layers.add(layers['pa_filter']);
     }
   }
   /**