geosphere-maps/app/[locale]/map.tsx

import { useRef, useState, useEffect, lazy } from 'react';
import { Root, createRoot } from 'react-dom/client';

import { useTranslation } from 'react-i18next';
import initI18n from './i18n';

import MapView from '@arcgis/core/views/MapView';
import WebMap from '@arcgis/core/WebMap';
import esriConfig from '@arcgis/core/config';
import ScaleBar from '@arcgis/core/widgets/ScaleBar';
import Legend from '@arcgis/core/widgets/Legend';
import WMTSLayer from '@arcgis/core/layers/WMTSLayer';
import VectorTileLayer from '@arcgis/core/layers/VectorTileLayer';
import TileLayer from '@arcgis/core/layers/TileLayer';
import Map from '@arcgis/core/Map.js';
import Basemap from '@arcgis/core/Basemap';
import * as intl from '@arcgis/core/intl';

// set asset path for ArcGIS Maps SDK widgets
esriConfig.assetsPath = './assets';

// ids of web map items in portal
const webMapDEID = '7d0768f73d3e4be2b32c22274c600cb3';
const webMapENID = 'dbf5532d06954c6a989d4f022de83f70';

// lazy load print component
const Print = lazy(() => import('./print'));
const Layers = lazy(() => import('./layer-list'));
const Basemaps = lazy(() => import('./basemap-list'));
const Search = lazy(() => import('./search'));

// import Calcite components
import '@esri/calcite-components/dist/calcite/calcite.css';

import { setAssetPath } from '@esri/calcite-components/dist/components';
setAssetPath(window.location.href);

import '@esri/calcite-components/dist/components/calcite-shell';
import '@esri/calcite-components/dist/components/calcite-shell-panel';
import '@esri/calcite-components/dist/components/calcite-shell-center-row';
import '@esri/calcite-components/dist/components/calcite-action-bar';
import '@esri/calcite-components/dist/components/calcite-action';
import '@esri/calcite-components/dist/components/calcite-panel';
import {
  CalciteShell,
  CalciteShellPanel,
  CalciteActionBar,
  CalciteAction,
  CalcitePanel,
} from '@esri/calcite-components-react';

// load localized strings
const match = location.pathname.match(/\/(\w+)/);
if (match && match.length > 1) {
  const locale = match[1];
  initI18n(locale);
}

