First commit

.dockerignore

@@ -0,0 +1,7 @@
+Dockerfile
+.dockerignore
+node_modules
+npm-debug.log
+README.md
+.next
+.git

Dockerfile

@@ -0,0 +1,65 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN yarn build
+
+# If using npm comment out above and use below instead
+# RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+# set hostname to localhost
+ENV HOSTNAME "0.0.0.0"
+
+CMD ["node", "server.js"]

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"
+  }
+}

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"
+  }
+}

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;

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>
+  );
+}

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>
+  );
+}

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>;
+}

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>
+  );
+}

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;
 }

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>
-  )
-}

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>
-  )
-}

middleware.js

@@ -0,0 +1,39 @@
+import { NextResponse } from 'next/server';
+import Negotiator from 'negotiator';
+import { match } from '@formatjs/intl-localematcher';
+
+const locales = ['de', 'en'];
+const defaultLocale = 'de';
+
+// Get the preferred locale
+function getLocale(request) {
+  const headers = { 'accept-language': request.headers.get('accept-language') };
+  const languages = new Negotiator({ headers }).languages();
+  return match(languages, locales, defaultLocale);
+}
+
+export function middleware(request) {
+  // Check if there is any supported locale in the pathname
+  const pathname = request.nextUrl.pathname;
+  const pathnameIsMissingLocale = locales.every(
+    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
+  );
+
+  // Redirect if there is no locale
+  if (pathnameIsMissingLocale) {
+    //console.log(request);
+    const locale = getLocale(request);
+
+    // Redirect to new URL
+    return NextResponse.redirect(new URL(`/${locale}${pathname}`, request.url));
+  }
+}
+
+export const config = {
+  matcher: [
+    // Skip all internal paths (_next)
+    '/((?!_next|assets|favicon.ico).*)',
+    // Optional: only run on root (/) URL
+    // '/'
+  ],
+};

next.config.js

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {
+  output: 'standalone',
+};
 
-module.exports = nextConfig
+module.exports = nextConfig;

package.json

@@ -3,23 +3,34 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "cross-env NODE_OPTIONS='--inspect' next dev -p 5000",
+    "build": "npm run copy && next build",
+    "start": "npm run copy && next start -p 5000",
+    "lint": "next lint",
+    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
   },
   "dependencies": {
+    "@arcgis/core": "^4.27.6",
+    "@esri/calcite-components-react": "^1.4.3",
+    "@formatjs/intl-localematcher": "^0.4.0",
     "@types/node": "20.4.5",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",
-    "autoprefixer": "10.4.14",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.12",
+    "i18next": "^23.4.4",
+    "ncp": "^2.0.0",
+    "negotiator": "^0.6.3",
     "next": "13.4.12",
-    "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "tailwindcss": "3.3.3",
+    "react-i18next": "^13.1.1",
     "typescript": "5.1.6"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.14",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.4.27",
+    "tailwindcss": "^3.3.3"
   }
 }

public/assets/action-bar/t9n/index.d.ts

@@ -0,0 +1,4 @@
+export type ActionBarMessages = {
+  expand: string;
+  collapse: string;
+};

public/assets/action-bar/t9n/messages.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Expand",
+  "collapse": "Collapse"
+}

public/assets/action-bar/t9n/messages_ar.json

@@ -0,0 +1,4 @@
+{
+  "expand": "توسيع",
+  "collapse": "طي"
+}

public/assets/action-bar/t9n/messages_bg.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Разгъване",
+  "collapse": "Сгъване"
+}

public/assets/action-bar/t9n/messages_bs.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Proširi",
+  "collapse": "Sažmi"
+}

public/assets/action-bar/t9n/messages_ca.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Amplia",
+  "collapse": "Redueix"
+}

public/assets/action-bar/t9n/messages_cs.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Rozbalit",
+  "collapse": "Sbalit"
+}

public/assets/action-bar/t9n/messages_da.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Udvid",
+  "collapse": "Skjul"
+}

public/assets/action-bar/t9n/messages_de.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Einblenden",
+  "collapse": "Ausblenden"
+}

public/assets/action-bar/t9n/messages_el.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Ανάπτυξη",
+  "collapse": "Σύμπτυξη"
+}

public/assets/action-bar/t9n/messages_en.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Expand",
+  "collapse": "Collapse"
+}

public/assets/action-bar/t9n/messages_es.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Expandir",
+  "collapse": "Contraer"
+}

public/assets/action-bar/t9n/messages_et.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Laienda",
+  "collapse": "Ahenda"
+}

public/assets/action-bar/t9n/messages_fi.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Laajenna",
+  "collapse": "Kutista"
+}

