First commit
This commit is contained in:
Thomas Fuhrmann
parent
91447f74b4
commit
6ab4bb6daa
13123 changed files with 60099 additions and 204 deletions
20
app/[locale]/dictionaries/de.json
Normal file
20
app/[locale]/dictionaries/de.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
20
app/[locale]/dictionaries/en.json
Normal file
20
app/[locale]/dictionaries/en.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
28
app/[locale]/i18n.js
Normal file
28
app/[locale]/i18n.js
Normal file
|
|
@ -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;
|
||||
23
app/[locale]/layout.tsx
Normal file
23
app/[locale]/layout.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
121
app/[locale]/map.tsx
Normal file
121
app/[locale]/map.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
9
app/[locale]/page.tsx
Normal file
9
app/[locale]/page.tsx
Normal file
|
|
@ -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>;
|
||||
}
|
||||
272
app/[locale]/print.tsx
Normal file
272
app/[locale]/print.tsx
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
editor.link_modal.header
Reference in a new issue