Themes and templates

A map.apps layout consists of two bundles:

  • theme-* (for example everlasting) which defines colors, fonts, hover effects, graphics and more

  • template-* (for example seasons) which defines the general positioning of widgets on the screen.

Both bundles are needed to run a map.apps app and can be configured in the app.json file. The default map.apps themes are created using LessCSS . It 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 of the map.apps project the LESS files are converted to ordinary CSS files.

There are several in-depth guides to:

  • create a custom stand-alone theme

  • extend an existing map.apps theme with style needed for set of custom bundles

  • include simple styling directly inside a custom bundle

Configure your app to use an existing theme

No configuration needed. Add the theme-bundle’s name (for example theme-everlasting) to the allowedBundles list in app.json file. The theme is applied on app startup.

Configure your app to use an existing template

No configuration needed. Add the template-bundle’s name (for example template-seasons) to the allowedBundles list in app.json file. The template is applied on app startup.

Change the position of a bundle’s widget or window behavior

The UI widgets provided by any 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 .