@eeacms/volto-arcgis-block 0.1.246 → 0.1.248

package/CHANGELOG.md

@@ -4,6 +4,10 @@ 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.248](https://github.com/eea/volto-arcgis-block/compare/0.1.247...0.1.248) - 12 January 2024
+
+### [0.1.247](https://github.com/eea/volto-arcgis-block/compare/0.1.246...0.1.247) - 10 January 2024
+
 ### [0.1.246](https://github.com/eea/volto-arcgis-block/compare/0.1.245...0.1.246) - 10 January 2024
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -21,9 +21,16 @@ class BookmarkWidget extends React.Component {
       showMapMenu: false,
     };
     this.mapViewer = this.props.mapViewer;
+    this.map = this.props.map;
+    this.layers = this.props.layers;
     this.userID = this.props.userID;
     this.menuClass =
       'esri-icon-bookmark esri-widget--button esri-widget esri-interactive';
+    this.sessionBookmarks = [];
+    this.sessionBookmarkLayers = [];
+    this.sessionBookmarkOpacity = [];
+    this.sessionBookmarkVisible = [];
+    this.sessionBookmarkHotspot = [];
   }
 
   loader() {
@@ -70,20 +77,65 @@ class BookmarkWidget extends React.Component {
    */
 
   limitMaxLenth() {
-    document.querySelector(
-      '.esri-bookmarks__authoring-label .esri-input',
-    ).maxLength = 150;
+    if (
+      document.querySelector('.esri-bookmarks__authoring-label .esri-input')
+    ) {
+      document.querySelector(
+        '.esri-bookmarks__authoring-label .esri-input',
+      ).maxLength = 150;
+    }
   }
 
   async componentDidMount() {
     await this.loader();
     this.props.view.ui.add(this.container.current, 'top-right');
-    let sessionBookmarks = {};
     if (this.userID != null) {
-      sessionBookmarks =
+      this.sessionBookmarks =
         JSON.parse(
           localStorage.getItem(BOOKMARK_SESSION_KEY + '_' + this.userID),
-        ) || {};
+        ) || [];
+      this.sessionBookmarkLayers =
+        JSON.parse(
+          localStorage.getItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID + '_layers',
+          ),
+        ) || [];
+      while (this.sessionBookmarkLayers.length < this.sessionBookmarks.length) {
+        this.sessionBookmarkLayers.push([]);
+      }
+      this.sessionBookmarkOpacity =
+        JSON.parse(
+          localStorage.getItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID + '_opacity',
+          ),
+        ) || [];
+      while (
+        this.sessionBookmarkOpacity.length < this.sessionBookmarks.length
+      ) {
+        this.sessionBookmarkOpacity.push([]);
+      }
+      this.sessionBookmarkVisible =
+        JSON.parse(
+          localStorage.getItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID + '_visible',
+          ),
+        ) || [];
+      while (
+        this.sessionBookmarkVisible.length < this.sessionBookmarks.length
+      ) {
+        this.sessionBookmarkVisible.push([]);
+      }
+      this.sessionBookmarkHotspot =
+        JSON.parse(
+          localStorage.getItem(
+            BOOKMARK_SESSION_KEY + '_' + this.userID + '_hotspot',
+          ),
+        ) || [];
+      while (
+        this.sessionBookmarkHotspot.length < this.sessionBookmarks.length
+      ) {
+        this.sessionBookmarkHotspot.push([]);
+      }
     }
     this.Bookmarks = new Bookmarks({
       view: this.props.view,
@@ -93,25 +145,194 @@ 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: sessionBookmarks,
+      bookmarks: this.sessionBookmarks,
+    });
+    this.sessionBookmarks = [];
+    this.Bookmarks.bookmarks.items.forEach((bookmark) => {
+      this.sessionBookmarks.push(bookmark);
     });
-
     this.Bookmarks.when(() => {
-      this.Bookmarks.bookmarks.on('change', () => {
+      this.Bookmarks.bookmarks.on('change', (e) => {
+        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[check] &&
+              visibleLayers[check][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: {},
+          };
+          Object.keys(this.props.hotspotData.activeLayers).forEach((key) => {
+            hotspotFilters.activeLayers[key] = null;
+          });
+          Object.keys(this.props.hotspotData.filteredLayers).forEach((key) => {
+            hotspotFilters.filteredLayers[
+              key
+            ] = this.props.hotspotData.filteredLayers[
+              key
+            ].customLayerParameters['CQL_FILTER'];
+          });
+          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);
+            }
+          }
+        } 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),
+          );
         }
       });
