@eeacms/volto-arcgis-block 0.1.357 → 0.1.358

package/CHANGELOG.md

@@ -4,10 +4,16 @@ 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)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.357",
+  "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