public/assets/action-bar/t9n/messages_fr.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Développer",
+  "collapse": "Réduire"
+}

public/assets/action-bar/t9n/messages_he.json

@@ -0,0 +1,4 @@
+{
+  "expand": "הרחב",
+  "collapse": "צמצם"
+}

public/assets/action-bar/t9n/messages_hr.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Proširi",
+  "collapse": "Sažmi"
+}

public/assets/action-bar/t9n/messages_hu.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Kibontás",
+  "collapse": "Összecsukás"
+}

public/assets/action-bar/t9n/messages_id.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Bentang",
+  "collapse": "Tutup"
+}

public/assets/action-bar/t9n/messages_it.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Espandi",
+  "collapse": "Comprimi"
+}

public/assets/action-bar/t9n/messages_ja.json

@@ -0,0 +1,4 @@
+{
+  "expand": "展開",
+  "collapse": "折りたたむ"
+}

public/assets/action-bar/t9n/messages_ko.json

@@ -0,0 +1,4 @@
+{
+  "expand": "확장",
+  "collapse": "축소"
+}

public/assets/action-bar/t9n/messages_lt.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Išskleisti",
+  "collapse": "Suskleisti"
+}

public/assets/action-bar/t9n/messages_lv.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Izvērst",
+  "collapse": "Sakļaut"
+}

public/assets/action-bar/t9n/messages_nl.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Uitklappen",
+  "collapse": "Inklappen"
+}

public/assets/action-bar/t9n/messages_no.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Utvid",
+  "collapse": "Skjul"
+}

public/assets/action-bar/t9n/messages_pl.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Rozwiń",
+  "collapse": "Zwiń"
+}

public/assets/action-bar/t9n/messages_pt-BR.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Expandir",
+  "collapse": "Recolher"
+}

public/assets/action-bar/t9n/messages_pt-PT.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Expandir",
+  "collapse": "Recolher"
+}

public/assets/action-bar/t9n/messages_ro.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Extindere",
+  "collapse": "Restrângere"
+}

public/assets/action-bar/t9n/messages_ru.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Развернуть",
+  "collapse": "Свернуть"
+}

public/assets/action-bar/t9n/messages_sk.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Rozbaliť",
+  "collapse": "Zbaliť"
+}

public/assets/action-bar/t9n/messages_sl.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Razširi",
+  "collapse": "Strni"
+}

public/assets/action-bar/t9n/messages_sr.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Proširi",
+  "collapse": "Skupi"
+}

public/assets/action-bar/t9n/messages_sv.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Expandera",
+  "collapse": "Dölj"
+}

public/assets/action-bar/t9n/messages_th.json

@@ -0,0 +1,4 @@
+{
+  "expand": "ขยาย",
+  "collapse": "ย่อลงมา"
+}

public/assets/action-bar/t9n/messages_tr.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Genişlet",
+  "collapse": "Daralt"
+}

public/assets/action-bar/t9n/messages_uk.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Розширити",
+  "collapse": "Згорнути"
+}

public/assets/action-bar/t9n/messages_vi.json

@@ -0,0 +1,4 @@
+{
+  "expand": "Mở rộng",
+  "collapse": "Thu gọn"
+}

public/assets/action-bar/t9n/messages_zh-CN.json

@@ -0,0 +1,4 @@
+{
+  "expand": "展开",
+  "collapse": "折叠"
+}

public/assets/action-bar/t9n/messages_zh-HK.json

@@ -0,0 +1,4 @@
+{
+  "expand": "展開",
+  "collapse": "摺疊"
+}

public/assets/action-bar/t9n/messages_zh-TW.json

@@ -0,0 +1,4 @@
+{
+  "expand": "展開",
+  "collapse": "摺疊"
+}

public/assets/action-group/t9n/index.d.ts

@@ -0,0 +1,3 @@
+export type ActionGroupMessages = {
+  more: string;
+};

public/assets/action-group/t9n/messages.json

@@ -0,0 +1,3 @@
+{
+  "more": "More"
+}

public/assets/action-group/t9n/messages_ar.json

@@ -0,0 +1,3 @@
+{
+  "more": "المزيد"
+}

public/assets/action-group/t9n/messages_bg.json

@@ -0,0 +1,3 @@
+{
+  "more": "Още"
+}

public/assets/action-group/t9n/messages_bs.json

@@ -0,0 +1,3 @@
+{
+  "more": "Više"
+}

public/assets/action-group/t9n/messages_ca.json

@@ -0,0 +1,3 @@
+{
+  "more": "Més"
+}

public/assets/action-group/t9n/messages_cs.json