export default function MapComponent({ locale }: { locale: string }) {
  const printRoot = useRef<Root | null>(null);
  const maskRoot = useRef<HTMLDivElement>(null);
  const tableRoot = useRef<HTMLDivElement>(null);
  const mapView = useRef<MapView | null>(null);
  const previousId = useRef<string | null>(null);

  const [actionBarExpanded, setActionBarExpanded] = useState<boolean>(false);

  const { t } = useTranslation();

  useEffect(() => {
    if (!mapView.current) {
      // set locale for ArcGIS Maps SDK widgets
      intl.setLocale(locale);

      const webMap = new WebMap({
        portalItem: {
          id: locale === 'de' ? webMapDEID : webMapENID,
          portal: {
            url: 'https://gis.geosphere.at/portal',
          },
        },
      });

      // const wmtsLayer = new WMTSLayer({
      //   url: 'https://mapsneu.wien.gv.at/basemapneu',
      // });

      // const basemap = new Basemap({
      //   baseLayers: [wmtsLayer],
      // });

      const lightgrayBase = new VectorTileLayer({
        url: 'https://gis.geosphere.at/portal/sharing/rest/content/items/291da5eab3a0412593b66d384379f89f/resources/styles/root.json',
        opacity: 0.5,
      });
      const lightGrayReference = new VectorTileLayer({
        url: 'https://gis.geosphere.at/portal/sharing/rest/content/items/1768e8369a214dfab4e2167d5c5f2454/resources/styles/root.json',
        opacity: 1,
      });
      const worldHillshade = new TileLayer({
        url: 'https://services.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer',
      });
      const basemapEsri = new Basemap({
        baseLayers: [worldHillshade, lightgrayBase, lightGrayReference],
        title: 'Esri',
        thumbnailUrl:
          'https://gis.geosphere.at/portal/sharing/rest/content/items/3eb1510943be4f29ae01c01ce229d8ba/data',
      });

      const map = new Map({
        basemap: basemapEsri,
      });

      const view = new MapView({
        container: 'map-container',
        map: map,
        padding: {
          left: 49,
        },
        popup: {
          dockOptions: {
            position: 'auto',
            breakpoint: {
              width: 5000,
            },
          },
        },
        extent: {
          ymax: 6424330,
          xmin: 923200,
          xmax: 2017806,
          ymin: 5616270,
          spatialReference: {
            wkid: 3857,
          },
        },
      });

      mapView.current = view;
      view.ui.empty('top-left');

      webMap.load().then(() => {
        map.layers = webMap.layers;
        createRoot(document.createElement('div')).render(<Search view={view}></Search>);
      });

      const scaleBar = new ScaleBar({
        view: view,
        unit: 'metric',
      });

      view.ui.add([scaleBar], 'bottom-left');

      new Legend({
        view: view,
        container: 'legend-container',
      });
    }

    return () => {};
  }, [locale]);

  const handleCalciteActionBarToggle = () => {
    setActionBarExpanded(!actionBarExpanded);
    if (mapView.current) {
      mapView.current.padding = !actionBarExpanded ? { left: 150 } : { left: 49 };
    }

    if (tableRoot.current) {
      if (!actionBarExpanded) {
        tableRoot.current.classList.add('left-40');
        tableRoot.current.classList.remove('left-14');
      } else {
        tableRoot.current.classList.add('left-14');
        tableRoot.current.classList.remove('left-40');
      }
    }
  };

  const handleClick = (event: any) => {
    if (event.target.tagName !== 'CALCITE-ACTION') {
      return;
    }

    const nextId = event.target.dataset.actionId;

    if (previousId.current) {
      const previousPanel = document.querySelector(`[data-panel-id=${previousId.current}]`) as HTMLCalcitePanelElement;
      if (previousPanel) {
        previousPanel.hidden = true;
      }

      if (previousId.current === 'print') {
        maskRoot.current?.classList.add('hidden');
      }
    }

    const nextPanel = document.querySelector(`[data-panel-id=${nextId}]`) as HTMLCalcitePanelElement;
    if (nextPanel && nextId !== previousId.current) {
      nextPanel.hidden = false;
      previousId.current = nextId;

      if (nextId === 'print') {
        maskRoot.current?.classList.remove('hidden');
      }
    } else {
      previousId.current = null;
    }
  };

  return (
    <div>
      <CalciteShell contentBehind>
        <h2 id="header-title" slot="header"></h2>
        <CalciteShellPanel slot="panel-start" displayMode="float">
          <CalciteActionBar
            slot="action-bar"
            onCalciteActionBarToggle={handleCalciteActionBarToggle}
            className="border-r border-r-gray-400"
          >
            <CalciteAction
              data-action-id="layers"
              icon="layers"
              text={t('layers.title')}
              onClick={handleClick}
            ></CalciteAction>
            <CalciteAction
              data-action-id="basemaps"
              icon="basemap"
              text={t('basemaps.title')}
              onClick={handleClick}
            ></CalciteAction>
            <CalciteAction
              data-action-id="legend"
              icon="legend"
              text={t('legend.title')}
              onClick={handleClick}
            ></CalciteAction>
            <CalciteAction
              data-action-id="print"
              icon="print"
              text={t('print.heading')}
              onClick={handleClick}
            ></CalciteAction>
            <CalciteAction data-action-id="info" icon="information" text="Info" onClick={handleClick}></CalciteAction>
          </CalciteActionBar>

          <CalcitePanel data-panel-id="layers" heading={t('layers.title')} hidden>
            {mapView.current && <Layers view={mapView.current} tableRoot={tableRoot}></Layers>}
          </CalcitePanel>

          <CalcitePanel data-panel-id="basemaps" heading={t('basemaps.title')} hidden>
            {mapView.current && <Basemaps view={mapView.current}></Basemaps>}
          </CalcitePanel>

          <CalcitePanel data-panel-id="legend" heading={t('legend.title')} hidden>
            <div id="legend-container"></div>
          </CalcitePanel>

          <CalcitePanel data-panel-id="print" heading={t('print.heading')} hidden>
            {mapView.current && <Print view={mapView.current} maskRoot={maskRoot}></Print>}
          </CalcitePanel>

          <CalcitePanel data-panel-id="info" heading="Info" hidden>
            <div id="info-container"></div>
          </CalcitePanel>
        </CalciteShellPanel>
        <div className="h-screen w-full" id="map-container">
          <div ref={tableRoot} className="hidden absolute left-14 bottom-5 h-1/3 right-2 border border-gray-400"></div>
        </div>
        <div
          ref={maskRoot}
          className="hidden absolute bg-red-300 border-2 border-red-600 opacity-50 pointer-events-none"
        ></div>
      </CalciteShell>
    </div>
  );
}