Layout

The layout of an app consists of two parts that are added to an app as separate bundles:

  • A layout template defines the size and positioning of components.

  • A color theme defines the colors and appearance of components.

Templates

There is one template bundle (template-seasons) in the default delivery of map.apps. This provides the seasons layout template (responsive layout for desktop, tablet and mobile views).

To create your own template bundle, see Provide template as a bundle.

Customize widgets

For each function that provides a graphical user interface (GUI), a default configuration is specified in the layout template that defines the size, position, and other properties for display.

To customize the appearance of a widget, override these default values by specifying the respective widgetRole as in the following example:

{
    "templates": {
        "TemplateModel": {
            "widgets": [
                {
                    "widgetRole": "tocWidget",
                    "window": { ... }
                }
            ]
        }
    }
}

For a list of the widgetRole values of the most commonly used widgets, see the list of widgets. The following sections describe possible adjustments.

Size and position

The w (width) and h (height) parameters define the size of a widget. The l (left), r (right), b (bottom), and t (top) parameters define the position of a widget.

To display a widget with defined size at a specific position, set the parameters w, h and as well l or r in addition to h or b as in the following example. The numbers are evaluated as number of pixels.

{
    "widgetRole": "tocWidget",
    "window": {
        "marginBox": {
            "w": 435,
            "h": 200,
            "t": 125,
            "l": 20
        }
    }
}

To size the widget depending on the height or width of the viewport, set the values for opposite sides and no value for the width or height. The configuration in the following example defines a width for the map content control and a distance up and down. The height the widget is displayed to the user is thus dependent on the height available in the view.

{
    "widgetRole": "tocWidget",
    "window": {
        "marginBox": {
            "w": 435,
            "t": 125,
            "l": 20,
            "b": 50
        }
    }
}

To specify the values relative to the size of the viewport, specify the values as a string with percent signs, as in the following example:

{
    "widgetRole": "tocWidget",
    "window": {
        "marginBox": {
            "w": "30%",
            "h": "50%",
            "t": 125,
            "l": 20
        }
    }
}

If no values are set for the position, the widget will be displayed in the center of the view area.

Hide title bar

To hide the title bar of a widget, use the following configuration:

{
    "widgetRole": "tocWidget",
    "window": {
        "windowClass":"noTitleBarAndWindowTools"
    }
}

Other options

To limit the interaction options when using a widget, use the following configuration options:

{
    "widgetRole": "tocWidget",
    "window": {
        "resizable": true,
        "maximizable": true,
        "draggable": true,
        "closable": true,
        "modal": true
    }
}
Option Description

resizable

Defines if the window can be resized.

maximizable

Defines if the window can be maximized.

draggable

Defines if the window can be dragged.

closable

Defines if the window can be closed.

modal

Defines if the window blocks access to other elements of the app when open.

For more information about the window system, see Window system.

List of widgets

Use the widgetRole from the following table to customize the respective widget:

Bundle widgetRole Function

coordinateconversion

coordinateconversion

Display, Transform, Copy and Search Coordinates

coordinateviewer

coordinateviewer

Show coordinates and scale

editing

editing

Create or edit map objects

legend

legend

Show legend

measurement-2d

distanceMeasurement2D

Measure the distance between two points

measurement-2d

areaMeasurement2D

Measure an area and its perimeter

measurement-3d

lineMeasurement3D

Measure the distance between two points

measurement-3d

areaMeasurement3D

Measure an area and its perimeter

printing

printing

Create a printout of the map

result-ui

result-ui

Open result center

search-ui

search-ui

The central search interface

selection-ui

selection-ui

Select objects oin the map

share-link

sharelink

Share app with parameterized link

portal-webscene-slides

slideSelector

Select slides from a webscene

toc

tocWidget

Map content control

Themes

The following theme bundles are available:

Bundle name Theme name Description

theme-autumn

autumn

Light background, dark fonts, blue accent color

theme-winter

winter

Light background, dark fonts, black accent color

theme-spring

spring

Light background, dark fonts, green accent color

theme-summer

summer

Light background, dark fonts, red accent color

theme-everlasting

everlasting

Dark background, light fonts

If no theme is configured in the app configuration, the "everlasting" color scheme is used by default. For increased accessibility, we recommend using one of the light color schemes. To use a different color scheme in an app, set the following configuration:

{
    "themes": {
        "ThemeModel": {
            "_selectedTheme": "autumn"
        }
    }
}

Change between different themes

To allow the user to switch between different themes, activate the ThemeSelector with the following configuration:

{
    "themes": {
        "ThemeModel": {
            "_selectedTheme": "autumn"
        },
        "ThemeSelector": {
            "componentEnabled": true
        }
    }
}

Individual style adjustments in an app (app.css)

To make individual adjustments to the layout in an app, a CSS file can be added to the app. To do this, add the configuration for styles in the app configuration in the load section as in the following example:

{
    "load": {
        "allowedBundles": [
            "map-init",
            "notifier",
            "splashscreen",
            "system",
            "templatelayout",
            "template-seasons",
            "theme-autumn",
            "..."
        ],
        "styles": [
            "${app}:app.css"
        ]
    }
}

Create a new file app.css and place it next to the file app.json. You can now add CSS instructions to this file to make custom style adjustments.

Please note that these adjustments only relate to the specific app. For customizations that should appear consistently in several apps, we recommend creating your own theme. Read Creation of a custom theme.