@eeacms/volto-eea-map 0.1.1

package/src/components/Blocks/EEAMap/components/Webmap.jsx

@@ -0,0 +1,194 @@
+/* eslint-disable */
+import React from 'react';
+import { loadModules } from 'esri-loader';
+
+const MODULES = [
+  'esri/Map',
+  'esri/views/MapView',
+  'esri/layers/FeatureLayer',
+  'esri/layers/MapImageLayer',
+  'esri/layers/GroupLayer',
+  'esri/widgets/Legend',
+  'esri/widgets/Expand',
+  'esri/widgets/Print',
+  'esri/widgets/Zoom',
+];
+
+const Webmap = (props) => {
+  const { data = {}, editMode, height } = props;
+  const {
+    base = {},
+    layers = {},
+    id,
+    legend = {},
+    print = {},
+    zoom = {},
+  } = data;
+
+  const { base_layer = '' } = base;
+
+  const map_layers =
+    layers &&
+    layers.map_layers &&
+    layers.map_layers
+      .filter(({ map_layer }) => map_layer)
+      .map((l, i) => l.map_layer);
+  const options = {
+    css: true,
+  };
+  const mapRef = React.useRef();
+  const [modules, setModules] = React.useState({});
+  const modules_loaded = React.useRef(false);
+
+  React.useEffect(() => {
+    if (!modules_loaded.current) {
+      modules_loaded.current = true;
+      loadModules(MODULES, options).then((modules) => {
+        const [
+          Map,
+          MapView,
+          FeatureLayer,
+          MapImageLayer,
+          GroupLayer,
+          Legend,
+          Expand,
+          Print,
+          Zoom,
+        ] = modules;
+        setModules({
+          Map,
+          MapView,
+          FeatureLayer,
+          MapImageLayer,
+          GroupLayer,
+          Legend,
+          Expand,
+          Print,
+          Zoom,
+        });
+      });
+    }
+  }, [setModules, options]);
+
+  const esri = React.useMemo(() => {
+    if (Object.keys(modules).length === 0) return {};
+    const {
+      Map,
+      MapView,
+      FeatureLayer,
+      MapImageLayer,
+      GroupLayer,
+      Legend,
+      Expand,
+      Print,
+      Zoom,
+    } = modules;
+    let layers =
+      map_layers &&
+      map_layers.length > 0 &&
+      map_layers
+        .filter(({ map_service_url, layer }) => map_service_url && layer)
+        .map(({ map_service_url, layer }) => {
+          const url = `${map_service_url}/${layer}`;
+
+          let mapLayer;
+
+          //TODO: add more layers and error catch for unrecognized layer
+          switch (layer.type) {
+            case 'Raster Layer':
+              mapLayer = new MapImageLayer({
+                url: map_service_url,
+              });
+              break;
+            case 'Feature Layer':
+              mapLayer = new FeatureLayer({ url });
+              break;
+            case 'Group Layer':
+              mapLayer = new GroupLayer({ url });
+              break;
+            default:
+              break;
+          }
+          return mapLayer;
+        });
+
+    const map = new Map({
+      basemap: base_layer || 'hybrid',
+      layers,
+    });
+    const view = new MapView({
+      container: mapRef.current,
+      map,
+      center: zoom?.long && zoom?.lat ? [zoom.long, zoom.lat] : [0, 40],
+      zoom: zoom?.zoom_level ? zoom?.zoom_level : 2,
+      ui: {
+        components: ['attribution'],
+      },
+    });
+
+    if (zoom?.show_zoom) {
+      const zoomPosition = zoom && zoom.position ? zoom.position : 'top-right';
+      const zoomWidget = new Zoom({
+        view: view,
+      });
+      view.ui.add(zoomWidget, zoomPosition);
+    }
+
+    if (legend?.legend?.show_legend) {
+      const legendPosition =
+        legend && legend.legend && legend.legend.position
+          ? legend.legend.position
+          : 'top-right';
+
+      const legendWidget = new Expand({
+        content: new Legend({
+          view: view,
+          style: 'classic', // other styles include 'classic'
+        }),
+        view: view,
+        expanded: false,
+        expandIconClass: 'esri-icon-legend',
+        expandTooltip: 'Legend',
+        classNames: 'some-cool-expand',
+      });
+      view.ui.add(legendWidget, legendPosition);
+    }
+
+    if (print?.show_print) {
+      const printPosition =
+        print && print.position ? print.position : 'top-right';
+      const printWidget = new Expand({
+        content: new Print({
+          view: view,
+        }),
+        view: view,
+        expanded: false,
+        expandIconClass: 'esri-icon-printer',
+        expandTooltip: 'Print',
+      });
+      view.ui.add(printWidget, printPosition);
+    }
+
+    if (layers && layers.length > 0) {
+      view.whenLayerView(layers[0]).then((layerView) => {
+        layerView.watch('updating', (val) => {});
+      });
+    }
+    return { view, map };
+  }, [modules, base_layer, map_layers]);
+
+  const currentLayerView = esri.view?.layerViews?.items?.[0];
+  return (
+    <div>
+      <div
+        style={{
+          height: height && !editMode ? `${height}px` : '500px',
+        }}
+        ref={mapRef}
+        className="esri-map"
+      ></div>
+    </div>
+  );
+};
+
+export default Webmap;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { Icon } from '@plone/volto/components';
+
+import TextView from '../TextView';
+import LegendWidget from './LegendWidget';
+
+import worldSVG from '@plone/volto/icons/world.svg';
+import downloadSVG from '@plone/volto/icons/download.svg';
+
+const ExtraViews = ({ data }) => {
+  const { map_data = {}, description, show_description } = data;
+  const { general = {} } = map_data;
+  return (
+    <>
+      {general.show_legend && <LegendWidget data={map_data} />}
+      {show_description && description && <TextView text={description} />}
+      {(general.show_download || general.show_viewer) && (
+        <div
+          style={{ display: 'flex', justifyContent: 'end', margin: '10px 0' }}
+        >
+          {general.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">
+                <Icon name={downloadSVG} title="Download" size="25px" />
+              </Button>
+            </a>
+          )}
+          {general.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">
+                <Icon name={worldSVG} title="Check Url" size="25px" />
+              </Button>
+            </a>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default ExtraViews;

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import { Icon } from '@plone/volto/components';
+import { Input, Select, Button, Grid } from 'semantic-ui-react';
+
+import checkSVG from '@plone/volto/icons/check.svg';
+import closeSVG from '@plone/volto/icons/clear.svg';
+
+import { fetchArcgisData } from '../../utils';
+
+const LayerSelectWidget = (props) => {
+  const { onChange, value = {}, id } = props;
+
+  const { available_layers, map_data, map_service_url, layer } = value;
+
+  const [mapData, setMapData] = React.useState(map_data);
+  const [checkColor, setCheckColor] = React.useState('');
+  const [serviceUrlError, setServiceUrlError] = React.useState('');
+  const [serviceUrl, setServiceUrl] = React.useState(map_service_url);
+  const [selectedLayer, setSelectedLayer] = React.useState(layer);
+  const [availableLayers, setAvailableLayers] = React.useState(
+    available_layers,
+  );
+
+  const handleServiceUrlCheck = async () => {
+    // fetch url, save it, populate layers options
+    try {
+      let mapData = await fetchArcgisData(serviceUrl);
+      setCheckColor('green');
+      setMapData(mapData);
+      setServiceUrlError('');
+      if (mapData.layers && mapData.layers.length > 0) {
+        setAvailableLayers(
+          mapData.layers.map((layer, i) => {
+            return { key: layer.id, value: layer, text: layer.name };
+          }),
+        );
+      }
+      onChange(id, {
+        layer: selectedLayer,
+        map_service_url: serviceUrl,
+        available_layers: availableLayers,
+        map_data: mapData,
+      });
+    } catch (e) {
+      setCheckColor('youtube');
+      setServiceUrlError({ error: e.message, status: e.status });
+    }
+  };
+
+  const handleSelectLayer = (layer) => {
+    setSelectedLayer(layer);
+    onChange(id, {
+      layer,
+      map_service_url: serviceUrl,
+      available_layers: availableLayers,
+      map_data: mapData,
+    });
+  };
+
+  return (
+    <div
+      style={{
+        padding: '0 5px',
+      }}
+    >
+      <Grid>
+        <h4>Service URL</h4>
+        <Grid.Row>
+          <Input
+            type="text"
+            onChange={(e, { value }) => setServiceUrl(value)}
+            style={{ width: '100%' }}
+            value={serviceUrl}
+          />
+          <Grid.Row>
+            <Button
+              style={{
+                margin: '10px 0',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+              color={checkColor}
+              onClick={handleServiceUrlCheck}
+            >
+              <p style={{ fontSize: '14px', margin: '0', marginRight: '5px' }}>
+                Check Url
+              </p>
+              <Icon
+                name={serviceUrlError ? closeSVG : checkSVG}
+                style={{ marginLeft: '5px' }}
+                title="Check Url"
+                size="17px"
+              />
+            </Button>
+          </Grid.Row>
+        </Grid.Row>
+        <h4>Layer</h4>
+        <Grid.Row>
+          <Select
+            onChange={(e, { value }) => handleSelectLayer(value)}
+            options={availableLayers}
+            style={{ width: '100%' }}
+            placeholder="Select layer"
+            value={selectedLayer}
+          />
+        </Grid.Row>
+        <Grid.Row stretched></Grid.Row>
+      </Grid>
+    </div>
+  );
+};
+
+export default LayerSelectWidget;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import LayerSelectWidget from './LayerSelectWidget';
+
+const LayersPanel = ({ data, onChange, block }) => {
+  const { map_layers } = data || {};
+
+  React.useEffect(() => {
+    if (!data.map_layers) {
+      onChange('map_data', {
+        ...data,
+        map_layers: [
+          {
+            map_service_url: '',
+            layer: '',
+            available_layers: [],
+            map_data: {},
+          },
+        ],
+      });
+    }
+  }, [data, block, onChange]);
+
+  const handleAddLayer = () => {
+    onChange('map_data', {
+      ...data,
+      map_layers: [
+        ...data.map_layers,
+        { map_service_url: '', layer: '', available_layers: [], map_data: {} },
+      ],
+    });
+  };
+
+  return (
+    <div>
+      {map_layers &&
+        map_layers.length > 0 &&
+        map_layers.map((layer, i) => (
+          <LayerSelectWidget
+            key={i}
+            index={i}
+            layer={layer}
+            onChange={onChange}
+            block={block}
+            data={data}
+          />
+        ))}
+
+      <Button size="tiny" onClick={handleAddLayer}>
+        Add Layer
+      </Button>
+    </div>
+  );
+};
+
+export default LayersPanel;

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Grid } from 'semantic-ui-react';
+import { fetchArcgisData } from '../../utils';
+
+const LayerLegend = ({ data }) => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      {data.length > 0 &&
+        data.map((item, i) => {
+          return (
+            <span style={{ display: 'flex', alignItems: 'center' }}>
+              <img alt="alt" src={`data:image/png;base64,${item.imageData}`} />
+              <span style={{ fontSize: '13px' }}>{item.label}</span>
+            </span>
+          );
+        })}
+    </div>
+  );
+};
+
+const LegendWidget = (props) => {
+  const { data = {} } = props;
+  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);
+    const { layers = [] } = legendData;
+
+    setLegendLayers(layers);
+  };
+
+  React.useEffect(() => {
+    fetchLegend(activeLayer.map_service_url + '/legend');
+  }, [data, activeLayer.map_service_url]);
+
+  return (
+    <>
+      <div style={{ margin: '10px 0' }}>
+        <Grid>
+          <Grid.Row>
+            <Grid.Column>
+              <h3>Legend:</h3>
+              {legendLayers.length > 0 &&
+                legendLayers.map((layer, index) => {
+                  return (
+                    <div style={{ display: 'flex', flexDirection: 'column' }}>
+                      <h5>{layer?.layerName}</h5>
+                      <LayerLegend data={layer.legend} />
+                    </div>
+                  );
+                })}
+            </Grid.Column>
+          </Grid.Row>
+        </Grid>
+      </div>
+    </>
+  );
+};
+
+export default LegendWidget;

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import { Modal, Button, Grid } from 'semantic-ui-react';
+import Webmap from '../Webmap';
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+
+import { panelsSchema } from './panelsSchema';
+
+const MapEditorWidget = (props) => {
+  const [open, setOpen] = React.useState(false);
+  const { onChange = {}, block = {}, value = {}, id } = props;
+  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);
+  };
+
+  return (
+    <FormFieldWrapper {...props}>
+      <Modal
+        id="map-editor-modal"
+        style={{ width: '95% !important' }}
+        onClose={handleClose}
+        onOpen={() => setOpen(true)}
+        open={open}
+        trigger={
+          <Button size="tiny" className="map-modal-trigger-button">
+            Open Map Editor
+          </Button>
+        }
+      >
+        <Modal.Content scrolling>
+          <Grid>
+            <Grid.Row>
+              <Grid.Column width={4}>
+                <InlineForm
+                  block={block}
+                  title={panelsSchema.title}
+                  schema={panelsSchema}
+                  onChangeField={(id, value) => {
+                    handleChangeField(id, value);
+                  }}
+                  formData={dataForm}
+                />
+              </Grid.Column>
+              <Grid.Column width={8}>
+                <Webmap data={intValue} editMode={true} />
+              </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 MapEditorWidget;

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

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Menu, Tab } from 'semantic-ui-react';
+import { ObjectWidget } from '@plone/volto/components';
+
+export const ObjectTypesWidget = (props) => {
+  const { schemas, value = {}, onChange, errors = {}, id } = props;
+  const objectId = id;
+
+  const defaultActiveTab = 0;
+
+  const [activeTab, setActiveTab] = React.useState(
+    defaultActiveTab > -1 ? defaultActiveTab : 0,
+  );
+  const createTab = ({ schema, id, icon }, index) => {
+    return {
+      menuItem: () => (
+        <Menu.Item
+          onClick={() => setActiveTab(index)}
+          active={activeTab === index}
+          key={id}
+        >
+          <p style={{ fontSize: '14px', fontWeight: 'bold' }}>{schema.title}</p>
+        </Menu.Item>
+      ),
+      render: () => {
+        return (
+          <Tab.Pane>
+            <ObjectWidget
+              schema={schema}
+              id={id}
+              errors={errors}
+              value={value[id] || {}}
+              onChange={(schemaId, v) => {
+                onChange(objectId, { ...value, [schemaId]: v });
+              }}
+            />
+          </Tab.Pane>
+        );
+      },
+    };
+  };
+
+  return (
+    <Tab
+      menu={{ fluid: true, vertical: true, tabular: true }}
+      panes={schemas.map(createTab)}
+      activeIndex={activeTab}
+      grid={{ paneWidth: 8, tabWidth: 4 }}
+    />
+  );
+};
+
+export default ObjectTypesWidget;