@eeacms/volto-eea-map 0.1.13 → 0.1.16

package/src/components/widgets/panelsSchema.js

@@ -0,0 +1,151 @@
+import { base_layers } from '../../constants';
+
+const BaseLayerSchema = {
+  title: 'Base Layer',
+  fieldsets: [
+    {
+      id: 'base',
+      title: 'Base Layer',
+      fields: ['base_layer'],
+    },
+  ],
+  properties: {
+    base_layer: {
+      title: 'Base Layer',
+      choices: base_layers,
+    },
+  },
+  required: [],
+};
+
+const LayerSchema = {
+  title: 'Layer',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Layer',
+      fields: ['map_layer'],
+    },
+  ],
+  properties: {
+    map_layer: {
+      title: 'Map layer configuration',
+      widget: 'map_layers_widget',
+    },
+  },
+  required: [],
+};
+
+const MapLayersSchema = {
+  title: 'Map Layers',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Map Data',
+      fields: ['map_layers'],
+    },
+  ],
+  properties: {
+    map_layers: {
+      title: 'Map Layers',
+      description: 'Add/Edit Map Layers',
+      widget: 'object_list',
+      schema: LayerSchema,
+    },
+  },
+  required: [],
+};
+
+const GeneralSchema = ({ data = {} }) => {
+  const centerOnExtent = data?.map_data?.general?.centerOnExtent;
+
+  return {
+    title: 'General',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Zoom',
+        fields: [
+          'print_position',
+          'zoom_position',
+          'centerOnExtent',
+          ...(!centerOnExtent ? ['zoom_level', 'long', 'lat'] : []),
+        ],
+      },
+    ],
+    properties: {
+      centerOnExtent: {
+        title: 'Center on extent',
+        type: 'boolean',
+        description:
+          'This will override latitude/longitude/zoom level and will lock zoom/moving the map.',
+      },
+      zoom_position: {
+        title: 'Zoom position',
+        choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
+          (n) => {
+            return [n, n];
+          },
+        ),
+      },
+      zoom_level: {
+        title: 'Zoom level',
+        type: 'number',
+      },
+      long: {
+        title: 'Longitude',
+        type: 'number',
+      },
+      lat: {
+        title: 'Latitude',
+        type: 'number',
+      },
+
+      print_position: {
+        title: 'Print position',
+        choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
+          (n) => {
+            return [n, n];
+          },
+        ),
+      },
+    },
+    required: [],
+  };
+};
+
+export default ({ data = {} }) => {
+  const generalSchema = GeneralSchema({ data });
+
+  return {
+    title: 'Map Editor',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Map Editor Sections',
+        fields: ['map_data'],
+      },
+    ],
+    properties: {
+      map_data: {
+        title: 'Panels',
+        widget: 'object_types_widget',
+        schemas: [
+          {
+            id: 'general',
+            schema: generalSchema,
+          },
+          {
+            id: 'base',
+            schema: BaseLayerSchema,
+          },
+          {
+            id: 'layers',
+            schema: MapLayersSchema,
+          },
+        ],
+      },
+    },
+    required: [],
+  };
+};

package/src/constants.js

@@ -1 +1,29 @@
-export const GET_MAP_VISUALIZATION = 'GET_MAP_VISUALIZATION';
+const positions = ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
+  (n) => {
+    return { key: n, value: n, text: n };
+  },
+);
+
+const base_layers = [
+  'dark-gray',
+  'dark-gray-vector',
+  'gray',
+  'gray-vector',
+  'hybrid',
+  'national-geographic',
+  'oceans',
+  'osm',
+  'satellite',
+  'streets',
+  'streets-navigation-vector',
+  'streets-night-vector',
+  'streets-relief-vector',
+  'streets-vector',
+  'terrain',
+  'topo',
+  'topo-vector',
+].map((n) => {
+  return [n, n];
+});
+
+export { positions, base_layers };

package/src/index.js

@@ -1,16 +1,13 @@
-import {
-  EEAMapEdit,
-  EEAMapView,
-  EmbedMapView,
-  EmbedMapEdit,
-} from '@eeacms/volto-eea-map/components';
+import EmbedMapView from './components/Blocks/EmbedEEAMap/View';
+import EmbedMapEdit from './components/Blocks/EmbedEEAMap/Edit';
+
 import world from '@plone/volto/icons/world.svg';
