@eeacms/volto-arcgis-block 0.1.74 → 0.1.76

package/CHANGELOG.md

@@ -4,6 +4,45 @@ 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.76](https://github.com/eea/volto-arcgis-block/compare/0.1.75...0.1.76) - 25 November 2022
+
+#### :rocket: New Features
+
+- feat: added legends for WMTS and TMS layers [joewdavies - [`cf24e61`](https://github.com/eea/volto-arcgis-block/commit/cf24e6188430724172ced72d0bda116e08845123)]
+- feat: added legends for WMTS and TMS layers [joewdavies - [`2429361`](https://github.com/eea/volto-arcgis-block/commit/2429361bb9cb6d871575dccbb3e1e38a3c13257f)]
+
+#### :hammer_and_wrench: Others
+
+- specify volto-ci version in jenkinsfile cypress [joewdavies - [`2e3a641`](https://github.com/eea/volto-arcgis-block/commit/2e3a64155c24e94227254ab3ed2a88328f15f8af)]
+- ESlint fix [joewdavies - [`3f086d0`](https://github.com/eea/volto-arcgis-block/commit/3f086d052d26a3dbf186a00403be5d5a56fe44cc)]
+- specify volto-ci version in jenkinsfile [joewdavies - [`a4756a7`](https://github.com/eea/volto-arcgis-block/commit/a4756a72218295a5d3a4dd645823b1c6b5631032)]
+- specify volto-ci version in jenkinsfile [joewdavies - [`667f02c`](https://github.com/eea/volto-arcgis-block/commit/667f02c640a858d33cd092e26b79ee80900f63a0)]
+- specify volto-ci version in jenkinsfile [joewdavies - [`c8434f2`](https://github.com/eea/volto-arcgis-block/commit/c8434f2157ec72506b746d5d214d87ff3a72c3f4)]
+- specify volto-ci version in jenkinsfile [joewdavies - [`482e770`](https://github.com/eea/volto-arcgis-block/commit/482e77029a1569f149c4674362897e972a961f5c)]
+- specify volto-ci version in jenkinsfile [joewdavies - [`a5d7ad7`](https://github.com/eea/volto-arcgis-block/commit/a5d7ad7d7579c295659105623d1c160ad593d6ee)]
+### [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

package/Jenkinsfile

@@ -6,6 +6,7 @@ pipeline {
         NAMESPACE = "@eeacms"
         SONARQUBE_TAGS = "volto.eea.europa.eu,clms.land.copernicus.eu,water.europa.eu-freshwater,clmsdemo.devel6cph.eea.europa.eu"
         DEPENDENCIES = ""
+        VOLTO = "15.16.0"
     }
 
   stages {
@@ -76,8 +77,8 @@ pipeline {
             node(label: 'docker') {
               script {
                 try {
-                  sh '''docker pull plone/volto-addon-ci'''
-                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci'''
+                  sh '''docker pull plone/volto-addon-ci:15.x'''
+                  sh '''docker run -i --name="$BUILD_TAG-volto" -e NAMESPACE="$NAMESPACE" -e VOLTO=$VOLTO -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" plone/volto-addon-ci:15.x'''
                   sh '''rm -rf xunit-reports'''
                   sh '''mkdir -p xunit-reports'''
                   sh '''docker cp $BUILD_TAG-volto:/opt/frontend/my-volto-project/coverage xunit-reports/'''
@@ -125,7 +126,7 @@ pipeline {
               script {
                 try {
                   sh '''docker pull plone; docker run -d --rm --name="$BUILD_TAG-plone" -e SITE="Plone" -e PROFILES="profile-plone.restapi:blocks" plone fg'''
-                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci cypress'''
+                  sh '''docker pull plone/volto-addon-ci; docker run -i --name="$BUILD_TAG-cypress" --link $BUILD_TAG-plone:plone -e VOLTO=$VOLTO -e NAMESPACE="$NAMESPACE" -e GIT_NAME=$GIT_NAME -e GIT_BRANCH="$BRANCH_NAME" -e GIT_CHANGE_ID="$CHANGE_ID" -e DEPENDENCIES="$DEPENDENCIES" -e NODE_ENV=test plone/volto-addon-ci cypress'''
                 } finally {
                   try {
                     sh '''rm -rf cypress-reports cypress-results cypress-coverage'''

package/package.json

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

package/src/components/MapViewer/BasemapWidget.jsx

@@ -1,6 +1,9 @@
 import React, { createRef } from 'react';
 import { loadModules } from 'esri-loader';
 var BasemapGallery;
+// var Basemap;
+// var WebTileLayer;
+// var LocalBasemapsSource;
 
 class BasemapWidget extends React.Component {
   /**
@@ -20,9 +23,17 @@ class BasemapWidget extends React.Component {
   }
 
   loader() {
-    return loadModules(['esri/widgets/BasemapGallery']).then(
-      ([_BasemapGallery]) => {
+    return loadModules([
+      'esri/widgets/BasemapGallery',
+      'esri/Basemap',
+      'esri/layers/WebTileLayer',
+      'esri/widgets/BasemapGallery/support/LocalBasemapsSource',
+    ]).then(
+      ([_BasemapGallery, _Basemap, _WebTileLayer, _LocalBasemapsSource]) => {
         BasemapGallery = _BasemapGallery;
+        // Basemap = _Basemap;
+        // WebTileLayer = _WebTileLayer;
+        // LocalBasemapsSource = _LocalBasemapsSource;
       },
     );
   }
@@ -95,9 +106,30 @@ class BasemapWidget extends React.Component {
   async componentDidMount() {
     await this.loader();
     if (!this.container.current) return;
+
+    // custom basemaps
+    // let basemaps = [Basemap.fromId('topo-vector'), Basemap.fromId('hybrid')];
+    // basemaps.push(
+    //   new Basemap({
+    //     baseLayers: [
+    //       new WebTileLayer({
+    //         urlTemplate:
+    //           'https://gisco-services.ec.europa.eu/maps/wmts/OSMCartoV4CompositeEN/EPSG3857/{z}/{x}/{y}.png',
+    //       }),
+    //     ],
+    //     title: 'OSM GISCO',
+    //     id: 'osm-gisco',
+    //   }),
+    // );
+
+    // let customSource = new LocalBasemapsSource({
+    //      basemaps,
+    // });
+
     this.basemapGallery = new BasemapGallery({
       view: this.props.view,
       container: this.container.current.querySelector('.basemap-panel'),
+      // source: customSource
     });
     this.props.view.ui.add(this.container.current, 'top-right');
   }

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();
@@ -737,15 +792,23 @@ class MenuWidget extends React.Component {
         dataset_def.push(idDataset);
       }
 
-      datasets.push(
-        this.metodProcessDataset(
-          product.Datasets[i],
-          index,
-          inheritedIndexProduct,
-          checkProduct,
-        ),
-      );
-      index++;
+      // CLMS-1545
+      if (
+        product.Datasets[i].ViewService !==
+          'https://trial.discomap.eea.europa.eu/arcgis/services/CLMS/WorldCountries/MapServer/WmsServer' &&
+        product.Datasets[i].ViewService !==
+          'https://trial.discomap.eea.europa.eu/arcgis/services/CLMS/WorldCountries/MapServer/WmsServer?'
+      ) {
+        datasets.push(
+          this.metodProcessDataset(
+            product.Datasets[i],
+            index,
+            inheritedIndexProduct,
+            checkProduct,
+          ),
+        );
+        index++;
+      }
     }
 
     // Empty vector, add the first dataset
@@ -802,12 +865,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 +949,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 +1043,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 +1195,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 +1234,20 @@ 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,
+          ViewService: viewService,
         });
-      } 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 +1258,35 @@ class MenuWidget extends React.Component {
           },
           isTimeSeries: isTimeSeries,
           fields: layer.Fields,
+          DatasetId: DatasetId,
+          DatasetTitle: DatasetTitle,
+          ProductId: ProductId,
+          ViewService: viewService,
+          StaticImageLegend: layer.StaticImageLegend,
+          LayerTitle: layer.Title,
         });
       } 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,
+          ViewService: viewService,
         });
       }
     }
-    let style = this.props.download ? { paddingLeft: '4rem' } : {};
+
     return (
       <div
         className="ccl-form-group map-menu-layer"
@@ -1152,6 +1320,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,
+      ViewService: dataset.ViewService,
+      StaticImageLegend: layer.StaticImageLegend,
+      url: dataset.ViewService,
+    });
+  }
+
   /**
    * Method to show/hide a layer. Update checkboxes from dataset and products
    * @param {*} elem Is the checkbox
@@ -1195,6 +1454,9 @@ class MenuWidget extends React.Component {
     } else {
       this.deleteCheckedLayer(elem.id);
       this.layers[elem.id].opacity = 1;
+      this.layers[elem.id].visible = false;
+      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];
@@ -1203,10 +1465,105 @@ class MenuWidget extends React.Component {
     this.updateCheckDataset(parentId);
     this.layersReorder();
     this.checkInfoWidget();
+
+    // toggle custom legend for WMTS and TMS
+    if (
+      this.layers[elem.id].ViewService.toLowerCase().includes('wmts') ||
+      this.layers[elem.id].ViewService.toLowerCase().endsWith('file')
+    ) {
+      this.toggleCustomLegendItem(this.layers[elem.id]);
+    }
     // update DOM
     this.setState({});
   }
 
+  /**
+   * Hide or show a legend image in the legend widget for a WMTS or a TMS layer
+   *
+   * @param Layer
+   */
+  toggleCustomLegendItem(layer) {
+    // check for existing legend item
+    let existingItem = document.getElementById(
+      'custom-legend-item-' + layer.id,
+    );
+
+    if (layer.visible) {
+      if (!existingItem) {
+        // create one
+        this.addCustomItemToLegend(layer);
+      } else {
+        // show existing one
+        existingItem.style.display = 'block';
+      }
+    } else {
+      // hide legend item
+      if (existingItem) {
+        existingItem.style.display = 'none';
+      }
+    }
+  }
+
+  addCustomItemToLegend(layer) {
+    // Find legend widget node
+    const legendDiv = document.querySelectorAll('.esri-widget.esri-legend')[0];
+    let childDiv = legendDiv.firstChild;
+
+    // create legend element
+    let legendItem = this.createStaticLegendImageNode(
+      layer.id,
+      layer.LayerTitle,
+      layer.StaticImageLegend,
+    );
+
+    // append to Legend widet
+    childDiv.appendChild(legendItem);
+
+    // hide no legend message
+    const noLegendMessage = document.querySelectorAll(
+      '.esri-legend__message',
+    )[0];
+    if (noLegendMessage) {
+      noLegendMessage.style.display = 'none';
+    }
+  }
+
+  createStaticLegendImageNode(id, title, imageURL) {
+    let node = document.createElement('div');
+    node.classList.add('esri-legend__service');
+    node.id = 'custom-legend-item-' + id;
+
+    // Create node
+    let template = `
+    <div class="esri-legend__layer"> 
+      <div class="esri-legend__layer-table esri-legend__layer-table--size-ramp" > 
+        <div class="esri-legend__layer-caption"> 
+          ${title} 
+        </div> 
+        <div class="esri-legend__layer-body"> 
+          <div class="esri-legend__layer-row"> 
+            <div class="esri-legend__layer-cell esri-legend__layer-cell--symbols" > 
+              <div class="esri-legend__symbol"> 
+                <img crossorigin="anonymous" 
+                  alt="" 
+                  src="${imageURL}"
+                  style="opacity: 1" 
+                /> 
+              </div> 
+            </div> 
+            <div 
+              class="esri-legend__layer-cell esri-legend__layer-cell--info"
+            ></div> 
+          </div> 
+        </div> 
+      </div> 
+    </div>`;
+
+    node.innerHTML = template;
+
+    return node;
+  }
+
   /**
    * Returns the DOM elements for active layers
    * just in the order they were added to map
@@ -1282,6 +1639,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;
+}