@vcmap/ui 6.0.0-rc.1 → 6.0.0-rc.10

package/build/build.js

@@ -1,5 +1,6 @@
 import path from 'path';
 import fs from 'fs';
+import { readFile, writeFile } from 'node:fs/promises';
 import { build } from 'vite';
 import { v4 as uuid } from 'uuid';
 
@@ -13,7 +14,6 @@ import {
   getFileMd5,
   getFilesInDirectory,
   libraries,
-  writeRewrittenFile,
 } from './buildHelpers.js';
 
 /**
@@ -97,8 +97,8 @@ function hashLibraries() {
       throw new Error(`Trying to build unexported library ${key}`);
     }
     value.lib = libraries[key];
-    value.hash = `${uuid().substring(0, 6)}`;
-    libraryPaths[key] = `./${value.lib}.${value.hash}.js`;
+    value.hash = `${uuid().substring(0, 8)}`;
+    libraryPaths[key] = `./${value.lib}-${value.hash}.js`;
     value.rollupOptions = value.rollupOptions ? value.rollupOptions : {};
   });
 
@@ -121,11 +121,13 @@ const { libraryBuildOptions, libraryPaths } = hashLibraries();
 console.log('Building ol dump file');
 await generateOLLib();
 
+const distFolder = path.join(process.cwd(), 'dist');
+const assetsFolder = path.join(distFolder, 'assets');
+
 /** Cleaning/recreating Dist Folder */
