@eeacms/volto-eea-map 4.0.0 → 5.0.0

package/src/components/Blocks/EmbedEEAMap/Schema.js

@@ -1,161 +0,0 @@
-const ProtectionSchema = () => ({
-  title: 'Data Protection',
-
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: [
-        'privacy_statement',
-        'privacy_cookie_key',
-        'enabled',
-        'background_image',
-      ],
-    },
-  ],
-
-  properties: {
-    privacy_statement: {
-      title: 'Privacy statement',
-      description: 'Defined in template. Change only if necessary',
-      widget: 'slate_richtext',
-      className: 'slate-Widget',
-      defaultValue: [
-        {
-          children: [
-            {
-              text: 'This map is hosted by a third party, Environmental Systems Research Institute. By showing the external content you accept the terms and conditions of ',
-            },
-            {
-              type: 'a',
-              url: 'https://www.esri.com',
-              children: [
-                {
-                  text: 'esri.com',
-                },
-              ],
-            },
-            {
-              text: '. This includes their cookie policies, which we have no control over.',
-            },
-          ],
-        },
-      ],
-    },
-    privacy_cookie_key: {
-      title: 'Privacy cookie key',
-      description: 'Use default for Esri maps, otherwise change',
-      defaultValue: 'esri-maps',
-    },
-    enabled: {
-      title: 'Data protection disclaimer enabled',
-      description: 'Enable/disable the privacy protection',
-      type: 'boolean',
-    },
-    background_image: {
-      title: 'Static map preview image',
-      widget: 'file',
-      required: true,
-    },
-  },
-
-  required: ['background_image'],
-});
-
-export const Schema = (props) => {
-  return {
-    title: 'Embed Map layers (ArcGis)',
-    fieldsets: [
-      {
-        id: 'default',
-        title: 'Default',
-        fields: [
-          'vis_url',
-          'description',
-          'height',
-          'enable_queries',
-          ...(props.data.enable_queries ? ['data_query_params'] : []),
-        ],
-      },
-      {
-        id: 'toolbar',
-        title: 'Toolbar',
-        fields: [
-          'show_legend',
-          'show_viewer',
-          'show_note',
-          'show_more_info',
-          'show_share',
-        ],
-      },
-      {
-        fields: ['dataprotection'],
-        title: 'Data Protection',
-      },
-    ],
-    properties: {
-      vis_url: {
-        widget: 'internal_url',
-        title: 'Visualization',
-      },
-      height: {
-        title: 'Height',
-        description:
-          'Map block height in px. Default is 500px. Change only if necessary',
-        type: 'number',
-      },
-      description: {
-        title: 'Description',
-        widget: 'slate',
-      },
-      show_note: {
-        title: 'Show note',
-        type: 'boolean',
-        defaultValue: true,
-      },
-      show_sources: {
-        title: 'Show sources',
-        description: 'Will show sources set in this page Data provenance',
-        type: 'boolean',
-        defaultValue: true,
-      },
-      show_more_info: {
-        title: 'Show more info',
-        type: 'boolean',
-        defaultValue: true,
-      },
-      show_share: {
-        title: 'Show share button',
-        type: 'boolean',
-        defaultValue: true,
-      },
-      show_legend: {
-        title: 'Show legend',
-        type: 'boolean',
-      },
-      show_viewer: {
-        title: 'Show API link',
-        description: 'Open the map on ArcGIS js service',
-        type: 'boolean',
-      },
-      enable_queries: {
-        title: 'Enable queries',
-        description:
-          'Will import Criteria from content-type and try to query map layer fields.',
-        type: 'boolean',
-      },
-      data_query_params: {
-        title: 'Query parameters',
-        description:
-          'When using page level parameters to filter the map, please map those to the corresponding field name from the ArcGIS service',
-        widget: 'data_query_widget',
-      },
-      dataprotection: {
-        widget: 'object',
-        schema: ProtectionSchema(),
-        default: { enabled: true },
-      },
-    },
-    required: [],
-  };
-};

package/src/components/Blocks/EmbedEEAMap/View.jsx

@@ -1,79 +0,0 @@
-import React, { useMemo } from 'react';
-import { PrivacyProtection } from '@eeacms/volto-embed';
-import Webmap from '@eeacms/volto-eea-map/components/Webmap';
-import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
-import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
-
-import { getMapVisualizationData } from './helpers';
-
-const View = (props) => {
-  const { data } = props;
-  const {
-    data_query_params,
-    enable_queries,
-    show_legend = true,
-    show_note = true,
-    show_more_info = true,
-    show_share = true,
-    dataprotection = { enabled: true },
-    height = '',
-  } = data;
-
-  const map_visualization_data = useMemo(
-    () => getMapVisualizationData(props),
-    [props],
-  );
-
-  const [mapData, setMapData] = React.useState('');
-
-  React.useEffect(() => {
-    const updatedMapData = applyQueriesToMapLayers(
-      map_visualization_data,
-      data_query_params,
-      enable_queries,
-    );
-    setMapData(updatedMapData);
-  }, [map_visualization_data, data_query_params, enable_queries]);
-
-  const mapUrl = map_visualization_data?.layers?.map_layers[0]?.map_layer
-    ?.map_service_url
-    ? `${map_visualization_data.layers.map_layers[0].map_layer.map_service_url}?f=jsapi`
-    : '';
-
-  if (map_visualization_data?.error) {
-    return (
-      <p dangerouslySetInnerHTML={{ __html: map_visualization_data.error }} />
-    );
-  }
-
-  return (
-    <PrivacyProtection
-      className="embed-map-visualization"
-      {...props}
-      data={mapUrl ? { ...data, url: mapUrl } : data}
-    >
-      {!!mapData && (
-        <>
-          <Webmap data={mapData} height={height} />
-          <ExtraViews
-            data={{
-              ...data,
-              show_legend,
-              show_note,
-              show_sources: true,
-              show_more_info,
-              show_share,
-              dataprotection,
-              map_visualization_data,
-            }}
-          />
-        </>
-      )}
-      {!mapData && (
-        <p>No map view to show. Set visualization in block configuration.</p>
-      )}
-    </PrivacyProtection>
-  );
-};
-
-export default View;

