+
+ );
+});
+
+const Rule = compose(injectLazyLibs(['reactSelectCreateable']))(RuleComponent);
+
+function Layer({ layer, layers, index, value, onChangeValue }) {
+ const uid = useState(uuid());
+ const { servicesApi, layersApi } = useContext(EditorContext);
+
+ const layerPath = useMemo(
+ () =>
+ !isNil(layer.url) && !isNil(layer.id) ? `${layer.url}/${layer.id}` : null,
+ [layer.url, layer.id],
+ );
+
+ const $service = useMemo(
+ () => ({
+ data: servicesApi.data[layer.url],
+ error: servicesApi.error[layer.url],
+ loading: servicesApi.loading[layer.url],
+ loaded: servicesApi.loaded[layer.url],
+ load: servicesApi.load,
+ }),
+ [servicesApi, layer.url],
+ );
+
+ const $layer = useMemo(
+ () => ({
+ data: layersApi.data[layerPath],
+ error: layersApi.error[layerPath],
+ loading: layersApi.loading[layerPath],
+ loaded: layersApi.loaded[layerPath],
+ load: layersApi.load,
+ }),
+ [layersApi, layerPath],
+ );
+
+ useEffect(() => {
+ if (!$service.loaded && !$service.loading && layer.url) {
+ debounce(
+ () => {
+ $service.load(layer.url);
+ },
+ 300,
+ `fetch:${uid}:${layer.url}`,
+ );
+ }
+ }, [uid, $service, layer]);
+
+ useEffect(() => {
+ if (!$layer.loaded && !$layer.loading && !$layer.error && layerPath) {
+ debounce(
+ () => {
+ $layer.load(layerPath);
+ },
+ 300,
+ `fetch:${uid}:${layerPath}`,
+ );
+ }
+ }, [uid, $layer, layerPath]);
+
+ useEffect(() => {
+ if (!$layer.loaded || $layer.data.id !== layer.id) return;
+ const defaults = getLayerDefaults($layer.data);
+ if (JSON.stringify(defaults) !== JSON.stringify(layer.defaults)) {
+ onChangeValue({
+ ...value,
+ layers: layers.map((layer, i) => {
+ if (i !== index) return layer;
+ return {
+ ...layer,
+ defaults,
+ };
+ }),
+ });
+ }
+ }, [index, layer, $layer, layers, value, onChangeValue]);
+
+ return (
+ <>
+
+
+
+ + When using page level parameters to filter the map, please specify the + corresponding name +
++ {$layer.error.message} +
+ ) : null, + }, + zoomToExtent: { + title: 'Zoom to extent', + type: 'boolean', + }, + }, + required: [], + }} + formData={{ + ...layer, + layerId: !isNil(layer.id) + ? { + label: `${layer.id}${layer.name ? ` - ${layer.name}` : ''}`, + value: layer.id, + } + : null, + }} + onChangeField={(id, fieldValue) => { + let $fieldValue = fieldValue; + let newLayer = {}; + + if (id === 'layerId') { + $fieldValue = toNumber(fieldValue) || 0; + newLayer = + $service.data?.layers.find((layer) => layer.id === $fieldValue) || + {}; + } + + onChangeValue({ + ...value, + layers: layers.map((layer, i) => { + if (i !== index) + return { + ...layer, + ...(id === 'zoomToExtent' ? { zoomToExtent: false } : {}), + }; + if (id === 'url') { + return { url: $fieldValue }; + } + return { + ...layer, + ...newLayer, + [id === 'layerId' ? 'id' : id]: $fieldValue, + subLayers: getSublayers(newLayer?.subLayerIds, $service.data), + }; + }), + }); + }} + /> + + {$service.loaded && $layer.loaded && $layer.data?.fields?.length && ( + <> +
+
+ );
+}
diff --git a/src/Arcgis/Layer/Layer.jsx b/src/Arcgis/Layer/Layer.jsx
new file mode 100644
index 0000000..d99f22a
--- /dev/null
+++ b/src/Arcgis/Layer/Layer.jsx
@@ -0,0 +1,247 @@
+import { useContext, useEffect, useMemo, memo } from 'react';
+import { EventEmitter } from 'events';
+import { uniq, isObject, isNaN } from 'lodash';
+
+import useClass from '@eeacms/volto-eea-map/hooks/useClass';
+import useChangedProps from '@eeacms/volto-eea-map/hooks/useChangedProps';
+
+import { omitBy } from '@eeacms/volto-eea-map/Arcgis/helpers';
+import { layersMapping, withSublayers } from '@eeacms/volto-eea-map/constants';
+
+import MapContext from '@eeacms/volto-eea-map/Arcgis/Map/MapContext';
+
+let modules = {};
+
+class $Layer extends EventEmitter {
+ #isReady = false;
+ #props = {};
+ #layer = null;
+ #modulesLoaded = false;
+
+ constructor(props = {}) {
+ super();
+
+ this.#props = props;
+ }
+
+ get props() {
+ return this.#props;
+ }
+
+ get isReady() {
+ return this.#isReady && !!this.#layer;
+ }
+
+ get layer() {
+ return this.#layer;
+ }
+
+ set props(props = {}) {
+ this.#props = props;
+ }
+
+ getUrl(id) {
+ return this.#props.url
+ ? `${this.#props.url}${id ? `/${id}` : ''}`
+ : undefined;
+ }
+
+ getType(type) {
+ return layersMapping[type] || type?.replaceAll(' ', '');
+ }
+
+ getLayersTypes(layer) {
+ return uniq([
+ this.getType(layer.type),
+ ...(layer.subLayers || []).reduce((acc, layer) => {
+ acc.push(...this.getLayersTypes(layer));
+ return acc;
+ }, []),
+ ]);
+ }
+
+ getRenderer(renderer) {
+ const { $map } = this.#props;
+ const agJsonUtils = $map.modules.agJsonUtils;
+
+ if (!renderer) return;
+
+ if (renderer.autocast) {
+ return renderer;
+ }
+ return agJsonUtils.fromJSON(renderer);
+ }
+
+ async loadModules() {
+ const $arcgis = __CLIENT__ ? window.$arcgis : null;
+ if (__SERVER__ || !$arcgis) return Promise.reject();
+ if (!this.#modulesLoaded) {
+ const types = this.getLayersTypes(this.#props);
+ for (const type of types) {
+ if (!modules[`Ag${type}`] && type) {
+ modules[`Ag${type}`] = await $arcgis.import(`esri/layers/${type}`);
+ }
+ }
+ this.#modulesLoaded = true;
+ }
+ return Promise.resolve();
+ }
+
+ createLayer(props) {
+ const type = this.getType(props.type);
+
+ if (!type) return null;
+
+ const AgLayer = modules[`Ag${type}`];
+
+ if (!AgLayer) {
+ throw new Error('$Layer modules not loaded');
+ }
+
+ const renderer = this.getRenderer(props.renderer);
+
+ const layerProps = omitBy(props || {}, [
+ '$map',
+ 'type',
+ 'url',
+ 'id',
+ 'renderer',
+ ]);
+
+ if (renderer) {
+ layerProps.renderer = renderer;
+ }
+
+ const layer = new AgLayer(
+ withSublayers.includes(type)
+ ? {
+ url: this.getUrl(),
+ sublayers: props.sublayers || [layerProps],
+ }
+ : {
+ url: this.getUrl(props.id),
+ ...layerProps,
+ },
+ );
+
+ if (props.subLayers) {
+ props.subLayers.forEach((subLayer) => {
+ layer.add(this.createLayer(subLayer));
+ });
+ }
+
+ return layer;
+ }
+
+ init() {
+ const $map = this.#props.$map;
+ if (!$map.isReady || (!this.#props.url && !this.#props.source)) return;
+ if (!this.#modulesLoaded) {
+ throw new Error('$Layer modules not loaded');
+ }
+
+ this.#layer = this.createLayer(this.#props);
+
+ if (this.#props.zoomToExtent) {
+ this.#layer.when(async () => {
+ const data = await this.#layer.queryExtent();
+ if (!$map.view) return;
+ $map.view.goTo(data.extent).then(() => {
+ const homeWidget = $map.view.ui.find('Home');
+ if (!homeWidget) return;
+ homeWidget.viewpoint = new $map.modules.AgViewpoint({
+ center: $map.view.center,
+ zoom: $map.view.zoom,
+ });
+ });
+ });
+ }
+
+ if (this.#layer) {
+ $map.map.add(this.#layer);
+ }
+
+ this.#isReady = true;
+
+ this.emit('connected');
+ }
+
+ updateProps(props) {
+ if (isNaN(props) || !isObject(props)) return;
+ Object.keys(props).forEach((key) => {
+ if (key === '$map') return;
+ this.#props[key] = props[key];
+ });
+ this.update(props);
+ }
+
+ update(props) {
+ const { $map } = this.#props;
+ if (!this.isReady || !$map.isReady) return;
+
+ Object.keys(
+ omitBy(props || this.#props || {}, ['$map', 'id', 'type', 'url']),
+ ).forEach((key) => {
+ switch (key) {
+ case 'renderer':
+ const renderer = this.getRenderer(this.#props[key]);
+ if (renderer) {
+ this.#layer.renderer = renderer;
+ }
+ break;
+ default:
+ this.#layer[key] = this.#props[key];
+ break;
+ }
+ });
+ }
+
+ connect() {
+ this.loadModules().then(() => {
+ this.init();
+ });
+ }
+
+ disconnect() {
+ if (!this.#isReady) return;
+ if (this.#layer) {
+ this.#layer.destroy();
+ }
+ this.#layer = null;
+ this.#isReady = false;
+ this.#modulesLoaded = false;
+ this.emit('disconnected');
+ }
+}
+
+// https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-Layer.html
+function Layer(props) {
+ const { $map } = useContext(MapContext);
+ const context = useMemo(() => ({ ...props, $map }), [props, $map]);
+
+ const $layer = useClass($Layer, context);
+
+ useChangedProps((props) => {
+ if (!$layer || !$map || !$map.isReady) return;
+ $layer.updateProps(props);
+ }, props);
+
+ useEffect(() => {
+ if (!$layer) return;
+
+ $layer.props = context;
+
+ $layer.connect();
+
+ return () => {
+ if (!$layer) return;
+ $layer.disconnect();
+ };
+ // We handle the props change in the useEffect above.
+ /* eslint-disable-next-line */
+ }, [$map, $layer, context.id, context.type, context.url, context.source]);
+
+ return null;
+}
+
+export default memo(Layer);
diff --git a/src/Arcgis/Map/Map.jsx b/src/Arcgis/Map/Map.jsx
new file mode 100644
index 0000000..34eafea
--- /dev/null
+++ b/src/Arcgis/Map/Map.jsx
@@ -0,0 +1,287 @@
+import {
+ forwardRef,
+ useImperativeHandle,
+ useEffect,
+ useState,
+ useRef,
+ useMemo,
+} from 'react';
+import { EventEmitter } from 'events';
+import { isNaN, isObject } from 'lodash';
+
+import useClass from '@eeacms/volto-eea-map/hooks/useClass';
+import useChangedProps from '@eeacms/volto-eea-map/hooks/useChangedProps';
+
+import withArcgis from '@eeacms/volto-eea-map/hocs/withArcgis';
+
+import MapContext from './MapContext';
+
+import '@eeacms/volto-eea-map/styles/map.less';
+
+let modules = {
+ loaded: false,
+};
+
+function getBaseMap(props) {
+ const { basemap } = props;
+
+ if (!basemap.name && !basemap.url_template) return 'topo';
+
+ const { AgWebTileLayer, AgBasemap } = modules;
+
+ if (!AgWebTileLayer || !AgBasemap) {
+ throw new Error('$Map modules not loaded');
+ }
+
+ if (basemap.url_template) {
+ return new AgBasemap({
+ baseLayers: [
+ new AgWebTileLayer({
+ urlTemplate: basemap.url_template,
+ }),
+ ],
+ });
+ }
+
+ switch (basemap.name) {
+ case 'positron-composite':
+ return new AgBasemap({
+ baseLayers: [
+ new AgWebTileLayer({
+ urlTemplate:
+ 'https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/{level}/{col}/{row}.png',
+ }),
+ ],
+ thumbnailUrl:
+ 'https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/0/0/0.png',
+ });
+ case 'blossom-composite':
+ return new AgBasemap({
+ baseLayers: [
+ new AgWebTileLayer({
+ urlTemplate:
+ 'https://gisco-services.ec.europa.eu/maps/tiles/OSMBlossomComposite/EPSG3857/{level}/{col}/{row}.png',
+ }),
+ ],
+ thumbnailUrl:
+ 'https://gisco-services.ec.europa.eu/maps/tiles/OSMBlossomComposite/EPSG3857/0/0/0.png',
+ });
+ default:
+ return basemap.name;
+ }
+}
+
+class $Map extends EventEmitter {
+ #isReady = false;
+ #props = {};
+ #map = null;
+ #view = null;
+ reactiveUtils = null;
+
+ constructor(props) {
+ super();
+
+ this.#props = props;
+ }
+
+ get isReady() {
+ return this.#isReady && !!(this.#map && this.#view);
+ }
+
+ get modules() {
+ return modules;
+ }
+
+ get map() {
+ return this.#map;
+ }
+
+ get view() {
+ return this.#view;
+ }
+
+ get props() {
+ return this.#props;
+ }
+
+ set props(props) {
+ this.#props = props;
+ }
+
+ set withCustomViewpoint(value) {
+ this.withCustomViewpoint = value;
+ }
+
+ async loadModules() {
+ const $arcgis = __CLIENT__ ? window.$arcgis : null;
+ if (__SERVER__ || !$arcgis) return Promise.reject();
+ if (!modules.loaded) {
+ modules.AgMap = await $arcgis.import('esri/Map');
+ modules.AgWebTileLayer = await $arcgis.import('esri/layers/WebTileLayer');
+ modules.AgBasemap = await $arcgis.import('esri/Basemap');
+ modules.AgSceneView = await $arcgis.import('esri/views/SceneView');
+ modules.AgMapView = await $arcgis.import('esri/views/MapView');
+ // Common modules
+ modules.AgColor = await $arcgis.import('esri/Color');
+ modules.AgViewpoint = await $arcgis.import('esri/Viewpoint');
+ modules.agReactiveUtils = await $arcgis.import('esri/core/reactiveUtils');
+ modules.agJsonUtils = await $arcgis.import(
+ 'esri/renderers/support/jsonUtils',
+ );
+ modules.loaded = true;
+ }
+ return Promise.resolve();
+ }
+
+ init() {
+ const { mapEl, ViewProperties = {}, MapProperties = {} } = this.#props;
+ const { AgMapView, AgSceneView, AgMap, agReactiveUtils, loaded } = modules;
+ const AgView = MapProperties.dimension === '3d' ? AgSceneView : AgMapView;
+ if (!loaded) return;
+ if (!AgView || !AgMap) {
+ throw new Error('$Map modules not loaded');
+ }
+ this.#map = new AgMap({
+ ...MapProperties,
+ basemap: getBaseMap(MapProperties),
+ });
+ this.#view = new AgView({
+ container: mapEl.current,
+ map: this.#map,
+ ...ViewProperties,
+ });
+ this.#view.ui.components = [];
+ this.#isReady = true;
+ this.reactiveUtils = agReactiveUtils;
+ this.emit('connected');
+ }
+
+ updateProps(props) {
+ if (isNaN(props) || !isObject(props)) return;
+ Object.keys(props).forEach((key) => {
+ if (key === 'mapEl') return;
+ this.#props[key] = props[key];
+ });
+ this.update(props);
+ }
+
+ update(props) {
+ if (!this.isReady) return;
+
+ const { ViewProperties = {}, MapProperties = {} } = props || this.#props;
+
+ if (
+ this.#view.constraints.rotationEnabled &&
+ !ViewProperties.constraints.rotationEnabled
+ ) {
+ this.#view.rotation = 0;
+ }
+
+ Object.keys(ViewProperties).forEach((key) => {
+ this.#view[key] = ViewProperties[key];
+ });
+
+ Object.keys(MapProperties).forEach((key) => {
+ switch (key) {
+ case 'basemap':
+ this.#map[key] = getBaseMap(MapProperties);
+ break;
+ default:
+ this.#map[key] = MapProperties[key];
+ break;
+ }
+ });
+ }
+
+ connect() {
+ this.loadModules().then(() => {
+ this.init();
+ });
+ }
+
+ disconnect() {
+ if (this.#view) {
+ this.#view.destroy();
+ }
+ this.#map = null;
+ this.#view = null;
+ this.#isReady = false;
+ this.emit('disconnected');
+ }
+}
+
+/**
+ * Renders a map component with the specified dimensions.
+ * @param {object} props - The component props.
+ * @param {object} props.dimension - The dimensions of the map component.
+ * @param {object} props.MapProperties - The properties of the map. See https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html
+ * @param {object} props.ViewProperties - The properties of the view. See https://developers.arcgis.com/javascript/latest/api-reference/esri-views-View.html
+ * @returns {JSX.Element} The rendered map component.
+ */
+const ArcgisMap = forwardRef((props, ref) => {
+ const mapEl = useRef(null);
+ const [isReady, setIsReady] = useState(false);
+ const { children, agLoaded, MapProperties = {} } = props;
+
+ const context = useMemo(
+ () => ({
+ ...props,
+ mapEl,
+ }),
+ [props, mapEl],
+ );
+
+ const $map = useClass($Map, context);
+
+ useImperativeHandle(ref, () => $map, [$map]);
+
+ useChangedProps((props) => {
+ if (!$map.isReady) return;
+ $map.updateProps(props);
+ }, props);
+
+ useEffect(() => {
+ if (!$map) return;
+
+ function onConnect() {
+ setIsReady(true);
+ }
+
+ function onDisconnect() {
+ setIsReady(false);
+ }
+
+ $map.props = context;
+
+ if (agLoaded) {
+ $map.connect();
+ }
+
+ $map.on('connected', onConnect);
+ $map.on('disconnected', onDisconnect);
+
+ return () => {
+ if (!$map) return;
+ $map.disconnect();
+ $map.off('connected', onConnect);
+ $map.off('disconnected', onDisconnect);
+ };
+ // We handle the props change in the useEffect above.
+ /* eslint-disable-next-line */
+ }, [$map, agLoaded, MapProperties.dimension]);
+
+ return (
+ setExpanded(!expanded)}
+ onKeyDown={() => {}}
+ >
+
+ {expanded &&
+ items.map((item) => (
+
+
+ {title}
+ {
+ setActive({ sidebar: title, panel: item });
+ }}
+ onKeyDown={() => {}}
+ >
+ {item.title}
+
+ ))}
+
+ {isReady && children}
+
+
+
+
+
{description && serializeNodes(description)}
@@ -62,4 +60,4 @@ const ExtraViews = ({ data, screen }) => {
export default connect((state) => ({
screen: state.screen,
-}))(ExtraViews);
+}))(Toolbar);
diff --git a/src/components/visualization/VisualizationView.jsx b/src/Views/VisualizationView.jsx
similarity index 73%
rename from src/components/visualization/VisualizationView.jsx
rename to src/Views/VisualizationView.jsx
index abc5186..9dd4772 100644
--- a/src/components/visualization/VisualizationView.jsx
+++ b/src/Views/VisualizationView.jsx
@@ -2,13 +2,13 @@ import React from 'react';
import { hasBlocksData } from '@plone/volto/helpers';
import RenderBlocks from '@plone/volto/components/theme/View/RenderBlocks';
import { pickMetadata } from '@eeacms/volto-embed/helpers';
-import Webmap from '../Webmap';
-import ExtraViews from '../ExtraViews';
+import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
+import Toolbar from '../Toolbar/Toolbar';
const VisualizationView = (props) => {
const content = props && props.content ? props.content : {};
- const map_visualization_data =
+ const mapData =
content && content.map_visualization_data
? content.map_visualization_data
: {};
@@ -19,17 +19,16 @@ const VisualizationView = (props) => {
import('react-color'));
+
+function colorToRGBA(color) {
+ const r = color.r;
+ const g = color.g;
+ const b = color.b;
+ const a = color.a;
+ return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+
+export default function ArcgisColorPickerWidget(props) {
+ const el = useRef(null);
+ const colorPickerEl = useRef(null);
+ const { $map, id, value, onChange, available_colors } = props;
+ const [showColorPicker, setShowColorPicker] = useState(false);
+
+ const color = new $map.current.modules.AgColor(value);
+
+ function onClickOutside(e) {
+ if (el.current && !el.current.contains(e.target)) {
+ setShowColorPicker(false);
+ }
+ }
+
+ useEffect(() => {
+ window.addEventListener('click', onClickOutside);
+
+ return () => {
+ window.removeEventListener('click', onClickOutside);
+ };
+ }, []);
+
+ return (
+
+
+ );
+}
diff --git a/src/Widgets/ArcgisRendererWidget/ArcgisRendererWidget.jsx b/src/Widgets/ArcgisRendererWidget/ArcgisRendererWidget.jsx
new file mode 100644
index 0000000..64760f9
--- /dev/null
+++ b/src/Widgets/ArcgisRendererWidget/ArcgisRendererWidget.jsx
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { compose } from 'redux';
+import { injectIntl } from 'react-intl';
+import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+import {
+ customSelectStyles,
+ DropdownIndicator,
+ ClearIndicator,
+ Option,
+ selectTheme,
+ MultiValueContainer,
+} from '@plone/volto/components/manage/Widgets/SelectStyling';
+import { normalizeValue } from '@plone/volto/components/manage/Widgets/SelectUtils';
+import {
+ rendererTypes,
+ renderersMapping,
+} from '@eeacms/volto-eea-map/constants';
+import RendererEditor from './RendererEditor/_Editor';
+import RendererEditorModal from './RendererEditor/_EditorModal';
+import { simpleFillSymbol } from './RendererEditor/_defaults';
+
+import editSVG from '@plone/volto/icons/editing.svg';
+
+function ArcgisRendererWidget(props) {
+ const [open, setOpen] = useState(false);
+ const { value, id, intl, onChange } = props;
+ const $type = renderersMapping[value?.type] || value?.type;
+ const type = normalizeValue(rendererTypes, $type, intl);
+
+ const Select = props.reactSelect.default;
+
+ return (
+ <>
+ {
+ setOpen(true);
+ }}
+ >
+
+ {
+ let $fieldValue = fieldValue;
+
+ if (['outline_width', 'size', 'width'].includes(symbolId)) {
+ $fieldValue = Math.max(toNumber(fieldValue) || 0, 0);
+ }
+
+ onChange(id, {
+ ...(value || {}),
+ ...(symbolId === 'type' ? { autocast: true } : {}),
+ symbol: {
+ ...(symbolId !== 'type' ? symbol : {}),
+ ...(symbolId === 'type' ? simpleSymbols[fieldValue] || {} : {}),
+ ...(['outline_color', 'outline_width'].includes(symbolId)
+ ? {
+ outline: {
+ ...(symbol.outline || {}),
+ [symbolId.replace('outline_', '')]: $fieldValue,
+ },
+ }
+ : { [symbolId]: $fieldValue }),
+ },
+ });
+ }}
+ />
+ );
+}
diff --git a/src/Widgets/ArcgisRendererWidget/RendererEditor/UniqueValue.jsx b/src/Widgets/ArcgisRendererWidget/RendererEditor/UniqueValue.jsx
new file mode 100644
index 0000000..6f84aac
--- /dev/null
+++ b/src/Widgets/ArcgisRendererWidget/RendererEditor/UniqueValue.jsx
@@ -0,0 +1,8 @@
+export default function UniqueValue() {
+ return (
+
+
+
{show_note &&
- {show_share &&
+
+
+ {
+ onChange(id, newValue);
+ }}
+ onClose={() => {
+ setOpen(false);
+ }}
+ />
+ )}
+
+
+ );
+}
+
+export const ArcgisRendererWidgetComponent = injectIntl(ArcgisRendererWidget);
+
+export default compose(injectLazyLibs(['reactSelect']))(
+ ArcgisRendererWidgetComponent,
+);
diff --git a/src/Widgets/ArcgisRendererWidget/RendererEditor/ClassBreaks.jsx b/src/Widgets/ArcgisRendererWidget/RendererEditor/ClassBreaks.jsx
new file mode 100644
index 0000000..ea17844
--- /dev/null
+++ b/src/Widgets/ArcgisRendererWidget/RendererEditor/ClassBreaks.jsx
@@ -0,0 +1,8 @@
+export default function ClassBreaks() {
+ return (
+ + Renderer visual editor under work. Please edit it through json editor by + pressing the "Renderer" button +
+ ); +} diff --git a/src/Widgets/ArcgisRendererWidget/RendererEditor/Dictionary.jsx b/src/Widgets/ArcgisRendererWidget/RendererEditor/Dictionary.jsx new file mode 100644 index 0000000..ca28570 --- /dev/null +++ b/src/Widgets/ArcgisRendererWidget/RendererEditor/Dictionary.jsx @@ -0,0 +1,8 @@ +export default function Dictionary() { + return ( ++ Renderer visual editor under work. Please edit it through json editor by + pressing the "Renderer" button +
+ ); +} diff --git a/src/Widgets/ArcgisRendererWidget/RendererEditor/DotDensity.jsx b/src/Widgets/ArcgisRendererWidget/RendererEditor/DotDensity.jsx new file mode 100644 index 0000000..88a59be --- /dev/null +++ b/src/Widgets/ArcgisRendererWidget/RendererEditor/DotDensity.jsx @@ -0,0 +1,8 @@ +export default function DotDensity() { + return ( ++ Renderer visual editor under work. Please edit it through json editor by + pressing the "Renderer" button +
+ ); +} diff --git a/src/Widgets/ArcgisRendererWidget/RendererEditor/Heatmap.jsx b/src/Widgets/ArcgisRendererWidget/RendererEditor/Heatmap.jsx new file mode 100644 index 0000000..efd2602 --- /dev/null +++ b/src/Widgets/ArcgisRendererWidget/RendererEditor/Heatmap.jsx @@ -0,0 +1,8 @@ +export default function Heatmap() { + return ( ++ Renderer visual editor under work. Please edit it through json editor by + pressing the "Renderer" button +
+ ); +} diff --git a/src/Widgets/ArcgisRendererWidget/RendererEditor/PieChart.jsx b/src/Widgets/ArcgisRendererWidget/RendererEditor/PieChart.jsx new file mode 100644 index 0000000..147c19d --- /dev/null +++ b/src/Widgets/ArcgisRendererWidget/RendererEditor/PieChart.jsx @@ -0,0 +1,8 @@ +export default function PieChart() { + return ( ++ Renderer visual editor under work. Please edit it through json editor by + pressing the "Renderer" button +
+ ); +} diff --git a/src/Widgets/ArcgisRendererWidget/RendererEditor/Simple.jsx b/src/Widgets/ArcgisRendererWidget/RendererEditor/Simple.jsx new file mode 100644 index 0000000..46f6f03 --- /dev/null +++ b/src/Widgets/ArcgisRendererWidget/RendererEditor/Simple.jsx @@ -0,0 +1,109 @@ +import { toNumber } from 'lodash'; + +import { InlineForm } from '@plone/volto/components'; + +import { simpleSymbols as simpleSymbolsOptions } from '@eeacms/volto-eea-map/constants'; + +import { simpleSymbols } from '../RendererEditor/_defaults'; + +export default function Simple(props) { + const { $map, value, id, onChange } = props; + + const symbol = value?.symbol || {}; + + return ( ++ Renderer visual editor under work. Please edit it through json editor by + pressing the "Renderer" button +
+ ); +} diff --git a/src/Widgets/ArcgisRendererWidget/RendererEditor/_Editor.jsx b/src/Widgets/ArcgisRendererWidget/RendererEditor/_Editor.jsx new file mode 100644 index 0000000..789a168 --- /dev/null +++ b/src/Widgets/ArcgisRendererWidget/RendererEditor/_Editor.jsx @@ -0,0 +1,29 @@ +import { useMemo } from 'react'; + +import Simple from './Simple'; +import UniqueValue from './UniqueValue'; +import Heatmap from './Heatmap'; +import ClassBreaks from './ClassBreaks'; +import Dictionary from './Dictionary'; +import DotDensity from './DotDensity'; +import PieChart from './PieChart'; + +const types = { + simle: Simple, + 'unique-value': UniqueValue, + heatmap: Heatmap, + 'class-breaks': ClassBreaks, + dictionary: Dictionary, + 'dot-density': DotDensity, + 'pie-chart': PieChart, +}; + +function getRendererByType(type) { + return types[type] || Simple; +} + +export default function Editor(props) { + const Renderer = useMemo(() => getRendererByType(props.type), [props.type]); + + return {
+ onPasteEditor(editor);
+ }}
+ />
+
+
+
+
+
+
+ );
+}
diff --git a/src/Widgets/ArcgisRendererWidget/RendererEditor/_defaults.js b/src/Widgets/ArcgisRendererWidget/RendererEditor/_defaults.js
new file mode 100644
index 0000000..15761a7
--- /dev/null
+++ b/src/Widgets/ArcgisRendererWidget/RendererEditor/_defaults.js
@@ -0,0 +1,30 @@
+export const simpleFillSymbol = {
+ type: 'simple-fill',
+ color: [17, 157, 255, 0.5],
+ outline: {
+ color: [17, 157, 255, 0.6],
+ width: 0.5,
+ },
+};
+
+export const simpleMarkerSymbol = {
+ type: 'simple-marker',
+ size: 8,
+ color: [17, 157, 255, 0.2],
+ outline: {
+ color: [17, 157, 255, 0.8],
+ width: 0.5,
+ },
+};
+
+export const simpleLineSymbol = {
+ type: 'simple-line',
+ color: [17, 157, 255, 0.5],
+ width: 1,
+};
+
+export const simpleSymbols = {
+ 'simple-fill': simpleFillSymbol,
+ 'simple-line': simpleLineSymbol,
+ 'simple-marker': simpleMarkerSymbol,
+};
diff --git a/src/Widgets/ArcgisSliderWidget.jsx b/src/Widgets/ArcgisSliderWidget.jsx
new file mode 100644
index 0000000..b6e6243
--- /dev/null
+++ b/src/Widgets/ArcgisSliderWidget.jsx
@@ -0,0 +1,79 @@
+/**
+ * ArcgisSliderWidget component.
+ * @module components/manage/Widgets/ArcgisSliderWidget
+ */
+
+import React, { Component } from 'react';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+/**
+ * The simple slider widget.
+ *
+ * It is the default fallback widget, so if no other widget is found based on
+ * passed field properties, it will be used.
+ */
+class ArcgisSliderWidget extends Component {
+ /**
+ * Component did mount lifecycle method
+ * @method componentDidMount
+ * @returns {undefined}
+ */
+ componentDidMount() {
+ if (this.props.focus) {
+ this.node.focus();
+ }
+ }
+
+ /**
+ * Render method.
+ * @method render
+ * @returns {string} Markup for the component.
+ */
+ render() {
+ const { id, value, onChange, min = 0, max = 1, step = 0.1 } = this.props;
+
+ return (
+
+
+ );
+ }
+}
+
+export default ArcgisSliderWidget;
diff --git a/src/Widgets/ArcgisViewpointWidget.jsx b/src/Widgets/ArcgisViewpointWidget.jsx
new file mode 100644
index 0000000..3051643
--- /dev/null
+++ b/src/Widgets/ArcgisViewpointWidget.jsx
@@ -0,0 +1,112 @@
+import { useEffect, useState } from 'react';
+import { toNumber } from 'lodash';
+import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
+
+export default function ArcgisViewpointWidget(props) {
+ const [watchViewpoint, setWatchViewpoint] = useState(false);
+ const { $map, id, value, onChange } = props;
+
+ useEffect(() => {
+ if (!$map.current?.isReady) return;
+ const homeWidget = $map.current.view.ui.find('Home');
+ if (!homeWidget) return;
+ homeWidget.viewpoint = new $map.current.modules.AgViewpoint({
+ center: [value.longitude, value.latitude],
+ zoom: value.zoom,
+ });
+ }, [$map, value]);
+
+ useEffect(() => {
+ if (watchViewpoint && $map.current?.isReady) {
+ const reactiveUtils = $map.current.modules.agReactiveUtils;
+
+ reactiveUtils.when(
+ () => $map.current.view.stationary,
+ (stationary) => {
+ if (stationary) {
+ const { longitude, latitude } = $map.current.view.center;
+ const zoom = $map.current.view.zoom;
+ onChange(id, {
+ ...value,
+ longitude,
+ latitude,
+ zoom,
+ });
+ }
+ setWatchViewpoint(false);
+ },
+ {
+ once: true,
+ },
+ );
+ }
+ }, [$map, watchViewpoint, id, value, onChange]);
+
+ return (
+ <>
+
+
+
+
+
+ {
+ if (target.value < min) {
+ target.value = min;
+ }
+ if (target.value > max) {
+ target.value = max;
+ }
+ onChange(id, target.value === '' ? undefined : target.value);
+ }}
+ />
+ {
+ if (target.value < min) {
+ target.value = min;
+ }
+ if (target.value > max) {
+ target.value = max;
+ }
+ onChange(id, target.value === '' ? undefined : target.value);
+ }}
+ />
+
+
+
+
+
+ {
+ let $fieldValue = fieldValue;
+
+ if (['longitude', 'latitude', 'zoom'].includes(fieldId)) {
+ $fieldValue = Math.max(toNumber($fieldValue) || 0, 0);
+ }
+
+ onChange(id, {
+ ...value,
+ [fieldId]: $fieldValue,
+ });
+ }}
+ />
+
+
+ );
+}
diff --git a/src/components/visualization/VisualizationViewWidget.jsx b/src/Widgets/VisualizationViewWidget.jsx
similarity index 54%
rename from src/components/visualization/VisualizationViewWidget.jsx
rename to src/Widgets/VisualizationViewWidget.jsx
index 8a65093..d86c2cd 100644
--- a/src/components/visualization/VisualizationViewWidget.jsx
+++ b/src/Widgets/VisualizationViewWidget.jsx
@@ -1,25 +1,24 @@
import { connect } from 'react-redux';
import { pickMetadata } from '@eeacms/volto-embed/helpers';
-import Webmap from '../Webmap';
-import ExtraViews from '../ExtraViews';
+import MapBuilder from '@eeacms/volto-eea-map/Arcgis/Map/MapBuilder';
+import Toolbar from '../Toolbar/Toolbar';
function VisualizationViewWidget(props) {
- const { value: map_visualization_data = {} } = props;
+ const { value: mapData = {}, content } = props;
return (
<>
- {
+ onPasteEditor(editor);
+ }}
+ />
+
+
+
+
+
+
+ );
+}
+
+function MapEditorModal(props) {
+ const [value, setValue] = useState(props.value);
+ const [open, setOpen] = useState(false);
+
+ const properties = props.formData;
+
+ return (
+ <>
+
+
+ {
+ setValue(value);
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {open && (
+ setOpen(false)}
+ />
+ )}
+
+ );
+}
+
+const VisualizationWidget = (props) => {
+ const { id, title, description, value } = props;
+ const [showMapEditor, setShowMapEditor] = useState(false);
+
+ if (__SERVER__) return '';
+
+ return (
+
+ setShowMapEditor(false)}
+ />
+ )}
+
+ );
+};
+
+export default VisualizationWidget;
diff --git a/src/arcgis.js b/src/arcgis.js
new file mode 100644
index 0000000..6472470
--- /dev/null
+++ b/src/arcgis.js
@@ -0,0 +1,48 @@
+export default function arcgis(version = '4.29') {
+ if (__SERVER__) return null;
+
+ const getId = (type) => {
+ return `arcgis${type}-${version}`;
+ };
+
+ const linkId = getId('css');
+ const scriptId = getId('js');
+
+ function loadCss() {
+ let link = document.getElementById(linkId);
+ if (!link) {
+ link = document.createElement('link');
+ link.rel = 'stylesheet';
+ link.href = `https://js.arcgis.com/${version}/esri/themes/light/main.css`;
+ link.id = getId('css');
+ document.head.appendChild(link);
+ link.addEventListener('load', () => {
+ loadScript();
+ });
+ }
+ }
+
+ function loadScript() {
+ let script = document.getElementById(scriptId);
+ if (!script) {
+ script = document.createElement('script');
+ script.src = `https://js.arcgis.com/${version}/init.js`;
+ script.id = scriptId;
+ document.body.appendChild(script);
+ script.addEventListener('load', () => {
+ if (window.$arcgis) {
+ window.postMessage({
+ type: 'arcgis-loaded',
+ });
+ }
+ });
+ }
+ }
+
+ if (window.$arcgis) {
+ return window.$arcgis;
+ } else {
+ loadCss();
+ return null;
+ }
+}
diff --git a/src/components/Blocks/EmbedEEAMap/Edit.jsx b/src/components/Blocks/EmbedEEAMap/Edit.jsx
deleted file mode 100644
index b321e09..0000000
--- a/src/components/Blocks/EmbedEEAMap/Edit.jsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, { useEffect, useMemo } from 'react';
-import { Message } from 'semantic-ui-react';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { SidebarPortal } from '@plone/volto/components';
-import { getContent } from '@plone/volto/actions';
-import { flattenToAppURL } from '@plone/volto/helpers';
-import BlockDataForm from '@plone/volto/components/manage/Form/BlockDataForm';
-import Webmap from '@eeacms/volto-eea-map/components/Webmap';
-import ExtraViews from '@eeacms/volto-eea-map/components/ExtraViews';
-
-import { Schema } from './Schema';
-import { applyQueriesToMapLayers } from '@eeacms/volto-eea-map/utils';
-import { deepUpdateDataQueryParams, getMapVisualizationData } from './helpers';
-import { isEqual } from 'lodash';
-
-const Edit = (props) => {
- const {
- id,
- block,
- onChangeBlock,
- selected,
- data,
- getContent,
- connected_data_parameters, // page level queries live from widget
- data_query, // page level queries
- mapContent,
- } = props;
-
- const {
- data_query_params, //block level queries
- enable_queries,
- show_legend = true,
- show_note = true,
- show_more_info = true,
- show_share = true,
- dataprotection = { enabled: true },
- height = '',
- } = data;
-
- const schema = Schema(props);
- const [mapData, setMapData] = React.useState('');
-
- const vis_url = useMemo(() => flattenToAppURL(data.vis_url), [data.vis_url]);
-
- const map_visualization_data = useMemo(
- () => getMapVisualizationData({ mapContent, data }),
- [mapContent, data],
- );
-
- const effectiveQueryParams =
- connected_data_parameters && connected_data_parameters.length > 0
- ? connected_data_parameters
- : data_query;
-
- React.useEffect(() => {
- deepUpdateDataQueryParams(
- block,
- props.data,
- effectiveQueryParams,
- onChangeBlock,
- );
- }, [block, props.data, effectiveQueryParams, onChangeBlock]);
-
- useEffect(() => {
- const mapVisId = flattenToAppURL(map_visualization_data['@id'] || '');
- if (!map_visualization_data?.error && vis_url && vis_url !== mapVisId) {
- getContent(vis_url, null, id);
- }
- if (!vis_url) {
- setMapData('');
- }
- }, [id, getContent, vis_url, map_visualization_data]);
-
- useEffect(() => {
- const mergedQueries =
- connected_data_parameters &&
- connected_data_parameters.length > 0 &&
- connected_data_parameters.map((unsavedQuery, index) => {
- const correspondingQuery =
- data_query_params && data_query_params[index];
- return { ...unsavedQuery, alias: correspondingQuery?.alias };
- });
- const queriesToUse =
- mergedQueries && mergedQueries.length > 0
- ? mergedQueries
- : data_query_params;
-
- const updatedMapData = applyQueriesToMapLayers(
- map_visualization_data,
- queriesToUse,
- enable_queries,
- );
-
- if (!isEqual(mapData, updatedMapData)) {
- setMapData(updatedMapData);
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [
- map_visualization_data,
- data_query_params,
- enable_queries,
- connected_data_parameters,
- ]);
-
- return (
- <>
- {!vis_url && (
- Please select a visualization from block editor.
- )}
- {!!vis_url && mapData && (
-
- {
- onChangeBlock(block, {
- ...data,
- [id]: value,
- });
- }}
- formData={data}
- />
-
-
- );
-};
-
-export default compose(
- connect(
- (state, props) => {
- const pathname = flattenToAppURL(state.content.data['@id']);
- return {
- mapContent: state.content.subrequests?.[props.id]?.data,
- data_query: state.content.data.data_query,
- connected_data_parameters:
- state?.connected_data_parameters?.byContextPath &&
- state.connected_data_parameters?.byContextPath[pathname],
- };
- },
- { getContent },
- ),
-)(Edit);
diff --git a/src/components/Blocks/EmbedEEAMap/Schema.js b/src/components/Blocks/EmbedEEAMap/Schema.js
deleted file mode 100644
index 20bf39f..0000000
--- a/src/components/Blocks/EmbedEEAMap/Schema.js
+++ /dev/null
@@ -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: [],
- };
-};
diff --git a/src/components/Blocks/EmbedEEAMap/View.jsx b/src/components/Blocks/EmbedEEAMap/View.jsx
deleted file mode 100644
index 3a73a60..0000000
--- a/src/components/Blocks/EmbedEEAMap/View.jsx
+++ /dev/null
@@ -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 (
-
- );
- }
-
- return (
-
- {!!mapData && (
- <>
-
- );
-};
-
-export default View;
diff --git a/src/components/Blocks/EmbedEEAMap/helpers.js b/src/components/Blocks/EmbedEEAMap/helpers.js
deleted file mode 100644
index 74e7672..0000000
--- a/src/components/Blocks/EmbedEEAMap/helpers.js
+++ /dev/null
@@ -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 };
diff --git a/src/components/LegendView.jsx b/src/components/LegendView.jsx
deleted file mode 100644
index 1abd559..0000000
--- a/src/components/LegendView.jsx
+++ /dev/null
@@ -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 (
-
-
- );
-};
-
-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 (
-
-
-
-
-
- {
- handleChangeField(value);
- }}
- formData={dataForm}
- />
-
-
-
-
-
-
-
-
-
-
-
-
- )}
- {!open &&
- );
-};
-
-export default VisualizationEditorWidget;
diff --git a/src/components/visualization/panelsSchema.js b/src/components/visualization/panelsSchema.js
deleted file mode 100644
index 6b70bdf..0000000
--- a/src/components/visualization/panelsSchema.js
+++ /dev/null
@@ -1,229 +0,0 @@
-import { base_layers } from '../../constants';
-
-const customBaselayers = [
- ['positron-composite', 'positron-composite'],
- ['blossom-composite', 'blossom-composite'],
-];
-
-const BaseLayerSchema = ({ data = {} }) => {
- const useCustomBase = data?.map_data?.base?.use_custom_base;
- return {
- title: 'Base Layer',
- fieldsets: [
- {
- id: 'base',
- title: 'Base Layer',
- fields: [
- 'use_custom_base',
- ...(useCustomBase ? ['custom_base_layer'] : ['base_layer']),
- ],
- },
- ],
- properties: {
- use_custom_base: {
- title: 'Use custom Base Layer',
- description:
- 'Switch between default base layers and defining your custom service base layer',
- type: 'boolean',
- },
- base_layer: {
- title: 'Base Layer',
- choices: [...customBaselayers, ...base_layers],
- },
- custom_base_layer: {
- title: 'Base Layer',
- description:
- 'Add an URL Template to import your own base layer from an external service',
- },
- },
- 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: [],
-};
-
-//style changes work only for Feature layers atm
-// TODO: apply style for individual layers
-const StylesLayersSchema = ({ data = {} }) => {
- return {
- title: 'Styles Layers',
- fieldsets: [
- {
- id: 'default',
- title: 'Map Data',
- fields: [
- 'override_styles',
- ...(data?.map_data?.styles?.override_styles
- ? ['symbol_color', 'outline_color', 'outline_width']
- : []),
- ],
- },
- ],
- properties: {
- override_styles: {
- title: 'Override layers style',
- description: 'Will override imported layers styling',
- type: 'boolean',
- },
- symbol_color: {
- title: 'Fill color',
- widget: 'simple_color_picker_widget',
- },
- outline_color: {
- title: 'Outline color',
- widget: 'simple_color_picker_widget',
- },
- outline_width: {
- title: 'Outline width',
- type: 'number',
- },
- },
- required: [],
- };
-};
-
-const GeneralSchema = ({ data = {} }) => {
- const centerOnExtent = data?.map_data?.general?.centerOnExtent;
-
- return {
- title: 'General',
- fieldsets: [
- {
- id: 'default',
- title: 'Zoom',
- fields: [
- 'print_position',
- 'zoom_position',
- 'scalebar',
- '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.',
- },
- scalebar: {
- title: 'Scalebar',
- choices: ['metric', 'non-metric', 'dual'].map((n) => {
- return [n, n];
- }),
- },
- 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',
- description: `Will set the map center long coordinate. See: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#center`,
- },
- lat: {
- title: 'Latitude',
- type: 'number',
- description: `Will set the map center lat coordinate. See: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#center`,
- },
-
- print_position: {
- title: 'Print position',
- choices: ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
- (n) => {
- return [n, n];
- },
- ),
- },
- },
- required: [],
- };
-};
-
-const PanelsSchema = ({ data = {} }) => {
- const generalSchema = GeneralSchema({ data });
- const baseLayerSchema = BaseLayerSchema({ data });
- const stylesLayerSchema = StylesLayersSchema({ 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,
- },
- {
- id: 'styles',
- schema: stylesLayerSchema,
- },
- ],
- },
- },
- required: [],
- };
-};
-
-export default PanelsSchema;
diff --git a/src/components/widgets/DataQueryWidget.jsx b/src/components/widgets/DataQueryWidget.jsx
deleted file mode 100644
index 1f8d831..0000000
--- a/src/components/widgets/DataQueryWidget.jsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react';
-import { FormFieldWrapper, Field } from '@plone/volto/components';
-import { Accordion, Segment } from 'semantic-ui-react';
-
-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 (
-
-
- );
-};
-
-export default SimpleColorPickerWidget;
diff --git a/src/constants.js b/src/constants.js
index c96ab61..3cc6844 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -1,10 +1,17 @@
-const positions = ['bottom-right', 'bottom-left', 'top-right', 'top-left'].map(
- (n) => {
- return { key: n, value: n, text: n };
- },
-);
+import { capitalize } from 'lodash';
+
+export const positions = [
+ 'top-left',
+ 'top-right',
+ 'bottom-right',
+ 'bottom-left',
+].map((n) => {
+ return [n, capitalize(n.replaceAll('-', ' '))];
+});
-const base_layers = [
+export const basemaps = [
+ 'positron-composite',
+ 'blossom-composite',
'dark-gray',
'dark-gray-vector',
'gray',
@@ -22,8 +29,219 @@ const base_layers = [
'terrain',
'topo',
'topo-vector',
+].map((n) => {
+ return [n, capitalize(n.replaceAll('-', ' '))];
+});
+
+export const widgets = [
+ 'AreaMeasurement2D',
+ 'AreaMeasurement3D',
+ 'Attachments',
+ 'Attribution',
+ 'BasemapGallery',
+ 'BasemapLayerList',
+ 'BasemapToggle',
+ 'Bookmarks',
+ 'BuildingExplorer',
+ 'Compass',
+ 'CoordinateConversion',
+ 'Daylight',
+ 'DirectLineMeasurement3D',
+ 'DirectionalPad',
+ 'Directions',
+ 'DistanceMeasurement2D',
+ 'Editor',
+ 'ElevationProfile',
+ 'Feature',
+ 'FeatureForm',
+ 'FeatureTable',
+ 'FeatureTemplates',
+ 'Features',
+ 'FloorFilter',
+ 'Fullscreen',
+ 'Histogram',
+ 'HistogramRangeSlider',
+ 'Home',
+ 'LayerList',
+ 'Legend',
+ 'LineOfSight',
+ 'Locate',
+ 'Measurement',
+ 'NavigationToggle',
+ 'OrientedImageryViewer',
+ 'Print',
+ 'ScaleBar',
+ 'ScaleRangeSlider',
+ 'Search',
+ 'ShadowCast',
+ 'Sketch',
+ 'Slice',
+ 'Slider',
+ 'TableList',
+ 'TimeSlider',
+ 'TimeZoneLabel',
+ 'Track',
+ 'UtilityNetworkAssociations',
+ 'UtilityNetworkTrace',
+ 'UtilityNetworkValidateTopology',
+ 'ValuePicker',
+ 'Weather',
+ 'Zoom',
].map((n) => {
return [n, n];
});
-export { positions, base_layers };
+export const blendModes = [
+ 'average',
+ 'color-burn',
+ 'color-dodge',
+ 'color',
+ 'darken',
+ 'destination-atop',
+ 'destination-in',
+ 'destination-out',
+ 'destination-over',
+ 'difference',
+ 'exclusion',
+ 'hard-light',
+ 'hue',
+ 'invert',
+ 'lighten',
+ 'lighter',
+ 'luminosity',
+ 'minus',
+ 'multiply',
+ 'normal',
+ 'overlay',
+ 'plus',
+ 'reflect',
+ 'saturation',
+ 'screen',
+ 'soft-light',
+ 'source-atop',
+ 'source-in',
+ 'source-out',
+ 'vivid-light',
+ 'xor',
+].map((n) => {
+ return [n, capitalize(n.replaceAll('-', ' '))];
+});
+
+export const geometryTypes = [
+ 'point',
+ 'multipoint',
+ 'polyline',
+ 'polygon',
+ 'multipatch',
+ 'mesh',
+].map((n) => {
+ return [n, capitalize(n.replaceAll('-', ' '))];
+});
+
+export const rendererTypes = [
+ 'simple',
+ 'unique-value',
+ 'heatmap',
+ 'class-breaks',
+ 'dictionary',
+ 'dot-density',
+ 'pie-chart',
+].map((n) => ({ value: n, label: capitalize(n.replaceAll('-', ' ')) }));
+
+export const simpleSymbols = [
+ 'simple-fill',
+ 'simple-marker',
+ 'simple-line',
+].map((n) => {
+ return [n, capitalize(n.replaceAll('-', ' '))];
+});
+
+export const expandKeys = ['expandTooltip'];
+
+export const getDefaultWidgets = (dimension = '2d') => [
+ { name: 'Zoom', position: 'top-left' },
+ ...(dimension === '3d'
+ ? [{ name: 'NavigationToggle', position: 'top-left' }]
+ : []),
+ {
+ name: 'Home',
+ position: 'top-left',
+ },
+ {
+ name: 'Compass',
+ position: 'top-left',
+ },
+ {
+ name: 'LayerList',
+ position: 'top-right',
+ expand: true,
+ ExpandProperties: {
+ expandTooltip: 'Layers',
+ },
+ },
+ {
+ name: 'Print',
+ position: 'top-right',
+ expand: true,
+ ExpandProperties: {
+ expandTooltip: 'Print',
+ },
+ },
+ {
+ name: 'Fullscreen',
+ position: 'top-right',
+ },
+ {
+ name: 'Legend',
+ position: 'bottom-left',
+ expand: true,
+ respectLayerVisibility: false,
+ ExpandProperties: {
+ expandTooltip: 'Legend',
+ },
+ },
+ {
+ name: 'ScaleBar',
+ position: 'bottom-right',
+ unit: 'dual',
+ },
+];
+
+export const widgetsSchema = {
+ ScaleBar: {
+ unit: {
+ title: 'Unit',
+ choices: [
+ ['metric', 'Metric'],
+ ['imperial', 'Imperial'],
+ ['dual', 'Dual'],
+ ['non-metric', 'Non metric'],
+ ],
+ },
+ },
+ Legend: {
+ respectLayerVisibility: {
+ title: 'Respect layer visibility',
+ type: 'boolean',
+ },
+ },
+};
+
+export const withSublayers = ['MapImageLayer'];
+
+export const layersMapping = {
+ 'Raster Layer': 'MapImageLayer',
+};
+
+export const geometryTypeMapping = {
+ esriGeometryPoint: 'point',
+ esriGeometryMultipoint: 'multipoint',
+ esriGeometryPolyline: 'polyline',
+ esriGeometryPolygon: 'polygon',
+ esriGeometryMultipatch: 'multipatch',
+ esriGeometryMesh: 'mesh',
+};
+
+export const renderersMapping = {
+ uniqueValue: 'unique-value',
+};
diff --git a/src/hocs/index.js b/src/hocs/index.js
deleted file mode 100644
index 8a5a293..0000000
--- a/src/hocs/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import withDeviceSize from './withDeviceSize';
-
-export { withDeviceSize };
diff --git a/src/hocs/withArcgis.jsx b/src/hocs/withArcgis.jsx
new file mode 100644
index 0000000..8f8abbb
--- /dev/null
+++ b/src/hocs/withArcgis.jsx
@@ -0,0 +1,27 @@
+import React, { forwardRef, useEffect, useState } from 'react';
+import loadArcgis from '@eeacms/volto-eea-map/arcgis';
+
+export default function withArcgis(WrappedComponent) {
+ return forwardRef((props, ref) => {
+ const [agLoaded, setAgLoaded] = useState(false);
+
+ const interceptArcgis = (event) => {
+ if (event.type === 'message' && event.data.type === 'arcgis-loaded') {
+ setAgLoaded(true);
+ }
+ };
+
+ useEffect(() => {
+ if (window.$arcgis) {
+ setAgLoaded(true);
+ }
+ loadArcgis();
+ window.addEventListener('message', interceptArcgis);
+ return () => {
+ window.removeEventListener('message', interceptArcgis);
+ };
+ }, []);
+
+ return
+
+
+
+
+
+
+
+ {description && {description}
} +
-
- )}
- No map view to show. Set visualization in block configuration.
- )} -
-
- {data?.description && serializeNodes(data.description)}
- {name}
- {show_viewer && map_service_url && ( - - - - )} -
- {legendRows.length > 0 &&
- legendRows.map((item, i) => {
- return (
-
- 
-
- {item.label}
-
-
- );
- })}
-
-
-
- {expand && (
-
-
- {(!map_layers || map_layers.length === 0) && (
-
-
- )}
- {map_layers &&
- map_layers.length > 0 &&
- map_layers?.map((l, i) => (
-
-
- )}
-
- );
-};
-
-export default withDeviceSize(React.memo(LegendView));
diff --git a/src/components/Webmap.jsx b/src/components/Webmap.jsx
deleted file mode 100644
index eb1e717..0000000
--- a/src/components/Webmap.jsx
+++ /dev/null
@@ -1,371 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-import { withDeviceSize } from '../hocs';
-import { loadModules } from 'esri-loader';
-
-const MODULES = [
- 'esri/Map',
- 'esri/views/MapView',
- 'esri/layers/FeatureLayer',
- 'esri/layers/MapImageLayer',
- 'esri/layers/GroupLayer',
- 'esri/layers/WebTileLayer',
- 'esri/Basemap',
- 'esri/widgets/Legend',
- 'esri/widgets/Expand',
- 'esri/widgets/Print',
- 'esri/widgets/Zoom',
- 'esri/widgets/ScaleBar',
- 'esri/widgets/Fullscreen',
-];
-
-const Webmap = (props) => {
- const editMode = props && props.editMode ? props.editMode : false;
- const height = props && props.height ? props.height : '';
- const id = props && props.id ? props.id : '';
- const device = props && props.device ? props.device : {};
- const data = props && props.data ? props.data : {};
-
- const layers =
- props && props.data && props.data.layers ? props.data.layers : {};
- const base = props && props.data && props.data.base ? props.data.base : {};
- const general =
- props && props.data && props.data.general ? props.data.general : {};
- const styles =
- props && props.data && props.data.styles ? props.data.styles : {};
- const base_layer = base && base.base_layer ? base.base_layer : '';
-
- const map_layers =
- layers &&
- layers.map_layers &&
- layers.map_layers
- .filter(({ map_layer }) => map_layer)
- .map((l, i) => l.map_layer);
-
- const mapRef = React.useRef();
- const [modules, setModules] = React.useState({});
- const [reactQueryBuilder, setReactQueryBuilder] = React.useState(null);
-
- const modules_loaded = React.useRef(false);
-
- React.useEffect(() => {
- if (!modules_loaded.current) {
- modules_loaded.current = true;
- import(
- /* webpackChunkName: "react-querybuilder" */ 'react-querybuilder'
- ).then((module) => {
- setReactQueryBuilder(module);
- });
-
- loadModules(MODULES, {
- css: true,
- }).then((modules) => {
- const [
- MapBlock,
- MapView,
- FeatureLayer,
- MapImageLayer,
- GroupLayer,
- WebTileLayer,
- Basemap,
- Legend,
- Expand,
- Print,
- Zoom,
- ScaleBar,
- Fullscreen,
- ] = modules;
- setModules({
- MapBlock,
- MapView,
- FeatureLayer,
- MapImageLayer,
- GroupLayer,
- WebTileLayer,
- Basemap,
- Legend,
- Expand,
- Print,
- Zoom,
- ScaleBar,
- Fullscreen,
- });
- });
- }
- }, [setModules]);
-
- var customFeatureLayerRenderer = {
- type: 'simple', // autocasts as new SimpleRenderer()
- symbol: {
- type: 'simple-fill', // autocasts as new SimpleFillSymbol()
- color: styles?.symbol_color
- ? styles?.symbol_color?.rgb
- : {
- r: 0,
- g: 0,
- b: 0,
- a: 1,
- },
- //color: 'rgba(255,255,255,0.4)',
- style: 'solid',
- outline: {
- // autocasts as new SimpleLineSymbol()
- color: styles?.outline_color
- ? styles?.outline_color?.rgb
- : {
- r: 0,
- g: 0,
- b: 0,
- a: 1,
- },
- width: styles?.outline_width ? styles?.outline_width : 1,
- },
- },
- };
- //eslint-disable-next-line no-unused-vars
- const esri = React.useMemo(() => {
- if (Object.keys(modules).length === 0) return {};
- const {
- MapBlock,
- MapView,
- FeatureLayer,
- MapImageLayer,
- GroupLayer,
- WebTileLayer,
- Basemap,
- Legend,
- Expand,
- Print,
- Zoom,
- ScaleBar,
- Fullscreen,
- } = 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,
- fullLayer,
- query = '',
- opacity = 1,
- maxScaleOverride = '',
- minScaleOverride = '',
- },
- index,
- ) => {
- const url = `${map_service_url}/${layer?.id}`;
- let mapLayer;
- switch (layer.type) {
- case 'Raster Layer':
- mapLayer = new MapImageLayer({
- url: map_service_url,
- sublayers: [
- {
- id: layer.id,
- minScale: minScaleOverride
- ? minScaleOverride
- : layer?.minScale,
- maxScale: maxScaleOverride
- ? maxScaleOverride
- : layer?.maxScale,
- opacity: opacity ? parseFloat(opacity) : 1,
- definitionExpression: query
- ? reactQueryBuilder.formatQuery(query, 'sql')
- : '',
- },
- ],
- });
- break;
- case 'Feature Layer':
- mapLayer = new FeatureLayer({
- layerId: layer.id,
- url,
- definitionExpression: query
- ? reactQueryBuilder.formatQuery(query, 'sql')
- : '',
- minScale: minScaleOverride
- ? minScaleOverride
- : layer?.minScale,
- maxScale: maxScaleOverride
- ? maxScaleOverride
- : layer?.maxScale,
- opacity: opacity ? parseFloat(opacity) : 1,
- ...(styles?.override_styles && {
- renderer: customFeatureLayerRenderer,
- }),
- });
- break;
- default:
- break;
- }
- return mapLayer;
- },
- )
- : [];
-
- const generateMapBaselayer = (compositeType) => {
- return new WebTileLayer({
- urlTemplate: `https://gisco-services.ec.europa.eu/maps/tiles/OSM${compositeType}Composite/EPSG3857/{level}/{col}/{row}.png`,
- });
- };
-
- // Create a Basemap with the WebTileLayer.
-
- const positronCompositeBasemap = new Basemap({
- baseLayers: [generateMapBaselayer('Positron')],
- title: 'Positron Composite',
- id: 'positron-composite',
- thumbnailUrl:
- 'https://gisco-services.ec.europa.eu/maps/tiles/OSMPositronComposite/EPSG3857/0/0/0.png',
- });
-
- const blossomCompositeBasemap = new Basemap({
- baseLayers: [generateMapBaselayer('Blossom')],
- title: 'Blossom Composite',
- id: 'blossom-composite',
- thumbnailUrl:
- 'https://gisco-services.ec.europa.eu/maps/tiles/OSMBlossomComposite/EPSG3857/0/0/0.png',
- });
-
- const setBasemap = (basemap) => {
- if (basemap === 'positron-composite') {
- return positronCompositeBasemap;
- }
- if (basemap === 'blossom-composite') {
- return blossomCompositeBasemap;
- }
- if (!basemap) {
- return 'hybrid';
- }
- return basemap;
- };
-
- const setCustomBasemap = (urlTemplate) => {
- const mapBaseLayer = new WebTileLayer({
- urlTemplate,
- });
-
- // Create a Basemap with the WebTileLayer.
- const customBase = new Basemap({
- baseLayers: [mapBaseLayer],
- title: 'Custom Base Layer',
- id: 'custom-base',
- });
- return customBase;
- };
-
- const map = new MapBlock({
- basemap:
- data?.base?.use_custom_base && data?.base?.custom_base_layer
- ? setCustomBasemap(data?.base?.custom_base_layer)
- : setBasemap(base_layer),
- layers,
- });
- const view = new MapView({
- container: mapRef.current,
- map,
- center:
- general?.long && general?.lat ? [general.long, general.lat] : [0, 40],
- zoom: general?.zoom_level ? general?.zoom_level : 2,
- ui: {
- components: ['attribution'],
- },
- });
- if (general && general.scalebar) {
- const scaleBarWidget = new ScaleBar({
- view: view,
- unit: general.scalebar,
- });
-
- view.ui.add(scaleBarWidget, {
- position: 'bottom-left',
- });
- }
-
- const fullscreenWidget = new Fullscreen({
- view: view,
- });
-
- view.ui.add(fullscreenWidget, 'top-right');
-
- //detect when fullscreen is on
-
- if (layers && layers[0] && general && general.centerOnExtent) {
- const firstLayer = layers[0];
- if (firstLayer.type === 'feature') {
- firstLayer
- .when(() => {
- return firstLayer.queryExtent();
- })
- .then((response) => {
- view.goTo(response.extent);
- });
- }
- if (firstLayer.type === 'map-image') {
- firstLayer.when(() => {
- view.goTo(firstLayer.fullExtent);
- });
- }
- }
-
- const zoomPosition =
- general && general.zoom_position ? general.zoom_position : '';
-
- if (zoomPosition) {
- const zoomWidget = new Zoom({
- view: view,
- });
- view.ui.add(zoomWidget, zoomPosition);
- }
- const printPosition =
- general && general.print_position ? general.print_position : '';
-
- if (printPosition) {
- 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) {
- layers.forEach((layer) => {
- view.whenLayerView(layer).then((layerView) => {
- layerView.watch('updating', (val) => {});
- });
- });
- }
- return { view, map };
- }, [modules, data, data.layers, map_layers]);
-
- const heightPx =
- height && !editMode
- ? `${height}px`
- : device === 'tablet' || device === 'mobile'
- ? '300px'
- : '500px';
-
- const dynamicStyle = `
- .esri-map {
- height: ${heightPx} !important
- }
- `;
-
- return (
- - No layer found for legend. Please add a map layer from editor. -
-
-
-
-
- );
-};
-
-export default withDeviceSize(React.memo(Webmap));
diff --git a/src/components/index.js b/src/components/index.js
deleted file mode 100644
index 4317dbc..0000000
--- a/src/components/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as Webmap } from './Webmap';
-export { default as ExtraViews } from './ExtraViews';
-export { default as LegendView } from './LegendView';
-
-export { default as EmbedMapView } from './Blocks/EmbedEEAMap/View';
-export { default as EmbedMapEdit } from './Blocks/EmbedEEAMap/Edit';
diff --git a/src/components/visualization/VisualizationEditorWidget.jsx b/src/components/visualization/VisualizationEditorWidget.jsx
deleted file mode 100644
index 0c63f23..0000000
--- a/src/components/visualization/VisualizationEditorWidget.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React from 'react';
-import { Modal, Button, Grid } from 'semantic-ui-react';
-
-import { FormFieldWrapper, InlineForm } from '@plone/volto/components';
-
-import PanelsSchema from './panelsSchema';
-import Webmap from '../Webmap';
-
-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 = (val) => {
- setIntValue(val);
- };
-
- let schema = PanelsSchema({ data: dataForm });
-
- React.useEffect(() => {
- if (!intValue?.general) {
- setIntValue({
- ...intValue,
- general: {
- print_position: 'top-right',
- zoom_position: 'top-right',
- centerOnExtent: true,
- scalebar: 'metric',
- },
- });
- }
- if (!intValue?.base) {
- setIntValue({
- ...intValue,
- base: {
- base_layer: 'gray-vector',
- },
- });
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [intValue]);
-
- return (
-
-
-
-
- {open && (
-
-
-
-
-
-
-
-
- );
-};
-
-export default DataQueryWidget;
diff --git a/src/components/widgets/LayerSelectWidget.jsx b/src/components/widgets/LayerSelectWidget.jsx
deleted file mode 100644
index 7d1105a..0000000
--- a/src/components/widgets/LayerSelectWidget.jsx
+++ /dev/null
@@ -1,463 +0,0 @@
-import React from 'react';
-import { Icon } from '@plone/volto/components';
-import { Input, Select, Button, Grid, Checkbox } from 'semantic-ui-react';
-
-import { flattenToAppURL } from '@plone/volto/helpers';
-import RichTextWidget from '@plone/volto-slate/widgets/RichTextWidget';
-
-import { connect } from 'react-redux';
-import { compose } from 'redux';
-
-import { getContent } from '@plone/volto/actions';
-
-import checkSVG from '@plone/volto/icons/check.svg';
-import closeSVG from '@plone/volto/icons/clear.svg';
-import aheadSVG from '@plone/volto/icons/ahead.svg';
-import resetSVG from '@plone/volto/icons/reset.svg';
-
-import { fetchArcGISData } from '../../utils';
-
-import loadable from '@loadable/component';
-
-const QueryBuilder = loadable(() => import('react-querybuilder'), {
- resolveComponent: (components) => components.QueryBuilder,
-});
-
-const LayerSelectWidget = (props) => {
- const { onChange, id, data_query } = props;
-
- const value = React.useMemo(() => props.value || {}, [props.value]);
-
- const {
- available_layers,
- map_data,
- map_service_url,
- layer,
- fields = [],
- query = '',
- description = '',
- hide = false,
- } = 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 [builtQuery, setBuiltQuery] = React.useState(query);
-
- 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) {
- const mappedLayers = mapData.layers
- .filter(
- (layer) => layer && layer.type && layer.type !== 'Group Layer',
- )
- .map((layer, i) => {
- return {
- key: layer.id,
- value: layer,
- text: `${layer.name} (${layer.type})`,
- };
- });
- setAvailableLayers(mappedLayers);
- }
- onChange(id, {
- ...value,
- layer: selectedLayer,
- map_service_url: serviceUrl,
- available_layers: availableLayers,
- map_data: mapData,
- description,
- hide,
- });
- } catch (e) {
- setCheckColor('youtube');
- setServiceUrlError({ error: e.message, status: e.status });
- }
- };
-
- React.useEffect(() => {
- import(
- /* webpackChunkName: "react-querybuilder-css" */ 'react-querybuilder/dist/query-builder.css'
- );
- props.getContent('', null, id);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, []);
-
- React.useEffect(() => {
- if (query && !builtQuery) {
- setBuiltQuery(query);
- }
- }, [query, builtQuery]);
-
- React.useEffect(() => {
- //detect existing queries in block content. If it exists. Apply matching queries to layer on fresh layer load
- if (
- map_service_url &&
- layer &&
- !query &&
- data_query &&
- data_query.length > 0
- ) {
- let autoQuery = {
- combinator: 'or',
- rules: [],
- };
- data_query.forEach((param, i) => {
- if (
- fields &&
- fields.length > 0 &&
- fields.filter(
- (field, j) => field.name === param.alias || field.name === param.i,
- ).length > 0
- ) {
- autoQuery.rules = [
- ...autoQuery.rules,
- { field: param.alias || param.i, operator: '=', value: param.v[0] },
- ];
- }
- });
- if (autoQuery.rules.length > 0) {
- onChange(id, {
- ...value,
- query: autoQuery,
- });
- setBuiltQuery(autoQuery);
- }
- }
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [map_service_url, layer, query, data_query, fields]);
-
- const handleLayerFetch = async (service_url, id) => {
- try {
- let fullLayer = await fetchArcGISData(`${service_url}/${id}`);
- return fullLayer;
- } catch (e) {}
- };
-
- const handleSelectLayer = async (layer) => {
- const fullLayer = await handleLayerFetch(serviceUrl, layer.id);
- setSelectedLayer(layer);
- onChange(id, {
- ...value,
- layer,
- fullLayer,
- fields: fullLayer.fields,
- map_service_url: serviceUrl,
- available_layers: availableLayers,
- map_data: mapData,
- query: '',
- });
- setBuiltQuery('');
- };
-
- const handleQueryLayer = () => {
- if (builtQuery) {
- onChange(id, {
- ...value,
- query: builtQuery,
- });
- }
- };
-
- const handleChangeDescription = (val) => {
- if (val) {
- onChange(id, {
- ...value,
- description: val,
- });
- }
- };
-
- const handleOpacityChange = (val) => {
- onChange(id, {
- ...value,
- opacity: val,
- });
- };
-
- const handleChangeServiceUrl = (value) => {
- setServiceUrlError('');
- setCheckColor('');
- setAvailableLayers('');
- setBuiltQuery('');
- setSelectedLayer('');
- setMapData('');
-
- setServiceUrl(value);
- };
-
- const handleMinScaleChange = (minScaleOverride) => {
- onChange(id, {
- ...value,
- minScaleOverride,
- });
- };
-
- const handleMaxScaleChange = (maxScaleOverride) => {
- onChange(id, {
- ...value,
- maxScaleOverride,
- });
- };
-
- const handleReset = () => {
- setServiceUrlError('');
- setServiceUrl(map_service_url);
- setCheckColor('');
- setAvailableLayers(available_layers);
- setBuiltQuery('');
- setSelectedLayer(layer);
- setMapData(map_data);
- };
-
- const handleHideInLegend = (v) => {
- onChange(id, {
- ...value,
- hide: v,
- });
- };
-
- return (
-
- {value && value.length > 0 ? (
- value.map((param, i) => (
-
-
-
-
-
-
- ))
- ) : (
-
- - {param?.i}:{' '} - {param?.v && param.v.join(', ')} -
-No parameters set
- )} -
-
-
-
- );
-};
-
-export default compose(
- connect(
- (state) => {
- const pathname = flattenToAppURL(state.content.data['@id']);
- return {
- content: state.content.data,
- data_query: state.connected_data_parameters.byContextPath[pathname],
- };
- },
- {
- getContent,
- },
- ),
-)(LayerSelectWidget);
diff --git a/src/components/widgets/LayersPanelWidget.jsx b/src/components/widgets/LayersPanelWidget.jsx
deleted file mode 100644
index 59e0ab4..0000000
--- a/src/components/widgets/LayersPanelWidget.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React from 'react';
-import { Button } from 'semantic-ui-react';
-import LayerSelectWidget from './LayerSelectWidget';
-
-const LayersPanelWidget = ({ data, onChange, block }) => {
- const map_layers = React.useMemo(
- () => data.map_layers || [],
- [data.map_layers],
- );
-
- 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 (
-
-
-
-
-
- handleChangeServiceUrl(value)}
- style={{ width: '100%' }}
- error={serviceUrlError}
- value={serviceUrl}
- >
-
-
- {serviceUrlError.error}
-
-
- {serviceUrl && (
-
- {serviceUrl !== map_service_url && (
-
- )}
-
-
- )}
-
- {mapData && mapData.mapName && (
- - Service URL -
-
-
-
-
- )}
- {availableLayers && availableLayers.length > 0 && (
- - Map name: -
-{mapData.mapName}
-
-
-
-
-
-
- )}
- {availableLayers && availableLayers.length > 0 && selectedLayer && (
- - Layer -
-
-
-
-
-
-
-
-
-
-
-
-
- handleHideInLegend(checked)}
- />
-
-
- )}
- {availableLayers && fields && fields.length > 0 && (
- Opacity:
- handleOpacityChange(e.target.value)} - /> - handleOpacityChange(e.target.value)} - /> -- Min scale: -
- handleMinScaleChange(e.target.value)} - /> -- Max scale: -
- handleMaxScaleChange(e.target.value)} - /> -- Description -
-
- {
- handleChangeDescription(value);
- }}
- value={value.description}
- placeholder="Set Description"
- />
-
- Hide in legend:
{' '} -
-
- {
- return { name: fi.name, label: fi.name };
- })}
- query={builtQuery}
- onQueryChange={(q) => setBuiltQuery(q)}
- enableDragAndDrop={false}
- />
-
- {builtQuery && (
-
-
-
- )}
-
-
- {fields.map((field, id) => (
-
- )}
- - Query Layer -
-- Available Fields: -
-- {field.alias} ({field.type}) -
- ))} -
- {map_layers &&
- map_layers.length > 0 &&
- map_layers.map((layer, i) => (
-
- );
-};
-
-export default LayersPanelWidget;
diff --git a/src/components/widgets/SimpleColorPickerWidget.jsx b/src/components/widgets/SimpleColorPickerWidget.jsx
deleted file mode 100644
index 9f114a5..0000000
--- a/src/components/widgets/SimpleColorPickerWidget.jsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React from 'react';
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
-import { Button } from 'semantic-ui-react';
-import loadable from '@loadable/component';
-import clearSVG from '@plone/volto/icons/clear.svg';
-import checkSVG from '@plone/volto/icons/check.svg';
-
-const ReactColor = loadable.lib(() => import('react-color'));
-
-const SimpleColorPickerWidget = (props) => {
- const { id, value, onChange, available_colors } = props;
- const [showPicker, setShowPicker] = React.useState(false);
-
- const [color, setColor] = React.useState(value);
-
- const handleChangeColor = (valColor) => {
- setColor(valColor);
- };
-
- const handleConfirmColor = () => {
- onChange(id, color);
- setShowPicker(false);
- };
-
- const handleAbortColor = () => {
- setColor(value);
- setShowPicker(false);
- };
-
- return (
-
-
-
-
- {showPicker ? (
-
-
-
-
- {({ SketchPicker }) => {
- return (
- {
- handleChangeColor(value);
- }}
- >
- );
- }}
-
-
-
-
-
-
- ) : (
- ''
- )}
-