-if (await fs.existsSync(path.join(process.cwd(), 'dist'))) {
-  await fs.promises.rm(path.join(process.cwd(), 'dist'), { recursive: true });
+if (await fs.existsSync(distFolder)) {
+  await fs.promises.rm(distFolder, { recursive: true });
 }
-const assetsFolder = path.join(process.cwd(), 'dist', 'assets');
 await fs.promises.mkdir(assetsFolder, { recursive: true });
 
 /**
@@ -141,6 +143,8 @@ const fileTypesToHash = ['.png', '.css', '.svg', '.woff2'];
  * we exclude the materialDesignIcons font because we do not want to also rewrite the materialDesignIcons.css file.
  * The .woff2 is loaded with the materialDesignIcons Version number as a query parameter. So this also makes sure,
  * that the browser can cache the file.
+ *
+ * we also exclude favicons from hashing, to just use the index.html as is.
  */
 const filesToExclude = [
   path.join(
@@ -150,6 +154,11 @@ const filesToExclude = [
     'fonts',
     'materialdesignicons-webfont.woff2',
   ),
+  path.join('assets', 'favicon-4c4ce5df.svg'),
+  path.join('assets', 'favicon-32-4c4ce5df.png'),
+  path.join('assets', 'favicon-128-4c4ce5df.png'),
+  path.join('assets', 'favicon-180-4c4ce5df.png'),
+  path.join('assets', 'favicon-192-4c4ce5df.png'),
 ];
 const hashedPublicFiles = new Map();
 const filesToCopy = new Map();
@@ -165,7 +174,7 @@ for await (const filePath of getFilesInDirectory(publicAssetsFolder)) {
     const fileHash = await getFileMd5(filePath);
     const hashedFileUrl = path.posix.join(
       ...path.dirname(relativePathInDist).split(path.sep),
-      `${path.basename(filePath, fileType)}.${fileHash.slice(0, 6)}${fileType}`,
+      `${path.basename(filePath, fileType)}-${fileHash.slice(0, 8)}${fileType}`,
     );
     hashedPublicFiles.set(
       path.posix.join(...relativePath.split(path.sep)),
@@ -174,9 +183,9 @@ for await (const filePath of getFilesInDirectory(publicAssetsFolder)) {
     const newFilePath = path.join(
       assetsFolder,
       path.dirname(relativePathInDist),
-      `${path.basename(relativePath, fileType)}.${fileHash.slice(
+      `${path.basename(relativePath, fileType)}-${fileHash.slice(
         0,
-        6,
+        8,
       )}${fileType}`,
     );
     filesToCopy.set(filePath, newFilePath);
@@ -191,57 +200,28 @@ for await (const [originalFilePath, newFilePath] of filesToCopy) {
 }
 
 console.log('Building app');
-const buildoutput = await build({
-  configFile: './build/commonViteConfig.js',
-  base: './',
-  define: {
-    'process.env.NODE_ENV': '"production"',
-  },
-  build: {
-    write: false,
-    modulePreload: false,
-    emptyOutDir: true,
-    rollupOptions: {
-      external: Object.keys(libraries),
-      output: {
-        paths: libraryPaths,
-      },
-    },
-  },
-});
-
-/**
- * Building the Main entrypoint (index.html + index.js)
- * This will ensure that all references to public assets will be rewritten to the hashed filename
- */
-await Promise.all(
-  buildoutput.output?.map((output) => {
-    if (output.type === 'asset') {
-      const { source, fileName } = output;
-      // remove loading of materialdesignicons from index.html, we will later inject this in the ui.js
-      const fileContent = source.replace(
-        /<link[^>]*href=".*materialdesignicons\.min\.css"[^>]*(>[^<]*<\/link>|\/>)/,
-        '',
-      );
-      return writeRewrittenFile(
-        path.join(process.cwd(), 'dist', fileName),
-        fileContent,
-        hashedPublicFiles,
-        'assets',
-      );
-    }
-    if (output.type === 'chunk') {
-      const { code, fileName } = output;
-      return writeRewrittenFile(
-        path.join(process.cwd(), 'dist', fileName),
-        code,
-        hashedPublicFiles,
-        'assets',
-      );
-    }
-    return undefined;
-  }),
+let indexHTMLContent = await readFile('./index.html', { encoding: 'utf8' });
+// remove mdi icons link, will be later loaded from the ui.js
+indexHTMLContent = indexHTMLContent.replace(
+  /<link[^>]*href=".*materialdesignicons\.min\.css"[^>]*>/,
+  '',
 );
+// replace @vcmap/ui with './assets/ui.js'
+indexHTMLContent = indexHTMLContent.replace(/@vcmap\/ui/, './assets/ui.js');
+await writeFile(path.join(distFolder, 'index.html'), indexHTMLContent, {
+  encoding: 'utf8',
+});
+const htaccessContent = `
+    <FilesMatch "-[\\w\\d]{8}\\.(js|css)$">
+        Header set Cache-Control "public, max-age=31540000, immutable"
+    </FilesMatch>
+    <FilesMatch "(index\\.html|config\\.json|ui\\.js|vue\\.js|vuetify\\.js|ol\\.js|cesium\\.js|core\\.js)$">
+        Header set Cache-Control "no-store, max-age=0"
+    </FilesMatch>
+`;
+await writeFile(path.join(distFolder, '.htaccess'), htaccessContent, {
+  encoding: 'utf8',
+});
 
 /**
  * Building the Libraries, (vue, vuetify, openlayers, cesium, core, and ui). This will build one hashed library.hash.js
@@ -271,7 +251,7 @@ await Promise.all(
         lib: {
           entry: path.resolve(process.cwd(), value.entry),
           formats: ['es'],
-          fileName: `${value.lib}.${value.hash}`,
+          fileName: `${value.lib}-${value.hash}`,
         },
         rollupOptions: {
           ...value.rollupOptions,

package/build/buildHelpers.js

@@ -1,4 +1,3 @@
-/* eslint import/no-extraneous-dependencies: ["error", { "devDependencies": false }] */
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { build } from 'vite'; // vite is also a plugin-cli dep
 import fs from 'fs';
@@ -159,18 +158,12 @@ export async function buildLibrary(
   base64Css = false,
   rewrittenPublicAssets = undefined,
 ) {
-  // Base64 contains the characters '+', '/', and '=', which have a reserved meaning in URLs.
-  // Base64url solves this by replacing '+' with '-' and '/' with '_'.
-  // See https://stackoverflow.com/a/55389212
   const cssInjectorCode = `
 function loadCss(href) {
-  const base64url = href
-    .replace(/-/g, '+')
-    .replace(/_/g, '/');
   return new Promise((resolve, reject) => {
     const elem = document.createElement('link');
     elem.rel = 'stylesheet';
-    elem.href = base64url;
+    elem.href = href;
     elem.defer = false;
     elem.async = false;
     elem.onload = resolve;
@@ -180,12 +173,12 @@ function loadCss(href) {
 }`;
 
   const write = async (output) => {
-    const addedHash = hash ? `.${hash}` : '';
+    const addedHash = hash ? `-${hash}` : '';
     let css = false;
     if (output[1] && output[1].type === 'asset') {
       if (base64Css) {
         css = `data:text/css;base64,${Buffer.from(output[1].source).toString(
-          'base64url',
+          'base64',
         )}`;
       } else {
         await writeRewrittenFile(
@@ -285,7 +278,12 @@ const toCopy = [
   'README.md',
 ];
 
-async function buildInlinePlugin(plugin, baseConfig, minify) {
+async function buildInlinePlugin(
+  plugin,
+  baseConfig,
+  minify,
+  isDependend = false,
+) {
   // the relative path between plugins and libraries, is not known beforehand, so we calculate the distance.
   // posixRelativePath is the relative path between the index.js of the plugin and the specific library.
   const relativePluginPaths = {};
@@ -298,7 +296,15 @@ async function buildInlinePlugin(plugin, baseConfig, minify) {
       .join(path.posix.sep);
   });
 
-  const pluginDir = getProjectPath('plugins', plugin);
+  const pluginDir = isDependend
+    ? getProjectPath('plugins', 'node_modules', plugin)
+    : getProjectPath('plugins', plugin);
+
+  const isTs = fs.existsSync(path.join(pluginDir, 'src', 'index.ts'));
+  const entry = isTs
+    ? path.join(pluginDir, 'src', 'index.ts')
+    : path.join(pluginDir, 'src', 'index.js');
+
   const pluginConfig = {
     ...baseConfig,
     esbuild: {
@@ -309,13 +315,14 @@ async function buildInlinePlugin(plugin, baseConfig, minify) {
       emptyOutDir: false,
       outDir: `dist/plugins/${plugin}/`,
       lib: {
-        entry: path.join(pluginDir, 'src', 'index.js'),
+        entry,
         formats: ['es'],
         fileName: 'index',
       },
       rollupOptions: {
         external: Object.keys(libraries),
         output: {
+          manualChunks: () => 'index.js',
           paths: relativePluginPaths,
         },
       },
@@ -327,11 +334,11 @@ async function buildInlinePlugin(plugin, baseConfig, minify) {
   }
   await buildLibrary(pluginConfig, `plugins/${plugin}`, 'index', '', true);
   await Promise.all(
-    toCopy.map(async (entry) => {
-      if (fs.existsSync(path.join(pluginDir, entry))) {
+    toCopy.map(async (fileEntry) => {
+      if (fs.existsSync(path.join(pluginDir, fileEntry))) {
         await fs.promises.cp(
-          path.join(pluginDir, entry),
-          path.join(distPath, entry),
+          path.join(pluginDir, fileEntry),
+          path.join(distPath, fileEntry),
           { recursive: true, force: true },
         );
       }
@@ -339,6 +346,10 @@ async function buildInlinePlugin(plugin, baseConfig, minify) {
   );
 }
 
+/**
+ * Dependent Plugins which are installed from npm are already build and we just copy the relevant files
+ * @param {string} pluginName
+ */
 async function buildDependentPlugin(pluginName) {
   const pluginsDirectory = getPluginDirectory();
   let scope = '';
@@ -371,6 +382,19 @@ async function buildDependentPlugin(pluginName) {
   );
 }
 
+function filterDependentPlugins(dependentPlugins, pluginIsBuild = true) {
+  const pluginsDir = getPluginDirectory();
+  return dependentPlugins.filter((pluginName) => {
+    const pluginExists = fs.existsSync(
+      path.join(pluginsDir, 'node_modules', ...pluginName.split('/'), 'dist'),
+    );
+    if (pluginIsBuild) {
+      return pluginExists;
+    }
+    return !pluginExists;
+  });
+}
+
 /**
  * Will build a preview of all the current plugins & inline plugins
  * @param {import("vite").InlineConfig} [baseConfig={}] - the base config to use. build & esbuild will be completely overwritten
@@ -380,14 +404,25 @@ async function buildDependentPlugin(pluginName) {
 export async function buildPluginsForPreview(baseConfig = {}, minify = true) {
   const inlinePlugins = await getInlinePlugins();
   const dependentPlugins = await getPluginNames();
+  // only take already build plugins into account.
+  // Plugins loaded from a git repository do not have a dist folder.
+  // These plugins need to be build, same as the inline plugins
+  const buildDependentPlugins = filterDependentPlugins(dependentPlugins, true);
+  const notBuildDependentPlugins = filterDependentPlugins(
+    dependentPlugins,
+    false,
+  );
 
   const promises = inlinePlugins.map((plugin) =>
     buildInlinePlugin(plugin, baseConfig, minify),
   );
 
   promises.push(
-    ...dependentPlugins.map(async (pluginName) =>
-      buildDependentPlugin(pluginName, baseConfig, minify),
+    ...buildDependentPlugins.map(async (pluginName) =>
+      buildDependentPlugin(pluginName),
+    ),
+    ...notBuildDependentPlugins.map(async (pluginName) =>
+      buildInlinePlugin(pluginName, baseConfig, minify, true),
     ),
   );
   await Promise.all(promises);
@@ -396,14 +431,22 @@ export async function buildPluginsForPreview(baseConfig = {}, minify = true) {
 export async function buildPluginsForBundle(baseConfig = {}) {
   const inlinePlugins = await getInlinePlugins();
   const dependentPlugins = await getPluginNames(false);
+  const buildDependentPlugins = filterDependentPlugins(dependentPlugins, true);
+  const notBuildDependentPlugins = filterDependentPlugins(
+    dependentPlugins,
+    false,
+  );
   const promises = inlinePlugins
     .filter((plugin) => plugin.startsWith('@vcmap/'))
     .map((plugin) => buildInlinePlugin(plugin, baseConfig, true));
 
   promises.push(
-    ...dependentPlugins.map(async (pluginName) =>
+    ...buildDependentPlugins.map(async (pluginName) =>
       buildDependentPlugin(pluginName),
     ),
+    ...notBuildDependentPlugins.map(async (pluginName) =>
+      buildInlinePlugin(pluginName, baseConfig, true, true),
+    ),
   );
   await Promise.all(promises);
 }

package/build/buildTypes.js

@@ -113,12 +113,16 @@ async function vueAugmentations() {
   let content = await readFile('./index.d.ts', 'utf-8');
   content = `${content}
 declare module 'vue' {
-  type ReplaceFirstParam<TParams extends readonly any[], TReplace> = {
-    [K in keyof TParams]: K extends "0" ? TReplace : TParams[K]
-  }
-
   interface ComponentCustomProperties {
-    $st: (...params: ReplaceFirstParam<Parameters<import("vue-i18n").ComposerTranslation>, string | null | undefined>) => ReturnType<import("vue-i18n").ComposerTranslation>
+    $st(key: string | number | undefined | null): string;
+    $st(key: string | number | undefined | null, plural: number, options?: import("vue-i18n").TranslateOptions<import("vue-i18n").Locale>): string;
+    $st(key: string | number | undefined | null, defaultMsg: string, options?: import("vue-i18n").TranslateOptions<import("vue-i18n").Locale>): string;
+    $st(key: string | number | undefined | null, list: unknown[], options?: import("vue-i18n").TranslateOptions<import("vue-i18n").Locale>): string;
+    $st(key: string | number | undefined | null, list: unknown[], plural: number): string;
+    $st(key: string | number | undefined | null, list: unknown[], defaultMsg: string): string;
+    $st(key: string | number | undefined | null, named: import("vue-i18n").NamedValue, options?: import("vue-i18n").TranslateOptions<import("vue-i18n").Locale>): string;
+    $st(key: string | number | undefined | null, named: import("vue-i18n").NamedValue, plural: number): string;
+    $st(key: string | number | undefined | null, named: import("vue-i18n").NamedValue, defaultMsg: string): string;
   }
 }
 `;

package/build/bundle.js

@@ -1,6 +1,6 @@
 import vcsOl from '@vcmap/rollup-plugin-vcs-ol';
 import { join as joinPath } from 'path';
-import tar from 'tar';
+import * as tar from 'tar';
 import { cp, rm } from 'fs/promises';
 import { createGzip } from 'zlib';
 import { pipeline } from 'stream';

package/build/info/conf.json

@@ -8,7 +8,7 @@
   },
   "source": {
     "includePattern": "\\.js$",
-    "exclude": ["dist"]
+    "exclude": ["dist", "node_modules/ol/node_modules"]
   },
   "plugins": [
     "jsdoc-plugin-intersection",

package/build/info/publish.js

@@ -20,37 +20,31 @@ exports.publish = function publish(data) {
 
   // get all doclets that have exports
   const classes = {};
-  const docs = data(
-    [
-      { define: { isObject: true } },
-      function someKindOfExportsTransformer() {
-        if (this?.meta?.code?.name) {
-          if (this.meta.code.name === 'module.exports') {
-            this.exports = 'default';
-          } else if (String(this.meta.code.name).startsWith('exports.')) {
-            this.exports = this.meta.code.name.replace(/exports./, '');
-          }
-        }
-        if (this.kind === 'class') {
-          if (
-            !('extends' in this) ||
-            typeof this.api === 'boolean' ||
-            this.exports
-          ) {
-            classes[this.longname] = this;
-            return true;
-          }
-        }
-        return (
-          typeof this.api === 'boolean' ||
-          this.exports ||
-          (this.meta && /[\\/]externs$/.test(this.meta.path))
-        );
-      },
-    ],
-    { kind: { '!is': 'file' } },
-    { kind: { '!is': 'event' } },
-  ).get();
+  const docs = data(function someKindOfExportsTransformer() {
+    if (this?.meta?.code?.name) {
+      if (this.meta.code.name === 'module.exports') {
+        this.exports = 'default';
+      } else if (String(this.meta.code.name).startsWith('exports.')) {
+        this.exports = this.meta.code.name.replace(/exports./, '');
+      }
+    }
+    if (this.kind === 'class') {
+      if (
+        !('extends' in this) ||
+        typeof this.api === 'boolean' ||
+        this.exports
+      ) {
+        classes[this.longname] = this;
+        return true;
+      }
+    }
+    return (
+      !['file', 'event', 'module'].includes(this.kind) &&
+      (typeof this.api === 'boolean' ||
+        this.exports ||
+        (this.meta && /[\\/]externs$/.test(this.meta.path)))
+    );
+  }).get();
 
   // get symbols data, filter out those that are members of private classes
   const symbols = [];

package/build/lintTypes.js

@@ -15,6 +15,11 @@ async function lintTypes() {
         // eslint-disable-next-line no-continue
         continue;
       }
+      if (path.endsWith('uiConfig.d.ts')) {
+        // we do not check the vcsUiApp.d.ts, because import("vue").DeepReadonly creates an any type
+        // eslint-disable-next-line no-continue
+        continue;
+      }
       // eslint-disable-next-line no-loop-func
       content.split(EOL).forEach((line, index) => {
         const matches = line.match(anyRegex);

package/config/aerowest.config.json

@@ -271,7 +271,12 @@
       "minZoom": 2,
       "hideLevels": null,
       "properties": {
-        "title": "Schrägluftbilder 2020"
+        "title": "Schrägluftbilder 2020",
+        "attributions": {
+          "provider": "Aerowest",
+          "year": "2020",
+          "url": "https://www.aerowest.de/"
+        }
       }
     },
     {
@@ -292,7 +297,12 @@
       "minZoom": 2,
       "hideLevels": null,
       "properties": {
-        "title": "Schrägluftbilder 2019"
+        "title": "Schrägluftbilder 2019",
+        "attributions": {
+          "provider": "Aerowest",
+          "year": "2019",
+          "url": "https://www.aerowest.de/"
+        }
       }
     }
   ],

package/config/base.config.json

@@ -89,10 +89,10 @@
           }
         },
         "MyImpressum": {
-          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)<br>**Firmierung:** <br>Musterfirma GmbH<br><br>**Sitz:**<br>Musterstadt<br><br>**Adresse:**<br>Musterstraße 1 a<br>12345 Musterstadt<br>Deutschland<br><br> **Telefon:** +49 (0) 00 . 0000 . 000 . 00<br> **Telefax:** +49 (0) 00 . 0000 . 000 . 00<br> **E-Mail:** [info@musterfirma.de](mailto:info@musterfirma.de)<br><br>**Geschäftsführer:**<br>- Max Mustermann<br><br>**Registergericht:**<br>Musterstadt 1234567<br><br>**Steuernummer:**<br>11/222/33333<br><br>**Umsatzsteuer-ID:**<br>DE1234567890<br><br>**Copyright:**<br>Alle Rechte vorbehalten. Sämtliche Inhalte (Texte, Bilder, Grafiken, Animationen) sind urheberrechtlich geschützt. Sie dürfen ohne Zustimmung der Musterfirma GmbH zu kommerziellen Zwecken weder kopiert, verbreitet noch verändert werden.<br>(Copyright 2023 Musterfirma GmbH)<br><br>**Inhalte:**<br>Trotz sorgfältiger Bearbeitung kann die Musterfirma GmbH für die Fehlerfreiheit und Genauigkeit der angebotenen Informationen auf [www.musterfirma.de](http://www.musterfirma.de) nicht garantieren. Jegliche Haftung für Schäden, die direkt oder indirekt aus der Benutzung von [www.musterfirma.de](http://www.musterfirma.de) entstehen und nicht auf Vorsatz oder grober Fahrlässigkeit der Musterfirma GmbH beruhen, ist ausgeschlossen. Für die Inhalte von mit [www.musterfirma.de](http://www.musterfirma.de) verlinkter Websites ist grundsätzlich jede Haftung ausgeschlossen.<br><br>**Datenschutz:**<br>Die Musterfirma GmbH nimmt den Schutz Ihrer persönlichen Daten sehr ernst. Wir halten uns strikt an die Regeln der Datenschutzgesetze. Personenbezogene Daten werden auf dieser Webseite nur im technisch notwendigen Umfang erhoben. In keinem Fall werden die erhobenen Daten verkauft oder aus anderen Gründen an Dritte weitergegeben. Unsere vollständige Datenschutzerklärung können Sie [hier](#) nachlesen.<br>"
+          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n**Firmierung:** \nMusterfirma GmbH\n\n**Sitz:**\nMusterstadt\n\n**Adresse:**\nMusterstraße 1 a\n12345 Musterstadt\nDeutschland\n\n **Telefon:** +49 (0) 00 . 0000 . 000 . 00\n\n **Telefax:** +49 (0) 00 . 0000 . 000 . 00\n\n **E-Mail:** [info&commat;musterfirma.de](mailto:info&commat;musterfirma.de)\n\n**Geschäftsführer:**\nMax Mustermann\n\n**Registergericht:**\nMusterstadt 1234567\n\n**Steuernummer:**\n11/222/33333\n\n**Umsatzsteuer-ID:**\nDE1234567890\n\n**Copyright:**\n\nAlle Rechte vorbehalten. Sämtliche Inhalte (Texte, Bilder, Grafiken, Animationen) sind urheberrechtlich geschützt. Sie dürfen ohne Zustimmung der Musterfirma GmbH zu kommerziellen Zwecken weder kopiert, verbreitet noch verändert werden.\n\n(Copyright 2023 Musterfirma GmbH)\n\n**Inhalte:**\n\nTrotz sorgfältiger Bearbeitung kann die Musterfirma GmbH für die Fehlerfreiheit und Genauigkeit der angebotenen Informationen auf [www.musterfirma.de](http://www.musterfirma.de) nicht garantieren. Jegliche Haftung für Schäden, die direkt oder indirekt aus der Benutzung von [www.musterfirma.de](http://www.musterfirma.de) entstehen und nicht auf Vorsatz oder grober Fahrlässigkeit der Musterfirma GmbH beruhen, ist ausgeschlossen. Für die Inhalte von mit [www.musterfirma.de](http://www.musterfirma.de) verlinkter Websites ist grundsätzlich jede Haftung ausgeschlossen.\n\n**Datenschutz:**\n\nDie Musterfirma GmbH nimmt den Schutz Ihrer persönlichen Daten sehr ernst. Wir halten uns strikt an die Regeln der Datenschutzgesetze. Personenbezogene Daten werden auf dieser Webseite nur im technisch notwendigen Umfang erhoben. In keinem Fall werden die erhobenen Daten verkauft oder aus anderen Gründen an Dritte weitergegeben. Unsere vollständige Datenschutzerklärung können Sie [hier](#) nachlesen.\n"
         },
         "MyCustomScreen": {
-          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n<br/>Projekt: \n--------\n\nErste Schritte\n\nZusammenfassung:\n--------\nDies ist ein <em> Beispieltext</em>, der Ihnen den Einstieg erleichtern soll. **Marked** wird verwendet, um Ihren Text <u>von Markdown nach HTML</u> zu konvertieren. Um mehr über die <u><em>korrekte Syntax</em></u> zu erfahren, besuchen Sie bitte diesen [Link](https://marked.js.org/demo/) für eine Demo.  \n \nInhalt:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n<br/>1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Punkt 1: einer Liste mit Aufzählungspunkten.\n- Punkt 2: einer Liste mit Aufzählungspunkten.\n\n<br/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
+          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\nProjekt: \n--------\n\nErste Schritte\n\nZusammenfassung:\n--------\nDies ist ein **Beispieltext**, der Ihnen den Einstieg erleichtern soll. **Marked** wird verwendet, um Ihren Text _von Markdown nach HTML_ zu konvertieren. Um mehr über die __*korrekte Syntax*__ zu erfahren, besuchen Sie bitte diesen [Link](https://marked.js.org/demo/) für eine Demo.  \n \nInhalt:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n\n\n1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Punkt 1: einer Liste mit Aufzählungspunkten.\n- Punkt 2: einer Liste mit Aufzählungspunkten.\n\n\n\nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
           "name": "Meine benutzerdefinierte Anzeige",
           "title": "Meine benutzerdefinierte Anzeige"
         }
@@ -116,10 +116,10 @@
           }
         },
         "MyImpressum": {
-          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)<br>**Company name:** <br>Musterfirma GmbH<br><br>**Company headquarters:**<br>Musterstadt<br><br>**Address:**<br>Musterstraße 1 a<br>12345 Musterstadt<br>Germany<br><br> **Phone:** +49 (0) 00 . 0000 . 000 . 00<br> **Fax:** +49 (0) 00 . 0000 . 000 . 00<br> **E-Mail:** [info@musterfirma.de](mailto:info@musterfirma.de)<br><br>**Managing Director:**<br>- Max Mustermann<br><br>**Registry court:**<br>Musterstadt 1234567<br><br>**Tax number:**<br>11/222/33333<br><br>**VAT ID:**<br>DE1234567890<br><br>**Copyright:**<br>All rights reserved. All contents (texts, images, graphics, animations) are protected by copyright. They may not be copied, distributed or modified for commercial purposes without the consent of Musterfirma GmbH.<br>(Copyright 2023 Musterfirma GmbH)<br><br>**Contents:**<br>Despite careful editing, Musterfirma GmbH cannot guarantee the correctness and accuracy of the information provided on [www.musterfirma.de](http://www.musterfirma.de). Any liability for damages arising directly or indirectly from the use of [www.musterfirma.de](http://www.musterfirma.de) and which are not based on intent or gross negligence on the part of Musterfirma GmbH is excluded. No liability is accepted for the content of websites linked to [www.musterfirma.de](http://www.musterfirma.de).<br><br>**Data protection:**<br>Musterfirma GmbH takes the protection of your personal data very seriously. We adhere strictly to the rules of the data protection laws. Personal data is only collected on this website to the extent that is technically necessary. Under no circumstances will the data collected be sold or passed on to third parties for other reasons. You can read our complete privacy policy [here](#).<br>"
+          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n**Company name:** \n\nMusterfirma GmbH\n\n**Company headquarters:**\n\nMusterstadt\n\n\n\n**Address:**\n\nMusterstraße 1 a\n\n12345 Musterstadt\n\nGermany\n\n **Phone:** +49 (0) 00 . 0000 . 000 . 00\n\n **Fax:** +49 (0) 00 . 0000 . 000 . 00\n\n **E-Mail:** [info@musterfirma.de](mailto:info@musterfirma.de)\n\n\n\n**Managing Director:**\n\n- Max Mustermann\n\n\n\n**Registry court:**\n\nMusterstadt 1234567\n\n\n\n**Tax number:**\n\n11/222/33333\n\n\n\n**VAT ID:**\n\nDE1234567890\n\n\n\n**Copyright:**\n\nAll rights reserved. All contents (texts, images, graphics, animations) are protected by copyright. They may not be copied, distributed or modified for commercial purposes without the consent of Musterfirma GmbH.\n\n(Copyright 2023 Musterfirma GmbH)\n\n\n\n**Contents:**\n\nDespite careful editing, Musterfirma GmbH cannot guarantee the correctness and accuracy of the information provided on [www.musterfirma.de](http://www.musterfirma.de). Any liability for damages arising directly or indirectly from the use of [www.musterfirma.de](http://www.musterfirma.de) and which are not based on intent or gross negligence on the part of Musterfirma GmbH is excluded. No liability is accepted for the content of websites linked to [www.musterfirma.de](http://www.musterfirma.de).\n\n\n\n**Data protection:**\n\nMusterfirma GmbH takes the protection of your personal data very seriously. We adhere strictly to the rules of the data protection laws. Personal data is only collected on this website to the extent that is technically necessary. Under no circumstances will the data collected be sold or passed on to third parties for other reasons. You can read our complete privacy policy [here](#).\n\n"
         },
         "MyCustomScreen": {
-          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n<br/>Project: \n--------\n\nGetting started\n\nSummary:\n--------\nThis is a sample text to help you get started. **Marked** is used to convert your text <u>from Markdown to HTML</u>. To learn more about the <u><em>correct syntax</em></u>, please visit this [link](https://marked.js.org/demo/) for a demo.\n \nContent:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n<br/>1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Bullet Point 1: Lorem ipsum dolor sit amet.\n- Bullet Point 2: Lorem ipsum dolor sit amet.\n\n<br/>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
+          "content": "![image](https://vc.systems/wp-content/uploads/2020/07/vcs_logo.png)\n\n\n\nProject: \n--------\n\nGetting started\n\nSummary:\n--------\nThis is a sample text to help you get started. **Marked** is used to convert your text _from Markdown to HTML_. To learn more about the __*correct syntax*__, please visit this [link](https://marked.js.org/demo/) for a demo.\n \nContent:\n-------\nLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.\n \nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\n \nHow to add lists:\n-----------------\n\n\n\n1. Enumeration, lorem ipsum dolor sit amet.\n2. Enumeration, lorem ipsum dolor sit amet.\n\n\n- Bullet Point 1: Lorem ipsum dolor sit amet.\n- Bullet Point 2: Lorem ipsum dolor sit amet.\n\n\n\nDuis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.",
           "name": "My Custom Screen",
           "title": "My Custom Screen"
         }
@@ -571,7 +571,8 @@
       "name": "tableAllWithTemplateHeader",
       "keyMapping": {
         "roofType": "codeLists.keys.roofType",
-        "function": "codeLists.keys.function"
+        "function": "codeLists.keys.function",
+        "featureId": "Feature ID"
       },
       "valueMapping": {
         "roofType": "codeLists.values.roofType.${value}",
@@ -649,7 +650,9 @@
       "name": "Oblique Map",
       "showObliqueImageName": true,
       "obliqueImageNameTemplate": "Oblique Image Name : {0}",
-      "type": "ObliqueMap"
+      "type": "ObliqueMap",
+      "maintainViewpointOnCollectionChange": true,
+      "fallbackToCurrentMap": true
     }
   ],
   "layers": [
@@ -679,7 +682,8 @@
       "screenSpaceError": 16,
       "screenSpaceErrorMobile": 32,
       "tilesetOptions": {
-        "skipLevelOfDetail": true
+        "skipLevelOfDetail": true,
+        "enableCollision": true
       },
       "exclusiveGroups": ["bldg"],
       "properties": {
@@ -728,8 +732,8 @@
     {
       "name": "osmBuildingFootprints",
       "type": "VectorTileLayer",
-      "minLevel": 15,
-      "maxLevel": 21,
+      "minLevel": 18,
+      "maxLevel": 18,
       "zIndex": 11,
       "tileProvider": {
         "baseLevels": [14],
@@ -739,10 +743,12 @@
         "url": "https://www.virtualcitymap.de/datasource-data/BerlinFootprintsMVT/{z}/{x}/{y}.pbf"
       },
       "activeOnStartup": false,
+      "debug": false,
       "properties": {
         "featureInfo": "addressBalloon",
         "title": "layers.osmBuildingFootprints.title",
-        "tooltip": "OpenStreetMap Building Polygons"
+        "tooltip": "OpenStreetMap Building Polygons",
+        "availableStyles": ["Transparentbuildings"]
       }
     },
     {
@@ -1074,7 +1080,12 @@
       "name": "reasonableLayerGroup",
       "type": "LayerGroupContentTreeItem",
       "layerNames": ["buildings", "Bäume", "GermanyBaseTerrain.4"],
-      "title": "Buildings - Trees - Terrain. A Layer Group Item"
+      "title": "Buildings - Trees - Terrain. A Layer Group Item",
+      "availableStyles": [
+        "MeasuredHeightGreen",
+        "MeasuredHeightBrown",
+        "MeasuredHeightBlue"
+      ]
     },
     {
       "name": "berlin_obliques",
@@ -1111,12 +1122,6 @@
       }
     }
   ],
-  "plugins": [
-    {
-      "name": "@vcmap-show-case/theme-changer",
-      "entry": "plugins/@vcmap-show-case/theme-changer/index.js"
-    }
-  ],
   "plugins2": [
     {
       "name": "@vcmap/create-link",