@eeacms/volto-arcgis-block 0.1.164 → 0.1.166

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.166](https://github.com/eea/volto-arcgis-block/compare/0.1.165...0.1.166) - 4 July 2023
+
+### [0.1.165](https://github.com/eea/volto-arcgis-block/compare/0.1.164...0.1.165) - 4 July 2023
+
+#### :hammer_and_wrench: Others
+
+- FIX: Pan constraint modified. Now Hotspot filter zoom in properly to AOI [martinman - [`eb67204`](https://github.com/eea/volto-arcgis-block/commit/eb672041609a647170782d89d4d601debe713c65)]
+- FIX: Pan constraint modified. Now Hotspot filter zoom in properly to AOI [martinman - [`2871e7f`](https://github.com/eea/volto-arcgis-block/commit/2871e7f9be9e32d12ed59f147172f5688a046dc7)]
+- CLMS-HOT-SPOT-FIXES (bug): Bug fixes and some improvements [ujbolivar - [`3f8ee8c`](https://github.com/eea/volto-arcgis-block/commit/3f8ee8cae8ec0559d0118639ac5a52c5547e1f0d)]
+- Merge [martinman - [`3923505`](https://github.com/eea/volto-arcgis-block/commit/3923505e0fab2521c116ee8b2ea785278b3db04a)]
+- Commit. Then create brach for issue with Timor Leste [martinman - [`62e065a`](https://github.com/eea/volto-arcgis-block/commit/62e065a3d5d37e35c44520e7c66f4908db44cfbe)]
+- Commit. Then create brach for issue with Timor Leste [martinman - [`570a92b`](https://github.com/eea/volto-arcgis-block/commit/570a92b98ff788b3d0f5a7f83c60574335afbc99)]
+- CLMS-2300 (bug): Selected region is preserved in dropdown, even when changing datasets if that region exists in both. Not completed [ujbolivar - [`783a6e3`](https://github.com/eea/volto-arcgis-block/commit/783a6e333a755a6cb0fd648fc1b60b3afdce6867)]
 ### [0.1.164](https://github.com/eea/volto-arcgis-block/compare/0.1.163...0.1.164) - 3 July 2023
 
 ### [0.1.163](https://github.com/eea/volto-arcgis-block/compare/0.1.162...0.1.163) - 29 June 2023

package/package.json

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

package/src/components/MapViewer/AreaWidget.jsx

@@ -141,10 +141,11 @@ class AreaWidget extends React.Component {
     this.clearWidget();
 
     levels.forEach((level) => {
-      var url = this.props.urls.nutsHandler;
       var layer = new FeatureLayer({
         id: id,
-        url: url,
+        //url: this.props.urls.nutsHandler,
+        url:
+          'https://land.discomap.eea.europa.eu/arcgis/rest/services/CLMS_Portal/NUTS_2021_Improved/MapServer/',
         layerId: level,
         outFields: ['*'],
         popupEnabled: false,
@@ -163,7 +164,9 @@ class AreaWidget extends React.Component {
     this.clearWidget();
     var layer = new FeatureLayer({
       id: id,
-      url: this.props.urls.outsideEu,
+      //url: this.props.urls.outsideEu,
+      url:
+        'https://land.discomap.eea.europa.eu/arcgis/rest/services/CLMS_Portal/World_countries_except_EU37/MapServer',
       layerId: 0,
       outFields: ['*'],
       popupEnabled: false,
@@ -257,6 +260,7 @@ class AreaWidget extends React.Component {
         'block';
     }
   }
+
   /**
    * This method is executed after the rener method is executed
    */
@@ -292,7 +296,12 @@ class AreaWidget extends React.Component {
             if (graphic) {
               let geometry = graphic.geometry;
               if (geometry.type === 'polygon') {
-                let nuts = graphic.attributes.NUTS_ID;
+                let nuts;
+                if ('countries'.includes(graphic.layer.id)) {
+                  nuts = graphic.attributes.ISO_2DIGIT;
+                } else {
+                  nuts = graphic.attributes.NUTS_ID;
+                }
                 this.props.updateArea(nuts);
                 let symbol = new SimpleFillSymbol(
                   'solid',

package/src/components/MapViewer/HotspotWidget.jsx

@@ -30,7 +30,7 @@ class HotspotWidget extends React.Component {
     this.esriLayer_pa = null;
     this.esriLayer_pa2 = null;
     this.subscribedLayers = sessionStorage;
-    this.checkedLayers = [];
+    this.checkedLayers = {};
     this.dataBBox = [];
     this.dataJSONNames = [];
     this.klcHighlightsArray = [];
@@ -41,8 +41,11 @@ class HotspotWidget extends React.Component {
     this.layerModelInit = this.layerModelInit.bind(this);
     this.getBBoxData = this.getBBoxData.bind(this);
     this.handleApplyFilter = this.handleApplyFilter.bind(this);
+    this.mapCfg = this.props.mapCfg;
     //this.getLayerParameters();
     this.selectedArea = null;
+    this.lcYear = null;
+    this.lccYear = null;
   }
 
   loader() {
@@ -73,6 +76,19 @@ class HotspotWidget extends React.Component {
     let xmin_ymin = klc_bbox_coordinates[0].split(' ');
     let xmax_ymax = klc_bbox_coordinates[1].split(' ');
 
+    let constraintExtent = new Extent({
+      xmin: this.mapCfg.geometryZoomIn.xmin,
+      ymin: this.mapCfg.geometryZoomIn.ymin,
+      xmax: this.mapCfg.geometryZoomIn.xmax,
+      ymax: this.mapCfg.geometryZoomIn.ymax,
+      // xmin: -200,
+      // ymin: -85,
+      // xmax: 200,
+      // ymax: 85,
+      spatialReference: 4326,
+    });
+    this.props.view.constraints.geometry = constraintExtent;
+
     const regionExtent = new Extent({
       xmin: Number(xmin_ymin[0]) * 0.99,
       ymin: Number(xmin_ymin[1]) * 0.99,
@@ -227,6 +243,9 @@ class HotspotWidget extends React.Component {
     }
     typeFilter.forEach((type) => {
       if (type === 'lcc') {
+        let selectLccBoxTime = document.getElementById('select-klc-lccTime')
+          .value;
+        this.lccYear = selectLccBoxTime;
         var selectBoxHighlightsLcc = document
           .getElementById('select-klc-lccTime')
           .value.match(/\d+/g)
@@ -267,6 +286,9 @@ class HotspotWidget extends React.Component {
             ? (typeLegend = 'all_present_lc_a_pol')
             : (typeLegend = 'all_present_lc_b_pol');
         });
+        let selectLcBoxTime = document.getElementById('select-klc-lcTime')
+          .value;
+        this.lcYear = selectLcBoxTime;
         var selectBoxHighlightsLc = document
           .getElementById('select-klc-lcTime')
           .value.match(/\d+/g)
@@ -488,11 +510,20 @@ class HotspotWidget extends React.Component {
     var selectBoxLccTime;
     let modularKLCAreas = [];
     let dichotomousKLCAreas = [];
+    let checkedLayers =
+      JSON.parse(sessionStorage.getItem('checkedLayers')) || {};
 
-    this.selectedArea = selectedOption;
     selectBox = document.getElementById('select-klc-area');
     selectBoxLccTime = document.getElementById('select-klc-lccTime');
     selectBoxLcTime = document.getElementById('select-klc-lcTime');
+
+    if (selectedOption !== this.selectedArea) {
+      this.lcYear = null;
+      this.lccYear = null;
+    }
+
+    this.selectedArea = selectedOption;
+
     for (let i = 0; i < data.length; i++) {
       var option = data[i].node.klc_name;
 
@@ -552,7 +583,6 @@ class HotspotWidget extends React.Component {
             new Option(optionLcTime, optionLcTime, optionLcTime),
           );
         }
-        return;
       }
     }
     if (selectBox) {
@@ -565,35 +595,76 @@ class HotspotWidget extends React.Component {
           true,
         ),
       );
-
       selectBox.options[0].disabled = true;
     }
-    let checkedLayers =
-      JSON.parse(sessionStorage.getItem('checkedLayers')) || {};
-
-    for (let a = 0; a < checkedLayers.length; a++) {
-      if (
-        checkedLayers[a].includes('all_lcc_b_pol') ||
-        checkedLayers[a].includes('all_present_lc_b_pol')
-      ) {
-        for (let i = 0; i < modularKLCAreas.length; i++) {
-          let option = modularKLCAreas[i];
-          selectBox.options.add(new Option(option, option, option));
-        }
-        this.checkedLayers = checkedLayers;
-        return;
-      } else if (
-        checkedLayers[a].includes('all_lcc_a_pol') ||
-        checkedLayers[a].includes('all_present_lc_a_pol')
-      ) {
-        for (let i = 0; i < dichotomousKLCAreas.length; i++) {
-          let option = dichotomousKLCAreas[i];
-          selectBox.options.add(new Option(option, option, option));
+    if (checkedLayers.length) {
+      for (let a = 0; a < checkedLayers.length; a++) {
+        if (
+          checkedLayers[a].includes('all_lcc_b_pol') ||
+          checkedLayers[a].includes('all_present_lc_b_pol')
+        ) {
+          for (let i = 0; i < modularKLCAreas.length; i++) {
+            let option = modularKLCAreas[i];
+            selectBox.options.add(new Option(option, option, option));
+          }
+          this.checkedLayers = checkedLayers;
+          for (let u = 0; u < selectBox.options.length; u++) {
+            if (selectBox.options[u].label.includes(this.selectedArea)) {
+              selectBox.value = this.selectedArea;
+              if (this.lcYear === null) selectBoxLcTime.value = 'default';
+              else if (this.lccYear === null)
+                selectBoxLccTime.value = 'default';
+              else {
+                selectBoxLcTime.value = this.lcYear;
+                selectBoxLccTime.value = this.lccYear;
+              }
+              break;
+            } else {
+              selectBox.value = 'default';
+              selectBoxLcTime.value = 'default';
+              selectBoxLccTime.value = 'default';
+            }
+          }
+          break;
+        } else if (
+          checkedLayers[a].includes('all_lcc_a_pol') ||
+          checkedLayers[a].includes('all_present_lc_a_pol')
+        ) {
+          for (let i = 0; i < dichotomousKLCAreas.length; i++) {
+            let option = dichotomousKLCAreas[i];
+            selectBox.options.add(new Option(option, option, option));
+          }
+          this.checkedLayers = checkedLayers;
+          for (let u = 0; u < selectBox.options.length; u++) {
+            if (selectBox.options[u].label.includes(this.selectedArea)) {
+              selectBox.value = this.selectedArea;
+              //selectBoxLcTime.value = this.lcYear;
+              //selectBoxLccTime.value = this.lccYear;
+              break;
+            } else {
+              selectBox.value = 'default';
+              //selectBoxLcTime.value = 'default';
+              //selectBoxLccTime.value = 'default';
+            }
+          }
+          break;
         }
-        this.checkedLayers = checkedLayers;
-        return;
-      } else {
-        continue;
+      }
+    }
+    if (selectBox.value === 'default') {
+      if (selectBoxLcTime) {
+        this.removeOptions(selectBoxLcTime);
+        selectBoxLcTime.options.add(
+          new Option('Select a region first', 'default', true, true),
+        );
+        selectBoxLcTime.options[0].disabled = true;
+      }
+      if (selectBoxLccTime) {
+        this.removeOptions(selectBoxLccTime);
+        selectBoxLccTime.options.add(
+          new Option('Select a region first', 'default', true, true),
+        );
+        selectBoxLccTime.options[0].disabled = true;
       }
     }
   }
@@ -733,11 +804,5 @@ class HotspotWidget extends React.Component {
       JSON.parse(sessionStorage.getItem('checkedLayers')) || {};
     this.forceUpdate();
   };
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.checkedLayers !== this.checkedLayers) {
-      this.getKLCNames(this.dataJSONNames, this.selectedArea);
-    }
-  }
 }
 export default HotspotWidget;

package/src/components/MapViewer/MapViewer.jsx

@@ -54,7 +54,7 @@ class MapViewer extends React.Component {
     this.activeLayersHandler = this.activeLayersHandler.bind(this);
     this.activeLayersArray = {};
     this.props.mapviewer_config.loading = true;
-    this.urlCfg = props.cfg.Urls;
+    this.cfgUrls = this.props.cfg.Urls;
   }
 
   activeLayersHandler(newActiveLayers) {
@@ -111,19 +111,18 @@ class MapViewer extends React.Component {
    * they are already mounted
    */
 
-  waitForDataFill() {
-    while (this.compCfg.length === 0) {
+  waitForDataFill(obj) {
+    while (obj.length === 0) {
       new Promise((resolve) => setTimeout(resolve, 100)); // wait for 100ms
     }
-    return this.compCfg;
+    return obj;
   }
 
   async componentDidMount() {
     loadCss();
     await this.loader();
-    this.state.url = window.location.href;
-    await this.waitForDataFill();
-
+    //    this.state.url = window.location.href;
+    await this.waitForDataFill(this.compCfg);
     this.positronCompositeBasemap = new Basemap({
       title: 'Positron composite',
       thumbnailUrl:
@@ -193,18 +192,18 @@ class MapViewer extends React.Component {
         this.setZoomState(newValue);
         if (mapStatus.zoom <= this.mapCfg.minZoom) {
           constraintExtent = new Extent({
-            xmin: -90,
-            ymin: -45,
-            xmax: 90,
-            ymax: 45,
+            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: -90,
-            ymin: -85,
-            xmax: 90,
-            ymax: 85,
+            xmin: this.mapCfg.geometryZoomIn.xmin,
+            ymin: this.mapCfg.geometryZoomIn.ymin,
+            xmax: this.mapCfg.geometryZoomIn.xmax,
+            ymax: this.mapCfg.geometryZoomIn.ymax,
             spatialReference: 4326,
           });
         }
@@ -226,27 +225,11 @@ class MapViewer extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    if (this.location.search !== '') {
+    if (this.props.Download || (this.location && this.location.search !== '')) {
       let toc_panel_scrolls = sessionStorage.getItem('toc_panel_scrolls');
       sessionStorage.clear();
       sessionStorage.setItem('toc_panel_scrolls', toc_panel_scrolls);
     }
-
-    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);
-    }
   }
 
   componentWillUnmount() {
@@ -341,6 +324,7 @@ class MapViewer extends React.Component {
           selectedLayers={this.layers}
           mapViewer={this}
           layers={sessionStorage}
+          mapCfg={this.mapCfg}
         />
       );
   }
@@ -349,7 +333,7 @@ class MapViewer extends React.Component {
     if (this.view)
       return (
         <MenuWidget
-          location={this.props.location}
+          location={this.location}
           view={this.view}
           conf={this.props.mapviewer_config.Components}
           download={this.props.mapviewer_config.Download}
@@ -359,6 +343,7 @@ class MapViewer extends React.Component {
           area={this.state.area}
           layers={this.layers}
           activeLayersHandler={this.activeLayersHandler}
+          urls={this.cfgUrls}
         />
       ); //call conf
   }
@@ -414,7 +399,7 @@ export const CheckLogin = ({ reference }) => {
           mapViewer={reference}
           download={reference.props.mapviewer_config.Download}
           updateArea={reference.updateArea}
-          urls={reference.urlCfg}
+          urls={reference.cfgUrls}
         />
       )}
     </>

package/src/components/MapViewer/MenuWidget.jsx

@@ -581,7 +581,6 @@ class MenuWidget extends React.Component {
   async componentDidMount() {
     loadCss();
     await this.loader();
-    this.state.url = window.location.href;
     await this.getTMSLayersJSON();
     this.props.view.ui.add(this.container.current, 'top-left');
     if (this.props.download) {
@@ -1608,6 +1607,16 @@ class MenuWidget extends React.Component {
       }
     }
     if (productContainerId === 'd764e020485a402598551fa461bf1db2') {
+      //      if (this.layers['lc_filter'] || this.layers['lcc_filter']) {
+      //        let myExtent = new Extent({
+      //          xmin: -2037508.342789,
+      //          ymin: -2037508.342789,
+      //          xmax: 8037508.342789,
+      //          ymax: 8037508.342789,
+      //          spatialReference: 3857, // by default wkid 4326
+      //        });
+      //        this.view.goTo(myExtent);
+      //      }
       if (nextElemSibling) {
         siblingInput = nextElemSibling.querySelector('input');
       } else if (previousElemSibling) {
@@ -1660,7 +1669,7 @@ class MenuWidget extends React.Component {
       if (this.props.download || this.location.search !== '') {
         if (
           this.extentInitiated === false &&
-          productContainerId !== 'd764e020485a402598551fa461bf1db2'
+          productContainerId !== 'd764e020485a402598551fa461bf1db2' //hotspot
         ) {
           this.extentInitiated = true;
           setTimeout(() => {
@@ -2073,6 +2082,8 @@ class MenuWidget extends React.Component {
     );
     let BBoxes = {};
     let layerGeoGraphic = {};
+    let xList = [];
+    let yList = [];
     for (let i in layersChildren) {
       if (
         layersChildren[i].querySelector('EX_GeographicBoundingBox') !== null
@@ -2101,25 +2112,48 @@ class MenuWidget extends React.Component {
           layerGeoGraphic.querySelector('northBoundLatitude').innerText,
         ),
       };
-    }
+      xList.push(
+        BBoxes[layersChildren[i].querySelector('Name').innerText].xmin,
+      );
+      yList.push(
+        BBoxes[layersChildren[i].querySelector('Name').innerText].ymin,
+      );
+      xList.push(
+        BBoxes[layersChildren[i].querySelector('Name').innerText].xmax,
+      );
+      yList.push(
+        BBoxes[layersChildren[i].querySelector('Name').innerText].ymax,
+      );
+    } // For loop
     // Add dataset bbox
-    layerGeoGraphic = layerParent[0].querySelector('EX_GeographicBoundingBox');
     BBoxes['dataset'] = {
-      xmin: Number(
-        layerGeoGraphic.querySelector('westBoundLongitude').innerText,
-      ),
-      ymin: Number(
-        layerGeoGraphic.querySelector('southBoundLatitude').innerText,
-      ),
-      xmax: Number(
-        layerGeoGraphic.querySelector('eastBoundLongitude').innerText,
-      ),
-      ymax: Number(
-        layerGeoGraphic.querySelector('northBoundLatitude').innerText,
-      ),
+      xmin: Math.min.apply(Math, xList),
+      ymin: Math.min.apply(Math, yList),
+      xmax: Math.max.apply(Math, xList),
+      ymax: Math.max.apply(Math, yList),
     };
+    // layerGeoGraphic = layerParent[0].querySelector('EX_GeographicBoundingBox');
+    // BBoxes['dataset'] = {
+    //   xmin: Number(
+    //     layerGeoGraphic.querySelector('westBoundLongitude').innerText,
+    //   ),
+    //   ymin: Number(
+    //     layerGeoGraphic.querySelector('southBoundLatitude').innerText,
+    //   ),
+    //   xmax: Number(
+    //     layerGeoGraphic.querySelector('eastBoundLongitude').innerText,
+    //   ),
+    //   ymax: Number(
+    //     layerGeoGraphic.querySelector('northBoundLatitude').innerText,
+    //   ),
+    // };
     return BBoxes;
   } // function parseWMS
+
+  parseCapabilities(xml, tag) {
+    return xml.getElementsByTagName(tag);
+  }
+
   // Web Map Tiled Services WMTS
   parseBBOXWMTS(xml) {
     let BBoxes = {};
@@ -2134,6 +2168,9 @@ class MenuWidget extends React.Component {
     );
     let LowerCorner,
       UpperCorner = [];
+    let xList = [];
+    let yList = [];
+    let title = '';
     for (let i in layersChildren) {
       if (
         this.parseCapabilities(layersChildren[i], 'ows:LowerCorner').length !==
@@ -2161,41 +2198,49 @@ class MenuWidget extends React.Component {
           'ows:UpperCorner',
         )[0].innerText.split(' ');
       }
-      BBoxes[
-        this.parseCapabilities(layersChildren[i], 'ows:Title')[0].innerText
-      ] = {
+      title = this.parseCapabilities(layersChildren[i], 'ows:Title')[0]
+        .innerText;
+      BBoxes[title] = {
         xmin: Number(LowerCorner[0]),
         ymin: Number(LowerCorner[1]),
         xmax: Number(UpperCorner[0]),
         ymax: Number(UpperCorner[1]),
       };
-    }
-    if (
-      typeof layerParent === 'object' &&
-      layerParent !== null &&
-      'getElementsByTagName' in layerParent
-    ) {
-      LowerCorner = this.parseCapabilities(
-        layerParent,
-        'ows:LowerCorner',
-      )[0]?.innerText.split(' ');
-      UpperCorner = this.parseCapabilities(
-        layerParent,
-        'ows:UpperCorner',
-      )[0].innerText.split(' ');
-
-      BBoxes['dataset'] = {
-        xmin: Number(LowerCorner[0]),
-        ymin: Number(LowerCorner[1]),
-        xmax: Number(UpperCorner[0]),
-        ymax: Number(UpperCorner[1]),
-      };
-    }
-    return BBoxes;
-  }
+      xList.push(BBoxes[title].xmin);
+      yList.push(BBoxes[title].ymin);
+      xList.push(BBoxes[title].xmax);
+      yList.push(BBoxes[title].ymax);
+    } // For loop
 
-  parseCapabilities(xml, tag) {
-    return xml.getElementsByTagName(tag);
+    BBoxes['dataset'] = {
+      xmin: Math.min.apply(Math, xList),
+      ymin: Math.min.apply(Math, yList),
+      xmax: Math.max.apply(Math, xList),
+      ymax: Math.max.apply(Math, yList),
+    };
+
+    // if (
+    //   typeof layerParent === 'object' &&
+    //   layerParent !== null &&
+    //   'getElementsByTagName' in layerParent
+    // ) {
+    //   LowerCorner = this.parseCapabilities(
+    //     layerParent,
+    //     'ows:LowerCorner',
+    //   )[0]?.innerText.split(' ');
+    //   UpperCorner = this.parseCapabilities(
+    //     layerParent,
+    //     'ows:UpperCorner',
+    //   )[0].innerText.split(' ');
+
+    //   BBoxes['dataset'] = {
+    //     xmin: Number(LowerCorner[0]),
+    //     ymin: Number(LowerCorner[1]),
+    //     xmax: Number(UpperCorner[0]),
+    //     ymax: Number(UpperCorner[1]),
+    //   };
+    // }
+    return BBoxes;
   }
 
   getCapabilities = (url, serviceType) => {
@@ -2221,12 +2266,13 @@ class MenuWidget extends React.Component {
     let firstLayer;
 
     if (this.productId.includes('333e4100b79045daa0ff16466ac83b7f')) {
+      //global dynamic landCover
       this.findDatasetBoundingBox(elem);
 
       BBoxes = this.parseBBOXJSON(this.dataBBox);
     } else if (
-      this.productId.includes('fe8209dffe13454891cea05998c8e456') ||
-      this.productId.includes('8914fde2241a4035818af8f0264fd55e')
+      this.productId.includes('fe8209dffe13454891cea05998c8e456') || //Low Resolution Vegetation Parameters
+      this.productId.includes('8914fde2241a4035818af8f0264fd55e') // Water Parameters
     ) {
       if (
         this.layers[elem.id].fullExtents &&
@@ -2241,12 +2287,10 @@ class MenuWidget extends React.Component {
           ymax: 20037508.342789,
           spatialReference: 3857, // by default wkid 4326
         });
-
         this.view.goTo(myExtent);
       }
     } 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')) {
       await this.getCapabilities(this.url, 'wmts');
@@ -2262,16 +2306,16 @@ class MenuWidget extends React.Component {
       if (
         this.extentInitiated === false &&
         !this.productId.includes('333e4100b79045daa0ff16466ac83b7f') &&
-        !(
-          this.state.url === 'http://localhost:3000/en/map-viewer' ||
-          this.state.url ===
-            'https://clmsdemo.devel6cph.eea.europa.eu/en/map-viewer' ||
-          this.state.url === 'https://clms-prod.eea.europa.eu/en/map-viewer'
-        )
+        this.location.search !== ''
       ) {
+        // firstLayer = BBoxes['dataset'];
         firstLayer = BBoxes.dataset;
       } else if (this.productId.includes('130299ac96e54c30a12edd575eff80f7')) {
-        if (elem.title.includes('Guadeloupe')) {
+        //corine land cover
+        //
+        if (elem.title.includes('LAEA')) {
+          firstLayer = BBoxes['dataset'];
+        } else if (elem.title.includes('Guadeloupe')) {
           firstLayer = BBoxes[Object.keys(BBoxes)[0]];
         } else if (elem.title.includes('French Guiana')) {
           firstLayer = BBoxes[Object.keys(BBoxes)[1]];
@@ -2282,8 +2326,8 @@ class MenuWidget extends React.Component {
         } else if (elem.title.includes('Reunion')) {
           firstLayer = BBoxes[Object.keys(BBoxes)[4]];
         } else {
-          firstLayer =
-            BBoxes[Object.keys(BBoxes)[Object.keys(BBoxes).length - 1]];
+          // firstLayer = BBoxes[Object.keys(BBoxes)[Object.keys(BBoxes).length - 1]];
+          firstLayer = BBoxes['dataset'];
         }
       } else if (
         elem.id.includes('all_present') ||
@@ -2293,7 +2337,9 @@ class MenuWidget extends React.Component {
       ) {
         firstLayer = BBoxes['all_present_lc_a_pol'];
       } else {
-        firstLayer = BBoxes[Object.keys(BBoxes)[0]];
+        // Takes the BBOX corresponding to the layer.
+        firstLayer = BBoxes[elem.attributes.layerid.value];
+        // firstLayer = BBoxes[Object.keys(BBoxes)[0]];
       }
 
       let myExtent = new Extent({
@@ -2303,7 +2349,7 @@ class MenuWidget extends React.Component {
         ymax: firstLayer.ymax,
         // spatialReference: 4326 // by default wkid 4326
       });
-      this.view.goTo(myExtent);
+      this.view.goTo(myExtent); //
     }
   }
   /**
@@ -2914,6 +2960,7 @@ class MenuWidget extends React.Component {
     this.checkInfoWidget();
     this.setState({});
     if (this.productId.includes('333e4100b79045daa0ff16466ac83b7f')) {
+      // global dynamic land cover
       if (this.visibleLayers[elem.id][1] === 'eye-slash') {
         this.map.findLayerById(elem.id).visible = false;
       } else {

package/src/components/MapViewer/config.js

@@ -12,6 +12,13 @@ const config = {
       xmax: 90,
       ymax: 45,
     },
+    geometryZoomIn: {
+      type: 'extent',
+      xmin: -200,
+      ymin: -85,
+      xmax: 200,
+      ymax: 85,
+    },
     activeLayers: [],
   },
   Components: [