@eeacms/volto-eea-map 4.1.0 → 5.0.0

package/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);

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;