-      this.Bookmarks.on('bookmark-edit', () => {
+      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[check] && visibleLayers[check][1] === 'eye-slash') {
+            visible.push(false);
+          } else {
+            visible.push(true);
+          }
+        });
+        let hotspotFilters = {
+          activeLayers: {},
+          filteredLayers: {},
+        };
+        Object.keys(this.props.hotspotData.activeLayers).forEach((key) => {
+          hotspotFilters.activeLayers[key] = null;
+        });
+        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),
+          );
+        }
+      });
+      this.Bookmarks.on('bookmark-select', (e) => {
+        let selectLayers = [];
+        let selectOpacity = [];
+        let selectVisible = [];
+        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];
+            localStorage.setItem(
+              'bookmarkHotspotFilter',
+              JSON.stringify(this.sessionBookmarkHotspot[index]),
+            );
+          }
+        }
+        this.map.layers.removeAll();
+        this.map.layers.add('bookmark');
+        for (let index = 0; index < selectLayers.length; index++) {
+          if (selectOpacity[index]) {
+            this.layers[selectLayers[index]].opacity = selectOpacity[index];
+          }
+          if (selectVisible[index] !== null) {
+            this.layers[selectLayers[index]].visible = selectVisible[index];
+          }
         }
+        sessionStorage.setItem('checkedLayers', JSON.stringify(selectLayers));
       });
     });
   }

package/src/components/MapViewer/HotspotWidget.jsx

