@eeacms/volto-n2k 0.1.15 → 1.0.1

package/.coverage.babel.config.js

@@ -2,7 +2,7 @@ const defaultBabel = require('@plone/volto/babel');
 
 function applyDefault(api) {
   const voltoBabel = defaultBabel(api);
-  voltoBabel.plugins.push('@babel/plugin-transform-modules-commonjs', 'transform-class-properties', 'istanbul');
+  voltoBabel.plugins.push('istanbul');
   return voltoBabel;
 }
 

package/.i18n.babel.config.js

@@ -0,0 +1 @@
+module.exports = require('@plone/volto/babel');

package/.project.eslintrc.js

@@ -0,0 +1,46 @@
+const fs = require('fs');
+const path = require('path');
+
+const projectRootPath = fs.realpathSync('./project');    // __dirname
+const packageJson = require(path.join(projectRootPath, 'package.json'));
+const jsConfig = require(path.join(projectRootPath, 'jsconfig.json')).compilerOptions;
+
+const pathsConfig = jsConfig.paths;
+
+let voltoPath = path.join(projectRootPath, 'node_modules/@plone/volto');
+
+Object.keys(pathsConfig).forEach(pkg => {
+  if (pkg === '@plone/volto') {
+    voltoPath = `./${jsConfig.baseUrl}/${pathsConfig[pkg][0]}`;
+  }
+});
+const AddonConfigurationRegistry = require(`${voltoPath}/addon-registry.js`);
+const reg = new AddonConfigurationRegistry(projectRootPath);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(reg.packages).map(o => [
+  o,
+  reg.packages[o].modulePath,
+]);
+
+
+module.exports = {
+  extends: `${projectRootPath}/node_modules/@plone/volto/.eslintrc`,
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', '@plone/volto/src'],
+          ...addonAliases,
+          ['@package', `${__dirname}/src`],
+          ['~', `${__dirname}/src`],
+        ],
+        extensions: ['.js', '.jsx', '.json'],
+      },
+      'babel-plugin-root-import': {
+        rootPathSuffix: 'src',
+      },
+    },
+  },
+};
+

package/CHANGELOG.md

