@eeacms/volto-n2k 1.1.4 → 1.1.6

package/CHANGELOG.md

@@ -4,11 +4,51 @@ 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).
 
-### [1.1.4](https://github.com/eea/volto-n2k/compare/1.1.3...1.1.4) - 16 January 2025
+### [1.1.6](https://github.com/eea/volto-n2k/compare/1.1.5...1.1.6) - 23 June 2025
 
-#### :bug: Bug Fixes
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`8231cbf`](https://github.com/eea/volto-n2k/commit/8231cbf9aada31924e4e79e1757d3ca4dbb6ed10)]
+- style: Automated code fix [eea-jenkins - [`924b48f`](https://github.com/eea/volto-n2k/commit/924b48fc053bad993dbef1ca8d64a3847727299c)]
+- style: Automated code fix [eea-jenkins - [`516d098`](https://github.com/eea/volto-n2k/commit/516d0986bbe882686878bb42d9a48eb062222c03)]
+- style: Automated code fix [eea-jenkins - [`6836c3e`](https://github.com/eea/volto-n2k/commit/6836c3e0542f602286eee3321d1f190364f50fb9)]
+- style: Automated code fix [eea-jenkins - [`a513b0e`](https://github.com/eea/volto-n2k/commit/a513b0ee92965caffffd8305f00e1e3c4ecb23cc)]
+- style: Automated code fix [eea-jenkins - [`fcf78ea`](https://github.com/eea/volto-n2k/commit/fcf78eaa96ce7cfdcaa29db08e473f5217d43858)]
+- style: Automated code fix [eea-jenkins - [`4d55dd4`](https://github.com/eea/volto-n2k/commit/4d55dd4199d130e841398b893f51ecb6e2a70487)]
+- style: Automated code fix [eea-jenkins - [`f13d5b5`](https://github.com/eea/volto-n2k/commit/f13d5b5a64f6de9fe87999ae9e87d9e69d171581)]
+- style: Automated code fix [eea-jenkins - [`cea8ba8`](https://github.com/eea/volto-n2k/commit/cea8ba8d6cfb74ced07f3d5cbbd1f74f9aeb28ea)]
+- style: Automated code fix [eea-jenkins - [`73b990c`](https://github.com/eea/volto-n2k/commit/73b990ca03ab0cc97e000a1bda8b503a3463984f)]
+
+#### :hammer_and_wrench: Others
+
+- update site banner for natda [Claudia Ifrim - [`9a41070`](https://github.com/eea/volto-n2k/commit/9a410704364cafbdfe13bc3c159922f31a6b10c3)]
+- show habitat priotity [Claudia Ifrim - [`205f0ed`](https://github.com/eea/volto-n2k/commit/205f0ed9b1a9c49c824e69f41104cbd5ab36768a)]
+- fix lint [vladcalin-edw - [`ca7b199`](https://github.com/eea/volto-n2k/commit/ca7b1995315ea7d76ecf092e02672bd39e2b6067)]
+- Fixed habitats filter and ui breaking [vladcalin-edw - [`a5e9024`](https://github.com/eea/volto-n2k/commit/a5e90240cf0b653e4f1daf7288b29ed33bd095f8)]
+- fix warnings [Claudia Ifrim - [`87b03f2`](https://github.com/eea/volto-n2k/commit/87b03f2b7ef88814452063dd1f9af2b31f2bc04e)]
+- fix sonar [vladcalin-edw - [`c054b68`](https://github.com/eea/volto-n2k/commit/c054b683522dfd3350eff1a302746dc6810596d2)]
+- fix eslint errors [vladcalin-edw - [`78604e8`](https://github.com/eea/volto-n2k/commit/78604e8fdd7129726d2321c7a3cef04abedebb70)]
+- restart jenkins [vladcalin-edw - [`f61974a`](https://github.com/eea/volto-n2k/commit/f61974a4bbbbfbf829d7867ff301da0492e629fd)]
+- species banner avoiding rerenders [vladcalin-edw - [`82b25dc`](https://github.com/eea/volto-n2k/commit/82b25dcd51408fd5c8926cde71584d9dc4963649)]
+- performance improvement [vladcalin-edw - [`a0db347`](https://github.com/eea/volto-n2k/commit/a0db3478e1abd70d65c615ce7ba5c82ccb57034e)]
+- query layer 3 and layer 7 [Claudia Ifrim - [`64b2c7d`](https://github.com/eea/volto-n2k/commit/64b2c7de6ea82a376f0f9ae2128f98ab20d96def)]
+- fix sonarqube [vladcalin-edw - [`b207555`](https://github.com/eea/volto-n2k/commit/b207555ee533cce97f4f4d2d22a7eb84240dd76f)]
+- fix sonarqube [vladcalin-edw - [`8726d0f`](https://github.com/eea/volto-n2k/commit/8726d0fbed394b6b1dec6be99da8250b159c1be8)]
+- fix lint issue [vladcalin-edw - [`7570ec3`](https://github.com/eea/volto-n2k/commit/7570ec3ee87c9d7e13f96bc0ec17edef48977d4e)]
+- cleanup [vladcalin-edw - [`6dd7033`](https://github.com/eea/volto-n2k/commit/6dd7033385bd9db25107873d1c252a2d890493e5)]
+- cleanup [vladcalin-edw - [`69f712b`](https://github.com/eea/volto-n2k/commit/69f712b733dc5a6a34c03c1c046fcd82c8ac49fd)]
+- added priority filter, sort by coverage, sites [vladcalin-edw - [`340f3d4`](https://github.com/eea/volto-n2k/commit/340f3d4e7eda946d6b1254c19dad854611ab96c4)]
+- changed label naming back to formatLabel [vladcalin-edw - [`4f93eeb`](https://github.com/eea/volto-n2k/commit/4f93eeba28545e28ee31a854da433099d7db5cf2)]
+- habitats filtering with hardcoded values [vladcalin-edw - [`ccdda01`](https://github.com/eea/volto-n2k/commit/ccdda013a90d91a05d50c811bb52a1036e729362)]
+- in progress [vladcalin-edw - [`f2669ec`](https://github.com/eea/volto-n2k/commit/f2669ec6c07237cc574f24a08511294cd3e8e4d7)]
+### [1.1.5](https://github.com/eea/volto-n2k/compare/1.1.4...1.1.5) - 18 February 2025
 
-- fix: remove number for priority habitat type [Claudia Ifrim - [`7d65e7d`](https://github.com/eea/volto-n2k/commit/7d65e7d95de554b0ea3dc34e960f59fb9b9d88e7)]
+#### :hammer_and_wrench: Others
+
+- Scroll to banner on page change [Miu Razvan - [`3195762`](https://github.com/eea/volto-n2k/commit/31957629fdb1addb596f86183251ac9b272b26b6)]
+- fix font size + decimals [Claudia Ifrim - [`4beb02b`](https://github.com/eea/volto-n2k/commit/4beb02bd8bd69a6ef76510166e240b80190b9d12)]
+- show number of caves [Claudia Ifrim - [`e3876b8`](https://github.com/eea/volto-n2k/commit/e3876b8624886c8055692c4324f258a90578170a)]
+### [1.1.4](https://github.com/eea/volto-n2k/compare/1.1.3...1.1.4) - 16 January 2025
 
 ### [1.1.3](https://github.com/eea/volto-n2k/compare/1.1.2...1.1.3) - 9 January 2025
 
@@ -66,7 +106,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
 #### :house: Internal changes
 
-- chore: [JENKINS] Refactor automated testing [valentinab25 - [`e4f9fc8`](https://github.com/eea/volto-n2k/commit/e4f9fc800b753b97cca7c685bc47dd48804276f0)]
 - chore: husky, lint-staged use fixed versions [valentinab25 - [`647d621`](https://github.com/eea/volto-n2k/commit/647d621d52400c50f5bc629b3ddc4f2121f14ffa)]
 - chore:volto 16 in tests, update docs, fix stylelint overrides [valentinab25 - [`60d94b6`](https://github.com/eea/volto-n2k/commit/60d94b61ff8826abc57af9616793a1a247f585b5)]
 
@@ -81,11 +120,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - try to use volto-spotlight theme in jenkins [Miu Razvan - [`ec0b952`](https://github.com/eea/volto-n2k/commit/ec0b9525b967f907922ae660bd9f520119cd80c1)]
 - remove waitForResourceToLoad [ana-oprea - [`eaded9b`](https://github.com/eea/volto-n2k/commit/eaded9b9ecd1ca2eb78aa8dd65838c063d95db85)]
 - update image size from 300 to 800 px [Claudia Ifrim - [`8d9270a`](https://github.com/eea/volto-n2k/commit/8d9270a09506278ceaea25e8a72abdf5b22fcc78)]
-- test: [JENKINS] Use java17 for sonarqube scanner [valentinab25 - [`350f8a6`](https://github.com/eea/volto-n2k/commit/350f8a6928aafbf168472b572f8041a79f71f577)]
-- test: [JENKINS] Run cypress in started frontend container [valentinab25 - [`99b3a84`](https://github.com/eea/volto-n2k/commit/99b3a84a266710fadf7d430117359b741cadede8)]
-- test: [JENKINS] Add cpu limit on cypress docker [valentinab25 - [`050ac98`](https://github.com/eea/volto-n2k/commit/050ac982ec39e9a1b4885b665cdc118fca7b1283)]
-- test: [JENKINS] Increase shm-size to cypress docker [valentinab25 - [`3546040`](https://github.com/eea/volto-n2k/commit/35460409817f496fc752ab34e37d6d33a069b2e9)]
-- test: [JENKINS] Improve cypress time [valentinab25 - [`06a4ab1`](https://github.com/eea/volto-n2k/commit/06a4ab151799b8cdf4a316dbcb0c323e0f568e30)]
 - test: EN locales, pre-commit fix, feature PRs checks Refs #257193 [valentinab25 - [`4850d6a`](https://github.com/eea/volto-n2k/commit/4850d6a65349fe49dbe9244c30592ae38c9aeaba)]
 - test: Update Makefile and docker-compose to align it with Jenkinsfile [valentinab25 - [`2c91856`](https://github.com/eea/volto-n2k/commit/2c9185688a2fe6b36e5eeb2963f6c8676e3c5628)]
 ### [1.0.33](https://github.com/eea/volto-n2k/compare/1.0.32...1.0.33) - 3 July 2023
@@ -342,7 +376,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Update [razvanMiu - [`42ab50e`](https://github.com/eea/volto-n2k/commit/42ab50e6681a47251d15ac06b836c6f8c27157fa)]
 - Added bubble chart [razvanMiu - [`89fba5e`](https://github.com/eea/volto-n2k/commit/89fba5e5db41aa955ba2d0ed58c9f0042c461504)]
 - Group species by id_eunis in species list [razvanMiu - [`543c957`](https://github.com/eea/volto-n2k/commit/543c9573b53acd8eecc9afbb6ae7beeddba53966)]
-- Add Sonarqube tag using frontend addons list [EEA Jenkins - [`2ca3e4c`](https://github.com/eea/volto-n2k/commit/2ca3e4c092211f92339791d71db81f5b4ca2d562)]
 - update maps - species and habitats distribution maps [Claudia Ifrim - [`ad12eb1`](https://github.com/eea/volto-n2k/commit/ad12eb141907d6f28444f1eafc3f687735d2a68d)]
 - update format for common name and author [Claudia Ifrim - [`26b7a2f`](https://github.com/eea/volto-n2k/commit/26b7a2f3d20c7701b57fb24f39fc7dfeceec3ce8)]
 - update format for species name (common / scientific) [Claudia Ifrim - [`abdedcf`](https://github.com/eea/volto-n2k/commit/abdedcfe645665031dedf050fd2c5cdde8c14a50)]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-n2k",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "volto-n2k: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

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

@@ -3,7 +3,7 @@ import isArray from 'lodash/isArray';
 import isString from 'lodash/isString';
 import Map from '@eeacms/volto-openlayers-map/Map';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 
 // layer definitions
 const smallScaleLayerId = 1;
@@ -57,6 +57,7 @@ const dynamicLayerDefinition = `
 ]`;
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const [sources, setSources] = useState([]);
   const [tiles, setTiles] = useState([]);
   const [extent, setExtent] = useState(null);
@@ -200,4 +201,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default withOpenLayers(View);

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

@@ -4,11 +4,12 @@ import Map from '@eeacms/volto-openlayers-map/Map';
 import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
 import { Controls } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { getCddaShapeURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
@@ -121,4 +122,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default withOpenLayers(View);

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

@@ -5,11 +5,12 @@ import Map from '@eeacms/volto-openlayers-map/Map';
 import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
 import { Controls } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { getActiveHabitatsURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -185,4 +186,4 @@ const View = (props) => {
 
 export default connect((state) => ({
   search: state.table_search || {},
-}))(View);
+}))(withOpenLayers(View));

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

@@ -5,11 +5,12 @@ import Map from '@eeacms/volto-openlayers-map/Map';
 import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
 import { Controls } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { getActiveSitesURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -176,4 +177,4 @@ const View = (props) => {
 
 export default connect((state) => ({
   search: state.table_search || {},
-}))(View);
+}))(withOpenLayers(View));

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

@@ -5,11 +5,12 @@ import Map from '@eeacms/volto-openlayers-map/Map';
 import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
 import { Controls } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { getActiveSpeciesURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
   const [tileWMSSources, setTileWMSSources] = useState([]);
@@ -179,4 +180,4 @@ const View = (props) => {
 
 export default connect((state) => ({
   search: state.table_search || {},
-}))(View);
+}))(withOpenLayers(View));

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

@@ -4,11 +4,12 @@ import Map from '@eeacms/volto-openlayers-map/Map';
 import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
 import { Controls } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { getHabitatDistributionURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
@@ -110,4 +111,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default withOpenLayers(View);

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

@@ -4,11 +4,12 @@ import Map from '@eeacms/volto-openlayers-map/Map';
 import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
 import { Controls } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { getHabitatProtectedSitesURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
@@ -110,4 +111,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default withOpenLayers(View);

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

@@ -1,17 +1,17 @@
-import React, { useRef, useMemo, useState } from 'react';
-import { compose } from 'redux';
-import cx from 'classnames';
-import loadable from '@loadable/component';
-import { Icon } from '@plone/volto/components';
-import { flattenToAppURL } from '@plone/volto/helpers';
 import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
 import { connectToMultipleProviders } from '@eeacms/volto-datablocks/hocs';
 import { replaceQueryParam } from '@eeacms/volto-n2k/helpers';
 import arrowLeft from '@eeacms/volto-n2k/icons/arrow-left.svg';
 import arrowRight from '@eeacms/volto-n2k/icons/arrow-right.svg';
+import loadable from '@loadable/component';
+import { Icon } from '@plone/volto/components';
+import { flattenToAppURL } from '@plone/volto/helpers';
+import cx from 'classnames';
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { compose } from 'redux';
 
-import './style.less';
 import 'swiper/css';
+import './style.less';
 
 const SwiperLoader = loadable.lib(() => import('swiper'));
 const SwiperReactLoader = loadable.lib(() => import('swiper/react'));
@@ -23,21 +23,34 @@ const getSource = (source) => {
   return parsedSource;
 };
 
-const _View = (props) => {
+const ViewComponent = (props) => {
   const swiperEl = useRef();
   const previewEl = useRef();
   const [activeSlide, setActiveSlide] = useState(0);
-  const habitat_provider = flattenToAppURL(props.data.habitat_provider);
-  const habitat_pictures_provider = flattenToAppURL(
-    props.data.habitat_pictures_provider,
+
+  const habitat_provider = useMemo(
+    () => flattenToAppURL(props.data.habitat_provider),
+    [props.data.habitat_provider],
+  );
+  const habitat_pictures_provider = useMemo(
+    () => flattenToAppURL(props.data.habitat_pictures_provider),
+    [props.data.habitat_pictures_provider],
+  );
+
+  const habitat = useMemo(
+    () => props.providers_data?.[habitat_provider] || {},
+    [props.providers_data, habitat_provider],
   );
-  const habitat = props.providers_data?.[habitat_provider] || {};
   const habitat_pictures = useMemo(
     () => props.providers_data?.[habitat_pictures_provider] || {},
     [props.providers_data, habitat_pictures_provider],
   );
 
-  const { code_2000 = [], scientific_name = [] } = habitat;
+  const {
+    code_2000 = [],
+    scientific_name = [],
+    habitat_prioriy = [],
+  } = habitat;
   const { attribution_copyright = [] } = habitat_pictures;
 
   const pictures = useMemo(
@@ -49,6 +62,28 @@ const _View = (props) => {
     [pictures],
   );
 
+  const handleSliderPrevious = useCallback(() => {
+    swiperEl.current.slidePrev();
+    if (previewEl.current?.[0]) {
+      previewEl.current[0].slidePrev();
+    }
+    if (previewEl.current?.[1]) {
+      previewEl.current[1].slidePrev();
+    }
+    setActiveSlide(swiperEl.current.realIndex);
+  }, []);
+
+  const handleSliderNext = useCallback(() => {
+    swiperEl.current.slideNext();
+    if (previewEl.current?.[0]) {
+      previewEl.current[0].slideNext();
+    }
+    if (previewEl.current?.[1]) {
+      previewEl.current[1].slideNext();
+    }
+    setActiveSlide(swiperEl.current.realIndex);
+  }, []);
+
   if (!habitat_provider && props.mode === 'edit') {
     return 'Habitat banner block, habitat provider undefined';
   }
@@ -64,6 +99,11 @@ const _View = (props) => {
           <p className="info">
             Habitats Directive Annex I code&nbsp;&nbsp;&nbsp;{code_2000[0]}
           </p>
+          {habitat_prioriy[0] && (
+            <p className="info" style={{ marginTop: '1rem' }}>
+              Priority habitat type
+            </p>
+          )}
         </div>
         {pictures_length > 0 && (
           <div className={cx('carousel one-slide')}>
@@ -74,16 +114,7 @@ const _View = (props) => {
                 <>
                   <button
                     className="swiper-button image-swiper-button-prev"
-                    onClick={() => {
-                      swiperEl.current.slidePrev();
-                      if (previewEl.current?.[0]) {
-                        previewEl.current[0].slidePrev();
-                      }
-                      if (previewEl.current?.[1]) {
-                        previewEl.current[1].slidePrev();
-                      }
-                      setActiveSlide(swiperEl.current.realIndex);
-                    }}
+                    onClick={handleSliderPrevious}
                   >
                     <Icon
                       className="icon-left"
@@ -94,16 +125,7 @@ const _View = (props) => {
                   </button>
                   <button
                     className="swiper-button image-swiper-button-next"
-                    onClick={() => {
-                      swiperEl.current.slideNext();
-                      if (previewEl.current?.[0]) {
-                        previewEl.current[0].slideNext();
-                      }
-                      if (previewEl.current?.[1]) {
-                        previewEl.current[1].slideNext();
-                      }
-                      setActiveSlide(swiperEl.current.realIndex);
-                    }}
+                    onClick={handleSliderNext}
                   >
                     <Icon
                       className="icon-right"
@@ -139,7 +161,7 @@ const _View = (props) => {
                               }}
                             >
                               {pictures.map((source, index) => (
-                                <SwiperSlide>
+                                <SwiperSlide key={source}>
                                   <img
                                     src={getSource(source)}
                                     alt={pictures[index]}
@@ -162,7 +184,7 @@ const _View = (props) => {
   );
 };
 
-const View = compose(
+const ViewCompose = compose(
   connectToMultipleProviders((props) => ({
     providers: [
       {
@@ -171,12 +193,12 @@ const View = compose(
       { provider_url: props.data?.habitat_pictures_provider },
     ],
   })),
-)(_View);
+)(ViewComponent);
 
-export default function $View(props) {
+export default function View(props) {
   return (
     <VisibilitySensor Placeholder={() => <div>loading....&nbsp;</div>}>
-      <View {...props} />
+      <ViewCompose {...props} />
     </VisibilitySensor>
   );
 }

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

@@ -3,7 +3,7 @@ import isArray from 'lodash/isArray';
 import isString from 'lodash/isString';
 import Map from '@eeacms/volto-openlayers-map/Map';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 
 let dynamicLayerDefinition = `
 [
@@ -43,6 +43,7 @@ let dynamicLayerDefinition = `
 ]`;
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const mapRef = useRef();
   const [sources, setSources] = useState([]);
   const [tiles, setTiles] = useState([]);
@@ -159,4 +160,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default withOpenLayers(View);

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

@@ -12,14 +12,15 @@ const View = (props) => {
     country_name,
     site_name,
     designation = [],
-    cdda_designation_national_language = [],
+    iucn_category = [],
     site_type = [],
     site_code = [],
+    national_id = [],
     area_ha = [],
     year_stablished = [],
     number_protected_habitat_types = [],
     number_protected_species = [],
-    major_ecosystem_type = [],
+    marine_area_percentage = [],
   } = provider_data;
 
   if (!site_code[0]) return '';
@@ -31,7 +32,9 @@ const View = (props) => {
             <h2 className="country-title">{site_name}</h2>
             <p className="site-name">{country_name}</p>
             {designation ? (
-              <p className="site-designation">{designation}</p>
+              <p className="site-designation">
+                Designation type: {designation}
+              </p>
             ) : (
               ''
             )}
@@ -42,68 +45,99 @@ const View = (props) => {
                 <>
                   <div className="site-detail">
                     <div className="upper">
-                      {cdda_designation_national_language[0] ? (
-                        <div>{cdda_designation_national_language}</div>
+                      {site_code[0] ? <div>{site_code}</div> : <div>-</div>}
+                    </div>
+                    <div className="lower">NatDA Site Code</div>
+                  </div>
+
+                  <div className="site-detail">
+                    <div className="upper">
+                      {isNumber(area_ha[0]) ? (
+                        <div>{area_ha} ha</div>
                       ) : (
-                        <div>-</div>
+                        <div>No data</div>
                       )}
                     </div>
-                    <div className="lower">Designation (National Language)</div>
+                    <div className="lower">Reported area</div>
                   </div>
 
                   <div className="site-detail">
                     <div className="upper">
-                      {designation[0] ? <div>{designation}</div> : <div>-</div>}
+                      {year_stablished[0] ? (
+                        <div>{year_stablished}</div>
+                      ) : (
+                        <div>-</div>
+                      )}
                     </div>
-                    <div className="lower">Designation (English)</div>
+                    <div className="lower">Site established</div>
                   </div>
-                </>
-              )}
 
-              <div className="site-detail">
-                <div className="upper">
-                  {site_code[0] ? <div>{site_code}</div> : <div>-</div>}
-                </div>
-                <div className="lower">Site code</div>
-              </div>
-
-              <div className="site-detail">
-                <div className="upper">
-                  {isNumber(area_ha[0]) ? (
-                    <div>{area_ha} ha</div>
+                  {national_id > 0 ? (
+                    <div className="site-detail">
+                      <div className="upper">
+                        <div>{national_id}</div>
+                      </div>
+                      <div className="lower">National Site Code</div>
+                    </div>
                   ) : (
-                    <div>No data</div>
+                    ''
                   )}
-                </div>
-                <div className="lower">Reported area</div>
-              </div>
 
-              <div className="site-detail">
-                <div className="upper">
-                  {year_stablished[0] ? (
-                    <div>{year_stablished}</div>
+                  <div className="site-detail">
+                    <div className="upper">
+                      {iucn_category[0] ? (
+                        <div>{iucn_category}</div>
+                      ) : (
+                        <div>Not Reported</div>
+                      )}
+                    </div>
+                    <div className="lower">IUCN Management Category</div>
+                  </div>
+
+                  {marine_area_percentage > 0 ? (
+                    <div className="site-detail">
+                      <div className="upper">
+                        <div>{marine_area_percentage} %</div>
+                      </div>
+                      <div className="lower">Marine Area</div>
+                    </div>
                   ) : (
-                    <div>-</div>
+                    ''
                   )}
-                </div>
-                <div className="lower">Site established</div>
-              </div>
-
-              {site_type[0] === 'CDDA' && (
-                <div className="site-detail">
-                  <div className="upper">
-                    {major_ecosystem_type[0] ? (
-                      <div>{major_ecosystem_type}</div>
-                    ) : (
-                      <div>-</div>
-                    )}
-                  </div>
-                  <div className="lower">Ecosystem</div>
-                </div>
+                </>
               )}
 
-              {site_type[0] === 'Natura2000' && (
+              {['Natura2000', 'Emerald'].includes(site_type[0]) && (
                 <>
+                  <div className="site-detail">
+                    <div className="upper">
+                      {site_code[0] ? <div>{site_code}</div> : <div>-</div>}
+                    </div>
+                    <div className="lower">Site code</div>
+                  </div>
+
+                  <div className="site-detail">
+                    <div className="upper">
+                      {isNumber(area_ha[0]) ? (
+                        <div>{area_ha} ha</div>
+                      ) : (
+                        <div>No data</div>
+                      )}
+                    </div>
+                    <div className="lower">Reported area</div>
+                  </div>
+
+                  <div className="site-detail">
+                    <div className="upper">
+                      {year_stablished[0] ? (
+                        <div>{year_stablished}</div>
+                      ) : (
+                        <div>-</div>
+                      )}
+                    </div>
+                    <div className="lower">Site established</div>
+                  </div>
+
                   <div className="site-detail">
                     <div className="upper">
                       {isNumber(number_protected_habitat_types[0]) ? (

package/src/components/manage/Blocks/SiteHabitatsList/Filters/SortBy.jsx

@@ -14,6 +14,8 @@ const View = (props) => {
 
   const sortByOptions = [
     { text: 'Name', value: 'scientific_name', key: 'scientific_name' },
+    { text: 'Coverage', value: 'coverage_ha', key: 'coverage_ha' },
+    { text: 'Sites', value: 'number_sites', key: 'number_sites' },
   ];
 
   return (

package/src/components/manage/Blocks/SiteHabitatsList/Filters/View.jsx

@@ -7,7 +7,7 @@ import {
   Label,
 } from 'semantic-ui-react';
 import { Icon } from '@plone/volto/components';
-// import filterSVG from '@plone/volto/icons/filter.svg';
+import filterSVG from '@plone/volto/icons/filter.svg';
 import clearSVG from '@plone/volto/icons/clear.svg';
 
 import HabitatsGroups from './HabitatsGroups';
@@ -15,8 +15,10 @@ import SortBy from './SortBy';
 
 import { filtersLabels } from '../utils';
 
+// TODO: Display the correct filters for habitats based on existing data
 const SidebarFilter = (props) => {
   const { activeFilters, filters, filter, index, setActiveFilters } = props;
+
   return (
     <div className="filter">
       <div className="header">
@@ -97,8 +99,22 @@ const View = (props) => {
         if (key !== 'getTitle') {
           newFilters[filter][key] =
             filteredHabitats.filter((habitats) => {
-              return !!habitats.filter((habitat) => habitat[filter] === key)
-                .length;
+              return !!habitats.filter((habitat) => {
+                if (
+                  filtersLabels[filter][key] ===
+                  filtersLabels.habitat_prioriy.wp
+                ) {
+                  return habitat[filter] === 1;
+                }
+                if (
+                  filtersLabels[filter][key] ===
+                  filtersLabels.habitat_prioriy.np
+                ) {
+                  return habitat[filter] === null;
+                }
+
+                return habitat[filter] === filtersLabels[filter][key];
+              }).length;
             }).length || 'none';
         }
       }
@@ -160,9 +176,9 @@ const View = (props) => {
               setPagination({ ...pagination, itemsPerPage: data.value });
             }}
           />
-          {/* <button aria-label="Set filters" onClick={() => setVisible(!visible)}>
+          <button aria-label="Set filters" onClick={() => setVisible(!visible)}>
             <Icon name={filterSVG} size="24px" />
-          </button> */}
+          </button>
         </div>
       </Container>
       <Sidebar

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

@@ -3,9 +3,9 @@ import { Link } from 'react-router-dom';
 import { Container, Pagination, Grid } from 'semantic-ui-react';
 import { getObjectByIndex, photoPlaceholders } from '@eeacms/volto-n2k/helpers';
 import { Filters } from './Filters';
-// import { getPopulationString, getLabelString } from './utils';
 
 import './style.less';
+import { filtersLabels } from './utils';
 
 const getCurrentPageLength = (pagination, arr) => {
   const totalPages = Math.ceil(pagination.totalItems / pagination.itemsPerPage);
@@ -56,13 +56,36 @@ const View = (props) => {
 
     const filteredHabitats = habitats.filter((items, index) => {
       let itemsHaveFilter = true;
+
       Object.keys(activeFilters).forEach((filter) => {
         let habitatHasFilter = false;
-        items.forEach((item) => {
-          if (activeFilters[filter].includes(item[filter])) {
-            habitatHasFilter = true;
+
+        activeFilters[filter].forEach((key) => {
+          if (filter in filtersLabels) {
+            if (
+              filtersLabels[filter][key] === filtersLabels.habitat_prioriy.wp
+            ) {
+              habitatHasFilter = items[0][filter] === 1;
+              return;
+            }
+            if (
+              filtersLabels[filter][key] === filtersLabels.habitat_prioriy.np
+            ) {
+              habitatHasFilter = items[0][filter] === null;
+              return;
+            }
+
+            if (filtersLabels[filter][key] === items[0][filter]) {
+              habitatHasFilter = true;
+              return;
+            }
           }
         });
+
+        if (activeFilters[filter].includes(items[0][filter])) {
+          habitatHasFilter = true;
+        }
+
         if (!habitatHasFilter) {
           itemsHaveFilter = false;
         }
@@ -188,10 +211,13 @@ const View = (props) => {
                             style={{ fontSize: '1.2rem' }}
                             key={`habitat-${index}-${habitat.code_2000}`}
                           >
-                            Cover: {habitat.coverage_ha.toFixed(2)} ha (
-                            {(habitat.coverage_ha / 100).toFixed(4)} km²)
                             {habitat.habitat_prioriy
-                              ? `; Priority habitat type`
+                              ? `Priority habitat type; `
+                              : ''}
+                            Cover: {habitat.coverage_ha.toFixed(2)} ha (
+                            {(habitat.coverage_ha / 100).toFixed(2)} km²)
+                            {habitat.caves > 0
+                              ? `; Number of caves: ${habitat.caves}`
                               : ''}
                           </p>
                         ))}
@@ -220,6 +246,10 @@ const View = (props) => {
               )}
               onPageChange={(e, data) => {
                 setPagination({ ...pagination, activePage: data.activePage });
+                const el = document.getElementById('habitats-banner');
+                el.scrollIntoView({
+                  block: 'start',
+                });
               }}
               prevItem={null}
               nextItem={null}

package/src/components/manage/Blocks/SiteHabitatsList/style.less

@@ -10,9 +10,12 @@ div#view .site-habitats-list .habitats-list .ui.container > * {
   .habitats-filters {
     .ui.container {
       display: flex;
+      align-items: center;
       justify-content: space-between;
 
       .active-filters {
+        margin-top: 0;
+
         .ui.label.active-filter {
           display: inline-flex;
           flex-flow: row;

package/src/components/manage/Blocks/SiteHabitatsList/utils.js

@@ -1,22 +1,8 @@
 export const filtersLabels = {
-  population_type: {
-    p: 'Permanent',
-    r: 'Reproducing',
-    c: 'Concentration',
-    w: 'Wintering',
-    getTitle: () => 'Population type',
-  },
-  counting_unit: {
-    i: 'Individuals',
-    p: 'Pairs',
-    getTitle: () => 'Unit',
-  },
-  abundance_category: {
-    C: 'Common',
-    R: 'Rare',
-    V: 'Very rare',
-    P: 'Present',
-    getTitle: () => 'Abundance',
+  habitat_prioriy: {
+    wp: 'With priority',
+    np: 'Without priority',
+    getTitle: () => 'Habitat priority',
   },
 };
 

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

@@ -23,7 +23,7 @@ const View = (props) => {
   }, [JSON.stringify(provider_data)]);
 
   return (
-    <div className="habitats-banner full-width">
+    <div className="habitats-banner full-width" id="habitats-banner">
       <div className="habitats-container">
         <Container className="habitats-wrapper">
           <div className="habitats-wrapper">

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

@@ -11,7 +11,7 @@ const View = (props) => {
   }, {});
 
   return (
-    <div className="species-banner full-width">
+    <div className="species-banner full-width" id="species-banner">
       <div className="species-container">
         <Container className="species-wrapper">
           {/* <Grid size="12">

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

@@ -4,11 +4,12 @@ import Map from '@eeacms/volto-openlayers-map/Map';
 import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
 import { Controls } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { getSiteShapeURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
@@ -119,4 +120,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default withOpenLayers(View);

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

@@ -181,6 +181,7 @@ const View = (props) => {
                         {filteredSpecies[index].map((specimen, index) => (
                           <p
                             className="specimen-data"
+                            style={{ fontSize: '1.2rem' }}
                             key={`specimen-${index}-${specimen.id_eunis}`}
                           >
                             {getLabelString(
@@ -233,6 +234,10 @@ const View = (props) => {
               )}
               onPageChange={(e, data) => {
                 setPagination({ ...pagination, activePage: data.activePage });
+                const el = document.getElementById('species-banner');
+                el.scrollIntoView({
+                  block: 'start',
+                });
               }}
               prevItem={null}
               nextItem={null}

package/src/components/manage/Blocks/SiteSpeciesList/style.less

@@ -10,9 +10,12 @@ div#view .site-species-list .species-list .ui.container > * {
   .species-filters {
     .ui.container {
       display: flex;
+      align-items: center;
       justify-content: space-between;
 
       .active-filters {
+        margin-top: 0;
+
         .ui.label.active-filter {
           display: inline-flex;
           flex-flow: row;

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

@@ -1,5 +1,5 @@
 /* eslint-disable react/jsx-no-target-blank */
-import React, { useRef, useMemo, useState } from 'react';
+import React, { useRef, useMemo, useState, useCallback } from 'react';
 import { compose } from 'redux';
 import cx from 'classnames';
 import loadable from '@loadable/component';
@@ -24,15 +24,23 @@ const getSource = (source) => {
   return parsedSource;
 };
 
-const _View = (props) => {
+const ViewComponent = (props) => {
   const swiperEl = useRef();
   const previewEl = useRef();
   const [activeSlide, setActiveSlide] = useState(0);
-  const species_provider = flattenToAppURL(props.data.species_provider);
-  const species_pictures_provider = flattenToAppURL(
-    props.data.species_pictures_provider,
+  const species_provider = useMemo(
+    () => flattenToAppURL(props.data.species_provider),
+    [props.data.species_provider],
+  );
+  const species_pictures_provider = useMemo(
+    () => flattenToAppURL(props.data.species_pictures_provider),
+    [props.data.species_pictures_provider],
+  );
+
+  const species = useMemo(
+    () => props.providers_data?.[species_provider] || {},
+    [props.providers_data, species_provider],
   );
-  const species = props.providers_data?.[species_provider] || {};
   const species_pictures = useMemo(
     () => props.providers_data?.[species_pictures_provider] || {},
     [props.providers_data, species_pictures_provider],
@@ -63,6 +71,28 @@ const _View = (props) => {
     [pictures],
   );
 
+  const handleSliderPrevious = useCallback(() => {
+    swiperEl.current.slidePrev();
+    if (previewEl.current?.[0]) {
+      previewEl.current[0].slidePrev();
+    }
+    if (previewEl.current?.[1]) {
+      previewEl.current[1].slidePrev();
+    }
+    setActiveSlide(swiperEl.current.realIndex);
+  }, []);
+
+  const handleSliderNext = useCallback(() => {
+    swiperEl.current.slideNext();
+    if (previewEl.current?.[0]) {
+      previewEl.current[0].slideNext();
+    }
+    if (previewEl.current?.[1]) {
+      previewEl.current[1].slideNext();
+    }
+    setActiveSlide(swiperEl.current.realIndex);
+  }, []);
+
   if (!species_provider && props.mode === 'edit') {
     return 'species banner block, species provider undefined';
   }
@@ -110,16 +140,7 @@ const _View = (props) => {
                 <>
                   <button
                     className="swiper-button image-swiper-button-prev"
-                    onClick={() => {
-                      swiperEl.current.slidePrev();
-                      if (previewEl.current?.[0]) {
-                        previewEl.current[0].slidePrev();
-                      }
-                      if (previewEl.current?.[1]) {
-                        previewEl.current[1].slidePrev();
-                      }
-                      setActiveSlide(swiperEl.current.realIndex);
-                    }}
+                    onClick={handleSliderPrevious}
                   >
                     <Icon
                       className="icon-left"
@@ -130,16 +151,7 @@ const _View = (props) => {
                   </button>
                   <button
                     className="swiper-button image-swiper-button-next"
-                    onClick={() => {
-                      swiperEl.current.slideNext();
-                      if (previewEl.current?.[0]) {
-                        previewEl.current[0].slideNext();
-                      }
-                      if (previewEl.current?.[1]) {
-                        previewEl.current[1].slideNext();
-                      }
-                      setActiveSlide(swiperEl.current.realIndex);
-                    }}
+                    onClick={handleSliderNext}
                   >
                     <Icon
                       className="icon-right"
@@ -176,7 +188,7 @@ const _View = (props) => {
                             }}
                           >
                             {pictures.map((source, index) => (
-                              <SwiperSlide>
+                              <SwiperSlide key={source}>
                                 <img
                                   src={getSource(source)}
                                   alt={pictures[index]}
@@ -198,7 +210,7 @@ const _View = (props) => {
   );
 };
 
-const View = compose(
+const ViewCompose = compose(
   connectToMultipleProviders((props) => ({
     providers: [
       {
@@ -207,12 +219,12 @@ const View = compose(
       { provider_url: props.data?.species_pictures_provider },
     ],
   })),
-)(_View);
+)(ViewComponent);
 
-export default function $View(props) {
+export default function View(props) {
   return (
     <VisibilitySensor Placeholder={() => <div>loading....&nbsp;</div>}>
-      <View {...props} />
+      <ViewCompose {...props} />
     </VisibilitySensor>
   );
 }

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

@@ -4,11 +4,12 @@ import Map from '@eeacms/volto-openlayers-map/Map';
 import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
 import { Controls } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { getSpeciesDistributionURL } from './index';
 import './style.less';
 
 const View = (props) => {
+  const { ol: openlayers } = props;
   const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
@@ -115,4 +116,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default withOpenLayers(View);

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

@@ -4,11 +4,14 @@ import Map from '@eeacms/volto-openlayers-map/Map';
 import { Interactions } from '@eeacms/volto-openlayers-map/Interactions';
 import { Controls } from '@eeacms/volto-openlayers-map/Controls';
 import { Layers, Layer } from '@eeacms/volto-openlayers-map/Layers';
-import { openlayers } from '@eeacms/volto-openlayers-map';
+import { withOpenLayers } from '@eeacms/volto-openlayers-map';
 import { getSpeciesProtectedSitesURL } from './index';
 import './style.less';
 
+const DEFAULT_LAYERS = [3, 7];
+
 const View = (props) => {
+  const { ol: openlayers } = props;
   const dataFetched = React.useRef();
   const [options, setOptions] = React.useState({});
   const [vectorSource, setVectorSource] = useState(null);
@@ -16,6 +19,7 @@ const View = (props) => {
   const { extent, format, proj, style, source } = openlayers;
   const provider_data = props.provider_data || {};
   const { code_2000 = [] } = provider_data;
+  const layers = DEFAULT_LAYERS;
 
   useEffect(() => {
     if (__SERVER__) return;
@@ -32,36 +36,89 @@ const View = (props) => {
       }),
     ]);
     /* eslint-disable-next-line */
-  }, []);
+  }, [source]);
 
   useEffect(() => {
-    if (__SERVER__ || !vectorSource || !code_2000[0] || dataFetched.current)
+    if (__SERVER__ || !vectorSource || !code_2000[0]) {
+      dataFetched.current = false;
       return;
+    }
 
     const esrijsonFormat = new format.EsriJSON();
-    // Get species protected sites
-    fetch(getSpeciesProtectedSitesURL(code_2000[0])).then(function (response) {
-      if (response.status !== 200) return;
-      response.json().then(function (data) {
+    const urls = getSpeciesProtectedSitesURL(code_2000[0], layers);
+
+    let isMounted = true;
+    dataFetched.current = false;
+
+    // Get species protected sites from all specified layers
+    Promise.all(
+      Object.values(urls).map((url) =>
+        fetch(url)
+          .then((response) => {
+            if (!isMounted) return { features: [] };
+            return response.status === 200 ? response.json() : { features: [] };
+          })
+          .catch(() => {
+            if (!isMounted) return { features: [] };
+            return { features: [] };
+          }),
+      ),
+    )
+      .then((results) => {
+        if (!isMounted) return;
+
+        const validResults = results.filter((r) => !r.error);
         dataFetched.current = true;
-        if (data.features && data.features.length > 0) {
-          const features = esrijsonFormat.readFeatures(data);
+
+        const allFeatures = validResults.reduce((acc, data) => {
+          return acc.concat(data.features || []);
+        }, []);
+
+        if (allFeatures.length > 0) {
+          // all features from all layers should have the same metadata
+          const metadataTemplate = validResults.find(
+            (r) => r.features && r.features.length > 0,
+          );
+
+          const features = esrijsonFormat.readFeatures({
+            ...metadataTemplate,
+            features: allFeatures,
+          });
+
           if (features.length > 0) {
             vectorSource.addFeatures(features);
             const vectorExtent = vectorSource.getExtent();
-            let size = extent.getSize(vectorExtent);
-            setOptions({
-              ...options,
-              extent: new extent.buffer(vectorExtent, size[0] * 0.1),
-            });
+
+            if (!extent.isEmpty(vectorExtent)) {
+              let size = extent.getSize(vectorExtent);
+              setOptions({
+                ...options,
+                extent: new extent.buffer(vectorExtent, size[0] * 0.1),
+              });
+            }
           }
         }
+      })
+      .catch((error) => {
+        if (!isMounted) return;
+
+        dataFetched.current = false;
+
+        if (vectorSource) vectorSource.clear();
+        setOptions((currentOptions) => ({
+          ...currentOptions,
+          extent: undefined,
+        }));
       });
-    });
+
+    return () => {
+      isMounted = false;
+    };
     /* eslint-disable-next-line */
   }, [vectorSource, code_2000?.[0]]);
 
   if (__SERVER__ || !vectorSource) return '';
+
   return (
     <div className="species-protected-sites-wrapper">
       <div className="species-protected-sites">
@@ -111,4 +168,4 @@ const View = (props) => {
   );
 };
 
-export default View;
+export default withOpenLayers(View);

package/src/components/manage/Blocks/SpeciesProtectedSites/index.js

@@ -1,10 +1,17 @@
 import SpeciesProtectedSitesView from './View';
 import getSchema from './schema';
 
-export function getSpeciesProtectedSitesURL(code_2000) {
-  return encodeURI(
-    `https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/EUNIS_Website_Dyna_WM/MapServer/7/query?f=json&where=SPECIESCODE LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=SPECIESCODE,SITECODE,HABITATCODE,OBJECTID&outSR=102100`,
+export function getSpeciesProtectedSitesURL(code_2000, layers) {
+  const baseUrl =
+    'https://bio.discomap.eea.europa.eu/arcgis/rest/services/ProtectedSites/EUNIS_Website_Dyna_WM/MapServer';
+  const queryParams = encodeURI(
+    `?f=json&where=SPECIESCODE LIKE '%${code_2000.toUpperCase()}%'&returnGeometry=true&spatialRel=esriSpatialRelIntersects&outFields=SPECIESCODE,SITECODE,HABITATCODE,OBJECTID&outSR=102100`,
   );
+
+  return layers.reduce((acc, layer) => {
+    acc[`layer${layer}`] = `${baseUrl}/${layer}/query${queryParams}`;
+    return acc;
+  }, {});
 }
 
 export default function applyConfig(config) {