@eeacms/volto-arcgis-block 0.1.74 → 0.1.75

package/CHANGELOG.md

@@ -4,6 +4,29 @@ 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.75](https://github.com/eea/volto-arcgis-block/compare/0.1.74...0.1.75) - 22 November 2022
+
+#### :rocket: New Features
+
+- feat: show zoom in message for snow and ice product when zoom level is below 7 - CLMS-1528 [joewdavies - [`7ac9d04`](https://github.com/eea/volto-arcgis-block/commit/7ac9d04ab96b44b22ea8520e7c8677e286df525e)]
+- feat: show zoom in message for snow and ice product when zoom level is below 7 - CLMS-1528 [joewdavies - [`e803695`](https://github.com/eea/volto-arcgis-block/commit/e803695e46fba76a48186ebdf25c7a74f02e3a08)]
+- feat: show zoom in message for snow and ice product when zoom level is below 7 - CLMS-1528 [joewdavies - [`1734f89`](https://github.com/eea/volto-arcgis-block/commit/1734f89ee8bc16dc1bc18d5d76b3131b044796c5)]
+- feat: show zoom in message for snow and ice product when zoom level is below 7 - CLMS-1528 [joewdavies - [`5f12f70`](https://github.com/eea/volto-arcgis-block/commit/5f12f702061b34421302d6037a87e131c19f3b56)]
+- feat: show zoom in message for snow and ice product when zoom level is below 7 - CLMS-1528 [joewdavies - [`d6e4dea`](https://github.com/eea/volto-arcgis-block/commit/d6e4dea9b5030217ca5faad8c33959e65b9d179b)]
+- feat: load TMS layers JSON asynchronosly [joewdavies - [`a36ac9b`](https://github.com/eea/volto-arcgis-block/commit/a36ac9b99deaa1b5ed344fd869589ea0f053aabb)]
+
+#### :hammer_and_wrench: Others
+
+- prettier fix [joewdavies - [`3855674`](https://github.com/eea/volto-arcgis-block/commit/3855674ce363b58387dc818bf4a86ce50ff7ee38)]
+- prettier fix [joewdavies - [`a900320`](https://github.com/eea/volto-arcgis-block/commit/a9003201ed25be8636c59ca5e075e98f15086b7d)]
+- prettier fix [joewdavies - [`8b4f2d2`](https://github.com/eea/volto-arcgis-block/commit/8b4f2d24815d96c3be14a2455a6a2af844aa16ba)]
+- prettier fix [joewdavies - [`d578f5a`](https://github.com/eea/volto-arcgis-block/commit/d578f5a6fbc54ed3cf24ae2fe9c439daa3b82961)]
+- add default TMS layer if none specified [joewdavies - [`ffbdc0e`](https://github.com/eea/volto-arcgis-block/commit/ffbdc0e4d1e27d0fd886200a9bba29cc5763698c)]
+- ESLint fix [joewdavies - [`a22c35f`](https://github.com/eea/volto-arcgis-block/commit/a22c35f4568c69b654dc414c61b80257d6932430)]
+- attempt to get TMS layer to work with legend widget [joewdavies - [`4271bdd`](https://github.com/eea/volto-arcgis-block/commit/4271bddff97667c7f1a466b53df568b7cb3a3a14)]
+- remove TMS layer correctly [joewdavies - [`9fb63f1`](https://github.com/eea/volto-arcgis-block/commit/9fb63f1983f82fe9452a9830eff640bc136f7137)]
+- remove superfluous logs [joewdavies - [`9b0717b`](https://github.com/eea/volto-arcgis-block/commit/9b0717bed39113b448e10c9ad4e1fecf2d83bb09)]
+- TMS json progress [joewdavies - [`f24c7c7`](https://github.com/eea/volto-arcgis-block/commit/f24c7c7da483221c15a705bf6972075e1f9bc7a6)]
 ### [0.1.74](https://github.com/eea/volto-arcgis-block/compare/0.1.73...0.1.74) - 27 October 2022
 
 ### [0.1.73](https://github.com/eea/volto-arcgis-block/compare/0.1.72...0.1.73) - 26 October 2022
@@ -201,13 +224,10 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 #### :hammer_and_wrench: Others
 
 - Merge pull request #148 from eea/develop [KCarpinteroBM - [`24266fb`](https://github.com/eea/volto-arcgis-block/commit/24266fb3a0c1662d22ae0529dc1d5a25c711cf97)]
-- Revert "[JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`f751f69`](https://github.com/eea/volto-arcgis-block/commit/f751f69f652f0340ae55af6a4dab89d6bdc80906)]
 - Revert "Revert "Mapviewer menu and map viewer options persistence"" [Mikel Larreategi - [`ad6e440`](https://github.com/eea/volto-arcgis-block/commit/ad6e440cdc160cffb1e86e1b26e501dbe648476c)]
 - Revert "code coverage removal" [Mikel Larreategi - [`376f2d1`](https://github.com/eea/volto-arcgis-block/commit/376f2d1cd6e4e5110b3b63d5114af1bcfebe094b)]
 - Revert "Update cypress.json" [Mikel Larreategi - [`43d01a0`](https://github.com/eea/volto-arcgis-block/commit/43d01a0a95a58ef5215c6cbf18223ca30a11b9cc)]
 - Revert "Update cypress.json" [Mikel Larreategi - [`054c4ae`](https://github.com/eea/volto-arcgis-block/commit/054c4ae1767e1f26e6ec7e96a0e26a9711f29f04)]
-- Revert "revert [JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967" [Mikel Larreategi - [`64ab56e`](https://github.com/eea/volto-arcgis-block/commit/64ab56e0f1f8dddc26f26039509a028e34653e64)]
-- revert [JENKINS] Use eeacms/plone-backend and Volto alpha version- Refs #151967 [Mikel Larreategi - [`85ee194`](https://github.com/eea/volto-arcgis-block/commit/85ee1941e029df2b7dc910bf75231c75ffeca8c2)]
 - Update cypress.json [KCarpinteroBM - [`be285ff`](https://github.com/eea/volto-arcgis-block/commit/be285fff0c53e06a0180d5318cce81195eabcf80)]
 - Update cypress.json [KCarpinteroBM - [`a7f2118`](https://github.com/eea/volto-arcgis-block/commit/a7f2118acb7b048b4cef85aa9663c2244a1c9ca0)]
 - linting fix [KCarpinteroBM - [`27e969a`](https://github.com/eea/volto-arcgis-block/commit/27e969a7a411fd4646e0e742ce846efc0d79703e)]
@@ -267,7 +287,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - UX improvements [rodriama - [`151dc4b`](https://github.com/eea/volto-arcgis-block/commit/151dc4b02d0a73fdd66de9d594620ac0fa5f1dbf)]
 - deleted failing tests [KCarpinteroBM - [`ddaa9e6`](https://github.com/eea/volto-arcgis-block/commit/ddaa9e6f06db6960a4c214d3be2420c48b26715d)]
 - cleaning unnecessary files [KCarpinteroBM - [`2c02199`](https://github.com/eea/volto-arcgis-block/commit/2c021990912beb02b603a1de89aecd62e0063769)]
-- Reverting to Automated release 0.1.39 [KCarpinteroBM - [`fb9f317`](https://github.com/eea/volto-arcgis-block/commit/fb9f3176ccdea18fceb329eaac13ced0566ee648)]
 - commands added [KCarpinteroBM - [`049e60b`](https://github.com/eea/volto-arcgis-block/commit/049e60b7d124d1c05abd0b2775b510795f4ed59f)]
 - Mapviewer testing implementation [KCarpinteroBM - [`0103002`](https://github.com/eea/volto-arcgis-block/commit/0103002869eea108e16e3b5ff2e77a725dcc7c4b)]
 ### [0.1.39](https://github.com/eea/volto-arcgis-block/compare/0.1.38...0.1.39) - 24 March 2022
@@ -287,7 +306,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - ESLint fix [rodriama - [`75dae9b`](https://github.com/eea/volto-arcgis-block/commit/75dae9b5bba18ab6d9624f6c99714b4bd2179003)]
 - Remove section title [rodriama - [`ece860e`](https://github.com/eea/volto-arcgis-block/commit/ece860eae3519c7e611abac16e8d53c9a9408b34)]
 - Es-Lint [manuelmartinezbilbomatica - [`39d8d11`](https://github.com/eea/volto-arcgis-block/commit/39d8d11b9096fd603df8510c119d2e12817415d6)]
-- Add Sonarqube tag using clms-frontend addons list [EEA Jenkins - [`bf9f683`](https://github.com/eea/volto-arcgis-block/commit/bf9f683dd35a9edb4cfd9111affcb8f8edbeae89)]
 - FEAT: Parser Time implemented [manuelmartinezbilbomatica - [`689c99e`](https://github.com/eea/volto-arcgis-block/commit/689c99e55221fee6c7c7fafc4ab95ae7a646d3dd)]
 ### [0.1.38](https://github.com/eea/volto-arcgis-block/compare/0.1.37...0.1.38) - 18 March 2022
 
@@ -382,7 +400,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - ESLint fix [rodriama - [`5fd3772`](https://github.com/eea/volto-arcgis-block/commit/5fd3772f197a3a380067962a5638dbf901a4624e)]
 - Pixel info [rodriama - [`1ccef39`](https://github.com/eea/volto-arcgis-block/commit/1ccef39a9adcc3ee94655c77a5a166b613600a08)]
 - NUTS bug fix [rodriama - [`37fe7f3`](https://github.com/eea/volto-arcgis-block/commit/37fe7f3fad2c005e3b7c234b3b0564d5df92fa8c)]
-- Add Sonarqube tag using freshwater-frontend addons list [EEA Jenkins - [`ea5af8b`](https://github.com/eea/volto-arcgis-block/commit/ea5af8b02a5f2ee25b9b0be67cf3792bbbe84ed7)]
 ### [0.1.23](https://github.com/eea/volto-arcgis-block/compare/0.1.22...0.1.23) - 17 December 2021
 
 #### :hammer_and_wrench: Others
@@ -627,7 +644,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Trying to delay ArcGIS modules load [gonzalezsd - [`ff16985`](https://github.com/eea/volto-arcgis-block/commit/ff169858e42d30bfcacc423ffc27762bb9ef05a4)]
 - Run bootstrap to fix files [valentinab25 - [`236893f`](https://github.com/eea/volto-arcgis-block/commit/236893f03314eb638b7667f81b1f91491a98ee17)]
 - fix git_name [valentinab25 - [`c7806c3`](https://github.com/eea/volto-arcgis-block/commit/c7806c312964425dc23e5d4c6973de8b81ddaeac)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`e3afb51`](https://github.com/eea/volto-arcgis-block/commit/e3afb515dda459ee03e2b5d4b56465d2d4ad1503)]
 - Trying to change imports [gonzalezsd - [`d83d7e2`](https://github.com/eea/volto-arcgis-block/commit/d83d7e2f68da4b2a284735847f93c0763a7e13b6)]
 - default design [bipoza - [`88fbe0b`](https://github.com/eea/volto-arcgis-block/commit/88fbe0b2bc73e732e2993324a567f53902e85506)]
 - cleanup of unused code [bipoza - [`b167677`](https://github.com/eea/volto-arcgis-block/commit/b1676771f637f056cad50cb0bc186f2ea79e8517)]

package/package.json

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

package/src/components/MapViewer/InfoWidget.jsx

@@ -297,11 +297,14 @@ class InfoWidget extends React.Component {
                         break;
                       case 'featureLayer':
                         if (data.results.length) {
-                          var graphic = data.results.filter((result) => {
+                          var graphics = data.results.filter((result) => {
                             return result.graphic.layer === layers[index];
-                          })[0].graphic;
-                          if (graphic) {
-                            properties = graphic.attributes;
+                          });
+                          if (graphics[0]) {
+                            let graphic = graphics[0].graphic;
+                            if (graphic) {
+                              properties = graphic.attributes;
+                            }
                           }
                         }
                         this.infoData[index] = {

package/src/components/MapViewer/MenuWidget.jsx

@@ -9,7 +9,7 @@ import TimesliderWidget from './TimesliderWidget';
 import { Toast } from '@plone/volto/components';
 import { toast } from 'react-toastify';
 import { UniversalLink } from '@plone/volto/components';
-var WMSLayer, WMTSLayer, FeatureLayer;
+var WMSLayer, WMTSLayer, FeatureLayer, BaseTileLayer, esriRequest;
 
 const popupSettings = {
   basic: true,
@@ -412,16 +412,28 @@ class MenuWidget extends React.Component {
     this.container = createRef();
     //Initially, we set the state of the component to
     //not be showing the basemap panel
-    this.state = { showMapMenu: false };
+    this.state = { showMapMenu: false, tms_jsx: null };
     // call the props of the layers list (mapviewer.jsx)
     this.compCfg = this.props.conf;
     this.map = this.props.map;
+    this.view = this.props.view;
     this.menuClass =
       'esri-icon-drag-horizontal esri-widget--button esri-widget esri-interactive';
     this.loadFirst = true;
     this.layers = {};
     this.activeLayersJSON = {};
     this.layerGroups = {};
+
+    // add zoomend listener to map to show/hide zoom in message
+    this.view.watch('stationary', (isStationary) => {
+      if (isStationary) {
+        let node = document.getElementById('snow-and-ice-zoom-message');
+        if (node) {
+          let zoom = this.view.get('zoom');
+          node.style.display = zoom > 6 ? 'none' : 'block';
+        }
+      }
+    });
   }
 
   loader() {
@@ -429,11 +441,53 @@ class MenuWidget extends React.Component {
       'esri/layers/WMSLayer',
       'esri/layers/WMTSLayer',
       'esri/layers/FeatureLayer',
-    ]).then(([_WMSLayer, _WMTSLayer, _FeatureLayer]) => {
-      WMSLayer = _WMSLayer;
-      WMTSLayer = _WMTSLayer;
-      FeatureLayer = _FeatureLayer;
+      'esri/layers/BaseTileLayer',
+      'esri/request',
+    ]).then(
+      ([
+        _WMSLayer,
+        _WMTSLayer,
+        _FeatureLayer,
+        _BaseTileLayer,
+        _esriRequest,
+      ]) => {
+        WMSLayer = _WMSLayer;
+        WMTSLayer = _WMTSLayer;
+        FeatureLayer = _FeatureLayer;
+        BaseTileLayer = _BaseTileLayer;
+        esriRequest = _esriRequest;
+      },
+    );
+  }
+
+  // get custom TMS layer JSON
+  getTMSLayersJSON() {
+    let promises = []; // download JSON file calls
+    this.compCfg.forEach((component) => {
+      component.Products.forEach((product) => {
+        product.Datasets.forEach((dataset) => {
+          if (dataset.ViewService.endsWith('file')) {
+            let promise = fetch(dataset.ViewService, { mode: 'no-cors' })
+              .then((response) => {
+                if (!response.ok) {
+                  throw new Error(`HTTP error, status = ${response.status}`);
+                }
+                return response.json();
+              })
+              .then((data) => {
+                // fill dataset.Layer manually
+                dataset.Layer = data.Layers;
+              })
+              .catch((error) => {
+                throw new Error(error);
+              });
+            promises.push(promise);
+          }
+        });
+      });
     });
+
+    return Promise.all(promises);
   }
 
   /**
@@ -505,11 +559,12 @@ class MenuWidget extends React.Component {
   }
 
   /**
-   * This method is executed after the rener method is executed
+   * This method is executed after the render method is executed
    */
   async componentDidMount() {
     loadCss();
     await this.loader();
+    await this.getTMSLayersJSON();
     this.props.view.ui.add(this.container.current, 'top-left');
     if (this.props.download) {
       document.querySelector('.area-panel input:checked').click();
@@ -802,12 +857,38 @@ class MenuWidget extends React.Component {
                   <legend className="ccl-form-legend">
                     {description ? (
                       <Popup
-                        trigger={<span>{product.ProductTitle}</span>}
+                        trigger={
+                          product.ProductId ===
+                            '8474c3b080fa42cc837f1d2338fcf096' ||
+                          product.ProductTitle === 'Snow and Ice Parameters' ? (
+                            <div class="zoom-in-message-container">
+                              <span>{product.ProductTitle}</span>
+                              <div
+                                class="zoom-in-message"
+                                id="snow-and-ice-zoom-message"
+                              >
+                                Zoom in to view on map
+                              </div>
+                            </div>
+                          ) : (
+                            <span>{product.ProductTitle}</span>
+                          )
+                        }
                         content={description}
                         basic
                         className="custom"
                         style={{ transform: 'translateX(-4rem)' }}
                       />
+                    ) : product.ProductId ===
+                        '8474c3b080fa42cc837f1d2338fcf096' ||
+                      product.ProductTitle ===
+                        'High Resolution Snow and Ice Parameters' ? (
+                      <div class="zoom-in-message-container">
+                        <span>{product.ProductTitle}</span>
+                        <div class="zoom-in-message">
+                          Zoom in to view on map
+                        </div>
+                      </div>
                     ) : (
                       <span>{product.ProductTitle}</span>
                     )}
@@ -860,32 +941,93 @@ class MenuWidget extends React.Component {
         ? dataset.DatasetDescription.substr(0, 300) + '...'
         : dataset.DatasetDescription;
 
+    let style = this.props.download
+      ? { paddingLeft: dataset.HandlingLevel ? '0' : '1rem' }
+      : {};
+
     if (dataset.HandlingLevel) {
       this.layerGroups[dataset.DatasetId] = [];
     }
-    for (var i in dataset.Layer) {
-      if (dataset.Layer[i].Default_active === true) {
-        layer_default.push(
-          dataset.Layer[i].LayerId + '_' + inheritedIndexDataset + '_' + i,
+
+    // TMS
+    if (dataset.ViewService.endsWith('file')) {
+      let tmsLayerIndex = 0;
+
+      dataset.Layer.forEach((layer, sublayerIndex) => {
+        if (!layer.LayerId) {
+          layer.LayerId = sublayerIndex;
+        }
+        let inheritedIndexLayer = inheritedIndex + '_' + tmsLayerIndex;
+        let checkboxId = layer.LayerId + '_' + inheritedIndexLayer;
+
+        // add as default
+        if (!layer_default.length) {
+          layer_default.push(checkboxId);
+        }
+        // add each sublayer to this.layers
+        this.processTMSLayer(layer, checkboxId, dataset);
+
+        // build TMS DOM nodes for TOC
+        layers.push(
+          <div
+            className="ccl-form-group map-menu-layer"
+            id={'layer_' + inheritedIndexLayer}
+            key={'a' + tmsLayerIndex}
+            data-timeseries={dataset.IsTimeSeries}
+            style={style}
+          >
+            <input
+              type="checkbox"
+              id={checkboxId}
+              parentid={checkIndex}
+              layerid={layer.LayerId}
+              name="layerCheckbox"
+              value="name"
+              className="ccl-checkbox ccl-required ccl-form-check-input"
+              key={'c' + tmsLayerIndex}
+              title={layer.Title}
+              onChange={(e) => {
+                this.toggleLayer(e.target);
+              }}
+            ></input>
+            <label
+              className="ccl-form-check-label"
+              htmlFor={layer.LayerId + '_' + inheritedIndexLayer}
+              key={'d' + tmsLayerIndex}
+            >
+              <span>{layer.Title}</span>
+            </label>
+          </div>,
         );
+        tmsLayerIndex++;
+      });
+    } else {
+      for (var i in dataset.Layer) {
+        if (dataset.Layer[i].Default_active === true) {
+          layer_default.push(
+            dataset.Layer[i].LayerId + '_' + inheritedIndexDataset + '_' + i,
+          );
+        }
+        if (dataset.HandlingLevel) {
+          this.layerGroups[dataset.DatasetId].push(dataset.Layer[i].LayerId);
+        }
+
+        layers.push(
+          this.metodProcessLayer(
+            dataset.Layer[i],
+            index,
+            inheritedIndexDataset,
+            dataset.ViewService,
+            dataset.TimeSeriesService,
+            checkIndex,
+            dataset.IsTimeSeries,
+            dataset.DatasetId,
+            dataset.DatasetTitle,
+            dataset.ProductId,
+          ),
+        );
+        index++;
       }
-      if (dataset.HandlingLevel) {
-        this.layerGroups[dataset.DatasetId].push(dataset.Layer[i].LayerId);
-      }
-      layers.push(
-        this.metodProcessLayer(
-          dataset.Layer[i],
-          index,
-          inheritedIndexDataset,
-          dataset.ViewService,
-          dataset.TimeSeriesService,
-          checkIndex,
-          dataset.IsTimeSeries,
-          layer_default,
-          dataset.HandlingLevel,
-        ),
-      );
-      index++;
     }
 
     if (!layer_default.length) {
@@ -893,9 +1035,6 @@ class MenuWidget extends React.Component {
         dataset.Layer[0].LayerId + '_' + inheritedIndexDataset + '_0',
       );
     }
-    let style = this.props.download
-      ? { paddingLeft: dataset.HandlingLevel ? '0' : '1rem' }
-      : {};
 
     return (
       <div
@@ -1048,28 +1187,32 @@ class MenuWidget extends React.Component {
     layer,
     layerIndex,
     inheritedIndex,
-    urlWMS,
+    viewService,
     featureInfoUrl,
     parentIndex,
     isTimeSeries,
-    layer_default,
-    handlingLevel,
+    DatasetId,
+    DatasetTitle,
+    ProductId,
   ) {
     //For Legend request
     const legendRequest =
       'request=GetLegendGraphic&version=1.0.0&format=image/png&layer=';
     //For each layer
-    var inheritedIndexLayer = inheritedIndex + '_' + layerIndex;
+    let inheritedIndexLayer = inheritedIndex + '_' + layerIndex;
+    let style = this.props.download ? { paddingLeft: '4rem' } : {};
     //Add sublayers and popup enabled for layers
     if (
       !this.layers.hasOwnProperty(layer.LayerId + '_' + inheritedIndexLayer)
     ) {
-      if (urlWMS.toLowerCase().includes('wms')) {
-        urlWMS = urlWMS.endsWith('?') ? urlWMS : urlWMS + '?';
+      if (viewService.toLowerCase().includes('wms')) {
+        viewService = viewService.endsWith('?')
+          ? viewService
+          : viewService + '?';
         this.layers[layer.LayerId + '_' + inheritedIndexLayer] = new WMSLayer({
-          url: urlWMS,
+          url: viewService,
           featureInfoFormat: 'text/html',
-          featureInfoUrl: urlWMS,
+          featureInfoUrl: viewService,
           //id: layer.LayerId,
           title: '',
           legendEnabled: true,
@@ -1083,16 +1226,19 @@ class MenuWidget extends React.Component {
               legendEnabled: true,
               legendUrl: layer.StaticImageLegend
                 ? layer.StaticImageLegend
-                : urlWMS + legendRequest + layer.LayerId,
+                : viewService + legendRequest + layer.LayerId,
               featureInfoUrl: featureInfoUrl,
             },
           ],
           isTimeSeries: isTimeSeries,
           fields: layer.Fields,
+          DatasetId: DatasetId,
+          DatasetTitle: DatasetTitle,
+          ProductId: ProductId,
         });
-      } else if (urlWMS.toLowerCase().includes('wmts')) {
+      } else if (viewService.toLowerCase().includes('wmts')) {
         this.layers[layer.LayerId + '_' + inheritedIndexLayer] = new WMTSLayer({
-          url: urlWMS.endsWith('?') ? urlWMS : urlWMS + '?',
+          url: viewService.endsWith('?') ? viewService : viewService + '?',
           //id: layer.LayerId,
           title: '',
           _wmtsTitle: layer.Title, // CLMS-1105
@@ -1103,22 +1249,31 @@ class MenuWidget extends React.Component {
           },
           isTimeSeries: isTimeSeries,
           fields: layer.Fields,
+          DatasetId: DatasetId,
+          DatasetTitle: DatasetTitle,
+          ProductId: ProductId,
         });
       } else {
         this.layers[
           layer.LayerId + '_' + inheritedIndexLayer
         ] = new FeatureLayer({
-          url: urlWMS + (urlWMS.endsWith('/') ? '' : '/') + layer.LayerId,
+          url:
+            viewService +
+            (viewService.endsWith('/') ? '' : '/') +
+            layer.LayerId,
           id: layer.LayerId,
           title: layer.Title,
           featureInfoUrl: featureInfoUrl,
           popupEnabled: true,
           isTimeSeries: isTimeSeries,
           fields: layer.Fields,
+          DatasetId: DatasetId,
+          DatasetTitle: DatasetTitle,
+          ProductId: ProductId,
         });
       }
     }
-    let style = this.props.download ? { paddingLeft: '4rem' } : {};
+
     return (
       <div
         className="ccl-form-group map-menu-layer"
@@ -1152,6 +1307,97 @@ class MenuWidget extends React.Component {
     );
   }
 
+  /**
+   * adds a custom TMS layer to this.layers array
+   * @param {*} checkboxId Is the layers checkbox ID
+   */
+  processTMSLayer(layer, checkboxId, dataset) {
+    const CustomTileLayer = BaseTileLayer.createSubclass({
+      properties: {
+        urlTemplate: null,
+        tms: false,
+        tint: {
+          value: null,
+        },
+      },
+
+      // generate the tile url for a given level, row and column
+      getTileUrl: function (level, row, col) {
+        // si es cero será el maximo. las filas serán el array invertido
+        // tengo que extrarer de alguna manera la cantidad de filas y columnas que se muestran.
+
+        return this.urlTemplate
+          .replace('{z}', level)
+          .replace('{x}', col)
+          .replace('{y}', row);
+      },
+
+      // This method fetches tiles for the specified level and size.
+      // Override this method to process the data returned from the server.
+      fetchTile: function (level, row, col, options) {
+        // call getTileUrl() method to construct the URL to tiles
+        // for a given level, row and col provided by the LayerView
+
+        // Images pyramid formula
+        if (this.tms) {
+          var rowmax = 1 << level; // LEVEL 1 * (2 ** 1) = 1 * (2) = 2   ;   LEVEL 2 * (2 ** 2) = 1 * (4) = 4 ; LEVEL 3 * (2 ** 3) = 1 * (8) = 8 . . .
+          row = rowmax - row - 1; // Invert Y axis
+        }
+
+        const url = this.getTileUrl(level, row, col);
+
+        // request for tiles based on the generated url
+        // the signal option ensures that obsolete requests are aborted
+        return esriRequest(url, {
+          responseType: 'image',
+          signal: options && options.signal,
+        }).then(
+          function (response) {
+            // when esri request resolves successfully
+            // get the image from the response
+            const image = response.data;
+            const width = this.tileInfo.size[0];
+            const height = this.tileInfo.size[0];
+            // create a canvas with 2D rendering context
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            //canvas
+            canvas.width = width;
+            canvas.height = height;
+
+            // Draw the blended image onto the canvas.
+            context.drawImage(image, 0, 0, width, height);
+
+            return canvas;
+          }.bind(this),
+        );
+      },
+    });
+    // *******************************************************
+    // end of Custom tile layer class code
+    // *******************************************************
+    this.layers[checkboxId] = new CustomTileLayer({
+      id: checkboxId,
+      tms: true, // True establishes Y axis from the south northwards. False establishes tile origin top left and Y from north southwards (Default False)
+      urlTemplate: layer.LayerUrl,
+      // TMS Service.
+      // 'https://s3-eu-west-1.amazonaws.com/vito-lcv/global/2019/cog-full_l0-colored-full/{z}/{x}/{y}.png',
+      // Google/ESRI/OSM tiling style services
+      // "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+      // "https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}",
+      // "https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg",
+      spatialReference: {
+        wkid: 3857,
+      },
+      title: layer.Title,
+      LayerTitle: layer.Title,
+      DatasetTitle: dataset.DatasetTitle,
+      url: layer.LayerUrl,
+      legendEnabled: true,
+      legendUrl: layer.StaticImageLegend,
+    });
+  }
+
   /**
    * Method to show/hide a layer. Update checkboxes from dataset and products
    * @param {*} elem Is the checkbox
@@ -1195,6 +1441,8 @@ class MenuWidget extends React.Component {
     } else {
       this.deleteCheckedLayer(elem.id);
       this.layers[elem.id].opacity = 1;
+      let mapLayer = this.map.findLayerById(elem.id);
+      if (mapLayer) mapLayer.destroy();
       this.map.remove(this.layers[elem.id]);
       delete this.activeLayersJSON[elem.id];
       delete this.visibleLayers[elem.id];
@@ -1282,6 +1530,7 @@ class MenuWidget extends React.Component {
     } else {
       datasetChecks = document.querySelectorAll(`[parentid=${id}]`);
     }
+
     datasetChecks.forEach((element) => {
       element.checked = value;
       this.toggleDataset(value, element.id, element);

package/src/components/MapViewer/css/ArcgisMap.css

@@ -1006,3 +1006,13 @@ input[type='range']::-ms-track {
   background: transparent;
   box-shadow: none;
 }
+
+.zoom-in-message {
+  padding: 0.1rem 0.6rem 0.1rem 0.6rem;
+  margin-top: 0.2rem;
+  background: #a0b128;
+  border-radius: 10px;
+  color: white;
+  font-size: 0.875rem;
+  text-align: center;
+}