@@ -4,11 +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.15](https://github.com/eea/volto-n2k/compare/0.1.14...0.1.15) - 19 October 2022
+### [1.0.1](https://github.com/eea/volto-n2k/compare/1.0.0...1.0.1) - 2 November 2022
+
+#### :hammer_and_wrench: Others
+
+- Update [Miu Razvan - [`923d3f5`](https://github.com/eea/volto-n2k/commit/923d3f5213dfa930ba7aa6fcd85fd75b7ed709a4)]
+- Fix language selector [Miu Razvan - [`a47cffa`](https://github.com/eea/volto-n2k/commit/a47cffa07bb74b5337e36611dc0c8f037c887430)]
+- Use eea basemap [Miu Razvan - [`1531a7c`](https://github.com/eea/volto-n2k/commit/1531a7ca624bb7c1ad584983b19ecc86fa182340)]
+- bugfix for maps - macos [Claudia Ifrim - [`881d066`](https://github.com/eea/volto-n2k/commit/881d06614e517d1d31da712ae3b7562e375f8664)]
+- change basemap for explore species [Claudia Ifrim - [`cd0f217`](https://github.com/eea/volto-n2k/commit/cd0f217f89743892f2a682f0210a29b6daf93698)]
+- change basemap for explore habitats [Claudia Ifrim - [`43535a8`](https://github.com/eea/volto-n2k/commit/43535a82952c460bb712bdc6c995bf24c404b023)]
+- change basemap for explore sites [Claudia Ifrim - [`dd854c7`](https://github.com/eea/volto-n2k/commit/dd854c75b17854a067ffa863863d0b984db99b1b)]
+## [1.0.0](https://github.com/eea/volto-n2k/compare/0.1.15...1.0.0) - 1 November 2022
 
 #### :hammer_and_wrench: Others
 
-- Update [Miu Razvan - [`d26e4b1`](https://github.com/eea/volto-n2k/commit/d26e4b125e03ee106473bae2c893953f9d4932fc)]
+- Update dependencies [Miu Razvan - [`bba4c51`](https://github.com/eea/volto-n2k/commit/bba4c5182605a167e9543be169a18fed4eefd55e)]
+- Update [Miu Razvan - [`8851f91`](https://github.com/eea/volto-n2k/commit/8851f912c4fa42fae62bb43f9f78452ebaa7052d)]
+- Update [Miu Razvan - [`bfa0e45`](https://github.com/eea/volto-n2k/commit/bfa0e457d93ed95c579bbee55de6f536bedb122f)]
+- Use volto-bise develop branch [Miu Razvan - [`5bc318b`](https://github.com/eea/volto-n2k/commit/5bc318b2f96dcb6c7a7c7e9141d29be005031784)]
+- Update [Miu Razvan - [`5f9827a`](https://github.com/eea/volto-n2k/commit/5f9827a7a06a31dbc761eaf7d005b6c24e287d72)]
+- Update [Miu Razvan - [`4aa3901`](https://github.com/eea/volto-n2k/commit/4aa3901867b8d6b11e3356e726fa12a077c5acb2)]
+### [0.1.15](https://github.com/eea/volto-n2k/compare/0.1.14...0.1.15) - 19 October 2022
+
 ### [0.1.14](https://github.com/eea/volto-n2k/compare/0.1.13...0.1.14) - 18 October 2022
 
 #### :hammer_and_wrench: Others

package/README.md

@@ -59,78 +59,7 @@ Demo 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).
-
+See [RELEASE.md](https://github.com/eea/volto-n2k/blob/master/RELEASE.md).
 
 ## How to contribute
 

package/RELEASE.md

@@ -0,0 +1,74 @@
+## 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).
+

package/babel.config.js

@@ -0,0 +1,17 @@
+module.exports = function (api) {
+  api.cache(true);
+  const presets = ['razzle'];
+  const plugins = [
+    [
+      'react-intl', // React Intl extractor, required for the whole i18n infrastructure to work
+      {
+        messagesDir: './build/messages/',
+      },
+    ],
+  ];
+
+  return {
+    plugins,
+    presets,
+  };
+};

package/cypress.config.js

@@ -0,0 +1,26 @@
+const { defineConfig } = require('cypress');
+
+module.exports = defineConfig({
+  viewportWidth: 1280,
+  defaultCommandTimeout: 8888,
+  chromeWebSecurity: false,
+  reporter: 'junit',
+  video: true,
+  retries: {
+    runMode: 8,
+    openMode: 0,
+  },
+  reporterOptions: {
+    mochaFile: 'cypress/reports/cypress-[hash].xml',
+    jenkinsMode: true,
+    toConsole: true,
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      // e2e testing node events setup code
+      require('@cypress/code-coverage/task')(on, config);
+      return config;
+    },
+    baseUrl: 'http://localhost:3000',
+  },
+});

package/jest-addon.config.js

@@ -9,18 +9,18 @@ module.exports = {
     '@plone/volto/babel': '<rootDir>/node_modules/@plone/volto/babel',
     '@plone/volto/(.*)$': '<rootDir>/node_modules/@plone/volto/src/$1',
     '@package/(.*)$': '<rootDir>/src/$1',
+    '@root/(.*)$': '<rootDir>/src/$1',
     '@plone/volto-quanta/(.*)$': '<rootDir>/src/addons/volto-quanta/src/$1',
     '@eeacms/(.*?)/(.*)$': '<rootDir>/src/addons/$1/src/$2',
-    'volto-slate/(.*)$': '<rootDir>/src/addons/volto-slate/src/$1',
+    '@plone/volto-slate':
+      '<rootDir>/node_modules/@plone/volto/packages/volto-slate/src',
     '~/(.*)$': '<rootDir>/src/$1',
     'load-volto-addons':
       '<rootDir>/node_modules/@plone/volto/jest-addons-loader.js',
+    '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
   },
   transform: {
     '^.+\\.js(x)?$': 'babel-jest',
-    '^.+\\.css$': 'jest-css-modules',
-    '^.+\\.less$': 'jest-css-modules',
-    '^.+\\.scss$': 'jest-css-modules',
     '^.+\\.(png)$': 'jest-file',
     '^.+\\.(jpg)$': 'jest-file',
     '^.+\\.(svg)$': './node_modules/@plone/volto/jest-svgsystem-transform.js',

package/locales/volto.pot

@@ -0,0 +1,69 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: Plone\n"
+"POT-Creation-Date: 2022-11-01T00:27:35.893Z\n"
+"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=utf-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=1; plural=0;\n"
+"Language-Code: en\n"
+"Language-Name: English\n"
+"Preferred-Encodings: utf-8\n"
+"Domain: volto\n"
+
+#: components/theme/Navigation/Navigation
+# defaultMessage: Close menu
+msgid "Close menu"
+msgstr ""
+
+#: components/manage/Blocks/SlateSVG/index
+# defaultMessage: Edit slate svg
+msgid "Edit slate svg"
+msgstr ""
+
+#: components/theme/Navigation/Navigation
+# defaultMessage: Open menu
+msgid "Open menu"
+msgstr ""
+
+#: components/manage/Blocks/SlateSVG/index
+# defaultMessage: Remove slate svg
+msgid "Remove slate svg"
+msgstr ""
+
+#: components/theme/Sitemap/Sitemap
+# defaultMessage: Sitemap
+msgid "Sitemap"
+msgstr ""
+
+#: components/manage/Blocks/Landing/EditBlockWrapper
+# defaultMessage: Unknown Block {block}
+msgid "Unknown Block"
+msgstr ""
+
+#: components/theme/Footer/Footer
+# defaultMessage: Copyright notice
+msgid "copyright_notice"
+msgstr ""
+
+#: components/manage/Blocks/Landing/EditBlockWrapper
+# defaultMessage: delete
+msgid "delete"
+msgstr ""
+
+#: components/theme/Footer/Footer
+# defaultMessage: Home
+msgid "home"
+msgstr ""
+
+#: components/theme/Footer/Footer
+# defaultMessage: Privacy and legal notice
+msgid "legal_notice"
+msgstr ""
+
+#: components/theme/Footer/Footer
+# defaultMessage: Sitemap
+msgid "sitemap"
+msgstr ""

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "0.1.15",
+  "version": "1.0.1",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -17,7 +17,8 @@
     "@eeacms/volto-datablocks",
     "@eeacms/volto-openlayers-map",
     "@eeacms/volto-resize-helper",
-    "@eeacms/volto-tabs-block"
+    "@eeacms/volto-tabs-block",
+    "@eeacms/volto-bise"
   ],
   "repository": {
     "type": "git",
@@ -28,6 +29,7 @@
     "@eeacms/volto-resize-helper": "*",
     "@eeacms/volto-openlayers-map": "*",
     "@eeacms/volto-tabs-block": "*",
+    "@eeacms/volto-bise": "*",
     "volto-slate": "*",
     "d3": "^7.6.1",
     "d3-shape": "^3.1.0",
@@ -38,23 +40,28 @@
     "slick-carousel": "1.8.1"
   },
   "devDependencies": {
-    "@cypress/code-coverage": "^3.9.5",
-    "md5": "^2.3.0",
-    "babel-plugin-transform-class-properties": "^6.24.1"
+    "@plone/scripts": "*",
+    "@cypress/code-coverage": "^3.10.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "md5": "^2.3.0"
   },
   "scripts": {
     "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'",
-    "stylelint:fix": "yarn stylelint --fix && yarn stylelint:overrides --fix",
-    "prettier": "../../../node_modules/.bin/prettier --single-quote --check 'src/**/*.{js,jsx,json,css,less,md}'",
-    "prettier:fix": "../../../node_modules/.bin/prettier --single-quote --write 'src/**/*.{js,jsx,json,css,less,md}'",
-    "lint": "../../../node_modules/eslint/bin/eslint.js --max-warnings=0 'src/**/*.{js,jsx}'",
-    "lint:fix": "../../../node_modules/eslint/bin/eslint.js --fix 'src/**/*.{js,jsx}'",
-    "cypress:run": "../../../node_modules/cypress/bin/cypress run",
-    "cypress:open": "../../../node_modules/cypress/bin/cypress open"
+    "test": "make test",
+    "test:fix": "make test-update",
+    "pre-commit": "yarn stylelint:fix && yarn prettier:fix && yarn lint:fix",
+    "stylelint": "make stylelint",
+    "stylelint:overrides": "make stylelint-overrides",
+    "stylelint:fix": "make stylelint-fix",
+    "prettier": "make prettier",
+    "prettier:fix": "make prettier-fix",
+    "lint": "make lint",
+    "lint:fix": "make lint-fix",
+    "i18n": "make i18n",
+    "cypress:run": "make cypress-run",
+    "cypress:open": "make cypress-open"
   }
 }

package/src/components/index.js

@@ -1,3 +1,3 @@
-export Header from '@eeacms/volto-n2k/components/theme/Header/Header';
-export Footer from '@eeacms/volto-n2k/components/theme/Footer/Footer';
-export Sitemap from '@eeacms/volto-n2k/components/theme/Sitemap/Sitemap';
+export { default as Header } from '@eeacms/volto-n2k/components/theme/Header/Header';
+export { default as Footer } from '@eeacms/volto-n2k/components/theme/Footer/Footer';
+export { default as Sitemap } from '@eeacms/volto-n2k/components/theme/Sitemap/Sitemap';

package/src/components/manage/Blocks/CddaShape/View.jsx

@@ -11,6 +11,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { site_code = [] } = provider_data;
@@ -18,6 +19,17 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -57,10 +69,11 @@ const View = (props) => {
             minZoom: 10,
             zoom: 10,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
             <Layer.Vector
               source={vectorSource}
               style={

package/src/components/manage/Blocks/ExploreHabitats/View.jsx

@@ -12,7 +12,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
-  const [tileWMSSource, setTileWMSSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
 
   const { results = [], payload = {} } = props.search || {};
@@ -27,7 +27,18 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
-    setTileWMSSource(
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+          with: 256,
+          height: 256,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
       new source.TileWMS({
         extent: [
           -3959514.742799999,
@@ -42,7 +53,7 @@ const View = (props) => {
         // Countries have transparency, so do not fade tiles:
         transition: 0,
       }),
-    );
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -108,11 +119,12 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
-            <Layer.Tile source={tileWMSSource} zIndex={1} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+            <Layer.Tile source={tileWMSSources[1]} zIndex={1} />
             <Layer.Vector
               source={vectorSource}
               title="highlightLayer"

package/src/components/manage/Blocks/ExploreSites/View.jsx

@@ -12,7 +12,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
-  const [tileWMSSource, setTileWMSSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
 
   const { results = [], payload = {} } = props.search || {};
@@ -27,7 +27,16 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
-    setTileWMSSource(
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
       new source.TileWMS({
         extent: [
           -3603195.606899999,
@@ -39,10 +48,9 @@ const View = (props) => {
           'https://bio.discomap.eea.europa.eu/arcgis/services/ProtectedSites/Natura2000Sites/MapServer/WMSServer',
         params: { LAYERS: '2', TILED: true },
         serverType: 'geoserver',
-        // Countries have transparency, so do not fade tiles:
         transition: 0,
       }),
-    );
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -106,11 +114,12 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
-            <Layer.Tile source={tileWMSSource} zIndex={1} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+            <Layer.Tile source={tileWMSSources[1]} zIndex={1} />
             <Layer.Vector
               source={vectorSource}
               title="highlightLayer"

package/src/components/manage/Blocks/ExploreSpecies/View.jsx

@@ -12,7 +12,7 @@ import './style.less';
 const View = (props) => {
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
-  const [tileWMSSource, setTileWMSSource] = useState(null);
+  const [tileWMSSources, setTileWMSSources] = useState([]);
   const { extent, format, proj, style, source } = openlayers;
 
   const { results = [], payload = {} } = props.search || {};
@@ -27,7 +27,16 @@ const View = (props) => {
   useEffect(() => {
     if (__SERVER__) return;
     setVectorSource(new source.Vector());
-    setTileWMSSource(
+    setTileWMSSources([
+      new source.TileWMS({
+        url: 'https://gisco-services.ec.europa.eu/maps/service',
+        params: {
+          LAYERS: 'OSMPositronComposite',
+          TILED: true,
+        },
+        serverType: 'geoserver',
+        transition: 0,
+      }),
       new source.TileWMS({
         extent: [
           -3690067.3068000004,
@@ -42,7 +51,7 @@ const View = (props) => {
         // Countries have transparency, so do not fade tiles:
         transition: 0,
       }),
-    );
+    ]);
     /* eslint-disable-next-line */
   }, []);
 
@@ -108,11 +117,12 @@ const View = (props) => {
             showFullExtent: true,
             zoom: 5,
           }}
+          pixelRatio={1}
           {...options}
         >
           <Layers>
-            <Layer.Tile zIndex={0} />
-            <Layer.Tile source={tileWMSSource} zIndex={1} />
+            <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+            <Layer.Tile source={tileWMSSources[1]} zIndex={1} />
             <Layer.Vector
               source={vectorSource}
               title="highlightLayer"