First commit

2023-09-22 11:33:13 +02:00 · 2023-09-22 11:33:13 +02:00 · 6ab4bb6daa
commit 6ab4bb6daa
parent 91447f74b4
13123 changed files with 60099 additions and 204 deletions
--- a/app/[locale]/dictionaries/de.json
+++ b/app/[locale]/dictionaries/de.json
@ -0,0 +1,20 @@
+{
+  "heading": "PDF drucken",
+  "titleLabel": "Titel",
+  "scaleLabel": "Maßstab",
+  "formatLabel": "Format",
+  "button": {
+    "print": "Drucken",
+    "cancel": "Abbrechen"
+  },
+  "formats": {
+    "A4 Hochformat": "A4 Hochformat",
+    "A4 Hochformat mit Legende": "A4 Hochformat mit Legende",
+    "A4 Querformat": "A4 Querformat",
+    "A4 Querformat mit Legende": "A4 Querformat mit Legende",
+    "A3 Hochformat": "A3 Hochformat",
+    "A3 Hochformat mit Legende": "A3 Hochformat mit Legende",
+    "A3 Querformat": "A3 Querformat",
+    "A3 Querformat mit Legende": "A3 Querformat mit Legende"
+  }
+}
--- a/app/[locale]/dictionaries/en.json
+++ b/app/[locale]/dictionaries/en.json
@ -0,0 +1,20 @@
+{
+  "heading": "Print PDF",
+  "titleLabel": "Title",
+  "scaleLabel": "Scale",
+  "formatLabel": "Format",
+  "button": {
+    "print": "Print",
+    "cancel": "Cancel"
+  },
+  "formats": {
+    "A4 Hochformat": "A4 portrait",
+    "A4 Hochformat mit Legende": "A4 portrait with legend",
+    "A4 Querformat": "A4 landscape",
+    "A4 Querformat mit Legende": "A4 landscape with legend",
+    "A3 Hochformat": "A3 portrait",
+    "A3 Hochformat mit Legende": "A3 portrait with legend",
+    "A3 Querformat": "A3 landscape",
+    "A3 Querformat mit Legende": "A3 landscape with legend"
+  }
+}
--- a/app/[locale]/i18n.js
+++ b/app/[locale]/i18n.js
@ -0,0 +1,28 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import deJSON from './dictionaries/de.json';
+import enJSON from './dictionaries/en.json';
+
+// the translations
+const resources = {
+  en: {
+    translation: enJSON,
+  },
+  de: {
+    translation: deJSON,
+  },
+};
+
+const initI18n = (locale) =>
+  i18n
+    .use(initReactI18next) // passes i18n down to react-i18next
+    .init({
+      resources,
+      lng: locale,
+      interpolation: {
+        escapeValue: false, // react already safes from xss
+      },
+    });
+
+export default initI18n;
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@ -0,0 +1,23 @@
+import '../globals.css';
+
+import type { Metadata } from 'next';
+import { Source_Sans_3 } from 'next/font/google';
+
+const ss3 = Source_Sans_3({
+  subsets: ['latin'],
+  display: 'swap',
+});
+
+export const metadata: Metadata = {
+  title: 'GeoSphere Maps',
+  description: 'GeoSphere Maps',
+  icons: { icon: '/assets/favicon.ico' },
+};
+
+export default function RootLayout({ children, params }: { children: React.ReactNode; params: any }) {
+  return (
+    <html lang={params.locale} className={ss3.className}>
+      <body className="w-full h-full p-0 m-0">{children}</body>
+    </html>
+  );
+}
--- a/app/[locale]/map.tsx
+++ b/app/[locale]/map.tsx
@ -0,0 +1,121 @@
+import { useRef, useEffect, lazy } from 'react';
+import { createRoot } from 'react-dom/client';
+
+import '@esri/calcite-components/dist/calcite/calcite.css';
+
+import MapView from '@arcgis/core/views/MapView.js';
+import WebMap from '@arcgis/core/WebMap.js';
+import esriConfig from '@arcgis/core/config.js';
+import LayerList from '@arcgis/core/widgets/LayerList';
+import Expand from '@arcgis/core/widgets/Expand';
+import ScaleBar from '@arcgis/core/widgets/ScaleBar.js';
+import WMTSLayer from '@arcgis/core/layers/WMTSLayer';
+import Map from '@arcgis/core/Map.js';
+import Basemap from '@arcgis/core/Basemap';
+import * as reactiveUtils from '@arcgis/core/core/reactiveUtils.js';
+import * as intl from '@arcgis/core/intl.js';
+
+// set asset path for ArcGIS Maps SDK widgets
+esriConfig.assetsPath = './assets';
+
+let mapView: MapView;
+const webMapID = '7d0768f73d3e4be2b32c22274c600cb3';
+
+// lazy load Print component
+const Print = lazy(() => import('./print'));
+
+export default function MapComponent({ locale }: { locale: string }) {
+  const printRoot = useRef<any>(null);
+  const mapRef = useRef(null);
+  const maskRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (mapRef.current) {
+      // set locale for ArcGIS Maps SDK widgets
+      intl.setLocale(locale);
+
+      const webMap = new WebMap({
+        portalItem: {
+          id: webMapID,
+          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 map = new Map({
+        basemap: basemap,
+      });
+
+      const mapView = new MapView({
+        container: mapRef.current,
+        map: map,
+      });
+
+      webMap.load().then(() => {
+        map.layers = webMap.layers;
+      });
+
+      const layerList = new LayerList({
+        view: mapView,
+      });
+
+      const layerListExpand = new Expand({
+        content: layerList,
+      });
+
+      const container = document.createElement('div');
+
+      const printExpand = new Expand({
+        content: container,
+        expandIcon: 'print',
+        label: 'Print',
+      });
+
+      reactiveUtils.watch(
+        () => printExpand.expanded,
+        (expanded) => {
+          if (expanded) {
+            printRoot.current = createRoot(container);
+            printRoot.current.render(<Print view={mapView} mask={maskRef}></Print>);
+          } else {
+            maskRef.current?.classList.add('hidden');
+            printRoot.current.unmount();
+          }
+        }
+      );
+
+      const scaleBar = new ScaleBar({
+        view: mapView,
+        unit: 'metric',
+      });
+
+      mapView.ui.add([layerListExpand, printExpand], 'top-right');
+      mapView.ui.add([scaleBar], 'bottom-left');
+    }
+    return () => {
+      mapView.destroy();
+      if (printRoot.current) {
+        printRoot.current.unmount();
+      }
+    };
+  }, [mapRef, maskRef]);
+
+  return (
+    <div className="h-screen overflow-hidden">
+      <div ref={mapRef} className="h-screen"></div>
+      <div
+        ref={maskRef}
+        className="hidden absolute bg-red-300 border-2 border-red-600 pointer-events-none opacity-50"
+      ></div>
+    </div>
+  );
+}
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@ -0,0 +1,9 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+
+const Map = dynamic(() => import('./map'), { ssr: false });
+
+export default function Home({ params: { locale } }: { params: { locale: string } }) {
+  return <Map locale={locale}></Map>;
+}
--- a/app/[locale]/print.tsx
+++ b/app/[locale]/print.tsx
@ -0,0 +1,272 @@
+import { useRef, useState, useEffect, RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import initI18n from './i18n';
+
+import MapView from '@arcgis/core/views/MapView';
+import esriConfig from '@arcgis/core/config.js';
+import * as print from '@arcgis/core/rest/print.js';
+import PrintParameters from '@arcgis/core/rest/support/PrintParameters.js';
+import PrintTemplate from '@arcgis/core/rest/support/PrintTemplate.js';
+import * as reactiveUtils from '@arcgis/core/core/reactiveUtils.js';
+import Point from '@arcgis/core/geometry/Point.js';
+
+// set assets path for ArcGIS Maps SDK widgets
+esriConfig.assetsPath = './assets';
+
+// set local assets for Calcite components
+import { setAssetPath } from '@esri/calcite-components/dist/components';
+setAssetPath(window.location.href);
+
+// import Calcite components
+import '@esri/calcite-components/dist/components/calcite-button';
+import '@esri/calcite-components/dist/components/calcite-panel';
+import '@esri/calcite-components/dist/components/calcite-input-text';
+import '@esri/calcite-components/dist/components/calcite-label';
+import '@esri/calcite-components/dist/components/calcite-select';
+import '@esri/calcite-components/dist/components/calcite-option';
+import '@esri/calcite-components/dist/components/calcite-progress';
+import {
+  CalciteButton,
+  CalcitePanel,
+  CalciteInputText,
+  CalciteLabel,
+  CalciteSelect,
+  CalciteOption,
+  CalciteProgress,
+} from '@esri/calcite-components-react';
+
+// helper function to clamp coordinates to visible area
+function clamp(value: number, from: number, to: number) {
+  return value < from ? from : value > to ? to : value;
+}
+
+// print service URL
+const printURL = 'https://gis.geosphere.at/maps/rest/services/tools/printing/GPServer/Export%20Web%20Map';
+
+// available scales
+const scales = [10000, 25000, 50000, 100000, 200000, 500000, 1000000, 3500000];
+
+// available formats
+interface Format {
+  [formatName: string]: number[];
+}
+
+// dimensions width and height in mm
+const formats: Format = {
+  'A4 Hochformat': [190, 265],
+  'A4 Hochformat mit Legende': [190, 225],
+  'A4 Querformat': [277, 178],
+  'A4 Querformat mit Legende': [277, 140],
+  'A3 Hochformat': [277, 385],
+  'A3 Hochformat mit Legende': [277, 335],
+  'A3 Querformat': [400, 264],
+  'A3 Querformat mit Legende': [400, 215],
+};
+
+// load localized strings
+const match = location.pathname.match(/\/(\w+)/);
+if (match && match.length > 1) {
+  const locale = match[1];
+  initI18n(locale);
+}
+
+export default function Print({ view, mask }: { view: MapView; mask: RefObject<HTMLDivElement> | null }) {
+  const [title, setTitle] = useState('GeoSphere Austria');
+  const [format, setFormat] = useState<string>(Object.keys(formats)[0]);
+  const [scale, setScale] = useState<number>(10000);
+  const [printing, setPrinting] = useState<boolean>(false);
+  const { t } = useTranslation();
+
+  const currentScale = useRef<number>();
+  currentScale.current = scale;
+
+  const currentFormat = useRef<string>();
+  currentFormat.current = format;
+
+  const controllerRef = useRef<AbortController | null>(null);
+
+  const handlePrint = () => {
+    setPrinting(true);
+    const template = new PrintTemplate({
+      layout: format,
+      format: 'pdf',
+      layoutOptions: {
+        titleText: title,
+        scalebarUnit: 'Kilometers',
+        customTextElements: [],
+      },
+      exportOptions: {
+        dpi: 98,
+      },
+      scalePreserved: true,
+      outScale: scale,
+    });
+
+    const params = new PrintParameters({
+      view,
+      template,
+    });
+
+    controllerRef.current = new AbortController();
+    print.execute(printURL, params, { signal: controllerRef.current.signal }).then(printResult).catch(printError);
+  };
+
+  function printResult(result: any) {
+    const filename = 'GeoSphere_Maps_Print.pdf';
+    fetch(result.url)
+      .then((res) => res.blob())
+      .then((blob) => {
+        const element = document.createElement('a');
+        element.setAttribute('href', URL.createObjectURL(blob));
+        element.setAttribute('download', filename);
+        document.body.appendChild(element);
+        element.click();
+        document.body.removeChild(element);
+        setPrinting(false);
+      });
+  }
+
+  function printError(err: any) {
+    if (err.name === 'AbortError') {
+      // console.log('Request aborted');
+    } else {
+      console.error('Error encountered: ', err);
+    }
+  }
+
+  const handleTitleChange = (event: any) => {
+    setTitle(event.target.value);
+  };
+
+  const handleFormatChange = (event: any) => {
+    const newFormat = event.target.value;
+    setFormat(newFormat);
+    updatePreview(scale, newFormat);
+  };
+
+  const handleScaleChange = (event: any) => {
+    const newScale = parseInt(event.target.value);
+    setScale(newScale);
+    updatePreview(newScale, format);
+  };
+
+  const updatePreview = (newScale: number, newFormat: string) => {
+    const width = (formats[newFormat][0] * newScale) / 1000;
+    const height = (formats[newFormat][1] * newScale) / 1000;
+    setMask(width, height);
+  };
+
+  const setMask = (width: number, height: number) => {
+    const center = view.center;
+    const xmin = center.x - width / 2;
+    const xmax = center.x + width / 2;
+    const ymin = center.y - height / 2;
+    const ymax = center.y + height / 2;
+
+    const upperLeft = view.toScreen(
+      new Point({
+        x: xmin,
+        y: ymax,
+        spatialReference: view.spatialReference,
+      })
+    );
+
+    const lowerRight = view.toScreen(
+      new Point({
+        x: xmax,
+        y: ymin,
+        spatialReference: view.spatialReference,
+      })
+    );
+
+    const left = clamp(Math.round(upperLeft.x), 0, view.width);
+    const top = clamp(Math.round(upperLeft.y), 0, view.height);
+    const maskWidth = clamp(Math.round(lowerRight.x - upperLeft.x), 0, view.width);
+    const maskHeight = clamp(Math.round(lowerRight.y - upperLeft.y), 0, view.height);
+
+    if (mask && mask.current) {
+      mask.current.classList.remove('hidden');
+      mask.current.style.left = left + 'px';
+      mask.current.style.top = top + 'px';
+      mask.current.style.width = maskWidth + 'px';
+      mask.current.style.height = maskHeight + 'px';
+    }
+  };
+
+  useEffect(() => {
+    if (currentScale.current && currentFormat.current) {
+      updatePreview(currentScale.current, currentFormat.current);
+    }
+
+    const handle = reactiveUtils.watch(
+      () => view?.extent,
+      () => {
+        if (currentScale.current && currentFormat.current) {
+          updatePreview(currentScale.current, currentFormat.current);
+        }
+      }
+    );
+
+    return () => {
+      handle.remove();
+    };
+  }, []);
+
+  const handleAbort = () => {
+    if (controllerRef.current) {
+      controllerRef.current.abort();
+      setPrinting(false);
+    }
+  };
+
+  return (
+    <CalcitePanel heading={t('heading')} className="px-3 w-80">
+      <div>{printing && <CalciteProgress type="indeterminate"></CalciteProgress>}</div>
+      <CalciteLabel className="mt-5 mx-5">
+        {t('titleLabel')}
+        <CalciteInputText
+          placeholder={t('titleLabel')}
+          onCalciteInputTextInput={handleTitleChange}
+          className="mx-0"
+        ></CalciteInputText>
+      </CalciteLabel>
+      <CalciteLabel className="mx-5">
+        {t('formatLabel')}
+        <CalciteSelect label="format" onCalciteSelectChange={handleFormatChange}>
+          {Object.keys(formats).map((formatName) => {
+            return (
+              <CalciteOption key={`${formatName}`} value={`${formatName}`}>
+                {t(`formats.${formatName}`)}
+              </CalciteOption>
+            );
+          })}
+        </CalciteSelect>
+      </CalciteLabel>
+
+      <CalciteLabel className="mx-5">
+        {t('scaleLabel')}
+        <CalciteSelect label="scale" onCalciteSelectChange={handleScaleChange}>
+          {scales.map((num) => (
+            <CalciteOption value={`${num}`} key={num}>{`1:${num
+              .toString()
+              .match(/(\d+?)(?=(\d{3})+(?!\d)|$)/g)
+              ?.join('.')}`}</CalciteOption>
+          ))}
+        </CalciteSelect>
+      </CalciteLabel>
+
+      {!printing ? (
+        <CalciteButton width="half" slot="footer" onClick={handlePrint}>
+          {t('button.print')}
+        </CalciteButton>
+      ) : (
+        <>
+          <CalciteButton width="half" slot="footer" onClick={handleAbort}>
+            {t('button.cancel')}
+          </CalciteButton>
+        </>
+      )}
+    </CalcitePanel>
+  );
+}
--- a/app/favicon.ico
+++ b/app/favicon.ico
--- a/app/globals.css
+++ b/app/globals.css
@ -2,26 +2,26 @@
@tailwind components;
@tailwind utilities;

+@import '@arcgis/core/assets/esri/themes/light/main.css';
+
 :root {
  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background-rgb: 255, 255, 255;
 }

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    --background-rgb: 0, 0, 0;
  }
 }

+html,
 body {
  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+  background: rgb(var(--background-end-rgb));
+}
+
+* {
+  box-sizing: border-box;
 }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,22 +0,0 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-
-const inter = Inter({ subsets: ['latin'] })
-
-export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
-}
-
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  )
-}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,113 +0,0 @@
-import Image from 'next/image'
-
-export default function Home() {
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{' '}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Explore the Next.js 13 playground.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  )
-}