@@ -0,0 +1,3 @@
+{
+  "more": "Více"
+}

public/assets/action-group/t9n/messages_da.json

@@ -0,0 +1,3 @@
+{
+  "more": "Mere"
+}

public/assets/action-group/t9n/messages_de.json

@@ -0,0 +1,3 @@
+{
+  "more": "Mehr"
+}

public/assets/action-group/t9n/messages_el.json

@@ -0,0 +1,3 @@
+{
+  "more": "Περισσότερα"
+}

public/assets/action-group/t9n/messages_en.json

@@ -0,0 +1,3 @@
+{
+  "more": "More"
+}

public/assets/action-group/t9n/messages_es.json

@@ -0,0 +1,3 @@
+{
+  "more": "Más"
+}

public/assets/action-group/t9n/messages_et.json

@@ -0,0 +1,3 @@
+{
+  "more": "Rohkem"
+}

public/assets/action-group/t9n/messages_fi.json

@@ -0,0 +1,3 @@
+{
+  "more": "Enemmän"
+}

public/assets/action-group/t9n/messages_fr.json

@@ -0,0 +1,3 @@
+{
+  "more": "Plus"
+}

public/assets/action-group/t9n/messages_he.json

@@ -0,0 +1,3 @@
+{
+  "more": "עוד"
+}

public/assets/action-group/t9n/messages_hr.json

@@ -0,0 +1,3 @@
+{
+  "more": "Više"
+}

public/assets/action-group/t9n/messages_hu.json

@@ -0,0 +1,3 @@
+{
+  "more": "Továbbiak"
+}

public/assets/action-group/t9n/messages_id.json

@@ -0,0 +1,3 @@
+{
+  "more": "Lainnya"
+}

public/assets/action-group/t9n/messages_it.json

@@ -0,0 +1,3 @@
+{
+  "more": "Maggiori informazioni"
+}

public/assets/action-group/t9n/messages_ja.json

@@ -0,0 +1,3 @@
+{
+  "more": "その他"
+}

public/assets/action-group/t9n/messages_ko.json

@@ -0,0 +1,3 @@
+{
+  "more": "더 보기"
+}

public/assets/action-group/t9n/messages_lt.json

@@ -0,0 +1,3 @@
+{
+  "more": "Daugiau"
+}

public/assets/action-group/t9n/messages_lv.json

@@ -0,0 +1,3 @@
+{
+  "more": "Vairāk"
+}

public/assets/action-group/t9n/messages_nl.json

@@ -0,0 +1,3 @@
+{
+  "more": "Meer"
+}

public/assets/action-group/t9n/messages_no.json

@@ -0,0 +1,3 @@
+{
+  "more": "Mer"
+}

public/assets/action-group/t9n/messages_pl.json

@@ -0,0 +1,3 @@
+{
+  "more": "Więcej"
+}

public/assets/action-group/t9n/messages_pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "more": "Mais"
+}

public/assets/action-group/t9n/messages_pt-PT.json

@@ -0,0 +1,3 @@
+{
+  "more": "Mais"
+}

public/assets/action-group/t9n/messages_ro.json

@@ -0,0 +1,3 @@
+{
+  "more": "Mai mult"
+}

public/assets/action-group/t9n/messages_ru.json

@@ -0,0 +1,3 @@
+{
+  "more": "Больше"
+}

public/assets/action-group/t9n/messages_sk.json

@@ -0,0 +1,3 @@
+{
+  "more": "Viac"
+}

public/assets/action-group/t9n/messages_sl.json

@@ -0,0 +1,3 @@
+{
+  "more": "Več"
+}

public/assets/action-group/t9n/messages_sr.json

@@ -0,0 +1,3 @@
+{
+  "more": "Više"
+}

public/assets/action-group/t9n/messages_sv.json

@@ -0,0 +1,3 @@
+{
+  "more": "Mer"
+}

public/assets/action-group/t9n/messages_th.json

@@ -0,0 +1,3 @@
+{
+  "more": "กว่า"
+}

public/assets/action-group/t9n/messages_tr.json

@@ -0,0 +1,3 @@
+{
+  "more": "Daha fazla"
+}

public/assets/action-group/t9n/messages_uk.json

@@ -0,0 +1,3 @@
+{
+  "more": "Більше"
+}

public/assets/action-group/t9n/messages_vi.json

@@ -0,0 +1,3 @@
+{
+  "more": "Thêm"
+}

public/assets/action-group/t9n/messages_zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "more": "大于"
+}

public/assets/action-group/t9n/messages_zh-HK.json

@@ -0,0 +1,3 @@
+{
+  "more": "較多"
+}