UI Configuration

This section configures individual components of the user interface to customize the app.

Clicking on icon addElement opens the selection menu, which lists the available components. The selection opens the corresponding editor.

The general actions for editing components are explained here.

Overview of the UI components

The following parameters can be configured for the respective UI components:

Option	Description
Logo	URL to the logo that will be displayed in the VC Map header.
Mobile Logo	URL to a variant of the logo for mobile devices that is displayed in the VC Map header.
Application Title	Defines the title that will be displayed in the VC Map header.
Primary Color	Defines the main color of the application in which buttons and highlights are designed.
Start Feature Info	Defines whether the info tool is activated when the VC Map is started. For this function, at least one layer must be configured that references a feature info definition.
Help Main Page URL	Specifies the base URL that leads to the main help page.
Position Display	Defines whether the position display is updated by clicking or on mouse move. Clicking is the default value. The coordinate system of the position display is based on the standard coordinate system of the module. Additionally, EPSG:4326 is always offered.
Imprint	Create an imprint via a URL or a markup text. If both are available, the URL is preferred. A title can be entered which appears in the footer. This can also be entered as a translation key.
Data Protection	Create the data privacy statement via a URL or a markup text. If both are available, the URL is preferred. A title can be entered which appears in the footer. This can also be entered as a translation key.
Custom screen	Create a customised info page using a markup text. This page can then be accessed in the VC Map app via Menu.
Splash screen	Create a customised start screen using a markup text. This page is then called up automatically when the VC Map app is started.
Display Settings	Allows for changing the display quality seetings for maps. At the moment only settings for 3d maps (Cesium maps) are supported.

Option

Description

Logo

URL to the logo that will be displayed in the VC Map header.

Mobile Logo

URL to a variant of the logo for mobile devices that is displayed in the VC Map header.

Application Title

Defines the title that will be displayed in the VC Map header.

Primary Color

Defines the main color of the application in which buttons and highlights are designed.

Start Feature Info

Defines whether the info tool is activated when the VC Map is started. For this function, at least one layer must be configured that references a feature info definition.

Help Main Page URL

Specifies the base URL that leads to the main help page.

Position Display

Defines whether the position display is updated by clicking or on mouse move. Clicking is the default value.
The coordinate system of the position display is based on the standard coordinate system of the module. Additionally, EPSG:4326 is always offered.

Imprint

Create an imprint via a URL or a markup text. If both are available, the URL is preferred. A title can be entered which appears in the footer. This can also be entered as a translation key.

Data Protection

Create the data privacy statement via a URL or a markup text. If both are available, the URL is preferred. A title can be entered which appears in the footer. This can also be entered as a translation key.

Custom screen

Create a customised info page using a markup text. This page can then be accessed in the VC Map app via Menu.

Splash screen

Create a customised start screen using a markup text. This page is then called up automatically when the VC Map app is started.

Display Settings

Allows for changing the display quality seetings for maps. At the moment only settings for 3d maps (Cesium maps) are supported.

Apply applies the changes made to the displayed app. See also Editing and saving.

Imprint

Option Description

Option	Description
Title	A title can be entered which is displayed in the footer as a link to the imprint. This can also be specified as translation key. `Imprint` is the default value.
Imprint source	You can choose between URL and Text. URL sets a link to the specified page, with the text option the content can be defined individually using the mardown text format.
URL to your imprint	The URL that refers to the imprint of an external website.
Content of Imprint	The imprint can alternatively be written directly in the text field of the content. The Markdown text format Marked is used to automatically convert the text to HTML. The integrated text example should make it easier to get started with the correct syntax. The content can also be specified as translation key.

Title

A title can be entered which is displayed in the footer as a link to the imprint. This can also be specified as translation key. Imprint is the default value.

Imprint source

You can choose between URL and Text. URL sets a link to the specified page, with the text option the content can be defined individually using the mardown text format.

URL to your imprint

The URL that refers to the imprint of an external website.

Content of Imprint

The imprint can alternatively be written directly in the text field of the content. The Markdown text format Marked is used to automatically convert the text to HTML. The integrated text example should make it easier to get started with the correct syntax. The content can also be specified as translation key.

Data Protection

Option Description

Option	Description
Title	A title can be entered which is displayed in the footer as a link to the data protection statement. This can also be specified as translation key. `Data Protection` is the default value.
Data Protection Source	You can choose between URL and Text. URL sets a link to the specified page, with the text option the content can be defined individually using the Mardown text format.
URL of Data Protection	The URL that refers to the data protection statement of an external website.
Data Protection Content	The data protection statement can alternatively be written directly in the text field of the data protection editor. The Markdown text format Marked is used to automatically convert the text to HTML. The integrated text example should make it easier to get started with the correct syntax. The content can also be specified as translation key.

