@eeacms/volto-eea-map 4.1.0 → 5.0.1

package/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 (
+    <MapContext.Provider
+      value={{
+        mapEl,
+        $map,
+      }}
+    >
+      <div ref={mapEl} style={{ '--ag-map-height': '600px' }}>
+        {isReady && children}
+      </div>
+    </MapContext.Provider>
+  );
+});
+
+export default withArcgis(ArcgisMap);

package/src/Arcgis/Map/MapBuilder.jsx

@@ -0,0 +1,111 @@
+import React, {
+  memo,
+  forwardRef,
+  useImperativeHandle,
+  useEffect,
+  useState,
+  useMemo,
+  useRef,
+} from 'react';
+import Map from './Map';
+import Layer from '../Layer/Layer';
+import Widget from '../Widget/Widget';
+
+import { getBasemap, getLayers, getWidgets } from '../helpers';
+
+const MapBuilder = forwardRef((props, ref) => {
+  const { data, properties } = props || {};
+  const data_query = properties?.data_query;
+  const definitionExpression = properties?.definitionExpression;
+  const $map = useRef(null);
+  const [renderWidgets, setRenderWidgets] = useState(true);
+  const basemap = useMemo(
+    () => getBasemap({ basemap: data.basemap, base: data.base }),
+    [data.basemap, data.base],
+  );
+  const layers = useMemo(
+    () =>
+      getLayers({
+        layers: data.layers,
+        styles: data.styles,
+        data_query: data_query,
+        definitionExpression,
+      }),
+    [data.layers, data.styles, data_query, definitionExpression],
+  );
+  const widgets = useMemo(
+    () => getWidgets({ widgets: data.widgets }),
+    [data.widgets],
+  );
+  const settings = useMemo(() => data.settings || {}, [data.settings]);
+  const viewSettings = useMemo(() => settings.view || {}, [settings.view]);
+  const initialViewpoint = useMemo(
+    () => ({ center: viewSettings.center, zoom: viewSettings.zoom }),
+    [viewSettings.center, viewSettings.zoom],
+  );
+  const zoomToLayer = useMemo(() => {
+    let cIndex = 0;
+    return layers.reduce((index, layer) => {
+      if (layer.zoomToExtent) {
+        index = cIndex;
+      }
+      cIndex++;
+      return index;
+    }, 0);
+  }, [layers]);
+
+  const rotationEnabled = settings.view?.constraints?.rotationEnabled ?? false;
+
+  useEffect(() => {
+    setRenderWidgets(false);
+  }, [widgets]);
+
+  useEffect(() => {
+    if (!renderWidgets) {
+      setRenderWidgets(true);
+    }
+  }, [renderWidgets]);
+
+  useEffect(() => {
+    if (!$map.current?.isReady) return;
+    const homeWidget = $map.current.view.ui.find('Home');
+    if (!homeWidget || !initialViewpoint.center) return;
+    homeWidget.viewpoint = new $map.current.modules.AgViewpoint({
+      center: initialViewpoint.center,
+      zoom: initialViewpoint.zoom || 0,
+    });
+  }, [ref, initialViewpoint]);
+
+  useImperativeHandle(ref, () => $map.current);
+
+  return (
+    <Map
+      MapProperties={{
+        ...(settings.map || {}),
+        basemap,
+      }}
+      ViewProperties={{
+        ...(settings.view || {}),
+        constraints: {
+          ...(settings.view?.constraints || {}),
+          rotationEnabled,
+        },
+      }}
+      ref={$map}
+    >
+      {renderWidgets &&
+        widgets.map((widget, index) => (
+          <Widget key={index} order={index + 1} {...widget} />
+        ))}
+      {layers.map((layer, index) => (
+        <Layer
+          {...layer}
+          key={index}
+          zoomToExtent={zoomToLayer === index}
+          opacity={layer.opacity ?? 1}
+        />
+      ))}
+    </Map>
+  );
+});
+export default memo(MapBuilder);

package/src/Arcgis/Map/MapContext.jsx

@@ -0,0 +1,3 @@
+import React from 'react';
+const MapContext = new React.createContext();
+export default MapContext;

package/src/Arcgis/Widget/Widget.jsx