@@ -202,7 +202,9 @@ class HotspotWidget extends React.Component {
         ? Object.keys(this.props.hotspotData['filteredLayers'])
         : [];
     let layersToAdd = {};
-
+    let bookmarkHotspotFilter = JSON.parse(
+      localStorage.getItem('bookmarkHotspotFilter'),
+    );
     typeFilter.forEach((type) => {
       let filterLayer;
 
@@ -211,11 +213,12 @@ class HotspotWidget extends React.Component {
           .value;
         //this.lccYear = selectLccBoxTime;
         this.setState({ lccYear: selectLccBoxTime });
-        var selectBoxHighlightsLcc = document
-          .getElementById('select-klc-lccTime')
-          .value.match(/\d+/g)
-          .map(Number)[0];
-
+        if (document.getElementById('select-klc-lccTime').value.match(/\d+/g)) {
+          var selectBoxHighlightsLcc = document
+            .getElementById('select-klc-lccTime')
+            .value.match(/\d+/g)
+            .map(Number)[0];
+        }
         for (let i = 0; activeLayers[i]; i++) {
           let layer = activeLayers[i];
           if (layer.includes('all_lcc_a_pol')) {
@@ -232,13 +235,18 @@ class HotspotWidget extends React.Component {
         filterLayer.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
           typeLegend,
         );
-        filterLayer.customLayerParameters['CQL_FILTER'] =
-          'klc_code LIKE ' +
-          "'" +
-          this.dataKlc_code +
-          "'" +
-          " AND in_pa = 'not_defined' AND date = " +
-          selectBoxHighlightsLcc;
+        if (bookmarkHotspotFilter !== null) {
+          filterLayer.customLayerParameters['CQL_FILTER'] =
+            bookmarkHotspotFilter.filteredLayers['lcc_filter'];
+        } else {
+          filterLayer.customLayerParameters['CQL_FILTER'] =
+            'klc_code LIKE ' +
+            "'" +
+            this.dataKlc_code +
+            "'" +
+            " AND in_pa = 'not_defined' AND date = " +
+            selectBoxHighlightsLcc;
+        }
       }
       if (type === 'lc') {
         for (let i = 0; i < activeLayers.length; i++) {
@@ -255,10 +263,12 @@ class HotspotWidget extends React.Component {
           .value;
         //this.lcYear = selectLcBoxTime;
         this.setState({ lcYear: selectLcBoxTime });
-        var selectBoxHighlightsLc = document
-          .getElementById('select-klc-lcTime')
-          .value.match(/\d+/g)
-          .map(Number)[0];
+        if (document.getElementById('select-klc-lcTime').value.match(/\d+/g)) {
+          var selectBoxHighlightsLc = document
+            .getElementById('select-klc-lcTime')
+            .value.match(/\d+/g)
+            .map(Number)[0];
+        }
 
         filterLayer = this.esriLayer_lc;
 
@@ -266,22 +276,37 @@ class HotspotWidget extends React.Component {
         filterLayer.sublayers.items[0].legendUrl = this.addLegendNameToUrl(
           typeLegend,
         );
-        filterLayer.customLayerParameters['CQL_FILTER'] =
-          'klc_code LIKE ' +
-          "'" +
-          this.dataKlc_code +
-          "'" +
-          " AND in_pa = 'not_defined' AND date = " +
-          selectBoxHighlightsLc;
+        if (bookmarkHotspotFilter !== null) {
+          filterLayer.customLayerParameters['CQL_FILTER'] =
+            bookmarkHotspotFilter.filteredLayers['lc_filter'];
+        } else {
+          filterLayer.customLayerParameters['CQL_FILTER'] =
+            'klc_code LIKE ' +
+            "'" +
+            this.dataKlc_code +
+            "'" +
+            " AND in_pa = 'not_defined' AND date = " +
+            selectBoxHighlightsLc;
+        }
       }
       if (type === 'klc') {
-        this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
-          "klc_code LIKE '" + this.dataKlc_code + "'";
+        if (bookmarkHotspotFilter !== null) {
+          this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
+            bookmarkHotspotFilter.filteredLayers['klc_filter'];
+        } else {
+          this.esriLayer_klc.customLayerParameters['CQL_FILTER'] =
+            "klc_code LIKE '" + this.dataKlc_code + "'";
+        }
         filterLayer = this.esriLayer_klc;
       }
       if (type === 'pa') {
-        this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
-          "klc_code LIKE '" + this.dataKlc_code + "'";
+        if (bookmarkHotspotFilter !== null) {
+          this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
+            bookmarkHotspotFilter.filteredLayers['pa_filter'];
+        } else {
+          this.esriLayer_pa.customLayerParameters['CQL_FILTER'] =
+            "klc_code LIKE '" + this.dataKlc_code + "'";
+        }
         filterLayer = this.esriLayer_pa;
       }
       layersToAdd[type + '_filter'] = filterLayer;
@@ -315,7 +340,9 @@ class HotspotWidget extends React.Component {
       this.layers[key] = layersToAdd[key];
       this.layers[key].visible = true;
     });
-    this.setBBoxCoordinates(this.dataBBox);
+    if (bookmarkHotspotFilter === null) {
+      this.setBBoxCoordinates(this.dataBBox);
+    }
     //set sessionStorage value to keep the widget open
     sessionStorage.setItem('hotspotFilterApplied', 'true');
     this.disableButton();
@@ -829,6 +856,26 @@ class HotspotWidget extends React.Component {
     this.getBBoxData();
     this.props.view.when(() => {
       this.props.view.map.layers.on('change', () => {
+        let bookmarkHotspotFilter = JSON.parse(
+          localStorage.getItem('bookmarkHotspotFilter'),
+        );
+        if (
+          bookmarkHotspotFilter !== null &&
+          this.props.view.map.layers.items[0] !== 'bookmark'
+        ) {
+          let activeLayers = [];
+          let filteredLayers = [];
+          Object.keys(bookmarkHotspotFilter.activeLayers).forEach((key) => {
+            activeLayers[key] = this.layers[key];
+          });
+          Object.keys(bookmarkHotspotFilter.filteredLayers).forEach((key) => {
+            filteredLayers[key] = null;
+          });
+          this.props.hotspotData['activeLayers'] = activeLayers;
+          this.props.hotspotData['filteredLayers'] = filteredLayers;
+          this.renderApplyFilterButton();
+          localStorage.setItem('bookmarkHotspotFilter', null);
+        }
         this.setState({
           activeLayersArray: Array.from(
             document.querySelectorAll('.active-layer'),

package/src/components/MapViewer/MapViewer.jsx

@@ -484,8 +484,10 @@ export const CheckUserID = ({ reference }) => {
         <BookmarkWidget
           view={reference.view}
           map={reference.map}
+          layers={reference.state.layers}
           mapViewer={reference}
           userID={user_id}
+          hotspotData={reference.state.hotspotData}
         />
       }
     </>

package/src/components/MapViewer/MenuWidget.jsx

@@ -680,6 +680,30 @@ class MenuWidget extends React.Component {
     this.loadOpacity();
     this.loadVisibility();
     this.handleRasterVectorLegend();
+    this.map.when(() => {
+      this.map.layers.on('change', (e) => {
+        if (this.map.layers.items[0] === 'bookmark') {
+          this.map.layers.remove('bookmark');
+          let layers = JSON.parse(sessionStorage.getItem('checkedLayers'));
+          for (const layer in this.layers) {
+            let node = document.getElementById(layer);
+            if (node) {
+              if (layers.includes(layer)) {
+                let visible = this.layers[node.id].visible;
+                node.checked = true;
+                this.toggleLayer(node);
+                if (!visible) {
+                  this.eyeLayer(node);
+                }
+              } else if (node.checked) {
+                node.checked = false;
+                this.toggleLayer(node);
+              }
+            }
+          }
+        }
+      });
+    });
   }
 
   setSliderTag(val) {

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -465,8 +465,8 @@ class TimesliderWidget extends React.Component {
     document.querySelector(
       '.esri-ui-bottom-right.esri-ui-corner',
     ).style.pointerEvents = 'auto';
-    this.drag.x = e.screenX - e.currentTarget.getBoundingClientRect().left;
-    this.drag.y = e.screenY - e.currentTarget.getBoundingClientRect().top;
+    this.drag.x = e.screenX - e.currentTarget.getBoundingClientRect().right;
+    this.drag.y = e.screenY - e.currentTarget.getBoundingClientRect().bottom;
   }
 
   onDragOver(e) {
@@ -474,17 +474,17 @@ class TimesliderWidget extends React.Component {
   }
 
   onDrop(e) {
-    let left =
-      e.screenX -
+    let right =
       this.drag.x -
-      e.currentTarget.getBoundingClientRect().left +
+      e.screenX +
+      e.currentTarget.getBoundingClientRect().right +
       'px';
-    let top =
-      e.screenY -
+    let bottom =
       this.drag.y -
-      e.currentTarget.getBoundingClientRect().top +
+      e.screenY +
+      e.currentTarget.getBoundingClientRect().bottom +
       'px';
-    this.setState({ styles: { left: left, top: top } });
+    this.setState({ styles: { right: right, bottom: bottom } });
     this.drag.frame.style.visibility = 'hidden';
     document.querySelector(
       '.esri-ui-bottom-right.esri-ui-corner',