@eeacms/volto-arcgis-block 0.1.22 → 0.1.23

package/CHANGELOG.md

@@ -4,8 +4,28 @@ 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.23](https://github.com/eea/volto-arcgis-block/compare/0.1.22...0.1.23)
+
+- Use cases region highlight [`#71`](https://github.com/eea/volto-arcgis-block/pull/71)
+- Bugs n improvements [`#74`](https://github.com/eea/volto-arcgis-block/pull/74)
+- Add NUTS 2 in the Map viewer [`#72`](https://github.com/eea/volto-arcgis-block/pull/72)
+- Mapviewer menu widget correction [`#73`](https://github.com/eea/volto-arcgis-block/pull/73)
+- Update highlight service [`fbec327`](https://github.com/eea/volto-arcgis-block/commit/fbec3279c44900ec1100affed350a517133997fb)
+- ESLint fix [`4a695e3`](https://github.com/eea/volto-arcgis-block/commit/4a695e39ab3d276483ad2922e7ee2b446826db2c)
+- ESLint fix [`62e6a10`](https://github.com/eea/volto-arcgis-block/commit/62e6a1034a6317a0a45f682248ef1c1bc12081a6)
+- NUTS layer order [`4942c25`](https://github.com/eea/volto-arcgis-block/commit/4942c25ef0fe7c7f239015f8d14910b3ac2238fe)
+- Remove debugger [`bcbb107`](https://github.com/eea/volto-arcgis-block/commit/bcbb1076f80fe773ff3dd2ffb5dc038e5c8f4733)
+- Update layers array key values to unique IDs [`066951d`](https://github.com/eea/volto-arcgis-block/commit/066951d571fc77a96b98cc0650d36d1a22665e49)
+- Remove unused variable [`830349f`](https://github.com/eea/volto-arcgis-block/commit/830349f17e8549f8883acd805302ecb65d35dec4)
+- Add individual region highlight [`6e4cb62`](https://github.com/eea/volto-arcgis-block/commit/6e4cb62d26a493da83e53a10bba8f64ea9df80e3)
+- Update LegendWidget.jsx [`3273d53`](https://github.com/eea/volto-arcgis-block/commit/3273d53183ef17328ddfce7913910671eb5a43a9)
+- Change legend text [`09eb6e0`](https://github.com/eea/volto-arcgis-block/commit/09eb6e08e4199cab914d6300c62af633876579cb)
+
 #### [0.1.22](https://github.com/eea/volto-arcgis-block/compare/0.1.21...0.1.22)
 
+> 10 December 2021
+
+- Develop [`#70`](https://github.com/eea/volto-arcgis-block/pull/70)
 - ESLint fix [`#69`](https://github.com/eea/volto-arcgis-block/pull/69)
 - Bugs n improvements [`#68`](https://github.com/eea/volto-arcgis-block/pull/68)
 - Change services URLs to discomap [`ed4dc62`](https://github.com/eea/volto-arcgis-block/commit/ed4dc62df3af66a71acbe981b3e74a4a621ef2c4)

package/Jenkinsfile

@@ -31,8 +31,8 @@ pipeline {
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
-          not { branch 'master' }
           not { changelog '.*^Automated release [0-9\\.]+$' }
+          not { branch 'master' }
         }
       }
       steps {
@@ -63,7 +63,10 @@ pipeline {
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
-          not { changelog '.*^Automated release [0-9\\.]+$' }
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
         }
       }
       steps {
@@ -108,7 +111,10 @@ pipeline {
       when {
         allOf {
           environment name: 'CHANGE_ID', value: ''
-          not { changelog '.*^Automated release [0-9\\.]+$' }
+          anyOf {
+           not { changelog '.*^Automated release [0-9\\.]+$' }
+           branch 'master'
+          }
         }
       }
       steps {
@@ -159,12 +165,16 @@ pipeline {
 
     stage('Report to SonarQube') {
       when {
+        allOf {
           environment name: 'CHANGE_ID', value: ''
           anyOf {
             branch 'master'
-            branch 'develop'
+            allOf {
+              branch 'develop'
+              not { changelog '.*^Automated release [0-9\\.]+$' }
+            }
           }
-          not { changelog '.*^Automated release [0-9\\.]+$' }
+        }
       }
       steps {
         node(label: 'swarm') {

package/README.md

@@ -1,7 +1,18 @@
 # [WIP] Volto Arcgis Block
+
 [![Releases](https://img.shields.io/github/v/release/eea/volto-arcgis-block)](https://github.com/eea/volto-arcgis-block/releases)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-arcgis-block%2Fmaster&subject=master)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-arcgis-block/job/master/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-arcgis-block-master&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-arcgis-block-master)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-arcgis-block-master&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-arcgis-block-master)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-arcgis-block-master&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-arcgis-block-master)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-arcgis-block-master&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-arcgis-block-master)
+
 [![Pipeline](https://ci.eionet.europa.eu/buildStatus/icon?job=volto-addons%2Fvolto-arcgis-block%2Fdevelop&subject=develop)](https://ci.eionet.europa.eu/view/Github/job/volto-addons/job/volto-arcgis-block/job/develop/display/redirect)
+[![Lines of Code](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-arcgis-block-develop&metric=ncloc)](https://sonarqube.eea.europa.eu/dashboard?id=volto-arcgis-block-develop)
+[![Coverage](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-arcgis-block-develop&metric=coverage)](https://sonarqube.eea.europa.eu/dashboard?id=volto-arcgis-block-develop)
+[![Bugs](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-arcgis-block-develop&metric=bugs)](https://sonarqube.eea.europa.eu/dashboard?id=volto-arcgis-block-develop)
+[![Duplicated Lines (%)](https://sonarqube.eea.europa.eu/api/project_badges/measure?project=volto-arcgis-block-develop&metric=duplicated_lines_density)](https://sonarqube.eea.europa.eu/dashboard?id=volto-arcgis-block-develop)
 
 ## ArcGIS Map integration for Volto blocks
 ****This product is in development, at this time it is not recommended to use it.***
@@ -64,4 +75,84 @@ const customBlocks = (config) => ({
     "@eeacms/volto-clms-theme"
   ],
 ````
-![Style example volto-arcgis-block](docs/styles_example.gif)
+![Style example volto-arcgis-block](docs/styles_example.gif)
+
+## Release
+
+### Automatic release using Jenkins
+
+*  The automatic release is started by creating a [Pull Request](../../compare/master...develop) from `develop` to `master`. The pull request status checks correlated to the branch and PR Jenkins jobs need to be processed successfully. 1 review from a github user with rights is mandatory.
+* It runs on every commit on `master` branch, which is protected from direct commits, only allowing pull request merge commits.
+* The automatic release is done by [Jenkins](https://ci.eionet.europa.eu). The status of the release job can be seen both in the Readme.md badges and the green check/red cross/yellow circle near the last commit information. If you click on the icon, you will have the list of checks that were run. The `continuous-integration/jenkins/branch` link goes to the Jenkins job execution webpage.
+* Automated release scripts are located in the `eeacms/gitflow` docker image, specifically [js-release.sh](https://github.com/eea/eea.docker.gitflow/blob/master/src/js-release.sh) script. It  uses the `release-it` tool.
+* As long as a PR request is open from develop to master, the PR Jenkins job will automatically re-create the CHANGELOG.md and package.json files to be production-ready.
+* The version format must be MAJOR.MINOR.PATCH. By default, next release is set to next minor version (with patch 0).
+* You can manually change the version in `package.json`.  The new version must not be already present in the tags/releases of the repository, otherwise it will be automatically increased by the script. Any changes to the version will trigger a `CHANGELOG.md` re-generation.
+* Automated commits and commits with [JENKINS] or [YARN] in the commit log are excluded from `CHANGELOG.md` file.
+
+### Manual release from the develop branch ( beta release )
+
+#### Installation and configuration of release-it
+
+You need to first install the [release-it](https://github.com/release-it/release-it)  client.
+
+   ```
+   npm install -g release-it
+   ```
+
+Release-it uses the configuration written in the [`.release-it.json`](./.release-it.json) file located in the root of the repository.
+
+Release-it is a tool that automates 4 important steps in the release process:
+
+1. Version increase in `package.json` ( increased from the current version in `package.json`)
+2. `CHANGELOG.md` automatic generation from commit messages ( grouped by releases )
+3. GitHub release on the commit with the changelog and package.json modification on the develop branch
+4. NPM release ( by default it's disabled, but can be enabled in the configuration file )
+
+To configure the authentification, you need to export GITHUB_TOKEN for [GitHub](https://github.com/settings/tokens)
+
+   ```
+   export GITHUB_TOKEN=XXX-XXXXXXXXXXXXXXXXXXXXXX
+   ```
+
+ To configure npm, you can use the `npm login` command or use a configuration file with a TOKEN :
+
+   ```
+   echo "//registry.npmjs.org/:_authToken=YYYYYYYYYYYYYYYYYYYYYYYYYYYYYY" > .npmrc
+   ```
+
+#### Using release-it tool
+
+There are 3 yarn scripts that can be run to do the release
+
+##### yarn release-beta
+
+Automatically calculates and presents 3 beta versions - patch, minor and major for you to choose ( or Other for manual input).
+
+```
+? Select increment (next version):
+❯ prepatch (0.1.1-beta.0)
+  preminor (0.2.0-beta.0)
+  premajor (1.0.0-beta.0)
+  Other, please specify...
+```
+
+##### yarn release-major-beta
+
+Same as `yarn release-beta`, but with premajor version pre-selected.
+
+##### yarn release
+
+Generic command, does not automatically add the `beta` to version, but you can still manually write it if you choose Other.
+
+#### Important notes
+
+> Do not use release-it tool on master branch, the commit on CHANGELOG.md file and the version increase in the package.json file can't be done without a PULL REQUEST.
+
+> Do not keep Pull Requests from develop to master branches open when you are doing beta releases from the develop branch. As long as a PR to master is open, an automatic script will run on every commit and will update both the version and the changelog to a production-ready state - ( MAJOR.MINOR.PATCH mandatory format for version).
+
+
+## How to contribute
+
+See [DEVELOP.md](https://github.com/eea/volto-arcgis-block/blob/master/DEVELOP.md).
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-arcgis-block",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "description": "volto-arcgis-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: CodeSyntax",
@@ -21,6 +21,8 @@
   "scripts": {
     "i18n": "NODE_ENV=production node src/i18n.js",
     "release": "release-it",
+    "release-major-beta": "release-it major --preRelease=beta",
+    "release-beta": "release-it --preRelease=beta",
     "bootstrap": "npm install -g ejs; npm link ejs; node bootstrap",
     "stylelint": "../../../node_modules/stylelint/bin/stylelint.js --allow-empty-input 'src/**/*.{css,less}'",
     "stylelint:overrides": "../../../node_modules/.bin/stylelint --syntax less --allow-empty-input 'theme/**/*.overrides' 'src/**/*.overrides'",

package/src/components/MapViewer/AreaWidget.jsx

@@ -111,6 +111,9 @@ class AreaWidget extends React.Component {
   nuts1handler(e) {
     this.loadNutsService(e.target.value, 1);
   }
+  nuts2handler(e) {
+    this.loadNutsService(e.target.value, 2);
+  }
   nuts3handler(e) {
     this.loadNutsService(e.target.value, 3);
   }
@@ -127,6 +130,18 @@ class AreaWidget extends React.Component {
       definitionExpression: 'LEVL_CODE=' + level,
     });
     this.nutsGroupLayer.add(layer);
+    let index = this.getHighestIndex();
+    this.props.map.reorder(this.nutsGroupLayer, index + 1);
+  }
+  getHighestIndex() {
+    let index = 0;
+    document.querySelectorAll('.active-layer').forEach((layer) => {
+      let value = parseInt(layer.getAttribute('layer-order'));
+      if (value > index) {
+        index = value;
+      }
+    });
+    return index;
   }
   rectanglehandler() {
     this.clearWidget();
@@ -187,33 +202,36 @@ class AreaWidget extends React.Component {
     });
     this.props.map.add(this.nutsGroupLayer);
     this.props.view.on('click', (event) => {
-      this.props.view.hitTest(event).then((response) => {
-        if (response.results.length > 0) {
-          let graphic = response.results.filter((result) => {
-            let layer;
-            if ('nuts0 nuts1 nuts3'.includes(result.graphic.layer.id)) {
-              layer = result.graphic;
-            }
-            return layer;
-          })[0].graphic;
-          if (graphic) {
-            let geometry = graphic.geometry;
-            if (geometry.type === 'polygon') {
-              let nuts = graphic.attributes.NUTS_ID;
-              this.props.updateArea(nuts);
-              let symbol = new SimpleFillSymbol(
-                'solid',
-                new SimpleLineSymbol('solid', new Color([232, 104, 80]), 2),
-                new Color([232, 104, 80, 0.25]),
-              );
-              let highlight = new Graphic(geometry, symbol);
-              this.props.view.graphics.removeAll();
-              this.props.view.graphics.add(highlight);
+      if (this.props.mapViewer.activeWidget === this) {
+        this.props.view.hitTest(event).then((response) => {
+          if (response.results.length > 0) {
+            let graphic = response.results.filter((result) => {
+              let layer;
+              if ('nuts0 nuts1 nuts2 nuts3'.includes(result.graphic.layer.id)) {
+                layer = result.graphic;
+              }
+              return layer;
+            })[0].graphic;
+            if (graphic) {
+              let geometry = graphic.geometry;
+              if (geometry.type === 'polygon') {
+                let nuts = graphic.attributes.NUTS_ID;
+                this.props.updateArea(nuts);
+                let symbol = new SimpleFillSymbol(
+                  'solid',
+                  new SimpleLineSymbol('solid', new Color([232, 104, 80]), 2),
+                  new Color([232, 104, 80, 0.25]),
+                );
+                let highlight = new Graphic(geometry, symbol);
+                this.props.view.graphics.removeAll();
+                this.props.view.graphics.add(highlight);
+              }
             }
           }
-        }
-      });
+        });
+      }
     });
+
     this.props.download
       ? this.props.view.ui.add(this.container)
       : this.props.view.ui.add(this.container.current, 'top-right');
@@ -284,6 +302,22 @@ class AreaWidget extends React.Component {
                     <span>NUTS 1</span>
                   </label>
                 </div>
+                <div className="ccl-form-group">
+                  <input
+                    type="radio"
+                    id="download_area_select_nuts2"
+                    name="downloadAreaSelect"
+                    value="nuts2"
+                    className="ccl-checkbox ccl-required ccl-form-check-input"
+                    onClick={this.nuts2handler.bind(this)}
+                  ></input>
+                  <label
+                    className="ccl-form-radio-label"
+                    htmlFor="download_area_select_nuts2"
+                  >
+                    <span>NUTS 2</span>
+                  </label>
+                </div>
                 <div className="ccl-form-group">
                   <input
                     type="radio"

package/src/components/MapViewer/MenuWidget.jsx

@@ -118,6 +118,23 @@ export const AddCartItem = ({
     setModal(false);
   };
 
+  const checkScrollPosition = () => {
+    let dt = document.querySelector(
+      '.map-menu-dataset[datasetid="' +
+        dataset.DatasetId +
+        '"] .map-dataset-checkbox',
+    );
+    if (
+      dt.offsetTop + dt.offsetHeight + 4 * 16 >
+      document.querySelector('.panels').offsetHeight +
+        document.querySelector('.panels').scrollTop
+    ) {
+      return 'translate(1rem, -5rem)';
+    } else {
+      return 'translate(1rem, 2rem)';
+    }
+  };
+
   return (
     <>
       {showMessage && (
@@ -127,7 +144,7 @@ export const AddCartItem = ({
           style={{
             transform: download
               ? 'translate(1rem, 4rem)'
-              : 'translate(1rem, 2rem)',
+              : checkScrollPosition(),
           }}
         >
           {message}
@@ -595,11 +612,12 @@ class MenuWidget extends React.Component {
       'request=GetLegendGraphic&version=1.0.0&format=image/png&layer=';
     //For each layer
     var inheritedIndexLayer = inheritedIndex + '_' + layerIndex;
-
     //Add sublayers and popup enabled for layers
-    if (!this.layers.hasOwnProperty(layer.LayerId)) {
+    if (
+      !this.layers.hasOwnProperty(layer.LayerId + '_' + inheritedIndexLayer)
+    ) {
       if (urlWMS.toLowerCase().includes('wms')) {
-        this.layers[layer.LayerId] = new WMSLayer({
+        this.layers[layer.LayerId + '_' + inheritedIndexLayer] = new WMSLayer({
           url: urlWMS,
           featureInfoFormat: 'text/html',
           featureInfoUrl: urlWMS,
@@ -619,7 +637,7 @@ class MenuWidget extends React.Component {
           ],
         });
       } else if (urlWMS.toLowerCase().includes('wmts')) {
-        this.layers[layer.LayerId] = new WMTSLayer({
+        this.layers[layer.LayerId + '_' + inheritedIndexLayer] = new WMTSLayer({
           url: urlWMS,
           //id: layer.LayerId,
           title: '',
@@ -629,10 +647,12 @@ class MenuWidget extends React.Component {
           },
         });
       } else {
-        this.layers[layer.LayerId] = new FeatureLayer({
-          url: urlWMS,
-          //id: layer.LayerId,
-          title: '',
+        this.layers[
+          layer.LayerId + '_' + inheritedIndexLayer
+        ] = new FeatureLayer({
+          url: urlWMS + (urlWMS.endsWith('/') ? '' : '/') + layer.LayerId,
+          id: layer.LayerId,
+          title: layer.Title,
           popupEnabled: true,
         });
       }
@@ -680,13 +700,17 @@ class MenuWidget extends React.Component {
     let parentId = elem.getAttribute('parentid');
     let layerId = elem.getAttribute('layerid');
     if (elem.checked) {
-      this.map.add(this.layers[layerId]);
+      this.map.add(this.layers[elem.id]);
       this.visibleLayers[elem.id] = ['fas', 'eye'];
       this.timeLayers[elem.id] = ['fas', 'step-forward'];
       this.activeLayersJSON[elem.id] = this.addActiveLayer(
         elem,
         Object.keys(this.activeLayersJSON).length,
       );
+      let nuts = this.map.layers.items.find((layer) => layer.title === 'nuts');
+      if (nuts) {
+        this.map.reorder(nuts, this.map.layers.items.length + 1);
+      }
     } else {
       let checkboxes = document.getElementsByName('layerCheckbox');
       let repeatedLayers = [];
@@ -696,7 +720,7 @@ class MenuWidget extends React.Component {
         }
       }
       if (repeatedLayers.length === 0) {
-        this.map.remove(this.layers[layerId]);
+        this.map.remove(this.layers[elem.id]);
         delete this.activeLayersJSON[elem.id];
         delete this.visibleLayers[elem.id];
         delete this.timeLayers[elem.id];
@@ -831,10 +855,7 @@ class MenuWidget extends React.Component {
             />
           </span>
           {this.timeLayers[elem.id][1] === 'stop' &&
-            this.renderTimeslider(
-              elem,
-              this.layers[elem.getAttribute('layerid')],
-            )}
+            this.renderTimeslider(elem, this.layers[elem.id])}
         </div>
       </div>
     );
@@ -875,10 +896,7 @@ class MenuWidget extends React.Component {
     this.layerReorder(reorder_elem.id, counter);
     while ((reorder_elem = reorder_elem.nextSibling)) {
       reorder_elem.setAttribute('layer-order', counter++);
-      this.layerReorder(
-        this.layers[reorder_elem.getAttribute('layer-id')],
-        counter,
-      );
+      this.layerReorder(this.layers[reorder_elem.id], counter);
     }
   }
 
@@ -919,21 +937,21 @@ class MenuWidget extends React.Component {
     if (this.timeLayers[elem.id][1] === 'step-forward') {
       activeLayers.forEach((layer) => {
         let layerId = layer.getAttribute('layer-id');
-        let order = this.activeLayersJSON[layerId].props['layer-order'];
+        let order = this.activeLayersJSON[elem.id].props['layer-order'];
         if (elem.id === layerId) {
           this.timeLayers[elem.id] = ['fas', 'stop'];
-          if (this.visibleLayers[layerId][1] === 'eye-slash') {
-            this.layers[layerId].visible = true;
-            this.visibleLayers[layerId] = ['fas', 'eye'];
+          if (this.visibleLayers[elem.id][1] === 'eye-slash') {
+            this.layers[elem.id].visible = true;
+            this.visibleLayers[elem.id] = ['fas', 'eye'];
           }
           document
             .querySelector(
-              '.active-layer[layer-id="' + layerId + '"] .active-layer-hide',
+              '.active-layer[layer-id="' + elem.id + '"] .active-layer-hide',
             )
             .classList.add('locked');
           document
             .querySelector(
-              '.active-layer[layer-id="' + layerId + '"] .active-layer-delete',
+              '.active-layer[layer-id="' + elem.id + '"] .active-layer-delete',
             )
             .classList.add('locked');
           document.querySelector('#products_label').classList.add('locked');
@@ -941,15 +959,15 @@ class MenuWidget extends React.Component {
             document.querySelector('#download_label').classList.add('locked');
           this.activeLayersJSON[elem.id] = this.addActiveLayer(elem, order);
         } else {
-          if (this.visibleLayers[layerId][1] === 'eye') {
-            this.layers[layerId].visible = false;
-            this.visibleLayers[layerId] = ['fas', 'eye-slash'];
+          if (this.visibleLayers[elem.id][1] === 'eye') {
+            this.layers[elem.id].visible = false;
+            this.visibleLayers[elem.id] = ['fas', 'eye-slash'];
           }
           document
-            .querySelector('.active-layer[layer-id="' + layerId + '"]')
+            .querySelector('.active-layer[layer-id="' + elem.id + '"]')
             .classList.add('locked');
-          this.activeLayersJSON[layerId] = this.addActiveLayer(
-            document.getElementById(layerId),
+          this.activeLayersJSON[elem.id] = this.addActiveLayer(
+            document.getElementById(elem.id),
             order,
           );
         }
@@ -957,18 +975,18 @@ class MenuWidget extends React.Component {
     } else {
       activeLayers.forEach((layer) => {
         let layerId = layer.getAttribute('layer-id');
-        let order = this.activeLayersJSON[layerId].props['layer-order'];
+        let order = this.activeLayersJSON[elem.id].props['layer-order'];
         if (elem.id === layerId) {
           this.timeLayers[elem.id] = ['fas', 'step-forward'];
           this.activeLayersJSON[elem.id] = this.addActiveLayer(elem, order);
           document
             .querySelector(
-              '.active-layer[layer-id="' + layerId + '"] .active-layer-hide',
+              '.active-layer[layer-id="' + elem.id + '"] .active-layer-hide',
             )
             .classList.remove('locked');
           document
             .querySelector(
-              '.active-layer[layer-id="' + layerId + '"] .active-layer-delete',
+              '.active-layer[layer-id="' + elem.id + '"] .active-layer-delete',
             )
             .classList.remove('locked');
           document.querySelector('#products_label').classList.remove('locked');
@@ -983,16 +1001,16 @@ class MenuWidget extends React.Component {
               document.querySelector('.esri-ui-bottom-right'),
             );
         } else {
-          if (this.visibleLayers[layerId][1] === 'eye-slash') {
-            this.layers[layerId].visible = true;
-            this.visibleLayers[layerId] = ['fas', 'eye'];
-            this.activeLayersJSON[layerId] = this.addActiveLayer(
-              document.getElementById(layerId),
+          if (this.visibleLayers[elem.id][1] === 'eye-slash') {
+            this.layers[elem.id].visible = true;
+            this.visibleLayers[elem.id] = ['fas', 'eye'];
+            this.activeLayersJSON[elem.id] = this.addActiveLayer(
+              document.getElementById(elem.id),
               order,
             );
           }
           document
-            .querySelector('.active-layer[layer-id="' + layerId + '"]')
+            .querySelector('.active-layer[layer-id="' + elem.id + '"]')
             .classList.remove('locked');
         }
       });
@@ -1006,13 +1024,13 @@ class MenuWidget extends React.Component {
    * @param {*} id id from elem
    */
   eyeLayer(elem) {
-    let elementId = elem.getAttribute('layerid');
+    // let elementId = elem.getAttribute('layerid');
     if (this.visibleLayers[elem.id][1] === 'eye') {
-      this.layers[elementId].visible = false;
+      this.layers[elem.id].visible = false;
       this.visibleLayers[elem.id] = ['fas', 'eye-slash'];
     } else {
-      this.map.add(this.layers[elementId]);
-      this.layers[elementId].visible = true;
+      this.map.add(this.layers[elem.id]);
+      this.layers[elem.id].visible = true;
       this.visibleLayers[elem.id] = ['fas', 'eye'];
     }
     this.activeLayersJSON[elem.id] = this.addActiveLayer(elem, 0);

package/src/components/UseCasesMapViewer/InfoWidget.jsx

@@ -5,7 +5,6 @@ let layerControl,
   view,
   mapViewer,
   layerSpatial,
-  layerNUTS,
   processedData = [];
 class InfoWidget extends React.Component {
   constructor(props) {
@@ -15,7 +14,6 @@ class InfoWidget extends React.Component {
     navigationControl = props.navigationControl;
     layerControl = props.layerControl;
     layerSpatial = props.layerSpatial;
-    layerNUTS = props.layerNUTS;
     this.container = createRef();
   }
 
@@ -25,13 +23,11 @@ class InfoWidget extends React.Component {
    * @returns lateralMenu DOM
    */
   showUseCase(UseCase) {
-    layerControl.getGeometry(UseCase.Spatial_coverage, layerNUTS);
     let responsibleOrganizationOrPerson = UseCase.Responsible_organisation
       ? UseCase.Responsible_organisation
       : UseCase.Contact_person_name_
       ? UseCase.Contact_person_name_
       : '';
-    layerControl.showLayer(layerNUTS.id);
     return (
       <>
         <div className="use-cases-products-title">Use case detail</div>

package/src/components/UseCasesMapViewer/LayerControl.jsx

@@ -28,11 +28,11 @@ class LayerControl {
   }
 
   getGeometry(country, layer) {
-    layer.definitionExpression = `LEVL_CODE = 0 AND (`;
+    layer.definitionExpression = `(`;
     if (country === 'EU' || country === 'EEA') {
       let states = mapViewer.props.cfg.Codes[country];
       for (let i = 0; i < states.length; i++) {
-        layer.definitionExpression += `CNTR_CODE = '${states[i]}'`;
+        layer.definitionExpression += `CNTR_ID = '${states[i]}'`;
         if (i < states.length - 1) {
           layer.definitionExpression += ' OR ';
         } else {
@@ -40,7 +40,7 @@ class LayerControl {
         }
       }
     } else {
-      layer.definitionExpression += `CNTR_CODE = 'none')`;
+      layer.definitionExpression += `CNTR_ID = '${country}')`;
     }
   }
 

package/src/components/UseCasesMapViewer/LegendWidget.jsx

@@ -48,7 +48,7 @@ class LegendWidget extends React.Component {
 
       this.container.current.children[1].querySelector(
         '.esri-legend__service-label',
-      ).textContent = 'Use Cases Coverage Legend';
+      ).textContent = 'Legend';
 
       try {
         this.container.current.children[1]
@@ -63,13 +63,13 @@ class LegendWidget extends React.Component {
         let currentValue = legendCells[i].textContent;
         switch (currentValue.toLowerCase()) {
           case 'eu':
-            legendCells[i].textContent = 'EU27+UK';
+            legendCells[i].textContent = 'EU27+UK coverage';
             break;
           case 'eea':
-            legendCells[i].textContent = 'EEA 38';
+            legendCells[i].textContent = 'EEA38+UK coverage';
             break;
           case 'others':
-            legendCells[i].textContent = 'Country';
+            legendCells[i].textContent = 'Country coverage';
             break;
           default:
             break;

package/src/components/UseCasesMapViewer/NavigationControl.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-let layerRegion, layerSpatial, layerNUTS, mapViewer;
+let layerRegion, layerSpatial, layerHighlight, mapViewer;
 class NavigationControl extends React.Component {
   constructor(props) {
     super(props);
@@ -11,7 +11,7 @@ class NavigationControl extends React.Component {
     mapViewer = props.mapViewer;
     layerRegion = props.layerRegion;
     layerSpatial = props.layerSpatial;
-    layerNUTS = props.layerNUTS;
+    layerHighlight = props.layerHighlight;
   }
 
   /**
@@ -82,8 +82,7 @@ class NavigationControl extends React.Component {
 
    */
   returnToPrevious() {
-    // this.layerControl.hideLayer(layerNUTS.id);
-    this.layerControl.getGeometry('none', layerNUTS);
+    // this.layerControl.hideLayer(layerHighlight.id);
 
     switch (
       mapViewer.state.previousState === mapViewer.state.useCaseLevel
@@ -91,10 +90,12 @@ class NavigationControl extends React.Component {
         : mapViewer.state.previousState
     ) {
       case 1:
+        this.layerControl.getGeometry('none', layerHighlight);
         this.showWorld();
         break;
 
       case 2:
+        this.layerControl.getGeometry('none', layerHighlight);
         this.navigateToRegion(
           mapViewer.state.selectedUseCase.BBOX,
           mapViewer.state.selectedUseCase.Region,

package/src/components/UseCasesMapViewer/UseCasesMapViewer.jsx

@@ -17,7 +17,7 @@ let Map,
   layerControl,
   navigationControl,
   layerSpatial,
-  layerNUTS;
+  layerHighlight;
 
 class UseCasesMapViewer extends React.Component {
   constructor(props) {
@@ -48,10 +48,10 @@ class UseCasesMapViewer extends React.Component {
       label: props.cfg.RegionLabel,
       showLegend: false,
     };
-    this.NUTSConfig = {
-      id: 'NUTSLayer',
-      url: props.cfg.Services.NUTS_service,
-      render: props.cfg.NUTSRenderer,
+    this.HighlightConfig = {
+      id: 'HightlightLayer',
+      url: props.cfg.Services.Highlight_service,
+      render: props.cfg.HightlightRenderer,
       showLegend: false,
     };
     this.state = {
@@ -156,21 +156,21 @@ class UseCasesMapViewer extends React.Component {
       legend: this.regionConfig.showLegend,
     });
 
-    layerNUTS = layerControl.createLayer({
-      id: this.NUTSConfig.id,
-      url: this.NUTSConfig.url,
-      legend: this.NUTSConfig.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];
-    layerNUTS.renderer = this.NUTSConfig.render;
+    layerHighlight.renderer = this.HighlightConfig.render;
 
-    layerControl.addLayer(layerNUTS);
+    layerControl.addLayer(layerHighlight);
     layerControl.addLayer(layerRegion);
     layerControl.addLayer(layerSpatial);
 
-    layerControl.hideLayer(layerNUTS.id);
+    layerControl.hideLayer(layerHighlight.id);
     layerControl.hideLayer(layerSpatial.id);
 
     navigationControl = new NavigationControl({
@@ -181,7 +181,7 @@ class UseCasesMapViewer extends React.Component {
       mapViewer: this,
       layerRegion: layerRegion,
       layerSpatial: layerSpatial,
-      layerNUTS: layerNUTS,
+      layerHighlight: layerHighlight,
     });
 
     this.setMapFunctions(
@@ -298,6 +298,8 @@ class UseCasesMapViewer extends React.Component {
                 longitude: selectedPoint.Longitude,
               };
               layerControl.checkIfMorePoints(latLon, (data, MapViewerThis) => {
+                layerControl.getGeometry(selectedSpatial, layerHighlight);
+                layerControl.showLayer(layerHighlight.id);
                 if (data.features.length !== 1) {
                   MapViewerThis.setState((prevState) => {
                     return {
@@ -424,7 +426,7 @@ class UseCasesMapViewer extends React.Component {
           navigationControl={navigationControl}
           layerSpatial={layerSpatial}
           thumbnail={this.thumbnail}
-          layerNUTS={layerNUTS}
+          layerHighlight={layerHighlight}
         />
       );
     }

package/src/components/UseCasesMapViewer/config.js

@@ -33,8 +33,8 @@ const config = {
     ],
   },
   Services: {
-    NUTS_service:
-      'https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/NUTS_2021/MapServer/0',
+    Highlight_service:
+      'https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/UseCasesWorldCountries/MapServer/1',
     RegionLayer:
       'https://trial.discomap.eea.europa.eu/arcgis/rest/services/CLMS/UseCasesRegion_count/MapServer/0',
     SpatialCoverageLayer:
@@ -119,7 +119,7 @@ const config = {
     ],
   },
 
-  NUTSRenderer: {
+  HightlightRenderer: {
     type: 'unique-value',
     field: 'LEVL_CODE',
     defaultSymbol: {