-import DataQueryWidget from './components/Blocks/EEAMap/components/widgets/DataQueryWidget';
-import LayerSelectWidget from './components/Blocks/EEAMap/components/widgets/LayerSelectWidget';
-import MapEditorWidget from './components/Blocks/EEAMap/components/widgets/MapEditorWidget';
-import ObjectTypesWidget from './components/Blocks/EEAMap/components/widgets/ObjectTypesWidget';
-import VisualizationEditorWidget from './components/Blocks/EEAMap/components/widgets/VisualizationEditorWidget';
-import VisualizationView from './components/Blocks/EEAMap/components/widgets/VisualizationView';
+import DataQueryWidget from './components/widgets/DataQueryWidget';
+import LayerSelectWidget from './components/widgets/LayerSelectWidget';
+import MapEditorWidget from './components/widgets/MapEditorWidget';
+import ObjectTypesWidget from './components/widgets/ObjectTypesWidget';
+import VisualizationEditorWidget from './components/visualization/VisualizationEditorWidget';
+import VisualizationView from './components/visualization/VisualizationView';
 
 import { data_visualizations } from './middlewares';
 import * as addonReducers from './reducers';
@@ -31,33 +28,36 @@ export default (config) => {
     'noise.discomap.eea.europa.eu',
     'copernicus.discomap.eea.europa.eu',
   ];
-  config.blocks.blocksConfig.eea_map_block = {
-    id: 'eea_map_block', // The name (id) of the block
-    title: 'EEA Map', // The display name of the block
-    icon: world, // The icon used in the block chooser
-    group: 'common', // The group (blocks can be grouped, displayed in the chooser)
-    view: EEAMapView, // The view mode component
-    edit: EEAMapEdit, // The edit mode component
-    sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
-    security: {
-      addPermission: [], // Future proof (not implemented yet) add user permission role(s)
-      view: [], // Future proof (not implemented yet) view user role(s)
-    },
-    variations: [
-      {
-        id: 'default',
-        title: 'EEA Map (default)',
-        isDefault: true,
-        view: EEAMapView,
-      },
-      {
-        id: 'extra',
-        title: 'Extra variation (expand if needed)',
-        isDefault: true,
-        view: EEAMapView,
-      },
-    ],
-  };
+
+  // EEA MAP BLOCK
+
+  // config.blocks.blocksConfig.eea_map_block = {
+  //   id: 'eea_map_block', //  The name (id) of the block
+  //   title: 'EEA Map', //  The display name of the block
+  //   icon: world, //  The icon used in the block chooser
+  //   group: 'common', //The group (blocks can be grouped, displayed in the chooser)
+  //   view: EEAMapView, //The view mode component
+  //   edit: EEAMapEdit, // The edit mode component
+  //   sidebarTab: 1, // The sidebar tab you want to be selected when selecting the block
+  //   security: {
+  //     addPermission: [], //  Future proof (not implemented yet) add user permission role(s)
+  //     view: [], //Future proof (not implemented yet) view user role(s)
+  //   },
+  //   variations: [
+  //     {
+  //       id: 'default',
+  //       title: 'EEA Map (default)',
+  //       isDefault: true,
+  //       view: EEAMapView,
+  //     },
+  //     {
+  //       id: 'extra',
+  //       title: 'Extra variation (expand if needed)',
+  //       isDefault: true,
+  //       view: EEAMapView,
+  //     },
+  //   ],
+  // };
 
   config.blocks.blocksConfig.embed_eea_map_block = {
     id: 'embed_eea_map_block', // The name (id) of the block
@@ -76,13 +76,13 @@ export default (config) => {
         id: 'default',
         title: 'EEA Map (default)',
         isDefault: true,
-        view: EEAMapView,
+        view: EmbedMapView,
       },
       {
         id: 'extra',
         title: 'Extra variation (expand if needed)',
         isDefault: true,
-        view: EEAMapView,
+        view: EmbedMapView,
       },
     ],
   };

package/src/middlewares/index.js

