@eeacms/volto-arcgis-block 0.1.212 → 0.1.214

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.214](https://github.com/eea/volto-arcgis-block/compare/0.1.213...0.1.214) - 5 October 2023
+
+### [0.1.213](https://github.com/eea/volto-arcgis-block/compare/0.1.212...0.1.213) - 4 October 2023
+
 ### [0.1.212](https://github.com/eea/volto-arcgis-block/compare/0.1.211...0.1.212) - 4 October 2023
 
 ### [0.1.211](https://github.com/eea/volto-arcgis-block/compare/0.1.210...0.1.211) - 4 October 2023

package/package.json

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

package/src/components/MapViewer/MapViewer.jsx

@@ -327,7 +327,14 @@ class MapViewer extends React.Component {
   renderSwipe() {
     if (this.props.mapviewer_config.Download) return;
     if (this.view)
-      return <SwipeWidget view={this.view} mapViewer={this} map={this.map} />;
+      return (
+        <SwipeWidget
+          view={this.view}
+          mapViewer={this}
+          map={this.map}
+          layers={this.layers}
+        />
+      );
   }
 
   renderArea() {

package/src/components/MapViewer/SwipeWidget.jsx

@@ -25,7 +25,7 @@ class SwipeWidget extends React.Component {
     this.dpiMax = 1200;
     this.scaleMax = 600000000;
     this.map = this.props.map;
-    this.visibleSavedLayers = [];
+    this.layers = this.props.layers;
   }
 
   loader() {
@@ -88,13 +88,13 @@ class SwipeWidget extends React.Component {
     await this.loader();
     this.swipe = new Swipe({
       view: this.props.view,
+      direction: 'horizontal',
       position: 50,
     });
   }
-
   getLayerTitle(layer) {
     let title;
-    if (layer.url.toLowerCase().includes('wmts')) {
+    if (layer.url && layer.url.toLowerCase().includes('wmts')) {
       title = layer._wmtsTitle;
     } else {
       if (layer.sublayers) {
@@ -139,17 +139,18 @@ class SwipeWidget extends React.Component {
     }
   }
   renderApplySwipeButton() {
-    if (this.visibleSavedLayers.length === 0) {
-      this.saveVisibleLayers();
-    }
     this.props.view.ui.remove(this.swipe);
     this.props.view.ui.add(this.swipe);
     let selectedLeadingLayer = document.getElementById('select-leading-layer')
       .value;
     let selectedTrailingLayer = document.getElementById('select-trailing-layer')
       .value;
+    let selectedSwipeDirection = document.getElementById(
+      'select-swipe-direction',
+    ).value;
     this.swipe.leadingLayers.removeAll();
     this.swipe.trailingLayers.removeAll();
+    this.swipe.direction = selectedSwipeDirection;
     this.map.layers.forEach((layer) => {
       layer.visible = false;
       if (layer.id === selectedLeadingLayer) {
@@ -162,23 +163,21 @@ class SwipeWidget extends React.Component {
       }
     });
   }
-  saveVisibleLayers() {
-    this.visibleSavedLayers.push('default');
-    this.map.layers.forEach((layer) => {
-      if (layer.visible) {
-        this.visibleSavedLayers.push(layer.id);
-      }
-    });
-  }
   loadVisibleLayers() {
-    this.map.layers.forEach((layer) => {
-      this.visibleSavedLayers.forEach((visibleLayerId) => {
-        if (layer.id === visibleLayerId) {
-          layer.visible = true;
+    let vl = JSON.parse(sessionStorage.getItem('visibleLayers'));
+    if (vl) {
+      for (const key in vl) {
+        if (vl[key][1] === 'eye') {
+          this.layers[key].visible = true;
+        } else {
+          this.layers[key].visible = false;
         }
+      }
+    } else {
+      this.map.layers.forEach((layer) => {
+        layer.visible = true;
       });
-    });
-    this.visibleSavedLayers = [];
+    }
   }
   /**
    * This method renders the component
@@ -219,6 +218,12 @@ class SwipeWidget extends React.Component {
                 <span>Trailing Layer</span>
                 <select id="select-trailing-layer" class="esri-select"></select>
                 <br></br>
+                <span>Swipe Direction</span>
+                <select id="select-swipe-direction" class="esri-select">
+                  <option value="horizontal">Horizontal</option>
+                  <option value="vertical">Vertical</option>
+                </select>
+                <br></br>
                 <button
                   id="applySwipeButton"
                   class="esri-button"