Title

A title can be entered which is displayed in the footer as a link to the data protection statement. This can also be specified as translation key. Data Protection is the default value.

Data Protection Source

You can choose between URL and Text. URL sets a link to the specified page, with the text option the content can be defined individually using the Mardown text format.

URL of Data Protection

The URL that refers to the data protection statement of an external website.

Data Protection Content

The data protection statement can alternatively be written directly in the text field of the data protection editor. The Markdown text format Marked is used to automatically convert the text to HTML. The integrated text example should make it easier to get started with the correct syntax. The content can also be specified as translation key.

Custom screen

General settings

Option Description

Option	Description
Title	Title of the page, which is displayed in the menu entry and in the header of the screen. The title can also be specified as translation key.
Icon	Icon which is displayed in the menu entry and in the header of the screen in front of the title. Only Material Design Icons are possible, which are specified using the syntax `mdi-<icon-name>`.
Tooltip	Optional text for the tooltip, which is displayed on hover. The tooltip can also be specified as translation key.

Title

Title of the page, which is displayed in the menu entry and in the header of the screen. The title can also be specified as translation key.

Icon

Icon which is displayed in the menu entry and in the header of the screen in front of the title. Only Material Design Icons are possible, which are specified using the syntax mdi-<icon-name>.

Tooltip

Optional text for the tooltip, which is displayed on hover. The tooltip can also be specified as translation key.

Content

Option	Description
Markdown Template	The content of the page is written directly in the text field in the Markdown text format Marked to automatically convert the text to HTML. The integrated text example should make it easier to get started with the correct syntax. The content can also be specified as translation key.

Option

Description

Markdown Template

The content of the page is written directly in the text field in the Markdown text format Marked to automatically convert the text to HTML. The integrated text example should make it easier to get started with the correct syntax. The content can also be specified as translation key.

Window settings

Option	Description
Left	Specifies the positioning (distance) of the left edge of the window relative to the map view in pixels (px) or per cent (%). The default value is 30%.
Top	Specifies the positioning (distance) of the top edge of the window relative to the map view in pixels (px) or per cent (%). The default value is 10%.
Right	Specifies the positioning (distance) of the right edge of the window relative to the map view in pixels (px) or per cent (%). The default value is 30%.
Bottom	Specifies the positioning (distance) of the bottom edge of the window relative to the map view in pixels (px) or per cent (%). The default value is 20%.
Height	Fixed height of the window in pixels (px) or per cent (%). This value is strictly adhered to regardless of the content. The default value is auto.
Max. Height	Maximum height of the window in pixels (px) or per cent (%). The window height is adapted to the content, but does not exceed the specified value. The default value is auto.
Min. Height	Minimum height of the window in pixels (px) or per cent (%). The window height is adapted to the content, but is at least the specified value. The default value is auto.
Width	Width of the window in pixels (px) or per cent (%). This value is strictly adhered to regardless of the content. The default value is auto.
Max. width	Maximum width of the window in pixels (px) or per cent (%). The window width is adapted to the content, but does not exceed the specified value.
Min. Width	Minimum width of the window in pixels (px) or per cent (%). The window width is adapted to the content, but is at least the specified value. The default value is auto.

Option

Description

Left

Specifies the positioning (distance) of the left edge of the window relative to the map view in pixels (px) or per cent (%). The default value is 30%.

Top

Specifies the positioning (distance) of the top edge of the window relative to the map view in pixels (px) or per cent (%). The default value is 10%.

Right

Specifies the positioning (distance) of the right edge of the window relative to the map view in pixels (px) or per cent (%). The default value is 30%.

Bottom

Specifies the positioning (distance) of the bottom edge of the window relative to the map view in pixels (px) or per cent (%). The default value is 20%.

Height

Fixed height of the window in pixels (px) or per cent (%). This value is strictly adhered to regardless of the content. The default value is auto.

Max. Height

Maximum height of the window in pixels (px) or per cent (%). The window height is adapted to the content, but does not exceed the specified value. The default value is auto.

Min. Height

Minimum height of the window in pixels (px) or per cent (%). The window height is adapted to the content, but is at least the specified value. The default value is auto.

Width

Width of the window in pixels (px) or per cent (%). This value is strictly adhered to regardless of the content. The default value is auto.

Max. width

Maximum width of the window in pixels (px) or per cent (%). The window width is adapted to the content, but does not exceed the specified value.

Min. Width

Minimum width of the window in pixels (px) or per cent (%). The window width is adapted to the content, but is at least the specified value. The default value is auto.

Splash screen

General settings

Option Description

