Themes and templates

What are themes and templates?

The visual appearance and layout of a map.apps app are defined by its theme and its template.

The theme defines the general look and feel of the app, like colors, fonts, hover effects, graphics, and more. The template defines the general positioning of UI widgets on the screen.

Themes and templates in map.apps are implemented as bundles. Each app in map.apps must have a theme and a template assigned. To assign them, you need to add their bundles to the allowedBundles list in the app.json file of your app configuration.

In the following example, an app is configured to use the everlasting theme and the seasons template. These are the standard theme and template that come with map.apps.

app.json defining theme and template
{
    "load": {
        "allowedBundles": [
            "template-seasons",
            "theme-everlasting",
            ...
        ]
    },
    "bundles": {
    ...

Customizing themes

The default map.apps themes are created using LessCSS . Less has features like variables and functions, which simplifies the customization of themes. Color and font adaption can be done in a single file by changing the according variables. During the build process map.apps converts the Less files to ordinary CSS files.

There are several in-depth how-to’s:

  • Create a custom stand-alone theme.

  • Extend an existing map.apps theme with styles needed for a set of custom bundles.

  • Include simple styling directly inside a custom bundle.

Templates and widget positioning

The UI widgets provided by a bundle can be placed either inside a toggleable window or directly visible inside the app’s header, footer, or map container. The default behavior and position of widgets can be customized. More info about re-configuration of UI-widgets can be found inside the template’s bundle documentation . To see a list of attachpoints provided in the default layout template refer to the template-seasons bundle documentation .