@eeacms/volto-arcgis-block 0.1.305 → 0.1.307

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.307](https://github.com/eea/volto-arcgis-block/compare/0.1.306...0.1.307) - 10 October 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-276819 (bug): Deep check for all parent nodes to be cleared before insert child nodes within [Unai Bolivar - [`bba5838`](https://github.com/eea/volto-arcgis-block/commit/bba58386fc2335010dbe208367543a7d3099b10a)]
+### [0.1.306](https://github.com/eea/volto-arcgis-block/compare/0.1.305...0.1.306) - 8 October 2024
+
+#### :hammer_and_wrench: Others
+
+- CLMS-272057 (chore): Ran linting scripts [Unai Bolivar - [`33654ff`](https://github.com/eea/volto-arcgis-block/commit/33654ff17e85c58b87227e3d70202d735f62333c)]
+- CLMS-272057 (feat): Map Image layer bounding boxes fetched and zooming in properly to sublayer extents. WMS and WMTS layers maintain correct view extent zoom in as well. [Unai Bolivar - [`9787590`](https://github.com/eea/volto-arcgis-block/commit/9787590df6d7e5f2fef52948b4d563685a818628)]
+- CLMS-272057 (feat): Map Image layer bounding boxes fetched but not zooming into area [Unai Bolivar - [`08f67de`](https://github.com/eea/volto-arcgis-block/commit/08f67de1fb052efaef2196c6bfb4b4cb3b59db1c)]
+- CLMS-272057 (feat): Implementing map image layer requests to the data viewer. Code is setup for initial test. Waiting on download of data.fs from demo env [Unai Bolivar - [`82e9320`](https://github.com/eea/volto-arcgis-block/commit/82e93207dd2d0c83930466adb83e505236c88279)]
 ### [0.1.305](https://github.com/eea/volto-arcgis-block/compare/0.1.304...0.1.305) - 7 October 2024
 
 ### [0.1.304](https://github.com/eea/volto-arcgis-block/compare/0.1.303...0.1.304) - 16 September 2024

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -1131,19 +1131,21 @@ class AreaWidget extends React.Component {
         });
       }
     });
-
-    this.props.download
-      ? this.container !== null && this.props.view.ui.add(this.container)
-      : this.props.view.ui.add(this.container.current, 'top-right');
-
-    var popup = document.createElement('div');
-    popup.className = 'drawRectanglePopup-block';
-    popup.innerHTML =
-      '<div class="drawRectanglePopup-content">' +
-      '<span class="drawRectanglePopup-icon"><span class="esri-icon-cursor-marquee"></span></span>' +
-      '<div class="drawRectanglePopup-text">Select or draw an area of interest in the map to continue</div>' +
-      '</div>';
-    this.props.download && this.props.view.ui.add(popup, 'top-right');
+    this.props.view.when(() => {
+      this.props.download
+        ? this.container !== null && this.props.view.ui.add(this.container)
+        : this.container.current !== null &&
+          this.props.view.ui.add(this.container.current, 'top-right');
+
+      var popup = document.createElement('div');
+      popup.className = 'drawRectanglePopup-block';
+      popup.innerHTML =
+        '<div class="drawRectanglePopup-content">' +
+        '<span class="drawRectanglePopup-icon"><span class="esri-icon-cursor-marquee"></span></span>' +
+        '<div class="drawRectanglePopup-text">Select or draw an area of interest in the map to continue</div>' +
+        '</div>';
+      this.props.download && this.props.view.ui.add(popup, 'top-right');
+    });
   }
 
   async initFMI() {

package/src/components/MapViewer/BasemapWidget.jsx

@@ -241,7 +241,9 @@ class BasemapWidget extends React.Component {
         ],
       });
     }
-    this.props.view.ui.add(this.container.current, 'top-right');
+    this.props.view.when(() => {
+      this.props.view.ui.add(this.container.current, 'top-right');
+    });
     document.querySelector('.esri-attribution__powered-by').style.display =
       'none';
   }

package/src/components/MapViewer/BookmarkWidget.jsx

@@ -88,7 +88,10 @@ class BookmarkWidget extends React.Component {
 
   async componentDidMount() {
     await this.loader();
-    this.props.view.ui.add(this.container.current, 'top-right');
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      this.props.view.ui.add(this.container.current, 'top-right');
+    });
     if (this.userID != null) {
       this.sessionBookmarks =
         JSON.parse(

package/src/components/MapViewer/HotspotWidget.jsx

@@ -948,7 +948,10 @@ 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.container.current) return;
+    this.props.view.when(() => {
+      this.props.view.ui.add(this.container.current, 'top-right');
+    });
     this.layerModelInit();
     this.getBBoxData();
     this.props.view.when(() => {

package/src/components/MapViewer/InfoWidget.jsx

@@ -98,8 +98,11 @@ class InfoWidget extends React.Component {
    * This method is executed after the rener method is executed
    */ async componentDidMount() {
     await this.loader();
-    this.waitForContainer(this.container.current);
-    this.props.view.ui.add(this.container.current, 'top-right');
+    //this.waitForContainer(this.container.current);
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      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,10 @@ class LegendWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    this.props.view.ui.add(this.container.current, 'top-right');
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      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

@@ -61,7 +61,8 @@ class LoadingSpinner extends React.Component {
   }
 
   async componentDidMount() {
-    this.waitForContainer(this.props.view);
+    //this.waitForContainer(this.props.view);
+    if (!this.container.current) return;
     this.props.view.when(() => {
       this.props.view.ui.add(this.container.current, 'manual');
       this.listenForLayerChanges();

package/src/components/MapViewer/MapViewer.jsx

@@ -57,7 +57,7 @@ class MapViewer extends React.Component {
       layerLoading: false,
       layers: {},
       uploadedFile: true,
-      isReady: false,
+      //isReady: false,
     };
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
@@ -176,12 +176,16 @@ class MapViewer extends React.Component {
     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);
+    if (!this.mapdiv.current) return;
+    //this.props.view.when(() => {
+    //  this.props.view.ui.add(this.container.current, 'top-right');
+    //});
+    //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,
@@ -235,11 +239,11 @@ class MapViewer extends React.Component {
     this.zoom = new Zoom({
       view: this.view,
     });
-    this.view.ui.add(this.zoom, {
-      position: 'top-right',
-    });
-
     this.view.when(() => {
+      this.view.ui.add(this.zoom, {
+        position: 'top-right',
+      });
+
       this.view.watch('center', (newValue, oldValue, property, object) => {
         this.setCenterState(newValue);
       });
@@ -296,7 +300,7 @@ class MapViewer extends React.Component {
   componentWillUnmount() {
     // clean up
     if (this.view) {
-      clearInterval(this.intervalId);
+      //clearInterval(this.intervalId);
       this.view.container = null;
       this.view.destroy();
       delete this.view;
@@ -484,26 +488,22 @@ class MapViewer extends React.Component {
     } else {
       return (
         <div className={this.mapClass}>
-          {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 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>
         </div>
       );
     }

package/src/components/MapViewer/MeasurementWidget.jsx

@@ -180,7 +180,10 @@ class MeasurementWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    this.props.view.ui.add(this.container.current, 'top-right');
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      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'),

package/src/components/MapViewer/MenuWidget.jsx

@@ -7,7 +7,15 @@ import useCartState from '@eeacms/volto-clms-utils/cart/useCartState';
 import { Modal, Popup } from 'semantic-ui-react';
 import AreaWidget from './AreaWidget';
 import TimesliderWidget from './TimesliderWidget';
-var WMSLayer, WMTSLayer, FeatureLayer, BaseTileLayer, esriRequest, Extent;
+var WMSLayer,
+  WMTSLayer,
+  FeatureLayer,
+  BaseTileLayer,
+  esriRequest,
+  Extent,
+  MapImageLayer,
+  projection,
+  SpatialReference;
 
 const popupSettings = {
   basic: true,
@@ -464,6 +472,9 @@ class MenuWidget extends React.Component {
       'esri/layers/BaseTileLayer',
       'esri/request',
       'esri/geometry/Extent',
+      'esri/layers/MapImageLayer',
+      'esri/geometry/projection',
+      'esri/geometry/SpatialReference',
     ]).then(
       ([
         _WMSLayer,
@@ -472,13 +483,31 @@ class MenuWidget extends React.Component {
         _BaseTileLayer,
         _esriRequest,
         _Extent,
+        _MapImageLayer,
+        _projection,
+        _SpatialReference,
       ]) => {
-        WMSLayer = _WMSLayer;
-        WMTSLayer = _WMTSLayer;
-        FeatureLayer = _FeatureLayer;
-        BaseTileLayer = _BaseTileLayer;
-        esriRequest = _esriRequest;
-        Extent = _Extent;
+        [
+          WMSLayer,
+          WMTSLayer,
+          FeatureLayer,
+          BaseTileLayer,
+          esriRequest,
+          Extent,
+          MapImageLayer,
+          projection,
+          SpatialReference,
+        ] = [
+          _WMSLayer,
+          _WMTSLayer,
+          _FeatureLayer,
+          _BaseTileLayer,
+          _esriRequest,
+          _Extent,
+          _MapImageLayer,
+          _projection,
+          _SpatialReference,
+        ];
       },
     );
   }
@@ -806,16 +835,12 @@ class MenuWidget extends React.Component {
     loadCss();
     await this.loader();
     await this.getTMSLayersJSON();
-    //let currentContainer;
-    //do {
-    //  currentContainer = await this.container.current;
-    //} while (currentContainer == null);
-    if (!this.props.download) {
-      this.waitForContainer(this.container.current);
+    if (!this.container.current) return;
+    this.props.view.when(() => {
       this.prepareHotspotLayers();
       this.getHotspotLayerIds();
       this.props.view.ui.add(this.container.current, 'top-left');
-    }
+    });
     if (this.props.download) {
       setTimeout(() => {
         document.querySelector('.area-panel input:checked').click();
@@ -1633,7 +1658,19 @@ class MenuWidget extends React.Component {
     if (
       !this.layers.hasOwnProperty(layer.LayerId + '_' + inheritedIndexLayer)
     ) {
-      if (viewService?.toLowerCase().includes('wms')) {
+      if (viewService?.toLowerCase().endsWith('mapserver')) {
+        this.layers[
+          layer.LayerId + '_' + inheritedIndexLayer
+        ] = new MapImageLayer({
+          url: viewService,
+          title: layer.Title,
+          datasetId: DatasetId,
+          datasetTitle: DatasetTitle,
+          productId: ProductId,
+          layerTitle: layer.Title,
+        });
+        //iterate sublayers fetching all sublayer data
+      } else if (viewService?.toLowerCase().includes('wms')) {
         viewService = viewService?.endsWith('?')
           ? viewService
           : viewService + '?';
@@ -2536,6 +2573,44 @@ class MenuWidget extends React.Component {
     BBoxes[0] = { xmin: bbox[0], ymin: bbox[1], xmax: bbox[2], ymax: bbox[3] };
     return BBoxes;
   }
+  async parseBBOXMAPSERVER(layer) {
+    let BBoxes = {};
+    for (let i = 0; i < layer?.allSublayers?.items.length; i++) {
+      const subLayer = layer.allSublayers.items.find(
+        (sublayer) => sublayer.id === i,
+      );
+      try {
+        const response = await fetch(`${subLayer.url}?f=pjson`);
+        if (!response.ok) {
+          //console.log('no response from server');
+          continue; // Skip this iteration on error
+        }
+        const subLayerData = await response.json(); // Await JSON parsing
+        if (subLayerData === null) {
+          //console.log('no data retrieved:', subLayerData);
+          continue;
+        } else {
+          // Convert bounding box data to correct extent values for map view
+
+          let extent = this.convertBBOXValues(subLayerData.extent);
+
+          // Store sublayer extent
+
+          BBoxes[subLayerData.name] = {
+            id: subLayerData.id,
+            extent: extent,
+          };
+        }
+      } catch (error) {
+        //console.error('Error fetching sublayer:', error);
+      }
+    }
+
+    BBoxes['dataset'] = this.convertBBOXValues(layer?.fullExtent?.extent);
+
+    return BBoxes; // Return BBoxes after all fetches are completed
+  }
+
   parseBBOXWMS(xml) {
     const layerParentNode = xml.querySelectorAll('Layer');
     let layersChildren = Array.from(layerParentNode).filter(
@@ -2725,10 +2800,37 @@ class MenuWidget extends React.Component {
       .catch(() => {});
   };
 
+  findBBoxById(obj, id) {
+    for (let key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        // Check if the current object's id matches the desired id
+        if (obj[key].id === id) {
+          return obj[key].extent; // Return the extent if found
+        }
+      }
+    }
+    return null; // Return null if the id is not found
+  }
+
+  convertBBOXValues(extent) {
+    //Create a spatial reference object for the extent
+
+    let sr4326 = new SpatialReference({
+      wkid: 4326,
+    });
+
+    //Create a projection object for the extent
+
+    let newBBox = projection.project(extent, sr4326);
+    return newBBox;
+  }
+
   async FullExtentDataset(elem) {
     let BBoxes = {};
     this.findCheckedDataset(elem);
-    if (this.url.toLowerCase().includes('wms')) {
+    if (this.url?.toLowerCase().endsWith('mapserver')) {
+      BBoxes = await this.parseBBOXMAPSERVER(this.layers[elem.id]);
+    } else if (this.url.toLowerCase().includes('wms')) {
       await this.getCapabilities(this.url, 'wms');
       BBoxes = this.parseBBOXWMS(this.xml);
     } else if (this.url.toLowerCase().includes('wmts')) {
@@ -2774,6 +2876,8 @@ class MenuWidget extends React.Component {
         });
         this.view.goTo(myExtent);
       }
+    } else if (this.url?.toLowerCase().endsWith('mapserver')) {
+      BBoxes = await this.parseBBOXMAPSERVER(this.layers[elem.id]);
     } else if (this.url?.toLowerCase().includes('wms')) {
       await this.getCapabilities(this.url, 'wms');
       BBoxes = this.parseBBOXWMS(this.xml);
@@ -2798,20 +2902,63 @@ class MenuWidget extends React.Component {
         let match = str.match(/layerid="(\d+)"/);
         let layerid = match ? match[1] : null;
         if (layerid === null || layerid === undefined) return;
-        if (layerid === '12' || layerid === '13') {
-          firstLayer = BBoxes['dataset'];
-        } else if (layerid === '1' || layerid === '7') {
-          firstLayer = BBoxes[Object.keys(BBoxes)[0]];
-        } else if (layerid === '2' || layerid === '8') {
-          firstLayer = BBoxes[Object.keys(BBoxes)[1]];
-        } else if (layerid === '3' || layerid === '9') {
-          firstLayer = BBoxes[Object.keys(BBoxes)[2]];
-        } else if (layerid === '4' || layerid === '10') {
-          firstLayer = BBoxes[Object.keys(BBoxes)[3]];
-        } else if (layerid === '5' || layerid === '11') {
-          firstLayer = BBoxes[Object.keys(BBoxes)[4]];
+        if (this.url?.toLowerCase().endsWith('mapserver')) {
+          switch (layerid) {
+            case '1':
+              firstLayer = this.findBBoxById(BBoxes, 13);
+              break;
+            case '2':
+              firstLayer = this.findBBoxById(BBoxes, 12);
+              break;
+            case '3':
+              firstLayer = this.findBBoxById(BBoxes, 11);
+              break;
+            case '4':
+              firstLayer = this.findBBoxById(BBoxes, 10);
+              break;
+            case '5':
+              firstLayer = this.findBBoxById(BBoxes, 9);
+              break;
+            case '7':
+              firstLayer = this.findBBoxById(BBoxes, 7);
+              break;
+            case '8':
+              firstLayer = this.findBBoxById(BBoxes, 6);
+              break;
+            case '9':
+              firstLayer = this.findBBoxById(BBoxes, 5);
+              break;
+            case '10':
+              firstLayer = this.findBBoxById(BBoxes, 4);
+              break;
+            case '11':
+              firstLayer = this.findBBoxById(BBoxes, 3);
+              break;
+            case '12':
+              firstLayer = this.findBBoxById(BBoxes, 0);
+              break;
+            case '13':
+              firstLayer = this.findBBoxById(BBoxes, 1);
+              break;
+            default:
+              return;
+          }
         } else {
-          firstLayer = BBoxes['dataset'];
+          if (layerid === '12' || layerid === '13') {
+            firstLayer = BBoxes['dataset'];
+          } else if (layerid === '1' || layerid === '7') {
+            firstLayer = BBoxes[Object.keys(BBoxes)[0]];
+          } else if (layerid === '2' || layerid === '8') {
+            firstLayer = BBoxes[Object.keys(BBoxes)[1]];
+          } else if (layerid === '3' || layerid === '9') {
+            firstLayer = BBoxes[Object.keys(BBoxes)[2]];
+          } else if (layerid === '4' || layerid === '10') {
+            firstLayer = BBoxes[Object.keys(BBoxes)[3]];
+          } else if (layerid === '5' || layerid === '11') {
+            firstLayer = BBoxes[Object.keys(BBoxes)[4]];
+          } else {
+            firstLayer = BBoxes['dataset'];
+          }
         }
       } else if (
         elem.id.includes('all_present') ||

package/src/components/MapViewer/PanWidget.jsx

@@ -20,10 +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.container.current) return;
+    this.props.view.when(() => {
+      this.props.view.ui.add({
+        component: this.container.current,
+        position: 'top-right',
+        index: 0,
+      });
     });
   }
 

package/src/components/MapViewer/PrintWidget.jsx

@@ -79,12 +79,14 @@ class PrintWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    this.waitForContainer(this.container.current);
-    this.props.view.ui.add(this.container.current, 'top-right');
-    this.waitForContainer(this.container.current.querySelector('.print-panel'));
-    this.print = new Print({
-      view: this.props.view,
-      container: this.container.current.querySelector('.print-panel'),
+    //this.waitForContainer(this.container.current);
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      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'),
+      });
     });
   }
 

package/src/components/MapViewer/ScaleWidget.jsx

@@ -38,12 +38,15 @@ class ScaleWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    this.waitForContainer(this.props.view);
-    this.scaleBar = new ScaleBar({
-      view: this.props.view,
-      unit: 'dual',
+    //this.waitForContainer(this.props.view);
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      this.scaleBar = new ScaleBar({
+        view: this.props.view,
+        unit: 'dual',
+      });
+      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,14 +91,18 @@ 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');
     await this.loader();
-    this.swipe = new Swipe({
-      view: this.props.view,
-      direction: 'horizontal',
-      position: 50,
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      this.props.view.ui.add(this.container.current, 'top-right');
+      this.swipe = new Swipe({
+        view: this.props.view,
+        direction: 'horizontal',
+        position: 50,
+      });
     });
   }
+
   getLayerTitle(layer) {
     let title;
     if (layer.url && layer.url.toLowerCase().includes('wmts')) {

package/src/components/MapViewer/TimesliderWidget.jsx

@@ -197,105 +197,107 @@ class TimesliderWidget extends React.Component {
     await this.loader();
     let playRateValue =
       this.layer.ProductId === '8474c3b080fa42cc837f1d2338fcf096' ? 4000 : 1000;
-    this.TimesliderWidget = new TimeSlider({
-      view: this.props.view,
-      container: document.querySelector('.timeslider-panel'),
-      timeVisible: true,
-      mode: 'instant',
-      playRate: playRateValue,
-      loop: false,
-      labelFormatFunction: (value, type, element, layout) => {
-        if (!this.TimesliderWidget.fullTimeExtent) {
-          element.innerText = 'Loading...';
-          return;
-        }
-        if (value) {
-          const normal = new Intl.DateTimeFormat('en-gb');
-          switch (type) {
-            case 'min':
-              if (this.state.timeSelectedValuesC == null)
-                // In case of first iteration
-                this.state.timeSelectedValuesC[0] = value;
-              element.innerText = normal.format(value).replaceAll('/', '.');
-              break;
-            case 'max':
-              if (this.state.timeSelectedValuesC == null)
-                // In case of first iteration
-                this.state.timeSelectedValuesC[1] = value;
-              element.innerText = normal.format(value).replaceAll('/', '.');
-              break;
-            case 'extent':
-              this.state.timeSelectedValues = value;
-              if (
-                normal
-                  .format(this.state.timeSelectedValues[0])
-                  .replaceAll('/', '.') !==
-                normal
-                  .format(this.state.timeSelectedValuesC[0])
-                  .replaceAll('/', '.')
-              ) {
-                this.state.timeSelectedValuesC[0] = value[0];
-                element.innerText = normal
-                  .format(value[0])
-                  .replaceAll('/', '.');
-              } else if (
-                normal
-                  .format(this.state.timeSelectedValues[1])
-                  .replaceAll('/', '.') !==
-                normal
-                  .format(this.state.timeSelectedValuesC[1])
-                  .replaceAll('/', '.')
-              ) {
-                this.state.timeSelectedValuesC[1] = value[1];
-                element.innerText = normal
-                  .format(value[1])
-                  .replaceAll('/', '.');
-              }
-              break;
-            default:
-              element.innerText = normal.format(value).replaceAll('/', '.');
-              break;
+    if (!this.container.current) return;
+    this.props.view.when(() => {
+      this.TimesliderWidget = new TimeSlider({
+        view: this.props.view,
+        container: document.querySelector('.timeslider-panel'),
+        timeVisible: true,
+        mode: 'instant',
+        playRate: playRateValue,
+        loop: false,
+        labelFormatFunction: (value, type, element, layout) => {
+          if (!this.TimesliderWidget.fullTimeExtent) {
+            element.innerText = 'Loading...';
+            return;
           }
-          this.setState({
-            lockDatePanel: false,
-          });
-        }
-      },
-    });
-    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
-      .querySelector('#timeslider_close')
-      .addEventListener('click', () => {
-        this.props.time.elem.querySelector('.active-layer-time').click();
-        if (this.props.fromDownload) {
-          if (this.props.download) {
-            document.getElementById('download_label').click();
-          } else {
-            document.getElementById('products_label').click();
+          if (value) {
+            const normal = new Intl.DateTimeFormat('en-gb');
+            switch (type) {
+              case 'min':
+                if (this.state.timeSelectedValuesC == null)
+                  // In case of first iteration
+                  this.state.timeSelectedValuesC[0] = value;
+                element.innerText = normal.format(value).replaceAll('/', '.');
+                break;
+              case 'max':
+                if (this.state.timeSelectedValuesC == null)
+                  // In case of first iteration
+                  this.state.timeSelectedValuesC[1] = value;
+                element.innerText = normal.format(value).replaceAll('/', '.');
+                break;
+              case 'extent':
+                this.state.timeSelectedValues = value;
+                if (
+                  normal
+                    .format(this.state.timeSelectedValues[0])
+                    .replaceAll('/', '.') !==
+                  normal
+                    .format(this.state.timeSelectedValuesC[0])
+                    .replaceAll('/', '.')
+                ) {
+                  this.state.timeSelectedValuesC[0] = value[0];
+                  element.innerText = normal
+                    .format(value[0])
+                    .replaceAll('/', '.');
+                } else if (
+                  normal
+                    .format(this.state.timeSelectedValues[1])
+                    .replaceAll('/', '.') !==
+                  normal
+                    .format(this.state.timeSelectedValuesC[1])
+                    .replaceAll('/', '.')
+                ) {
+                  this.state.timeSelectedValuesC[1] = value[1];
+                  element.innerText = normal
+                    .format(value[1])
+                    .replaceAll('/', '.');
+                }
+                break;
+              default:
+                element.innerText = normal.format(value).replaceAll('/', '.');
+                break;
+            }
+            this.setState({
+              lockDatePanel: false,
+            });
           }
-        }
+        },
       });
+      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 });
 
-    this.props.view
-      .whenLayerView(this.layer, this.TimesliderWidget)
-      .then((lv) => {
-        if (this.layer.type === 'feature') {
-          this.TimesliderWidget.fullTimeExtent = this.layer.timeInfo.fullTimeExtent;
-          this.TimesliderWidget.stops = {
-            interval: this.layer.timeInfo.interval,
-          };
-          this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
-            if (!this.container.current ? true : false) {
-              this.TimesliderWidget.stop();
+      document
+        .querySelector('#timeslider_close')
+        .addEventListener('click', () => {
+          this.props.time.elem.querySelector('.active-layer-time').click();
+          if (this.props.fromDownload) {
+            if (this.props.download) {
+              document.getElementById('download_label').click();
+            } else {
+              document.getElementById('products_label').click();
             }
-            /*let start = new Date(timeExtent.start).getTime();
+          }
+        });
+
+      this.props.view
+        .whenLayerView(this.layer, this.TimesliderWidget)
+        .then((lv) => {
+          if (this.layer.type === 'feature') {
+            this.TimesliderWidget.fullTimeExtent = this.layer.timeInfo.fullTimeExtent;
+            this.TimesliderWidget.stops = {
+              interval: this.layer.timeInfo.interval,
+            };
+            this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
+              if (!this.container.current ? true : false) {
+                this.TimesliderWidget.stop();
+              }
+              /*let start = new Date(timeExtent.start).getTime();
             let end = new Date(timeExtent.end).getTime();
             this.props.time.elem.setAttribute('time-start', start);
             this.props.time.elem.setAttribute('time-end', end);
@@ -305,94 +307,96 @@ class TimesliderWidget extends React.Component {
             }
             this.props.time.dataset.setAttribute('time-start', start);
             this.props.time.dataset.setAttribute('time-end', end);*/
-          });
-        } else {
-          let serviceType = '';
-          if (this.layer.type === 'wms') {
-            serviceType = 'wms';
-          } else if (this.layer.type === 'wmts') {
-            serviceType = 'wmts';
-          }
-
-          this.getCapabilities(this.layer.url, serviceType).then((xml) => {
-            let times = {};
-            let periodicity;
+            });
+          } else {
+            let serviceType = '';
             if (this.layer.type === 'wms') {
-              times = this.parseTimeWMS(xml);
+              serviceType = 'wms';
             } else if (this.layer.type === 'wmts') {
-              times = this.parseTimeWMTS(xml);
+              serviceType = 'wmts';
             }
-            // Capabilities have time enabled
-            if (times[this.layerName].hasOwnProperty('dimension') === false) {
-              // Start-End-Period
-              if (times[this.layerName].hasOwnProperty('period')) {
-                this.TimesliderWidget.fullTimeExtent = new TimeExtent({
-                  start: new Date(times[this.layerName].start),
-                  end: new Date(times[this.layerName].end),
-                });
 
-                const period = this.parserPeriod(times[this.layerName].period);
+            this.getCapabilities(this.layer.url, serviceType).then((xml) => {
+              let times = {};
+              let periodicity;
+              if (this.layer.type === 'wms') {
+                times = this.parseTimeWMS(xml);
+              } else if (this.layer.type === 'wmts') {
+                times = this.parseTimeWMTS(xml);
+              }
+              // Capabilities have time enabled
+              if (times[this.layerName].hasOwnProperty('dimension') === false) {
+                // Start-End-Period
+                if (times[this.layerName].hasOwnProperty('period')) {
+                  this.TimesliderWidget.fullTimeExtent = new TimeExtent({
+                    start: new Date(times[this.layerName].start),
+                    end: new Date(times[this.layerName].end),
+                  });
 
-                this.TimesliderWidget.stops = {
-                  interval: {
-                    value:
-                      period.years * 365 * 24 * 60 +
-                      period.months * 31 * 24 * 60 +
-                      period.weeks * 7 * 24 * 60 +
-                      period.days * 24 * 60 +
-                      period.hours * 60 +
-                      period.minutes +
-                      period.seconds / 60,
-                    unit: 'minutes',
-                  },
-                };
+                  const period = this.parserPeriod(
+                    times[this.layerName].period,
+                  );
 
-                periodicity = times[this.layerName].period;
-              } else if (times[this.layerName].hasOwnProperty('array')) {
-                // Dates array
-                this.TimesliderWidget.fullTimeExtent = new TimeExtent({
-                  start: new Date(times[this.layerName].array[0]),
-                  end: new Date(
-                    times[this.layerName].array[
-                      times[this.layerName].array.length - 1
-                    ],
-                  ),
-                });
-                this.TimesliderWidget.stops = {
-                  dates: times[this.layerName].array.map((e) => new Date(e)),
-                };
+                  this.TimesliderWidget.stops = {
+                    interval: {
+                      value:
+                        period.years * 365 * 24 * 60 +
+                        period.months * 31 * 24 * 60 +
+                        period.weeks * 7 * 24 * 60 +
+                        period.days * 24 * 60 +
+                        period.hours * 60 +
+                        period.minutes +
+                        period.seconds / 60,
+                      unit: 'minutes',
+                    },
+                  };
 
-                if (this.layer.type === 'wmts') {
-                  this.layer.customLayerParameters = {};
-                  const time = times[this.layerName].array.map(
-                    (d) => new Date(d),
-                  );
+                  periodicity = times[this.layerName].period;
+                } else if (times[this.layerName].hasOwnProperty('array')) {
+                  // Dates array
+                  this.TimesliderWidget.fullTimeExtent = new TimeExtent({
+                    start: new Date(times[this.layerName].array[0]),
+                    end: new Date(
+                      times[this.layerName].array[
+                        times[this.layerName].array.length - 1
+                      ],
+                    ),
+                  });
+                  this.TimesliderWidget.stops = {
+                    dates: times[this.layerName].array.map((e) => new Date(e)),
+                  };
 
-                  for (let i in time) {
-                    timeDict[time[i]] = times[this.layerName].array[i];
+                  if (this.layer.type === 'wmts') {
+                    this.layer.customLayerParameters = {};
+                    const time = times[this.layerName].array.map(
+                      (d) => new Date(d),
+                    );
+
+                    for (let i in time) {
+                      timeDict[time[i]] = times[this.layerName].array[i];
+                    }
                   }
-                }
 
-                periodicity = Math.floor(
-                  (Date.parse(times[this.layerName].array[1]) -
-                    Date.parse(times[this.layerName].array[0])) /
-                    86400000,
-                );
-                if (periodicity === 0) {
-                  periodicity =
-                    (new Date(times[this.layerName].array[1]).getHours() -
-                      new Date(times[this.layerName].array[0]).getHours()) /
-                    24;
+                  periodicity = Math.floor(
+                    (Date.parse(times[this.layerName].array[1]) -
+                      Date.parse(times[this.layerName].array[0])) /
+                      86400000,
+                  );
+                  if (periodicity === 0) {
+                    periodicity =
+                      (new Date(times[this.layerName].array[1]).getHours() -
+                        new Date(times[this.layerName].array[0]).getHours()) /
+                      24;
+                  }
                 }
-              }
 
-              this.setState({ periodicity: periodicity });
+                this.setState({ periodicity: periodicity });
 
-              this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
-                if (!this.container.current ? true : false) {
-                  this.TimesliderWidget.stop();
-                }
-                /*let start = new Date(timeExtent.start).getTime();
+                this.TimesliderWidget.watch('timeExtent', (timeExtent) => {
+                  if (!this.container.current ? true : false) {
+                    this.TimesliderWidget.stop();
+                  }
+                  /*let start = new Date(timeExtent.start).getTime();
                 let end = new Date(timeExtent.end).getTime();
                 this.props.time.elem.setAttribute('time-start', start);
                 this.props.time.elem.setAttribute('time-end', end);
@@ -402,38 +406,39 @@ class TimesliderWidget extends React.Component {
                 }
                 this.props.time.dataset.setAttribute('time-start', start);
                 this.props.time.dataset.setAttribute('time-end', end);*/
-                if (this.layer.type === 'wmts') {
-                  this.layer.customLayerParameters = {};
-                  this.layer.customLayerParameters['TIME'] =
-                    timeDict[this.TimesliderWidget.timeExtent.end];
-                } else {
-                  this.layer.customLayerParameters = {};
-                  if (times[this.layerName].hasOwnProperty('array')) {
+                  if (this.layer.type === 'wmts') {
+                    this.layer.customLayerParameters = {};
                     this.layer.customLayerParameters['TIME'] =
                       timeDict[this.TimesliderWidget.timeExtent.end];
                   } else {
-                    const newDateTimeObject = new Date(
-                      this.TimesliderWidget.timeExtent.start.toISOString(),
-                    );
-                    newDateTimeObject.setMinutes(
-                      this.TimesliderWidget.timeExtent.start.getMinutes() +
-                        this.TimesliderWidget.stops['interval'].value,
-                    );
-                    this.layer.customLayerParameters['TIME'] =
-                      this.TimesliderWidget.timeExtent.start.toISOString() +
-                      '/' +
-                      newDateTimeObject.toISOString(); //OK
+                    this.layer.customLayerParameters = {};
+                    if (times[this.layerName].hasOwnProperty('array')) {
+                      this.layer.customLayerParameters['TIME'] =
+                        timeDict[this.TimesliderWidget.timeExtent.end];
+                    } else {
+                      const newDateTimeObject = new Date(
+                        this.TimesliderWidget.timeExtent.start.toISOString(),
+                      );
+                      newDateTimeObject.setMinutes(
+                        this.TimesliderWidget.timeExtent.start.getMinutes() +
+                          this.TimesliderWidget.stops['interval'].value,
+                      );
+                      this.layer.customLayerParameters['TIME'] =
+                        this.TimesliderWidget.timeExtent.start.toISOString() +
+                        '/' +
+                        newDateTimeObject.toISOString(); //OK
+                    }
                   }
-                }
-                this.layer.refresh();
-              });
-            } // if there is dimension time
-            else {
-              this.TimesliderWidget.disabled = true;
-            }
-          });
-        } // is feature or WMS/WMTS
-      });
+                  this.layer.refresh();
+                });
+              } // if there is dimension time
+              else {
+                this.TimesliderWidget.disabled = true;
+              }
+            });
+          } // is feature or WMS/WMTS
+        });
+    });
   } //componentDidMount
 
   getPeriodicity() {

package/src/components/UseCasesMapViewer/LegendWidget.jsx

@@ -94,10 +94,13 @@ class LegendWidget extends React.Component {
    */
   async componentDidMount() {
     await this.loader();
-    this.view.ui.add(this.container.current, 'top-right');
-    this.LegendWidget = new Legend({
-      view: this.view,
-      container: document.querySelector('.legend-panel'),
+    if (!this.container.current) return;
+    this.view.when(() => {
+      this.view.ui.add(this.container.current, 'top-right');
+      this.LegendWidget = new Legend({
+        view: this.view,
+        container: document.querySelector('.legend-panel'),
+      });
     });
   }
   /**

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -117,6 +117,7 @@ class UseCasesMapViewer extends React.Component {
       basemap: this.basemap,
     });
 
+    if (!this.mapdiv.current) return;
     this.view = new MapView({
       container: this.mapdiv.current,
       map: this.map,
@@ -127,68 +128,70 @@ class UseCasesMapViewer extends React.Component {
       },
     });
 
-    this.view.ui.add(this.zoom, {
-      position: 'top-right',
-    });
+    this.view.when(() => {
+      this.view.ui.add(this.zoom, {
+        position: 'top-right',
+      });
 
-    layerControl = new LayerControl({
-      map: this.map,
-      view: this.view,
-      mapViewer: this,
-      worldDimensions: this.mapCfg.worldDimensions,
-      maxZoom: this.mapCfg.maxZoom,
-      FeatureLayer: FeatureLayer,
-      Extent: Extent,
-    });
+      layerControl = new LayerControl({
+        map: this.map,
+        view: this.view,
+        mapViewer: this,
+        worldDimensions: this.mapCfg.worldDimensions,
+        maxZoom: this.mapCfg.maxZoom,
+        FeatureLayer: FeatureLayer,
+        Extent: Extent,
+      });
 
-    layerSpatial = layerControl.createLayer({
-      id: this.spatialConfig.id,
-      url: this.spatialConfig.url,
-      legend: this.spatialConfig.showLegend,
-    });
+      layerSpatial = layerControl.createLayer({
+        id: this.spatialConfig.id,
+        url: this.spatialConfig.url,
+        legend: this.spatialConfig.showLegend,
+      });
 
-    layerSpatial.renderer = this.spatialConfig.render;
+      layerSpatial.renderer = this.spatialConfig.render;
 
-    let layerRegion = layerControl.createLayer({
-      id: this.regionConfig.id,
-      url: this.regionConfig.url,
-      legend: this.regionConfig.showLegend,
-    });
+      let layerRegion = layerControl.createLayer({
+        id: this.regionConfig.id,
+        url: this.regionConfig.url,
+        legend: this.regionConfig.showLegend,
+      });
 
-    layerHighlight = layerControl.createLayer({
-      id: this.HighlightConfig.id,
-      url: this.HighlightConfig.url,
-      legend: this.HighlightConfig.showLegend,
-    });
+      layerHighlight = layerControl.createLayer({
+        id: this.HighlightConfig.id,
+        url: this.HighlightConfig.url,
+        legend: this.HighlightConfig.showLegend,
+      });
 
-    layerRegion.renderer = this.regionConfig.render;
-    layerRegion.labelingInfo = [this.regionConfig.label];
-    layerHighlight.renderer = this.HighlightConfig.render;
+      layerRegion.renderer = this.regionConfig.render;
+      layerRegion.labelingInfo = [this.regionConfig.label];
+      layerHighlight.renderer = this.HighlightConfig.render;
 
-    layerControl.addLayer(layerHighlight);
-    layerControl.addLayer(layerRegion);
-    layerControl.addLayer(layerSpatial);
+      layerControl.addLayer(layerHighlight);
+      layerControl.addLayer(layerRegion);
+      layerControl.addLayer(layerSpatial);
 
-    layerControl.hideLayer(layerHighlight.id);
-    layerControl.hideLayer(layerSpatial.id);
+      layerControl.hideLayer(layerHighlight.id);
+      layerControl.hideLayer(layerSpatial.id);
 
-    navigationControl = new NavigationControl({
-      map: this.map,
-      view: this.view,
-      center: this.mapCfg.center,
-      layerControl: layerControl,
-      mapViewer: this,
-      layerRegion: layerRegion,
-      layerSpatial: layerSpatial,
-      layerHighlight: layerHighlight,
-    });
+      navigationControl = new NavigationControl({
+        map: this.map,
+        view: this.view,
+        center: this.mapCfg.center,
+        layerControl: layerControl,
+        mapViewer: this,
+        layerRegion: layerRegion,
+        layerSpatial: layerSpatial,
+        layerHighlight: layerHighlight,
+      });
 
-    this.setMapFunctions(
-      this.view,
-      layerControl,
-      navigationControl,
-      layerSpatial,
-    );
+      this.setMapFunctions(
+        this.view,
+        layerControl,
+        navigationControl,
+        layerSpatial,
+      );
+    });
 
     //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