Option	Description
Create additional menu entry	The splash screen is automatically shown on start of the VC Map app. If this option is activated, an additional entry for the page is created in Menu, which can be used to call up the information again later.
Title	Title of the page, which is displayed in the menu entry. The title can also be specified as translation key.
Icon	Icon which is displayed in the menu entry in front of the title. Only Material Design Icons are possible, which are specified using the syntax `mdi-<icon-name>`.
Tooltip	Optional text for the tooltip, which is displayed on hover. The tooltip can also be specified as translation key.

Create additional menu entry

The splash screen is automatically shown on start of the VC Map app. If this option is activated, an additional entry for the page is created in Menu, which can be used to call up the information again later.

Title

Title of the page, which is displayed in the menu entry. The title can also be specified as translation key.

Icon

Icon which is displayed in the menu entry in front of the title. Only Material Design Icons are possible, which are specified using the syntax mdi-<icon-name>.

Tooltip

Optional text for the tooltip, which is displayed on hover. The tooltip can also be specified as translation key.

Content

Option	Description
Markdown Template	The content of the page is written directly in the text field in the Markdown text format Marked to automatically convert the text to HTML. The integrated text example should make it easier to get started with the correct syntax. The content can also be specified as translation key.

Option

Description

Markdown Template

Window settings

Option	Description
Height	Fixed height of the window in pixels (px) or percent (%). This value is strictly adhered to regardless of the content. The default value is 500px.
Max. height	Maximum height of the window in pixels (px) or percent (%). The window height is adapted to the content, but does not exceed the specified value. The default value is 500px.
Width	Width of the window in pixels (px) or percent (%). This value is strictly adhered to regardless of the content. The default value is 800px.
Max. width	Maximum width of the window in pixels (px) or percent (%). The window width is adapted to the content, but does not exceed the specified value. The default value is 800px.

Option

Description

Height

Fixed height of the window in pixels (px) or percent (%). This value is strictly adhered to regardless of the content. The default value is 500px.

Max. height

Maximum height of the window in pixels (px) or percent (%). The window height is adapted to the content, but does not exceed the specified value. The default value is 500px.

Width

Width of the window in pixels (px) or percent (%). This value is strictly adhered to regardless of the content. The default value is 800px.

Max. width

Maximum width of the window in pixels (px) or percent (%). The window width is adapted to the content, but does not exceed the specified value. The default value is 800px.

Display Settings

Option	Description
Start setting	Here you can specify the setting (low, medium, high), the desktop application starts with.
Start setting - mobile	Here you can specify the setting (low, medium, high), the mobile application starts with.
Customised settings for (low, medium, high):
Sync button	Synchronises the settings with the 3D map for the respective mode (low, medium, high), the changes are applied directly in the map.
SSE	Defines the Screenspace Error Factor (SSE) of the map. This factor is multiplied by the SSE of the map.
FXAA	Defines whether the Fast Approximate Anti-Aliasing Algorithm (FXAA) should be used for edge smoothing.
Fog	Selection of whether fog should be displayed. Fog reduces visibility but increases performance.
Fog Density	Specifies the factor by which the fog density value of the map is multiplied.
Fog SSE	Specifies the factor by which the Screenspace Error of the map’s fog is multiplied.
Resolution factor	Scaling factor for the resolution of the application. A value of 1 adopts the resolution of the browser. This corresponds to the best quality. A higher value increases the resolution; e.g. with a value of 0.5, only a quarter of the pixels are rendered. If a value higher than 1 is specified, the browser renders in the higher resolution and then scales the result down to the resolution of the display.
Layer SSE	Specifies the factor by which the screenspace error of the data source is multiplied.

Option

Description

Start setting

Here you can specify the setting (low, medium, high), the desktop application starts with.

Start setting - mobile

Here you can specify the setting (low, medium, high), the mobile application starts with.

Customised settings for (low, medium, high):

Sync button

Synchronises the settings with the 3D map for the respective mode (low, medium, high), the changes are applied directly in the map.

SSE

Defines the Screenspace Error Factor (SSE) of the map. This factor is multiplied by the SSE of the map.

FXAA

Defines whether the Fast Approximate Anti-Aliasing Algorithm (FXAA) should be used for edge smoothing.

Fog

Selection of whether fog should be displayed. Fog reduces visibility but increases performance.

Fog Density

Specifies the factor by which the fog density value of the map is multiplied.

Fog SSE

Specifies the factor by which the Screenspace Error of the map’s fog is multiplied.

Resolution factor

Scaling factor for the resolution of the application. A value of 1 adopts the resolution of the browser. This corresponds to the best quality. A higher value increases the resolution; e.g. with a value of 0.5, only a quarter of the pixels are rendered. If a value higher than 1 is specified, the browser renders in the higher resolution and then scales the result down to the resolution of the display.

Layer SSE

Specifies the factor by which the screenspace error of the data source is multiplied.