@eeacms/volto-marine-policy 2.0.31 → 2.0.33

package/CHANGELOG.md

@@ -4,6 +4,26 @@ 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).
 
+### [2.0.33](https://github.com/eea/volto-marine-policy/compare/2.0.32...2.0.33) - 22 October 2025
+
+#### :hammer_and_wrench: Others
+
+- update demo sites map marine protected areas [laszlocseh - [`20ff428`](https://github.com/eea/volto-marine-policy/commit/20ff4280bc26593126566718993d16a0c36574cc)]
+### [2.0.32](https://github.com/eea/volto-marine-policy/compare/2.0.31...2.0.32) - 21 October 2025
+
+#### :rocket: New Features
+
+- feat: demo sites explorer marine protected areas [laszlocseh - [`2948712`](https://github.com/eea/volto-marine-policy/commit/29487121251c4281ba68fa3225746c0956eeb61f)]
+- feat: demo sites explorer possibility to enable marine protected areas layer [laszlocseh - [`7eb5548`](https://github.com/eea/volto-marine-policy/commit/7eb5548f64ae9db459c8897cfff619a55c34a28d)]
+
+#### :house: Internal changes
+
+- style: Automated code fix [eea-jenkins - [`07e516a`](https://github.com/eea/volto-marine-policy/commit/07e516aa712789a54ad7c3554f8391710f3db26a)]
+- style: Automated code fix [eea-jenkins - [`d7e18b9`](https://github.com/eea/volto-marine-policy/commit/d7e18b99b4e2babd5bc8fdf954f8537c4cbdde39)]
+
+#### :hammer_and_wrench: Others
+
+- fix eslint [laszlocseh - [`a2776d2`](https://github.com/eea/volto-marine-policy/commit/a2776d2e26ccf816334d6721bec15f5896cde579)]
 ### [2.0.31](https://github.com/eea/volto-marine-policy/compare/2.0.30...2.0.31) - 10 October 2025
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/Blocks/DemoSitesExplorer/DemoSitesExplorerEdit.js

@@ -1,5 +1,27 @@
 import DemoSitesExplorerView from './DemoSitesExplorerView';
+import { SidebarPortal, BlockDataForm } from '@plone/volto/components';
+import schema from './schema';
 
 export default function DemoSitesExplorerEdit(props) {
-  return <DemoSitesExplorerView {...props} mode="edit" />;
+  const { selected, onChangeBlock, data = {}, block } = props;
+
+  return (
+    <div>
+      <DemoSitesExplorerView {...props} mode="edit" />
+
+      <SidebarPortal selected={selected}>
+        <BlockDataForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            onChangeBlock(block, {
+              ...data,
+              [id]: value,
+            });
+          }}
+          formData={data}
+        />
+      </SidebarPortal>
+    </div>
+  );
 }

package/src/components/Blocks/DemoSitesExplorer/DemoSitesExplorerView.js

@@ -19,8 +19,11 @@ export default function DemoSitesExplorerView(props) {
     : '/marine/@@demo-sites-map.arcgis.json';
   let cases = useCases(addAppURL(cases_url));
   const [selectedCase, onSelectedCase] = React.useState(null);
-
+  const { enableMarineMO } = props.data;
+  // console.log('enableMarineMO', enableMarineMO);
   const { properties } = props;
+  // if the map is rendered on the indicator page we hide the Target and
+  // the Indicator filters, and hide the chart on the right side
   const hideFilters = properties['@type'] === 'indicator_mo' ? true : false;
   const indicatorOnly = hideFilters ? properties['title'] : null;
 
@@ -36,7 +39,7 @@ export default function DemoSitesExplorerView(props) {
   const [filters, setFilters] = React.useState([]);
   const [map, setMap] = React.useState();
   const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
-  const columnsLength = hideFilters ? 12 : 8;
+  const columnsLength = hideFilters || enableMarineMO ? 12 : 8;
 
   React.useEffect(() => {
     const _filters = getFilters(activeItems, indicatorOnly);
@@ -53,10 +56,15 @@ export default function DemoSitesExplorerView(props) {
   ]);
 
   React.useEffect(() => {
-    let activeItems = filterCases(cases, activeFilters, indicatorOnly);
+    let activeItems = filterCases(
+      cases,
+      activeFilters,
+      indicatorOnly,
+      enableMarineMO,
+    );
 
     setActiveItems(activeItems);
-  }, [activeFilters, cases, indicatorOnly]);
+  }, [activeFilters, cases, indicatorOnly, enableMarineMO]);
 
   if (__SERVER__) return '';
 
@@ -78,6 +86,7 @@ export default function DemoSitesExplorerView(props) {
           hideFilters={hideFilters}
           setActiveFilters={setActiveFilters}
           highlightedIndex={highlightedIndex}
+          enableMarineMO={enableMarineMO}
         />
       </Grid.Row>
       <Grid.Row>
@@ -99,9 +108,10 @@ export default function DemoSitesExplorerView(props) {
                 setMap={setMap}
                 highlightedIndex={highlightedIndex}
                 setHighlightedIndex={setHighlightedIndex}
+                enableMarineMO={enableMarineMO}
               />
             </Grid.Column>
-            {!hideFilters ? (
+            {!(hideFilters || enableMarineMO) ? (
               <Grid.Column
                 mobile={4}
                 tablet={4}

package/src/components/Blocks/DemoSitesExplorer/DemoSitesFilters.jsx

@@ -165,6 +165,7 @@ export function DemoSitesFilters(props) {
     hideFilters,
     setActiveFilters,
     highlightedIndex,
+    enableMarineMO,
   } = props;
 
   React.useEffect(() => {
@@ -179,21 +180,8 @@ export function DemoSitesFilters(props) {
     });
   }, []);
 
-  return (
+  return !enableMarineMO ? (
     <>
-      {/* {!hideFilters ? (
-        <DemoSitesFilter
-          filterTitle="Objective/Enabler"
-          filterName="objective_filter"
-          filters={filters}
-          activeFilters={activeFilters}
-          setActiveFilters={setActiveFilters}
-          map={map}
-          customOrder={objectivesCustomOrder}
-        />
-      ) : (
-        ''
-      )} */}
       {!hideFilters ? (
         <DemoSitesFilter
           filterTitle="Target"
@@ -235,7 +223,7 @@ export function DemoSitesFilters(props) {
         highlightedIndex={highlightedIndex}
       />
     </>
-  );
+  ) : null;
 }
 
 export function SearchBox(props) {

package/src/components/Blocks/DemoSitesExplorer/DemoSitesMap.jsx

@@ -42,12 +42,19 @@ function DemoSitesMap(props) {
     setMap,
     highlightedIndex,
     setHighlightedIndex,
+    enableMarineMO,
     ol,
   } = props;
   const features = getFeatures({ cases: items, ol });
   const [resetMapButtonClass, setResetMapButtonClass] =
     React.useState('inactive');
 
+  const arcgisSource = React.useMemo(() => {
+    return new ol.source.TileArcGISRest({
+      url: 'https://water.discomap.eea.europa.eu/arcgis/rest/services/Marine/MPA_networks_in_EEA_marine_assessment_areas_2021/MapServer',
+    });
+  }, [ol.source.TileArcGISRest]);
+
   const [tileWMSSources] = React.useState([
     new ol.source.TileWMS({
       url: 'https://gisco-services.ec.europa.eu/maps/service',
@@ -55,6 +62,7 @@ function DemoSitesMap(props) {
         // LAYERS: 'OSMBlossomComposite', OSMCartoComposite, OSMPositronComposite
         LAYERS: 'OSMPositronComposite',
         TILED: true,
+        DPI: 192,
       },
       serverType: 'geoserver',
       transition: 0,
@@ -128,8 +136,8 @@ function DemoSitesMap(props) {
   }, [map, selectedCase, resetMapButtonClass, setResetMapButtonClass, ol]);
 
   const clusterStyle = React.useMemo(
-    () => selectedClusterStyle({ selectedCase, ol }),
-    [selectedCase, ol],
+    () => selectedClusterStyle({ selectedCase, ol, enableMarineMO }),
+    [selectedCase, ol, enableMarineMO],
   );
 
   const MapWithSelection = React.useMemo(() => Map, []);
@@ -143,7 +151,7 @@ function DemoSitesMap(props) {
           showFullExtent: true,
           zoom: 3.4,
         }}
-        pixelRatio={1}
+        // pixelRatio={window.devicePixelRatio || 1}
         // controls={ol.control.defaults({ attribution: false })}
       >
         <Controls attribution={false} />
@@ -188,6 +196,7 @@ function DemoSitesMap(props) {
             // selectedCase={selectedCase}
           />
           <Layer.Tile source={tileWMSSources[0]} zIndex={0} />
+          {enableMarineMO && <Layer.Tile source={arcgisSource} zIndex={0} />}
           <Layer.Vector
             style={clusterStyle}
             source={clusterSource}
@@ -200,7 +209,7 @@ function DemoSitesMap(props) {
   ) : null;
 }
 
-const selectedClusterStyle = ({ selectedFeature, ol }) => {
+const selectedClusterStyle = ({ selectedFeature, ol, enableMarineMO }) => {
   function _clusterStyle(feature, selectedFeature) {
     const size = feature.get('features').length;
     let clusterStyle = styleCache[size];
@@ -228,25 +237,38 @@ const selectedClusterStyle = ({ selectedFeature, ol }) => {
     }
     // set size === 1 to enable clusterization
     if (size) {
-      // let color = feature.values_.features[0].values_['color'];
-      let color = '#0179cf';
-      let width = feature.values_.features[0].values_['width'];
-      let radius = feature.values_.features[0].values_['radius'];
-      // console.log(color)
-      // let color = '#0083E0'; // #0083E0 #50B0A4
-
-      return new ol.style.Style({
-        image: new ol.style.Circle({
-          radius: radius,
-          fill: new ol.style.Fill({
-            color: '#fff',
+      if (enableMarineMO) {
+        return new ol.style.Style({
+          image: new ol.style.Icon({
+            anchor: [0.5, 1],
+            // size: [52, 52],
+            // offset: [52, 0],
+            // opacity: 1,
+            scale: 0.8,
+            src: '/marine/europe-seas/eu-mission-restore-our-oceans-and-water/icon-point.png/@@images/image/tiny',
           }),
-          stroke: new ol.style.Stroke({
-            color: color,
-            width: width,
+        });
+      } else {
+        // let color = feature.values_.features[0].values_['color'];
+        let color = '#0179cf';
+        let width = feature.values_.features[0].values_['width'];
+        let radius = feature.values_.features[0].values_['radius'];
+        // console.log(color)
+        // let color = '#0083E0'; // #0083E0 #50B0A4
+
+        return new ol.style.Style({
+          image: new ol.style.Circle({
+            radius: radius,
+            fill: new ol.style.Fill({
+              color: '#fff',
+            }),
+            stroke: new ol.style.Stroke({
+              color: color,
+              width: width,
+            }),
           }),
-        }),
-      });
+        });
+      }
     } else {
       return clusterStyle;
     }

package/src/components/Blocks/DemoSitesExplorer/schema.jsx

@@ -0,0 +1,23 @@
+const DemoSitesExplorerSchema = {
+  title: 'Demo Sites Explorer',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['enableMarineMO'],
+    },
+  ],
+
+  properties: {
+    enableMarineMO: {
+      title: 'Enable Marine Protected Areas layer',
+      description:
+        'If enabled, the Marine Protected Areas layer will be displayed on the map, without the filters and the chart on the right side',
+      type: 'boolean',
+      default: false,
+    },
+  },
+  required: ['enableMarineMO'],
+};
+
+export default DemoSitesExplorerSchema;

package/src/components/Blocks/DemoSitesExplorer/utils.js

@@ -144,7 +144,12 @@ export function getFeatures({ cases, ol }) {
   });
 }
 
-export function filterCases(cases, activeFilters, indicatorOnly) {
+export function filterCases(
+  cases,
+  activeFilters,
+  indicatorOnly,
+  enableMarineMO,
+) {
   const data = cases.filter((_case) => {
     let flag_objective = false;
     let flag_target = false;
@@ -158,6 +163,15 @@ export function filterCases(cases, activeFilters, indicatorOnly) {
         return item['title'].toString();
       });
       if (indicators?.includes(indicatorOnly)) flag_indicatorOnly = true;
+    } else if (enableMarineMO) {
+      let indicators = _case.properties.indicators?.map((item) => {
+        return item['title'].toString();
+      });
+      if (
+        indicators?.includes('Marine protected areas') ||
+        indicators?.includes('Marine strictly protected areas')
+      )
+        flag_indicatorOnly = true;
     } else {
       flag_indicatorOnly = true;
     }