@@ -0,0 +1,170 @@
+import { useContext, useEffect, useMemo, memo } from 'react';
+import { EventEmitter } from 'events';
+
+import MapContext from '../Map/MapContext';
+
+import useClass from '@eeacms/volto-eea-map/hooks/useClass';
+
+const modules = {};
+
+const TIMEOUT = 2000;
+
+class $Widget extends EventEmitter {
+  #isReady = false;
+  #props = {};
+  #name = '';
+  #order = -1;
+  #initiate = false;
+  #widget = null;
+  #expand = null;
+  #modulesLoaded = false;
+  #clock = null;
+
+  constructor(props) {
+    super();
+
+    this.#props = props;
+    this.#name = props.name;
+    this.#order = props.order || 1;
+
+    if (this.order <= 1) {
+      this.#initiate = true;
+      return;
+    }
+
+    this.#props.$map.on('widget-added', (widget) => {
+      if (this.#isReady) return;
+      if (this.#order - widget.order === 1) {
+        this.#initiate = true;
+      }
+    });
+  }
+
+  get isReady() {
+    return this.#isReady && !!this.#widget;
+  }
+
+  get widget() {
+    return this.#widget;
+  }
+
+  get order() {
+    return this.#order;
+  }
+
+  async loadModules() {
+    const $arcgis = __CLIENT__ ? window.$arcgis : null;
+    if (__SERVER__ || !$arcgis || !this.#name) return Promise.reject();
+    if (!this.#modulesLoaded) {
+      const AgWidget = modules[`Ag${this.#name}`];
+      modules[`Ag${this.#name}`] =
+        AgWidget || (await $arcgis.import(`esri/widgets/${this.#name}`));
+      modules.AgExpand = await $arcgis.import('esri/widgets/Expand');
+      this.#modulesLoaded = true;
+    }
+    return Promise.resolve();
+  }
+
+  init() {
+    const {
+      $map,
+      expand,
+      position = 'top-left',
+      ExpandProperties = {},
+    } = this.#props;
+    const AgWidget = modules[`Ag${this.#name}`];
+    const AgExpand = modules.AgExpand;
+    if (!this.#modulesLoaded || !$map.isReady) return;
+    if (!AgWidget || !AgExpand) {
+      throw new Error('$Widget modules not loaded');
+    }
+
+    this.#widget = new AgWidget({
+      view: $map.view,
+      ...(!this.#expand ? { id: this.#name } : {}),
+      ...(this.#props || {}),
+    });
+
+    if (expand) {
+      this.#expand = new AgExpand({
+        view: $map.view,
+        content: this.#widget,
+        id: this.#name,
+        mode: 'floating',
+        ...ExpandProperties,
+      });
+    }
+
+    const content = this.#expand || this.#widget;
+
+    $map.view.ui.add(content, position);
+
+    this.#isReady = true;
+    this.#initiate = false;
+
+    this.emit('connected');
+    $map.emit('widget-added', this);
+  }
+
+  connect() {
+    clearInterval(this.#clock);
+    this.loadModules()
+      .then(() => {
+        if (this.#order <= 1) {
+          this.init();
+          return;
+        }
+        let time = 0;
+        this.#clock = setInterval(() => {
+          if (time >= TIMEOUT || this.#isReady) {
+            clearInterval(this.#clock);
+            return;
+          }
+          time += 50;
+          if (!this.#initiate) return;
+          clearInterval(this.#clock);
+          this.init();
+        }, 50);
+      })
+      .catch(() => {});
+  }
+
+  disconnect() {
+    if (!this.#isReady) return;
+    if (this.#widget) {
+      this.#widget.destroy();
+    }
+    if (this.#expand) {
+      this.#expand.destroy();
+    }
+    this.#widget = null;
+    this.#expand = null;
+    this.#isReady = false;
+    clearInterval(this.#clock);
+    this.emit('disconnected');
+  }
+}
+
+// https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Widget.html
+function Widget(props) {
+  const { $map } = useContext(MapContext);
+  const context = useMemo(() => ({ ...props, $map }), [props, $map]);
+
+  const $widget = useClass($Widget, context);
+
+  useEffect(() => {
+    if (!$widget) return;
+
+    if ($map.isReady) {
+      $widget.connect();
+    }
+
+    return () => {
+      $widget.disconnect();
+    };
+  }, [$map, $widget]);
+
+  return null;
+}
+
+export default memo(Widget);

package/src/Arcgis/helpers.js

@@ -0,0 +1,140 @@
+import { isArray } from 'lodash';
+import { formatQuery as $formatQuery } from 'react-querybuilder';
+import { getDefaultWidgets } from '@eeacms/volto-eea-map/constants';
+
+const timer = {};
+
+export function formatQuery(...args) {
+  let query = args[0];
+  const data_query = args[1];
+  if (query?.rules) {
+    query = {
+      ...query,
+      rules: query.rules
+        .map((rule) => {
+          if (!data_query) return rule;
+          data_query.forEach((query) => {
+            if (rule.dataQuery.includes(query.i)) {
+              rule.value = query.v;
+              if (
+                isArray(rule.value) &&
+                rule.value.length > 1 &&
+                rule.operator === '='
+              ) {
+                rule.operator = 'in';
+              }
+            }
+          });
+          return rule;
+        })
+        .filter((rule) => rule.value),
+    };
+  }
+  return $formatQuery(query, ...args.slice(2));
+}
+
+export function debounce(func, wait = 300, id) {
+  if (typeof func !== 'function') return;
+  const name = id || func.name || 'generic';
+  if (timer[name]) clearTimeout(timer[name]);
+  timer[name] = setTimeout(func, wait);
+}
+
+export function omitBy(obj, keys = []) {
+  return Object.keys(obj).reduce((acc, key) => {
+    if (!keys.includes(key)) {
+      acc[key] = obj[key];
+    }
+    return acc;
+  }, {});
+}
+
+export function getBasemap(data) {
+  if (!data) return {};
+  return {
+    name: data.basemap?.name || data.base?.base_layer,
+    url_template: data.basemap?.url_template || data.base?.custom_base_layer,
+  };
+}
+
+export function getLayers(data = {}, parseQuery = true) {
+  if (!data?.layers) return [];
+  const { data_query } = data;
+  const renderer = getOldRenderer(data.styles);
+
+  return (
+    (
+      (Array.isArray(data.layers) ? data.layers : data.layers?.map_layers) || []
+    )?.map(($layer) => {
+      const layer = $layer.map_layer ? $layer.map_layer?.layer : $layer;
+      const url = $layer.url ?? $layer.map_layer?.map_service_url;
+      const subLayers = getLayers({ layers: $layer.subLayers, data_query });
+
+      let definitionExpression =
+        layer.definitionExpression || data.definitionExpression;
+
+      try {
+        definitionExpression =
+          parseQuery && definitionExpression
+            ? formatQuery(definitionExpression, data_query, 'sql')
+            : definitionExpression;
+      } catch {}
+
+      return {
+        ...(renderer ? { renderer } : {}),
+        ...omitBy(layer, ['geometryType', 'blendMode', 'definitionExpression']),
+        ...(definitionExpression ? { definitionExpression } : {}),
+        blendMode: layer.blendMode ?? 'normal',
+        url,
+        title: layer.name,
+        subLayers: subLayers.length > 0 ? subLayers : null,
+      };
+    }) || []
+  );
+}
+
+export function getLayerDefaults(layer = {}) {
+  const renderer = layer.drawingInfo?.renderer;
+  return {
+    minScale: layer.minScale,
+    maxScale: layer.maxScale,
+    renderer: renderer ? { ...renderer, autocast: false } : undefined,
+    blendMode: layer.blendMode || 'normal',
+    opacity: 1,
+  };
+}
+
+export function getWidgets(data = {}) {
+  return data.widgets ?? getDefaultWidgets(data.settings?.map?.dimension);
+}
+
+export function getOldRenderer(styles) {
+  if (!styles) return;
+  return {
+    type: 'simple',
+    autocast: true,
+    symbol: {
+      type: 'simple-fill',
+      color: styles?.symbol_color
+        ? styles?.symbol_color?.rgb
+        : {
+            r: 0,
+            g: 0,
+            b: 0,
+            a: 1,
+          },
+      style: 'solid',
+      outline: {
+        color: styles?.outline_color
+          ? styles?.outline_color?.rgb
+          : {
+              r: 0,
+              g: 0,
+              b: 0,
+              a: 1,
+            },
+        width: styles?.outline_width ? styles?.outline_width : 1,
+      },
+    },
+  };
+}