@eeacms/volto-arcgis-block 0.1.303 → 0.1.304

package/CHANGELOG.md

@@ -4,6 +4,8 @@ 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.304](https://github.com/eea/volto-arcgis-block/compare/0.1.303...0.1.304) - 13 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

package/package.json

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

package/src/components/MapViewer/HotspotWidget.jsx

@@ -948,9 +948,7 @@ class HotspotWidget extends React.Component {
   async componentDidMount() {
     await this.getLayerParameters();
     await this.loader();
-    if (this.props.mapDiv.current) {
-      this.props.view.ui.add(this.container.current, 'top-right');
-    }
+    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,9 +90,7 @@ class InfoWidget extends React.Component {
    * This method is executed after the rener method is executed
    */ async componentDidMount() {
     await this.loader();
-    if (this.props.mapDiv.current) {
-      this.props.view.ui.add(this.container.current, 'top-right');
-    }
+    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,9 +232,7 @@ class LegendWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    if (this.props.mapDiv.current) {
-      this.props.view.ui.add(this.container.current, 'top-right');
-    }
+    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,9 +55,7 @@ class LoadingSpinner extends React.Component {
 
   async componentDidMount() {
     this.props.view.when(() => {
-      if (this.props.mapDiv.current) {
-        this.props.view.ui.add(this.container.current, 'manual');
-      }
+      this.props.view.ui.add(this.container.current, 'manual');
       this.listenForLayerChanges();
     });
   }

package/src/components/MapViewer/MapViewer.jsx

@@ -57,6 +57,7 @@ class MapViewer extends React.Component {
       layerLoading: false,
       layers: {},
       uploadedFile: true,
+      isReady: false,
     };
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
@@ -163,11 +164,24 @@ class MapViewer extends React.Component {
     return obj;
   }
 
+  waitForContainer(mapdiv) {
+    while (mapdiv === null) {
+      new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
+    }
+    return mapdiv;
+  }
+
   async componentDidMount() {
     loadCss();
     await this.loader();
     //    this.state.url = window.location.href;
     await this.waitForDataFill(this.compCfg);
+    this.intervalId = setInterval(() => {
+      if (this.mapdiv.current !== null) {
+        this.setState({ isReady: true });
+        clearInterval(this.intervalId);
+      }
+    }, 100);
     this.positronCompositeBasemap = new Basemap({
       title: 'Positron composite',
       thumbnailUrl: this.cfgUrls.positronCompositeThumbnail,
@@ -181,92 +195,89 @@ class MapViewer extends React.Component {
       //   new _WebTileLayer(...)
       // ],
     });
+    this.map = new Map({
+      // basemap: 'topo',
+      basemap: this.positronCompositeBasemap,
+      logo: false,
+    });
 
-    if (this.mapdiv.current) {
-      this.map = new Map({
-        // basemap: 'topo',
-        basemap: this.positronCompositeBasemap,
-        logo: false,
-      });
+    mapStatus = this.recoverState();
 
-      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 (
+      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 = 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',
+    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',
+    });
+
+    this.view.when(() => {
+      this.view.watch('center', (newValue, oldValue, property, object) => {
+        this.setCenterState(newValue);
       });
 
-      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({});
+      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({});
+    });
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -285,6 +296,7 @@ class MapViewer extends React.Component {
   componentWillUnmount() {
     // clean up
     if (this.view) {
+      clearInterval(this.intervalId);
       this.view.container = null;
       this.view.destroy();
       delete this.view;
@@ -321,12 +333,7 @@ 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}
-          mapDiv={this.mapdiv}
-        />
+        <BasemapWidget view={this.view} mapViewer={this} urls={this.cfgUrls} />
       );
   }
 
@@ -341,7 +348,6 @@ class MapViewer extends React.Component {
           layerLoading={this.state.layerLoading}
           hotspotData={this.state.hotspotData}
           hotspotDataHandler={this.hotspotDataHandler}
-          mapDiv={this.mapdiv}
         />
       );
   }
@@ -349,21 +355,12 @@ class MapViewer extends React.Component {
   renderMeasurement() {
     if (this.props.mapviewer_config.Download) return;
     if (this.view)
-      return (
-        <MeasurementWidget
-          view={this.view}
-          mapViewer={this}
-          mapDiv={this.mapdiv}
-        />
-      );
+      return <MeasurementWidget view={this.view} mapViewer={this} />;
   }
 
   renderPrint() {
     if (this.props.mapviewer_config.Download) return;
-    if (this.view)
-      return (
-        <PrintWidget view={this.view} mapViewer={this} mapDiv={this.mapdiv} />
-      );
+    if (this.view) return <PrintWidget view={this.view} mapViewer={this} />;
   }
 
   renderSwipe() {
@@ -375,7 +372,6 @@ class MapViewer extends React.Component {
           mapViewer={this}
           map={this.map}
           layers={this.state.layers}
-          mapDiv={this.mapdiv}
         />
       );
   }
@@ -383,17 +379,12 @@ class MapViewer extends React.Component {
   renderArea() {
     if (this.props.mapviewer_config.Download) return;
     if (this.view) {
-      return (
-        <CheckLogin reference={this} urls={this.cfgUrls} mapDiv={this.mapdiv} />
-      );
+      return <CheckLogin reference={this} urls={this.cfgUrls} />;
     }
   }
 
   renderScale() {
-    if (this.view)
-      return (
-        <ScaleWidget view={this.view} mapViewer={this} mapDiv={this.mapdiv} />
-      );
+    if (this.view) return <ScaleWidget view={this.view} mapViewer={this} />;
   }
 
   renderInfo() {
@@ -404,21 +395,13 @@ 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}
-          mapDiv={this.mapdiv}
-        />
-      );
+      return <PanWidget view={this.view} map={this.map} mapViewer={this} />;
   }
 
   renderHotspot() {
@@ -437,7 +420,6 @@ class MapViewer extends React.Component {
           hotspotDataHandler={this.hotspotDataHandler}
           mapLayersHandler={this.mapLayersHandler}
           bookmarkData={this.state.bookmarkData}
-          mapDiv={this.mapdiv}
         />
       );
   }
@@ -467,13 +449,12 @@ 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} mapDiv={this.mapdiv} />;
+    if (this.view) return <CheckUserID reference={this} />;
   }
 
   appLanguage() {
@@ -482,11 +463,7 @@ class MapViewer extends React.Component {
 
   renderLoadingSpinner() {
     return (
-      <LoadingSpinner
-        view={this.view}
-        layerLoading={this.state.layerLoading}
-        mapDiv={this.mapdiv}
-      />
+      <LoadingSpinner view={this.view} layerLoading={this.state.layerLoading} />
     );
   }
 
@@ -507,22 +484,26 @@ class MapViewer extends React.Component {
     } else {
       return (
         <div className={this.mapClass}>
-          <div ref={this.mapdiv} className="map">
-            {this.appLanguage()}
-            {this.renderBasemap()}
-            {this.renderLegend()}
-            {this.renderMeasurement()}
-            {this.renderPrint()}
-            {this.renderSwipe()}
-            {this.renderArea()}
-            {this.renderPan()}
-            {this.renderScale()}
-            {this.renderInfo()}
-            {this.renderHotspot()}
-            {this.renderMenu()}
-            {this.renderBookmark()}
-            {this.renderLoadingSpinner()}
-          </div>
+          {this.state.isReady ? (
+            <div ref={this.mapdiv} className="map">
+              {this.appLanguage()}
+              {this.renderBasemap()}
+              {this.renderLegend()}
+              {this.renderMeasurement()}
+              {this.renderPrint()}
+              {this.renderSwipe()}
+              {this.renderArea()}
+              {this.renderPan()}
+              {this.renderScale()}
+              {this.renderInfo()}
+              {this.renderHotspot()}
+              {this.renderMenu()}
+              {this.renderBookmark()}
+              {this.renderLoadingSpinner()}
+            </div>
+          ) : (
+            <p>Loading...</p>
+          )}
         </div>
       );
     }

package/src/components/MapViewer/MeasurementWidget.jsx

@@ -180,13 +180,11 @@ class MeasurementWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    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.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.mapDiv.current) {
-      if (!this.props.download) {
-        this.prepareHotspotLayers();
-        this.getHotspotLayerIds();
-      }
+    //let currentContainer;
+    //do {
+    //  currentContainer = await this.container.current;
+    //} while (currentContainer == null);
+    if (!this.props.download) {
+      this.prepareHotspotLayers();
+      this.getHotspotLayerIds();
       this.props.view.ui.add(this.container.current, 'top-left');
     }
     if (this.props.download) {

package/src/components/MapViewer/PanWidget.jsx

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

package/src/components/MapViewer/PrintWidget.jsx

@@ -71,13 +71,11 @@ class PrintWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    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'),
-      });
-    }
+    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,9 +35,7 @@ class ScaleWidget extends React.Component {
       view: this.props.view,
       unit: 'dual',
     });
-    if (this.props.mapDiv.current) {
-      this.props.view.ui.add(this.scaleBar, 'bottom-left');
-    }
+    this.props.view.ui.add(this.scaleBar, 'bottom-left');
   }
   /**
    * This method renders the component

package/src/components/MapViewer/SwipeWidget.jsx

@@ -91,9 +91,7 @@ class SwipeWidget extends React.Component {
    * This method is executed after the rener method is executed
    */
   async componentDidMount() {
-    if (this.props.mapDiv.current) {
-      this.props.view.ui.add(this.container.current, 'top-right');
-    }
+    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,14 +262,12 @@ class TimesliderWidget extends React.Component {
         }
       },
     });
-    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.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