@@ -1,4 +1,4 @@
-import { GET_MAP_VISUALIZATION } from '@eeacms/volto-eea-map/constants';
+import { GET_MAP_VISUALIZATION } from '../actionTypes';
 
 export const data_visualizations = (middlewares) => [
   (store) => (next) => (action) => {

package/src/reducers/map_visualizations.js

@@ -1,4 +1,4 @@
-import { GET_MAP_VISUALIZATION } from '@eeacms/volto-eea-map/constants';
+import { GET_MAP_VISUALIZATION } from '../actionTypes';
 
 const initialState = {
   data: {},

package/src/static/code-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M23 12l-7.071 7.071-1.414-1.414L20.172 12l-5.657-5.657 1.414-1.414L23 12zM3.828 12l5.657 5.657-1.414 1.414L1 12l7.071-7.071 1.414 1.414L3.828 12z"/></svg>

package/src/{components/Blocks/EEAMap/styles → styles}/map.css

@@ -104,21 +104,82 @@
 }
 
 .map_source_title {
-  margin-top: 15px !important;
-  margin-bottom: 5px !important;
-  font-size: 18px;
   font-weight: bold;
 }
 
 .map_source_description {
-  margin: 5px 0 !important;
-  font-size: 14px;
+  margin-left: 5px;
 }
 
 .data-query-widget-field {
   margin: 10px 0;
 }
 
+.spaced-row {
+  width: 100%;
+  /* border-bottom: 1px solid lightgray; */
+
+  padding-bottom: 10px;
+}
+
+.legend-title {
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  margin: 0 !important;
+}
+
+.data-param-title {
+  padding-bottom: 15px;
+  border-bottom: 1px solid lightgray;
+  font-size: 16px;
+}
+
+.data-param-values {
+  padding-bottom: 15px;
+  border-bottom: 1px solid lightgray;
+}
+
+.map-layer-description-field {
+  width: 100%;
+}
+
+.map-layer-description-field
+  > .slate_wysiwyg
+  > .grid
+  > .stretched.row
+  > .four.wide.column {
+  display: none !important;
+}
+
+.map-layer-description-field
+  > .slate_wysiwyg
+  > .grid
+  > .stretched.row
+  > .eight.wide.column {
+  width: 100% !important;
+  padding: 10px 0 !important;
+}
+
+.legend-container {
+  margin: 15px 0;
+}
+
+.map_source_param_container {
+  display: flex;
+}
+
+.extra-view-external-button {
+  color: inherit;
+}
+
+.legend-action {
+  padding: 10px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
 @keyframes fadeDown {
   from {
     opacity: 0;

package/src/{components/Blocks/EEAMap/utils.js → utils.js}

@@ -1,7 +1,23 @@
 /* eslint-disable no-throw-literal */
 import { getBaseUrl } from '@plone/volto/helpers';
+const setLegendColumns = (legendsNo, device) => {
+  switch (device) {
+    case 'widescreen':
+      return legendsNo ? legendsNo : 1;
+    case 'large':
+      return legendsNo ? legendsNo : 1;
+    case 'computer':
+      return legendsNo ? legendsNo : 1;
+    case 'tablet':
+      return 1;
+    case 'mobile':
+      return 1;
+    default:
+      return 1;
+  }
+};
 
-const fetchArcgisData = async (url) => {
+const fetchArcGISData = async (url) => {
   const res = await fetch(`${getBaseUrl('')}/cors-proxy/${url}?f=json`);
   if (res.status !== 200) {
     const error = await res.json();
@@ -14,4 +30,4 @@ const fetchArcgisData = async (url) => {
   return data;
 };
 
-export { fetchArcgisData };
+export { setLegendColumns, fetchArcGISData };

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

@@ -1,46 +0,0 @@
-import React from 'react';
-import { FormFieldWrapper, Field } from '@plone/volto/components';
-
-const DataQueryWidget = (props) => {
-  const { value, onChange, id } = props;
-
-  const onChangeAlias = (fieldId, fieldValue) => {
-    let altValue = value;
-    value[fieldId] = { ...value[fieldId], alias: fieldValue };
-    onChange(id, altValue);
-  };
-
-  return (
-    <div>
-      <FormFieldWrapper {...props} noForInFieldLabel></FormFieldWrapper>
-      <div className="data-query-widget-field">
-        {value && value.length > 0 ? (
-          value.map((param, i) => (
-            <div key={i}>
-              <h5 style={{ fontWeight: 'bold' }}>{param.i}</h5>
-              <Field
-                id={i}
-                title="Alias"
-                type="string"
-                description="Data connector parameter alias for matchings. Default is {Key}"
-                onChange={onChangeAlias}
-                value={param?.alias}
-              />
-              <Field
-                id={param.i}
-                title="Values"
-                type="string"
-                description="Parameter value/s"
-                value={param.v.join(',')}
-              />
-            </div>
-          ))
-        ) : (
-          <p style={{ textAlign: 'center' }}>No parameters set</p>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default DataQueryWidget;

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

@@ -1,86 +0,0 @@
-import React from 'react';
-import { Button } from 'semantic-ui-react';
-import { Icon, UniversalLink } from '@plone/volto/components';
-
-import LegendWidget from './LegendWidget';
-import { serializeNodes } from 'volto-slate/editor/render';
-
-import worldSVG from '@plone/volto/icons/world.svg';
-import downloadSVG from '@plone/volto/icons/download.svg';
-
-const ExtraViews = ({ data }) => {
-  const {
-    map_data = {},
-    description,
-    show_legend,
-    show_download,
-    show_viewer,
-    show_sources,
-    data_provenance = {},
-  } = data;
-  return (
-    <div className="extra-eea-map-content">
-      {map_data &&
-        map_data.layers?.map_layers[0] &&
-        (show_download || show_viewer) && (
-          <div
-            style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
-          >
-            {show_download && (
-              <a
-                target="_blank"
-                rel="noreferrer"
-                href={`${map_data.layers.map_layers[0].map_layer.map_service_url}?f=lyr&v=9.3`}
-              >
-                <Button size="tiny">
-                  <Button.Content>
-                    <Icon name={downloadSVG} title="Download" size="25px" />
-                  </Button.Content>
-                </Button>
-              </a>
-            )}
-            {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>
-                    <Icon name={worldSVG} title="View map" size="25px" />
-                  </Button.Content>
-                </Button>
-              </a>
-            )}
-          </div>
-        )}
-      {show_legend && map_data && <LegendWidget data={map_data} />}
-      {show_sources && (
-        <>
-          {data_provenance &&
-          data_provenance.data &&
-          data_provenance.data.length > 0 ? (
-            <div>
-              <h3>Sources:</h3>
-              {data_provenance.data.map((data, i) => (
-                <div key={i}>
-                  <p className="map_source_title">{data.title}</p>
-                  <p className="map_source_description">{data.organisation}</p>
-                  <UniversalLink href={data.link}>{data.link} </UniversalLink>
-                </div>
-              ))}
-            </div>
-          ) : (
-            <p>Data provenance is not set for visualization used or page</p>
-          )}
-        </>
-      )}
-      {description && serializeNodes(description)}
-    </div>
-  );
-};
-
-export default ExtraViews;

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

@@ -1,94 +0,0 @@
-import React from 'react';
-import { Modal, Button, Grid } from 'semantic-ui-react';
-import Webmap from '../Webmap';
-import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
-import { VisibilitySensor } from '@eeacms/volto-datablocks/components';
-
-import PanelsSchema from './panelsSchema';
-
-const VisualizationEditorWidget = (props) => {
-  const [open, setOpen] = React.useState(false);
-  const { onChange = {}, id } = props;
-  const block = React.useMemo(() => props.block, [props.block]);
-  const value = React.useMemo(() => props.value, [props.value]);
-
-  const [intValue, setIntValue] = React.useState(value);
-
-  const dataForm = { map_data: intValue };
-  const handleApplyChanges = () => {
-    onChange(id, intValue);
-    setOpen(false);
-  };
-
-  const handleClose = () => {
-    setIntValue(value);
-    setOpen(false);
-  };
-
-  const handleChangeField = (id, fieldVal) => {
-    setIntValue(fieldVal);
-  };
-
-  let schema = PanelsSchema({ data: dataForm });
-
-  return (
-    <FormFieldWrapper {...props}>
-      <Button
-        floated="right"
-        size="tiny"
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setOpen(true);
-        }}
-      >
-        Open Map Editor
-      </Button>
-      {open && (
-        <Modal
-          id="map-editor-modal"
-          style={{ width: '95% !important' }}
-          open={true}
-        >
-          <Modal.Content scrolling>
-            <Grid>
-              <Grid.Row>
-                <Grid.Column width={4}>
-                  <InlineForm
-                    block={block}
-                    title={schema.title}
-                    schema={schema}
-                    onChangeField={(id, value) => {
-                      handleChangeField(id, value);
-                    }}
-                    formData={dataForm}
-                  />
-                </Grid.Column>
-                <Grid.Column width={8}>
-                  <VisibilitySensor>
-                    <Webmap data={intValue} editMode={true} />
-                  </VisibilitySensor>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Modal.Content>
-          <Modal.Actions>
-            <Grid>
-              <Grid.Row>
-                <Grid.Column width={8}></Grid.Column>
-                <Grid.Column width={4}>
-                  <Button onClick={() => handleClose()}>Close</Button>
-                  <Button color="green" onClick={() => handleApplyChanges()}>
-                    Apply changes
-                  </Button>
-                </Grid.Column>
-              </Grid.Row>
-            </Grid>
-          </Modal.Actions>
-        </Modal>
-      )}
-    </FormFieldWrapper>
-  );
-};
-
-export default VisualizationEditorWidget;

package/src/components/Blocks/EEAMap/constants.js

@@ -1,29 +0,0 @@
-const positions = ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
-  (n) => {
-    return { key: n, value: n, text: n };
-  },
-);
-
-const base_layers = [
-  'dark-gray',
-  'dark-gray-vector',
-  'gray',
-  'gray-vector',
-  'hybrid',
-  'national-geographic',
-  'oceans',
-  'osm',
-  'satellite',
-  'streets',
-  'streets-navigation-vector',
-  'streets-night-vector',
-  'streets-relief-vector',
-  'streets-vector',
-  'terrain',
-  'topo',
-  'topo-vector',
-].map((n) => {
-  return [n, n];
-});
-
-export { positions, base_layers };