@eeacms/volto-eea-map 0.1.18 → 0.1.19

package/CHANGELOG.md

@@ -4,6 +4,11 @@ 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.19](https://github.com/eea/volto-eea-map/compare/0.1.18...0.1.19) - 31 August 2022
+
+#### :hammer_and_wrench: Others
+
+- Api link updates [andreiggr - [`50c28c9`](https://github.com/eea/volto-eea-map/commit/50c28c93341fcd36bdf3328e194672526ad23408)]
 ### [0.1.18](https://github.com/eea/volto-eea-map/compare/0.1.17...0.1.18) - 30 August 2022
 
 #### :hammer_and_wrench: Others

package/package.json

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

package/src/components/ExtraViews.jsx

@@ -1,12 +1,9 @@
 import React from 'react';
-import { Button } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 
 import LegendWidget from './widgets/LegendWidget';
 import { serializeNodes } from 'volto-slate/editor/render';
 
-import codeSVG from '../static/code-line.svg';
-
 const ExtraViews = ({ data }) => {
   const {
     map_data = {},
@@ -18,34 +15,9 @@ const ExtraViews = ({ data }) => {
   } = data;
   return (
     <div className="extra-eea-map-content">
-      {map_data && map_data.layers?.map_layers[0] && show_viewer && (
-        <div
-          style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
-        >
-          {show_viewer && (
-            <a
-              target="_blank"
-              rel="noreferrer"
-              href={
-                `https://www.arcgis.com/home/webmap/viewer.html?url=` +
-                `${map_data.layers.map_layers[0].map_layer.map_service_url}&source=sd`
-              }
-            >
-              <Button size="tiny">
-                <Button.Content>
-                  <img
-                    className="extra-view-external-button"
-                    src={codeSVG}
-                    alt=""
-                    title="Show API link"
-                  />
-                </Button.Content>
-              </Button>
-            </a>
-          )}
-        </div>
+      {show_legend && map_data && (
+        <LegendWidget data={map_data} show_viewer={show_viewer} />
       )}
-      {show_legend && map_data && <LegendWidget data={map_data} />}
       {show_sources && (
         <>
           {data_provenance &&

package/src/components/widgets/LegendWidget.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from 'semantic-ui-react';
+import { Button, Grid } from 'semantic-ui-react';
 import { fetchArcGISData, setLegendColumns } from '../../utils';
 import { Icon } from '@plone/volto/components';
 import { serializeNodes } from 'volto-slate/editor/render';
@@ -8,10 +8,13 @@ import rightKeySVG from '@plone/volto/icons/right-key.svg';
 import downKeySVG from '@plone/volto/icons/down-key.svg';
 import { withDeviceSize } from '../../hocs';
 
-const LayerLegend = ({ data }) => {
+import codeSVG from '../../static/code-line.svg';
+
+const LayerLegend = ({ data, show_viewer }) => {
   const [legendRows, setLegendRows] = React.useState([]);
 
-  const { id, name } = data.layer || {};
+  const { map_service_url = '', layer = {} } = data;
+  const { id, name } = layer || {};
 
   const fetchLegend = async (url, activeLayerID) => {
     let legendData = await fetchArcGISData(url);
@@ -27,16 +30,40 @@ const LayerLegend = ({ data }) => {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, data.map_service_url]);
+
   return (
     <Grid.Column>
-      <h5
-        style={{
-          marginTop: '15px',
-          marginBottom: '5px',
-        }}
-      >
-        {name}
-      </h5>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <h5
+          style={{
+            marginTop: '15px',
+            marginBottom: '5px',
+          }}
+        >
+          {name}
+        </h5>
+        {show_viewer && map_service_url && (
+          <a
+            target="_blank"
+            rel="noreferrer"
+            title="Open ArcGIS Service location"
+            href={
+              `https://www.arcgis.com/home/webmap/viewer.html?url=` +
+              `${map_service_url}&source=sd`
+            }
+          >
+            <Button size="tiny" className="extra-view-external-button">
+              <Button.Content>
+                <img
+                  className="extra-view-external-icon"
+                  src={codeSVG}
+                  alt=""
+                />
+              </Button.Content>
+            </Button>
+          </a>
+        )}
+      </div>
       {data.description && serializeNodes(data.description)}
       <div style={{ display: 'flex', flexDirection: 'column' }}>
         {legendRows.length > 0 &&
@@ -60,7 +87,7 @@ const LayerLegend = ({ data }) => {
 
 const LegendWidget = (props) => {
   const data = React.useMemo(() => props.data, [props.data]);
-  const { device = '' } = props;
+  const { device = '', show_viewer = false } = props;
 
   const [expand, setExpand] = React.useState(true);
 
@@ -79,14 +106,14 @@ const LegendWidget = (props) => {
     <>
       <div className="legend-container">
         <button className="legend-action" onClick={() => setExpand(!expand)}>
-          <h4 role="presentation" className="legend-title">
+          <h3 role="presentation" className="legend-title">
             <Icon
               name={expand ? downKeySVG : rightKeySVG}
               title={expand ? 'Collapse' : 'Expand'}
               size="17px"
             />
             Legend:
-          </h4>
+          </h3>
         </button>
         <Grid columns={legendColumns}>
           {(!map_layers || map_layers.length === 0) && (
@@ -99,7 +126,11 @@ const LegendWidget = (props) => {
               {map_layers &&
                 map_layers.length > 0 &&
                 map_layers.map((l, i) => (
-                  <LayerLegend key={i} data={l.map_layer} />
+                  <LayerLegend
+                    key={i}
+                    data={l.map_layer}
+                    show_viewer={show_viewer}
+                  />
                 ))}
             </Grid.Row>
           )}

package/src/styles/map.css

@@ -169,12 +169,17 @@
   display: flex;
 }
 
-.extra-view-external-button {
+.extra-view-external-icon {
   color: inherit;
+  font-size: 10px;
+}
+
+.extra-view-external-button {
+  padding: 2px 15px !important;
 }
 
 .legend-action {
-  padding: 10px;
+  padding: 10px 0;
   border: none;
   background: transparent;
   cursor: pointer;