Adding 3D Data

Bring Your 3D Map to Life

In this lecture, you’ll learn how to set up your 3D environment in the App Configurator and add key 3D layers, such as terrain, untextured buildings, and textured buildings to your map.

This process is crucial for presenting your city model in full detail and enabling advanced interactions.

What You Will Learn

  • How to add a 3D (Cesium) map to your app

  • How to add terrain, untextured, and textured building layers

  • How to use Exclusive Groups to prevent multiple 3D layers from being activated at once

  • How to enable Feature Info for querying attribute values of buildings

Before adding 3D layers, make sure you have already added a 3D base map (Cesium map). Likewise, 2D layers require a 2D map as their base.

Video Tutorial

Steps Overview

  1. In the App Configurator, open your App in Edit mode.

  2. Click the module, then click the puzzle icon and choose "Edit module components".

  3. Add 3D map (Cesium) to your app.

  4. Add your 3D layers.

  5. Group the building layers into an Exclusive Group to ensure only one is visible at a time.

  6. Enable Feature Info:

    • Add the attributes you want to display (e.g., measuredHeight, Volume) with unit indicators directly in the key labels if required, like "Height [m]".

    • Add these Feature Info components to your building layers.

  7. Save your app configuration.


If you want to see what attributes your CityGML buildings contain, inspect your CityGML data beforehand. This helps you configure Feature Info properly by knowing which attribute names and values are available.

Now your interactive 3D map is complete with base terrain, building layers, and clickable buildings showing attribute data.