How to customize the loading screen

The look and feel of the default loading screen can be adjusted for the whole installation by editing the files index.html and init.css. Both are part of the map.apps webapp.

For example, to show a GIF image as part of the loading screen, replacing the default animation, adjust the index.html like this:

index.html

<div id="splashScreen" class="ct-splashscreen splashScreen">
    <!-- Custom Loading Screen Content in the following line -->
    <div style="background-image: url(http://urltomy.gif);width:100%;height:100%;"></div>
    <div class="launch__title">
        <h4 class="splashHeader">
            <span class="launchLog"></span>
        </h4>
    </div>
    <div class="launch__bundles">
        <p class="splashBundle">{nbsp}</p>
    </div>
</div>

To show a dark loading screen, add the class ct-splashscreen--dark to the main <div> element:

index.html

<div id="splashScreen" class="ct-splashscreen ct-splashscreen--dark splashScreen">
    ...
</div>

Changes in the index.html file might require changes in CSS styles too. Either import a custom CSS file or manipulate the init.css accordingly.

To show a custom loading screen for a single app, create a custom index.html file inside the app.

After updating map.apps this way, the modifications have to be applied again if you update your map.apps installation.