package/src/components/Blocks/EmbedEEAMap/helpers.js

@@ -1,45 +0,0 @@
-import { pickMetadata } from '@eeacms/volto-embed/helpers';
-// import { updateBlockQueryFromPageQuery } from '@eeacms/volto-eea-map/utils';
-
-const deepUpdateDataQueryParams = (
-  block,
-  data,
-  effectiveQueryParams,
-  onChangeBlock,
-) => {
-  const updatedQueryParams =
-    effectiveQueryParams &&
-    effectiveQueryParams.length > 0 &&
-    effectiveQueryParams.map((param) => {
-      // Find the matching query in the block's current data_query_params
-      const existingParam =
-        data?.data_query_params &&
-        data.data_query_params.find((p) => p.i === param.i);
-
-      // If found, merge it with the effective query parameter, preserving the alias
-      return existingParam ? { ...param, alias: existingParam.alias } : param;
-    });
-
-  // Update the block data if there are changes
-  if (
-    JSON.stringify(data.data_query_params) !==
-    JSON.stringify(updatedQueryParams)
-  ) {
-    onChangeBlock(block, {
-      ...data,
-      data_query_params: updatedQueryParams,
-    });
-  }
-};
-
-function getMapVisualizationData({ mapContent, data }) {
-  const content = mapContent || {};
-  const map_visualization_data =
-    content.map_visualization_data || data?.map_visualization_data || {};
-  return {
-    ...pickMetadata(content),
-    ...map_visualization_data,
-  };
-}
-
-export { deepUpdateDataQueryParams, getMapVisualizationData };

package/src/components/LegendView.jsx

@@ -1,150 +0,0 @@
-import React from 'react';
-import { Button, Grid } from 'semantic-ui-react';
-import cx from 'classnames';
-import { fetchArcGISData, setLegendColumns } from '../utils';
-import { serializeNodes } from '@plone/volto-slate/editor/render';
-
-import { withDeviceSize } from '@eeacms/volto-eea-map/hocs';
-
-import codeSVG from '@eeacms/volto-eea-map/static/code-line.svg';
-
-const LayerLegend = ({ data, show_viewer }) => {
-  const [legendRows, setLegendRows] = React.useState([]);
-
-  const map_service_url =
-    data && data.map_service_url ? data.map_service_url : '';
-
-  const layer = data && data.layer ? data.layer : {};
-  const { id, name } = 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]);
-
-  return (
-    <Grid.Column>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <h5 style={{ marginBottom: '0.5rem' }}>{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 &&
-          legendRows.map((item, i) => {
-            return (
-              <span key={i} style={{ display: 'flex', alignItems: 'center' }}>
-                <img
-                  alt="alt"
-                  className="layer-legend-item-color"
-                  src={`data:image/png;base64,${item.imageData}`}
-                />
-                <span style={{ fontSize: '13px', marginLeft: '5px' }}>
-                  {item.label}
-                </span>
-              </span>
-            );
-          })}
-      </div>
-    </Grid.Column>
-  );
-};
-
-const LegendView = (props) => {
-  const data = React.useMemo(() => props.data, [props.data]);
-  const { device = '', show_viewer = false } = props;
-
-  const [expand, setExpand] = React.useState(true);
-
-  const { layers = {} } = data;
-
-  const visible_layers =
-    layers && layers.map_layers && layers.map_layers.length
-      ? layers.map_layers.filter((l) => !l?.map_layer?.hide)
-      : '';
-
-  const map_layers =
-    visible_layers && visible_layers.length > 0 && visible_layers.length > 3
-      ? visible_layers.slice(0, 3)
-      : visible_layers;
-
-  const legendColumns =
-    map_layers && setLegendColumns(map_layers.length, device);
-
-  return (
-    <div className={cx('legend-toolbar', { open: expand })}>
-      <button
-        className={cx('trigger-button', { open: expand })}
-        onClick={() => setExpand(!expand)}
-      >
-        Legend
-        <i
-          className={cx({
-            'ri-arrow-right-s-line': !expand,
-            'ri-arrow-down-s-line': expand,
-          })}
-        />
-      </button>
-      {expand && (
-        <Grid className="legend-container" columns={legendColumns}>
-          <Grid.Row divided>
-            {(!map_layers || map_layers.length === 0) && (
-              <Grid.Column>
-                <p>
-                  No layer found for legend. Please add a map layer from editor.
-                </p>
-              </Grid.Column>
-            )}
-            {map_layers &&
-              map_layers.length > 0 &&
-              map_layers?.map((l, i) => (
-                <LayerLegend
-                  key={i}
-                  data={l.map_layer}
-                  show_viewer={show_viewer}
-                />
-              ))}
-          </Grid.Row>
-        </Grid>
-      )}
-    </div>
-  );
-};
-
-export default withDeviceSize(React.memo(LegendView));