@eeacms/volto-eea-map 0.1.3 → 0.1.4

package/CHANGELOG.md

@@ -4,8 +4,17 @@ 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.4](https://github.com/eea/volto-eea-map/compare/0.1.3...0.1.4)
+
+- Configure Privacy protection screenshot data [`49097c0`](https://github.com/eea/volto-eea-map/commit/49097c0b7aa8657e626d5a49dd0eed84f5e71e78)
+- Expandable Legend [`6edda2f`](https://github.com/eea/volto-eea-map/commit/6edda2fafd8a2a61f3f1f10c47a9ca5bb35a0355)
+- Catch for no data [`7cef4e6`](https://github.com/eea/volto-eea-map/commit/7cef4e641650ede23e37ca9116130db1ef0a18db)
+
 #### [0.1.3](https://github.com/eea/volto-eea-map/compare/0.1.2...0.1.3)
 
+> 2 August 2022
+
+- Center map on first layer [`#3`](https://github.com/eea/volto-eea-map/pull/3)
 - Icons & download/viewer change [`321f538`](https://github.com/eea/volto-eea-map/commit/321f538e9582f9a12db3f64beb26588616e867e2)
 - Inline inputs actions & styles [`1f4787e`](https://github.com/eea/volto-eea-map/commit/1f4787e3b3f0dc1328ff23cca2459db816188e3a)
 - more updates for cy10 [`4d5c6a1`](https://github.com/eea/volto-eea-map/commit/4d5c6a1925413b44acc70b5ad3753378830dba2d)
@@ -18,7 +27,6 @@ Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 - Clear schema [`4b22f0a`](https://github.com/eea/volto-eea-map/commit/4b22f0aee58cca2bbcd2a8bee9864a01d65e7738)
 - Center on extent control [`9e8b13d`](https://github.com/eea/volto-eea-map/commit/9e8b13dfd5bbfa5eb2419c54444a15fefa384de4)
 - Clear consoles [`798bc2f`](https://github.com/eea/volto-eea-map/commit/798bc2fbf6f77ffadcedcf1e4666b315bc71ea6c)
-- Center map on first layer [`8fbc1ca`](https://github.com/eea/volto-eea-map/commit/8fbc1ca711ceba09e38e841cd7f551c1a8787027)
 
 #### [0.1.2](https://github.com/eea/volto-eea-map/compare/0.1.1...0.1.2)
 

package/package.json

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

package/src/components/Blocks/EEAMap/components/widgets/ExtraViews.jsx

@@ -16,9 +16,10 @@ const ExtraViews = ({ data }) => {
     show_download,
     show_viewer,
   } = data;
+
   return (
     <>
-      {(show_download || show_viewer) && (
+      {map_data.layers?.map_layers[0] && (show_download || show_viewer) && (
         <div
           style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
         >

package/src/components/Blocks/EEAMap/components/widgets/LegendWidget.jsx

@@ -1,19 +1,50 @@
 import React from 'react';
 import { Grid } from 'semantic-ui-react';
 import { fetchArcgisData } from '../../utils';
+import { Icon } from '@plone/volto/components';
+
+import rightKeySVG from '@plone/volto/icons/right-key.svg';
+import downKeySVG from '@plone/volto/icons/down-key.svg';
+
+const LayerLegend = ({ data, name }) => {
+  const [expand, setExpand] = React.useState(true);
 
-const LayerLegend = ({ data }) => {
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
-      {data.length > 0 &&
-        data.map((item, i) => {
-          return (
-            <span key={i} style={{ display: 'flex', alignItems: 'center' }}>
-              <img alt="alt" src={`data:image/png;base64,${item.imageData}`} />
-              <span style={{ fontSize: '13px' }}>{item.label}</span>
-            </span>
-          );
-        })}
+      <h5
+        role="presentation"
+        onClick={() => setExpand(!expand)}
+        style={{
+          marginTop: '10px',
+          marginBottom: '5px',
+          cursor: 'pointer',
+          display: 'flex',
+        }}
+      >
+        <Icon
+          name={expand ? downKeySVG : rightKeySVG}
+          title={expand ? 'Collapse' : 'Expand'}
+          size="17px"
+        />
+        {name}
+      </h5>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {expand &&
+          data.length > 0 &&
+          data.map((item, i) => {
+            return (
+              <span key={i} style={{ display: 'flex', alignItems: 'center' }}>
+                <img
+                  alt="alt"
+                  src={`data:image/png;base64,${item.imageData}`}
+                />
+                <span style={{ fontSize: '13px', marginLeft: '5px' }}>
+                  {item.label}
+                </span>
+              </span>
+            );
+          })}
+      </div>
     </div>
   );
 };
@@ -37,10 +68,11 @@ const LegendWidget = (props) => {
   };
 
   React.useEffect(() => {
-    fetchLegend(`${activeLayer.map_service_url}/legend`);
+    if (activeLayer) {
+      fetchLegend(`${activeLayer.map_service_url}/legend`);
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, activeLayer.map_service_url]);
-
   return (
     <>
       <div style={{ margin: '10px 0' }}>
@@ -48,18 +80,19 @@ const LegendWidget = (props) => {
           <Grid.Row>
             <Grid.Column>
               <h3>Legend:</h3>
+              {!activeLayer && (
+                <p>
+                  No layer found for legend. Please add a map layer from editor.
+                </p>
+              )}
               {legendLayers.length > 0 &&
                 legendLayers.map((layer, i) => {
                   return (
-                    <div
+                    <LayerLegend
                       key={i}
-                      style={{ display: 'flex', flexDirection: 'column' }}
-                    >
-                      <h5 style={{ marginTop: '10px', marginBottom: '5px' }}>
-                        {layer?.layerName}
-                      </h5>
-                      <LayerLegend data={layer.legend} />
-                    </div>
+                      name={layer?.layerName}
+                      data={layer?.legend}
+                    />
                   );
                 })}
             </Grid.Column>

package/src/components/Blocks/EEAMap/components/widgets/MapEditorWidget.jsx

@@ -11,9 +11,16 @@ const MapEditorWidget = (props) => {
   const [intValue, setIntValue] = React.useState(value);
 
   const dataForm = { map_data: intValue };
-
   const handleApplyChanges = () => {
     onChange(id, intValue);
+
+    //set map data for screenshot
+    if (intValue.layers?.map_layers[0].map_layer?.map_service_url) {
+      onChange(
+        'url',
+        `${intValue.layers?.map_layers[0].map_layer?.map_service_url}?f=jsapi`,
+      );
+    }
     setOpen(false);
   };