@eeacms/volto-arcgis-block 0.1.302 → 0.1.303

package/CHANGELOG.md

@@ -4,7 +4,9 @@ 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.302](https://github.com/eea/volto-arcgis-block/compare/0.1.301...0.1.302) - 5 September 2024
+### [0.1.303](https://github.com/eea/volto-arcgis-block/compare/0.1.302...0.1.303) - 10 September 2024
+
+### [0.1.302](https://github.com/eea/volto-arcgis-block/compare/0.1.301...0.1.302) - 6 September 2024
 
 ### [0.1.301](https://github.com/eea/volto-arcgis-block/compare/0.1.300...0.1.301) - 21 August 2024
 

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -948,7 +948,9 @@ class HotspotWidget extends React.Component {
   async componentDidMount() {
     await this.getLayerParameters();
     await this.loader();
-    this.props.view.ui.add(this.container.current, 'top-right');
+    if (this.props.mapDiv.current) {
+      this.props.view.ui.add(this.container.current, 'top-right');
+    }
     this.layerModelInit();
     this.getBBoxData();
     this.props.view.when(() => {

package/src/components/MapViewer/InfoWidget.jsx

@@ -90,7 +90,9 @@ class InfoWidget extends React.Component {
    * This method is executed after the rener method is executed
    */ async componentDidMount() {
     await this.loader();
-    this.props.view.ui.add(this.container.current, 'top-right');
+    if (this.props.mapDiv.current) {
+      this.props.view.ui.add(this.container.current, 'top-right');
+    }
     this.props.view.on('click', (e) => {
       let screenPoint = {
         x: e.x,

package/src/components/MapViewer/LegendWidget.jsx

@@ -232,7 +232,9 @@ class LegendWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    this.props.view.ui.add(this.container.current, 'top-right');
+    if (this.props.mapDiv.current) {
+      this.props.view.ui.add(this.container.current, 'top-right');
+    }
     this.LegendWidget = new Legend({
       view: this.props.view,
       viewModel: new LegendViewModel({

package/src/components/MapViewer/LoadingSpinner.jsx

@@ -55,7 +55,9 @@ class LoadingSpinner extends React.Component {
 
   async componentDidMount() {
     this.props.view.when(() => {
-      this.props.view.ui.add(this.container.current, 'manual');
+      if (this.props.mapDiv.current) {
+        this.props.view.ui.add(this.container.current, 'manual');
+      }
       this.listenForLayerChanges();
     });
   }

package/src/components/MapViewer/MapViewer.jsx

@@ -182,89 +182,91 @@ class MapViewer extends React.Component {
       // ],
     });
 
-    this.map = new Map({
-      // basemap: 'topo',
-      basemap: this.positronCompositeBasemap,
-      logo: false,
-    });
-
-    mapStatus = this.recoverState();
-
-    if (
-      mapStatus === null ||
-      (mapStatus.zoom === null && mapStatus.center === null) ||
-      Object.entries(mapStatus).length === 0
-    ) {
-      mapStatus = {};
-      mapStatus.zoom = this.mapCfg.zoom;
-      mapStatus.center = this.mapCfg.center;
-      mapStatus.activeLayers = this.mapCfg.activeLayers;
-      this.setCenterState(this.mapCfg.center);
-      this.setZoomState(this.mapCfg.zoom);
-      this.activeLayersHandler(this.mapCfg.activeLayers);
-    }
+    if (this.mapdiv.current) {
+      this.map = new Map({
+        // basemap: 'topo',
+        basemap: this.positronCompositeBasemap,
+        logo: false,
+      });
 
-    this.view = new MapView({
-      container: this.mapdiv.current,
-      map: this.map,
-      center: mapStatus.center,
-      zoom: mapStatus.zoom,
-      constraints: {
-        minZoom: this.mapCfg.minZoom,
-        maxZoom: this.mapCfg.maxZoom,
-        rotationEnabled: false,
-        geometry: this.mapCfg.geometry,
-      },
-      ui: {
-        components: ['attribution'],
-      },
-    });
-    this.zoom = new Zoom({
-      view: this.view,
-    });
-    this.view.ui.add(this.zoom, {
-      position: 'top-right',
-    });
+      mapStatus = this.recoverState();
+
+      if (
+        mapStatus === null ||
+        (mapStatus.zoom === null && mapStatus.center === null) ||
+        Object.entries(mapStatus).length === 0
+      ) {
+        mapStatus = {};
+        mapStatus.zoom = this.mapCfg.zoom;
+        mapStatus.center = this.mapCfg.center;
+        mapStatus.activeLayers = this.mapCfg.activeLayers;
+        this.setCenterState(this.mapCfg.center);
+        this.setZoomState(this.mapCfg.zoom);
+        this.activeLayersHandler(this.mapCfg.activeLayers);
+      }
 
-    this.view.when(() => {
-      this.view.watch('center', (newValue, oldValue, property, object) => {
-        this.setCenterState(newValue);
+      this.view = new MapView({
+        container: this.mapdiv.current,
+        map: this.map,
+        center: mapStatus.center,
+        zoom: mapStatus.zoom,
+        constraints: {
+          minZoom: this.mapCfg.minZoom,
+          maxZoom: this.mapCfg.maxZoom,
+          rotationEnabled: false,
+          geometry: this.mapCfg.geometry,
+        },
+        ui: {
+          components: ['attribution'],
+        },
+      });
+      this.zoom = new Zoom({
+        view: this.view,
+      });
+      this.view.ui.add(this.zoom, {
+        position: 'top-right',
       });
 
-      let constraintExtent = null;
-      this.view.watch('zoom', (newValue, oldValue, property, object) => {
-        this.setZoomState(newValue);
-        if (mapStatus.zoom <= this.mapCfg.minZoom) {
-          constraintExtent = new Extent({
-            xmin: this.mapCfg.geometry.xmin,
-            ymin: this.mapCfg.geometry.ymin,
-            xmax: this.mapCfg.geometry.xmax,
-            ymax: this.mapCfg.geometry.ymax,
-            spatialReference: 4326,
-          });
-        } else {
-          constraintExtent = new Extent({
-            xmin: this.mapCfg.geometryZoomIn.xmin,
-            ymin: this.mapCfg.geometryZoomIn.ymin,
-            xmax: this.mapCfg.geometryZoomIn.xmax,
-            ymax: this.mapCfg.geometryZoomIn.ymax,
-            spatialReference: 4326,
-          });
-        }
-        this.view.constraints.geometry = constraintExtent;
+      this.view.when(() => {
+        this.view.watch('center', (newValue, oldValue, property, object) => {
+          this.setCenterState(newValue);
+        });
+
+        let constraintExtent = null;
+        this.view.watch('zoom', (newValue, oldValue, property, object) => {
+          this.setZoomState(newValue);
+          if (mapStatus.zoom <= this.mapCfg.minZoom) {
+            constraintExtent = new Extent({
+              xmin: this.mapCfg.geometry.xmin,
+              ymin: this.mapCfg.geometry.ymin,
+              xmax: this.mapCfg.geometry.xmax,
+              ymax: this.mapCfg.geometry.ymax,
+              spatialReference: 4326,
+            });
+          } else {
+            constraintExtent = new Extent({
+              xmin: this.mapCfg.geometryZoomIn.xmin,
+              ymin: this.mapCfg.geometryZoomIn.ymin,
+              xmax: this.mapCfg.geometryZoomIn.xmax,
+              ymax: this.mapCfg.geometryZoomIn.ymax,
+              spatialReference: 4326,
+            });
+          }
+          this.view.constraints.geometry = constraintExtent;
+        });
+        this.view.popup.autoOpenEnabled = false;
+        // After launching the MapViewerConfig action
+        // we will have stored the json response here:
+        // this.props.mapviewer_config
+        this.props.MapViewerConfig(flattenToAppURL(this.props.url));
+        //Once we have created the MapView, we need to ensure that the map div
+        //is refreshed in order to show the map on it. To do so, we need to
+        //trigger the renderization again, and to trigger the renderization
+        //we invoke the setState method, that changes the state and forces a
+        //react component to render itself again
+        //this.setState({});
       });
-      this.view.popup.autoOpenEnabled = false;
-      // After launching the MapViewerConfig action
-      // we will have stored the json response here:
-      // this.props.mapviewer_config
-      this.props.MapViewerConfig(flattenToAppURL(this.props.url));
-      //Once we have created the MapView, we need to ensure that the map div
-      //is refreshed in order to show the map on it. To do so, we need to
-      //trigger the renderization again, and to trigger the renderization
-      //we invoke the setState method, that changes the state and forces a
-      //react component to render itself again
-      //this.setState({});
-    });
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -319,7 +321,12 @@ class MapViewer extends React.Component {
     if (this.props.mapviewer_config.Download) return;
     if (this.view)
       return (
-        <BasemapWidget view={this.view} mapViewer={this} urls={this.cfgUrls} />
+        <BasemapWidget
+          view={this.view}
+          mapViewer={this}
+          urls={this.cfgUrls}
+          mapDiv={this.mapdiv}
+        />
       );
   }
 
@@ -334,6 +341,7 @@ class MapViewer extends React.Component {
           layerLoading={this.state.layerLoading}
           hotspotData={this.state.hotspotData}
           hotspotDataHandler={this.hotspotDataHandler}
+          mapDiv={this.mapdiv}
         />
       );
   }
@@ -341,12 +349,21 @@ class MapViewer extends React.Component {
   renderMeasurement() {
     if (this.props.mapviewer_config.Download) return;
     if (this.view)
-      return <MeasurementWidget view={this.view} mapViewer={this} />;
+      return (
+        <MeasurementWidget
+          view={this.view}
+          mapViewer={this}
+          mapDiv={this.mapdiv}
+        />
+      );
   }
 
   renderPrint() {
     if (this.props.mapviewer_config.Download) return;
-    if (this.view) return <PrintWidget view={this.view} mapViewer={this} />;
+    if (this.view)
+      return (
+        <PrintWidget view={this.view} mapViewer={this} mapDiv={this.mapdiv} />
+      );
   }
 
   renderSwipe() {
@@ -358,6 +375,7 @@ class MapViewer extends React.Component {
           mapViewer={this}
           map={this.map}
           layers={this.state.layers}
+          mapDiv={this.mapdiv}
         />
       );
   }
@@ -365,12 +383,17 @@ class MapViewer extends React.Component {
   renderArea() {
     if (this.props.mapviewer_config.Download) return;
     if (this.view) {
-      return <CheckLogin reference={this} urls={this.cfgUrls} />;
+      return (
+        <CheckLogin reference={this} urls={this.cfgUrls} mapDiv={this.mapdiv} />
+      );
     }
   }
 
   renderScale() {
-    if (this.view) return <ScaleWidget view={this.view} mapViewer={this} />;
+    if (this.view)
+      return (
+        <ScaleWidget view={this.view} mapViewer={this} mapDiv={this.mapdiv} />
+      );
   }
 
   renderInfo() {
@@ -381,13 +404,21 @@ class MapViewer extends React.Component {
           map={this.map}
           mapViewer={this}
           hotspotData={this.state.hotspotData}
+          mapDiv={this.mapdiv}
         />
       );
   }
 
   renderPan() {
     if (this.view)
-      return <PanWidget view={this.view} map={this.map} mapViewer={this} />;
+      return (
+        <PanWidget
+          view={this.view}
+          map={this.map}
+          mapViewer={this}
+          mapDiv={this.mapdiv}
+        />
+      );
   }
 
   renderHotspot() {
@@ -406,6 +437,7 @@ class MapViewer extends React.Component {
           hotspotDataHandler={this.hotspotDataHandler}
           mapLayersHandler={this.mapLayersHandler}
           bookmarkData={this.state.bookmarkData}
+          mapDiv={this.mapdiv}
         />
       );
   }
@@ -435,12 +467,13 @@ class MapViewer extends React.Component {
           prepackageHandler={this.prepackageHandler}
           uploadedFile={this.state.uploadedFile}
           uploadFileHandler={this.uploadFileHandler}
+          mapDiv={this.mapdiv}
         />
       ); //call conf
   }
 
   renderBookmark() {
-    if (this.view) return <CheckUserID reference={this} />;
+    if (this.view) return <CheckUserID reference={this} mapDiv={this.mapdiv} />;
   }
 
   appLanguage() {
@@ -449,7 +482,11 @@ class MapViewer extends React.Component {
 
   renderLoadingSpinner() {
     return (
-      <LoadingSpinner view={this.view} layerLoading={this.state.layerLoading} />
+      <LoadingSpinner
+        view={this.view}
+        layerLoading={this.state.layerLoading}
+        mapDiv={this.mapdiv}
+      />
     );
   }
 

package/src/components/MapViewer/MeasurementWidget.jsx

@@ -180,11 +180,13 @@ class MeasurementWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    this.props.view.ui.add(this.container.current, 'top-right');
-    this.measurement = new Measurement({
-      view: this.props.view,
-      container: this.container.current.querySelector('.measurement-area'),
-    });
+    if (this.props.mapDiv.current) {
+      this.props.view.ui.add(this.container.current, 'top-right');
+      this.measurement = new Measurement({
+        view: this.props.view,
+        container: this.container.current.querySelector('.measurement-area'),
+      });
+    }
   }
   /**
    * This method renders the component

package/src/components/MapViewer/MenuWidget.jsx

@@ -799,11 +799,13 @@ class MenuWidget extends React.Component {
     loadCss();
     await this.loader();
     await this.getTMSLayersJSON();
-    if (!this.props.download) {
-      this.prepareHotspotLayers();
-      this.getHotspotLayerIds();
+    if (this.props.mapDiv.current) {
+      if (!this.props.download) {
+        this.prepareHotspotLayers();
+        this.getHotspotLayerIds();
+      }
+      this.props.view.ui.add(this.container.current, 'top-left');
     }
-    this.props.view.ui.add(this.container.current, 'top-left');
     if (this.props.download) {
       setTimeout(() => {
         document.querySelector('.area-panel input:checked').click();

package/src/components/MapViewer/PanWidget.jsx

@@ -20,11 +20,13 @@ class PanWidget extends React.Component {
    * This method is executed after the rener method is executed
    */
   async componentDidMount() {
-    this.props.view.ui.add({
-      component: this.container.current,
-      position: 'top-right',
-      index: 0,
-    });
+    if (this.props.mapDiv.current) {
+      this.props.view.ui.add({
+        component: this.container.current,
+        position: 'top-right',
+        index: 0,
+      });
+    }
   }
 
   togglePan() {

package/src/components/MapViewer/PrintWidget.jsx

@@ -71,11 +71,13 @@ class PrintWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    this.props.view.ui.add(this.container.current, 'top-right');
-    this.print = new Print({
-      view: this.props.view,
-      container: this.container.current.querySelector('.print-panel'),
-    });
+    if (this.props.mapDiv.current) {
+      this.props.view.ui.add(this.container.current, 'top-right');
+      this.print = new Print({
+        view: this.props.view,
+        container: this.container.current.querySelector('.print-panel'),
+      });
+    }
   }
 
   componentDidUpdate() {

package/src/components/MapViewer/ScaleWidget.jsx

@@ -35,7 +35,9 @@ class ScaleWidget extends React.Component {
       view: this.props.view,
       unit: 'dual',
     });
-    this.props.view.ui.add(this.scaleBar, 'bottom-left');
+    if (this.props.mapDiv.current) {
+      this.props.view.ui.add(this.scaleBar, 'bottom-left');
+    }
   }
   /**
    * This method renders the component

package/src/components/MapViewer/SwipeWidget.jsx

@@ -91,7 +91,9 @@ class SwipeWidget extends React.Component {
    * This method is executed after the rener method is executed
    */
   async componentDidMount() {
-    this.props.view.ui.add(this.container.current, 'top-right');
+    if (this.props.mapDiv.current) {
+      this.props.view.ui.add(this.container.current, 'top-right');
+    }
     await this.loader();
     this.swipe = new Swipe({
       view: this.props.view,

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -262,12 +262,14 @@ class TimesliderWidget extends React.Component {
         }
       },
     });
-    this.props.view.ui.add(this.container.current, 'bottom-right');
-    this.container.current.insertAdjacentHTML(
-      'beforeend',
-      '<div class="esri-icon-close" id="timeslider_close" role="button"></div>',
-    );
-    this.container.current.style.display = 'block';
+    if (this.props.mapDiv.current) {
+      this.props.view.ui.add(this.container.current, 'bottom-right');
+      this.container.current.insertAdjacentHTML(
+        'beforeend',
+        '<div class="esri-icon-close" id="timeslider_close" role="button"></div>',
+      );
+      this.container.current.style.display = 'block';
+    }
     this.setState({ showDatePanel: true });
 
     document