@eeacms/volto-arcgis-block 0.1.399 → 0.1.401

package/CHANGELOG.md

@@ -4,6 +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.401](https://github.com/eea/volto-arcgis-block/compare/0.1.400...0.1.401) - 29 October 2025
+
+#### :hammer_and_wrench: Others
+
+- (bug): HOTPSOT widget bugs corrected for sentry and loading mapviewer without downloading unecessary files if widget is not in use [Unai Bolivar - [`d83bcdf`](https://github.com/eea/volto-arcgis-block/commit/d83bcdfafe6979e012ac848362269fe23277bd5b)]
+### [0.1.400](https://github.com/eea/volto-arcgis-block/compare/0.1.399...0.1.400) - 29 October 2025
+
+#### :hammer_and_wrench: Others
+
+- CLMS-293307+CLMS-289791+CLMS-289790 (feat): Bookmark download/load function added [Urkorue - [`1a9888d`](https://github.com/eea/volto-arcgis-block/commit/1a9888d6163828e712d52cba52ea1d34adc74390)]
 ### [0.1.399](https://github.com/eea/volto-arcgis-block/compare/0.1.398...0.1.399) - 27 October 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -35,6 +35,7 @@ class BookmarkWidget extends React.Component {
     this.boundLimitMaxLenth = this.limitMaxLenth.bind(this);
     this._isMounted = false;
     this._skipNextChangePersist = true;
+    this.fileInput = createRef();
   }
 
   loader() {
@@ -246,6 +247,18 @@ class BookmarkWidget extends React.Component {
       this.sessionBookmarks.push(bookmark);
     });
     this.Bookmarks.when(() => {
+      document
+        .querySelectorAll('.esri-bookmarks__bookmark')
+        .forEach((bookmark) => {
+          let download_button = document.createElement('button');
+          download_button.className = 'esri-button download-bookmark-button';
+          download_button.innerText = '⭳';
+          download_button.bookmarkName = bookmark.innerText;
+          download_button.addEventListener('click', (e) => {
+            this.downloadBookmark(e.currentTarget.bookmarkName);
+          });
+          bookmark.insertBefore(download_button, bookmark.childNodes[2]);
+        });
       this.arcgisEventHandles.push(
         this.Bookmarks.bookmarks.on('change', (e) => {
           if (!this._isMounted) return;
@@ -312,6 +325,28 @@ class BookmarkWidget extends React.Component {
                 ) {
                   this.sessionBookmarkHotspot.splice(index, 1);
                 }
+                if (this.sessionBookmarks.length === 0) {
+                  if (this.userID !== null) {
+                    const storageKey = 'user_' + this.userID;
+                    let userObj;
+                    try {
+                      userObj =
+                        JSON.parse(localStorage.getItem(storageKey)) || {};
+                    } catch (e) {
+                      userObj = {};
+                    }
+                    if (userObj.bookmarks) {
+                      userObj.bookmarks = {};
+                    }
+                    localStorage.setItem(storageKey, JSON.stringify(userObj));
+                    try {
+                      localStorage.setItem(
+                        storageKey + '_bookmarks_backup',
+                        {},
+                      );
+                    } catch (e) {}
+                  }
+                }
                 shouldUpdate = true;
                 break;
               }
@@ -769,6 +804,20 @@ class BookmarkWidget extends React.Component {
         );
       });
     });
+    document
+      .querySelectorAll('.esri-bookmarks__bookmark')
+      .forEach((bookmark) => {
+        if (bookmark.childNodes.length < 4) {
+          let download_button = document.createElement('button');
+          download_button.className = 'esri-button download-bookmark-button';
+          download_button.innerText = '⭳';
+          download_button.bookmarkName = bookmark.innerText;
+          download_button.addEventListener('click', (e) => {
+            this.downloadBookmark(e.currentTarget.bookmarkName);
+          });
+          bookmark.insertBefore(download_button, bookmark.childNodes[2]);
+        }
+      });
   }
   componentWillUnmount() {
     this._isMounted = false;
@@ -951,6 +1000,122 @@ class BookmarkWidget extends React.Component {
       );
     } catch (e) {}
   }
+  downloadBookmark(name) {
+    if (this.userID == null) return;
+    const storageKey = 'user_' + this.userID;
+    let userObj;
+    try {
+      userObj = JSON.parse(localStorage.getItem(storageKey)) || {};
+    } catch (e) {
+      userObj = {};
+    }
+    let bookmarks =
+      userObj && userObj.bookmarks && typeof userObj.bookmarks === 'object'
+        ? userObj.bookmarks
+        : null;
+    if (!bookmarks) {
+      try {
+        bookmarks = JSON.parse(
+          localStorage.getItem(storageKey + '_bookmarks_backup'),
+        );
+      } catch (e) {
+        return;
+      }
+    }
+    if (!bookmarks) return;
+    let index = 0;
+    for (index; index < bookmarks.items.length; index++) {
+      if (bookmarks.items[index].name === name) {
+        break;
+      }
+    }
+    let selectedBookmark = {
+      items: Array.isArray(bookmarks.items) ? bookmarks.items[index] : [],
+      layers: Array.isArray(bookmarks.layers) ? bookmarks.layers[index] : [],
+      opacity: Array.isArray(bookmarks.opacity) ? bookmarks.opacity[index] : [],
+      visible: Array.isArray(bookmarks.visible) ? bookmarks.visible[index] : [],
+      hotspot: Array.isArray(bookmarks.hotspot) ? bookmarks.hotspot[index] : [],
+      selectedHotspotFilter:
+        bookmarks.selectedHotspotFilter != null
+          ? bookmarks.selectedHotspotFilter
+          : null,
+    };
+    let filename = 'bookmark_' + selectedBookmark.items.name;
+    //const JSONToFile = (userObj, filename) => {
+    const blob = new Blob([JSON.stringify(selectedBookmark)], {
+      type: 'application/json',
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${filename}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+  handleUploadClick(event) {
+    event.preventDefault();
+    this.fileInput.current.click();
+  }
+  handleFileUpload(e) {
+    const file = e.target.files[0];
+    if (file) {
+      if (this.userID == null) return;
+      const storageKey = 'user_' + this.userID;
+      let userObj;
+      try {
+        userObj = JSON.parse(localStorage.getItem(storageKey)) || {};
+      } catch (e) {
+        userObj = {};
+      }
+      if (userObj.bookmarks == null) {
+        userObj.bookmarks = {
+          items: [],
+          layers: [],
+          opacity: [],
+          visible: [],
+          hotspot: [],
+          selectedHotspotFilter: null,
+        };
+      }
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        try {
+          const data = JSON.parse(e.target.result);
+          userObj.bookmarks.items.push(data.items);
+          userObj.bookmarks.layers.push(data.layers);
+          userObj.bookmarks.opacity.push(data.opacity);
+          userObj.bookmarks.visible.push(data.visible);
+          userObj.bookmarks.hotspot.push(data.hotspot);
+          userObj.bookmarks.selectedHotspotFilter = data.selectedHotspotFilter;
+        } catch (e) {}
+        localStorage.setItem(storageKey, JSON.stringify(userObj));
+        try {
+          localStorage.setItem(
+            storageKey + '_bookmarks_backup',
+            JSON.stringify(userObj.bookmarks),
+          );
+        } catch (e) {}
+        this.loadBookmarksToWidget();
+        this.Bookmarks.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;
+        });
+      };
+      reader.readAsText(file);
+    }
+  }
   /**
    * This method renders the component
    * @returns jsx
@@ -1005,6 +1170,25 @@ class BookmarkWidget extends React.Component {
             </div>
             <div className="right-panel-content">
               <div className="bookmark-panel"></div>
+              <input
+                type="file"
+                name="file"
+                id="inFile"
+                ref={this.fileInput}
+                style={{ display: 'none' }}
+                onChange={(e) => {
+                  this.handleFileUpload(e);
+                }}
+              />
+              <button
+                className="esri-button upload-bookmark-button"
+                onClick={(e) => {
+                  this.handleUploadClick(e);
+                }}
+                type="submit"
+              >
+                Upload file
+              </button>
             </div>
           </div>
         </div>

package/src/components/MapViewer/HotspotWidget.jsx

@@ -75,14 +75,37 @@ class HotspotWidget extends React.Component {
       this.props.urls.klc_bbox;
     return esriRequest(url, {
       responseType: 'json',
-    }).then((response) => {
-      const responseJSON = response.data;
-      this.dataBBox = responseJSON;
-    });
+    })
+      .then((response) => {
+        const responseJSON = response.data;
+        if (Array.isArray(responseJSON)) {
+          this.dataBBox = responseJSON;
+        } else {
+          this.dataBBox = [];
+        }
+      })
+      .catch(async () => {
+        try {
+          const res = await fetch(url, { credentials: 'same-origin' });
+          const text = await res.text();
+          const start = text.indexOf('[');
+          const end = text.lastIndexOf(']');
+          if (start !== -1 && end !== -1) {
+            const json = JSON.parse(text.substring(start, end + 1));
+            this.dataBBox = Array.isArray(json) ? json : [];
+          } else {
+            this.dataBBox = [];
+          }
+        } catch (_) {
+          this.dataBBox = [];
+        }
+      });
   };
 
   setBBoxCoordinates = (data) => {
+    if (!data || !Array.isArray(data)) return;
     let klc_array = data.find((e) => e.klc_code === this.dataKlc_code);
+    if (!klc_array || !klc_array.bbox) return;
     let klc_bbox_coordinates = klc_array.bbox.split(',');
     let xmin_ymin = klc_bbox_coordinates[0].split(' ');
     let xmax_ymax = klc_bbox_coordinates[1].split(' ');
@@ -92,10 +115,6 @@ class HotspotWidget extends React.Component {
       ymin: this.mapCfg.geometryZoomIn.ymin,
       xmax: this.mapCfg.geometryZoomIn.xmax,
       ymax: this.mapCfg.geometryZoomIn.ymax,
-      // xmin: -200,
-      // ymin: -85,
-      // xmax: 200,
-      // ymax: 85,
       spatialReference: 4326,
     });
     this.props.view.constraints.geometry = constraintExtent;
@@ -205,19 +224,15 @@ class HotspotWidget extends React.Component {
     typeLegend,
     selectBoxTime,
   ) {
-    //sweep the old filtered data
+    if (!bboxData || !Array.isArray(bboxData)) return;
     if (filteredLayersData[typeLegend] !== undefined) {
       delete filteredLayersData[typeLegend];
     }
-    //Find the bbox data for the chosen region
     let klc_array = bboxData.find((e) => e.klc_code === this.dataKlc_code);
-
-    //Parse the bbox data into finer detail
+    if (!klc_array || !klc_array.bbox) return;
     let klc_bbox_coordinates = klc_array.bbox.split(',');
     let xmin_ymin = klc_bbox_coordinates[0].split(' ');
     let xmax_ymax = klc_bbox_coordinates[1].split(' ');
-
-    //Add the filtered data to the filteredLayersData object
     filteredLayersData[typeLegend] = {
       klc_code: this.dataKlc_code,
       year: selectBoxTime,
@@ -242,7 +257,9 @@ class HotspotWidget extends React.Component {
       this.props.hotspotData && this.props.hotspotData['filteredLayers']
         ? Object.keys(this.props.hotspotData['filteredLayers'])
         : [];
-    let filteredLayersData = this.props.hotspotData['filteredLayerData'] || [];
+    let filteredLayersData =
+      (this.props.hotspotData && this.props.hotspotData['filteredLayerData']) ||
+      [];
     let layersToAdd = {};
     let bookmarkHotspotFilter = JSON.parse(
       localStorage.getItem('bookmarkHotspotFilter'),
@@ -441,9 +458,14 @@ class HotspotWidget extends React.Component {
   }
 
   filteredLayersToHotspotData(layerIds, layersData) {
-    let updatedFilteredLayers = this.props.hotspotData['filteredLayers'] || {};
-    let filteredLayersData = this.props.hotspotData['filteredLayersData'] || {};
-    let newHotspotData = this.props.hotspotData;
+    let updatedFilteredLayers =
+      (this.props.hotspotData && this.props.hotspotData['filteredLayers']) ||
+      {};
+    let filteredLayersData =
+      (this.props.hotspotData &&
+        this.props.hotspotData['filteredLayersData']) ||
+      {};
+    let newHotspotData = this.props.hotspotData || {};
     layerIds.forEach((layerId) => {
       let layer = Object.entries(this.layers).find(
         ([key, value]) => key === layerId,
@@ -536,7 +558,10 @@ class HotspotWidget extends React.Component {
 
   renderApplyFilterButton() {
     let typeFilter = [];
-    const activeLayers = Object.keys(this.props.hotspotData['activeLayers']);
+    const activeLayers =
+      this.props.hotspotData && this.props.hotspotData['activeLayers']
+        ? Object.keys(this.props.hotspotData['activeLayers'])
+        : [];
 
     if (
       this.container.current.querySelector('.presentLandCoverContainer').style

package/src/components/MapViewer/css/ArcgisMap.css

@@ -289,6 +289,27 @@
   color: white !important;
 }
 
+.upload-bookmark-button {
+  width: 16rem !important;
+  justify-content: start !important;
+  border-color: #a0b128 !important;
+  margin-left: 0.65rem;
+  background-color: white !important;
+  color: #a0b128 !important;
+}
+
+.upload-bookmark-button:hover {
+  background-color: #a0b128 !important;
+  color: white !important;
+}
+
+.download-bookmark-button {
+  width: 25px !important;
+  height: 30px !important;
+  border-color: white !important;
+  font-size: 30px !important;
+}
+
 body.section-map-viewer
   #page-document.ui.container
   .esri-widget__content--empty