@eeacms/volto-eea-map 0.1.10 → 0.1.11

package/CHANGELOG.md

@@ -4,10 +4,16 @@ 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.11](https://github.com/eea/volto-eea-map/compare/0.1.10...0.1.11)
+
+- Legend for all layers [`2d9285e`](https://github.com/eea/volto-eea-map/commit/2d9285e12ea512b7a1f24300ad2f7b3072e334d5)
+
 #### [0.1.10](https://github.com/eea/volto-eea-map/compare/0.1.9...0.1.10)
 
+> 17 August 2022
+
+- EEA core metadata adaptation [`#10`](https://github.com/eea/volto-eea-map/pull/10)
 - EEA core metadata adaptation for map block to [`5fb5724`](https://github.com/eea/volto-eea-map/commit/5fb5724164e1e9b1ae5143f9bd565c28118be253)
-- EEA core metadata adaptation [`03b62a3`](https://github.com/eea/volto-eea-map/commit/03b62a35165670743d649282ae697dbf71c56a56)
 
 #### [0.1.9](https://github.com/eea/volto-eea-map/compare/0.1.8...0.1.9)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-eea-map",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "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/LegendWidget.jsx

@@ -6,16 +6,33 @@ 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 LayerLegend = ({ data }) => {
   const [expand, setExpand] = React.useState(true);
+  const [legendRows, setLegendRows] = React.useState([]);
 
+  const { id, name } = data.layer || {};
+
+  const fetchLegend = async (url, activeLayerID) => {
+    let legendData = await fetchArcgisData(url);
+
+    const { layers = [] } = legendData;
+    const selectedLayer = layers.filter((l, i) => l.layerId === activeLayerID);
+    setLegendRows(selectedLayer[0].legend);
+  };
+
+  React.useEffect(() => {
+    if (data.map_service_url && id !== undefined) {
+      fetchLegend(`${data.map_service_url}/legend`, id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, data.map_service_url]);
   return (
     <div style={{ display: 'flex', flexDirection: 'column' }}>
       <h5
         role="presentation"
         onClick={() => setExpand(!expand)}
         style={{
-          marginTop: '10px',
+          marginTop: '15px',
           marginBottom: '5px',
           cursor: 'pointer',
           display: 'flex',
@@ -30,8 +47,8 @@ const LayerLegend = ({ data, name }) => {
       </h5>
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         {expand &&
-          data.length > 0 &&
-          data.map((item, i) => {
+          legendRows.length > 0 &&
+          legendRows.map((item, i) => {
             return (
               <span key={i} style={{ display: 'flex', alignItems: 'center' }}>
                 <img
@@ -53,49 +70,25 @@ const LegendWidget = (props) => {
   const data = React.useMemo(() => props.data, [props.data]);
   const { layers = {} } = data;
   const { map_layers = [] } = layers;
-  const [legendLayers, setLegendLayers] = React.useState([]);
-
-  const activeLayer = map_layers.length > 0 ? map_layers[0]?.map_layer : '';
 
-  const fetchLegend = async (url) => {
-    let legendData = await fetchArcgisData(url);
-
-    //TODO: configure this for multiple layers
-    const { layers = [] } = legendData;
-    const selectedLayerLedend = layers.filter(
-      (l, i) => l.layerId === activeLayer.layer.id,
-    );
-    setLegendLayers(selectedLayerLedend);
-  };
-
-  React.useEffect(() => {
-    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' }}>
         <Grid>
           <Grid.Row>
             <Grid.Column>
-              <h3>Legend:</h3>
-              {!activeLayer && (
+              <h4>Legend:</h4>
+              {map_layers.length === 0 && (
                 <p>
                   No layer found for legend. Please add a map layer from editor.
                 </p>
               )}
-              {legendLayers.length > 0 &&
-                legendLayers.map((layer, i) => {
-                  return (
-                    <LayerLegend
-                      key={i}
-                      name={layer?.layerName}
-                      data={layer?.legend}
-                    />
-                  );
-                })}
+
+              {map_layers &&
+                map_layers.length > 0 &&
+                map_layers.map((l, i) => (
+                  <LayerLegend key={i} data={l.map_layer} />
+                ))}
             </Grid.Column>
           </Grid.Row>
         </Grid>