How we created «Switzerland 2075», an immersive experience of a landscape transformed by climate change
«Switzerland 2075» is a story about how climate change could alter Switzerland’s water-rich landscape along the Aare River fifty years from now. By scrolling through a 3D map, readers «fly» from the river source in the Alps, over forested hills and agricultural fields, to where the Aare meets Switzerland’s largest international river, the Rhine. In two locations, one on a mountain ridge and one in a forest, we zoom in, allowing the reader to walk through the scenery. Visualizations of climate data contextualize the landscape’s transformations. This multimedia experience aims to make climate change, and the adaptation measures needed to counter it, more tangible to our readers.
The idea for this story was originally pitched to Neue Zürcher Zeitung (NZZ) by Tom Vaillant, an independent visual journalist, and Adina Renner, visual editor at NZZ. MapTiler, a provider of online maps, joined the project as a technology partner, supplying essential tooling and resources. The project team also included Sven Titz, NZZ’s climate science editor, Jon Cohrs, a specialist in emerging technologies, Michel Grautstück, web developer, and Cian Jochem, a visual journalist at NZZ. Over eight months, the team developed new processes and techniques to present a future landscape to our readers.
This post, written by the team, describes the challenges we encountered and the solutions we devised when building the immersive «Switzerland 2075» experience.
Storytelling: Balancing suspense, clarity, and scientific accuracy
Climate change is a topic with many facets. We chose water as the story’s central theme, as Switzerland is known for its abundance of water in glaciers, lakes, and rivers. The story is set in 2075 — a future close enough that today’s teenagers will live to see significant environmental changes. Decisions on which aspects to include were guided by two factors: the course of the Aare, which defined our topics, and the availability of datasets to substantiate and visualize these topics.
The storyline evolved through interviews with climate experts and was influenced by the technical explorations. The challenge was to unite many complex climate change topics into a coherent story along the Aare’s course.
Initially, we mapped out the story in the form of a visual content table, highlighting which topics and data could be explored at each location along the river. Later, we extended the outline into a detailed storyboard with thumbnail visualizations and text.
As the reader scrolls, text blocks appear and move over the map and the close-up scenes. The descriptions had to be scientifically accurate yet concise to complement the visuals. At the same time, we had to balance those short, fact-based texts with an engaging storyline to encourage the reader to continue scrolling and reading the story.
We also aimed to balance the descriptions of environmental changes with potential measures to deal with these changes or to counteract climate change. Our goal was to convey that, while climate change presents significant challenges, timely action could still make the future livable.
Data: Combining various types of scientific data and information
Rather than speculating on possible political developments, we approached the story from a fact-based perspective, relying on modeled climate data and scientific literature.
To accomplish this, we collaborated with a team of eleven scientific advisors who provided data and expertise, including Elias Hodel and Matthias Huss from ETH, Manuela Brunner and Massimiliano Zappa from WSL, Hendrik Huwald from EPFL, Adrien Michel from MeteoSwiss, Robin Poëll from the Federal Office for the Environment, Pierluigi Calanca from Agroscope, and Malve Heinz from the University of Bern. Arthur Provost and Niklaus E. Zimmermann, both climate scientists specializing in ecology at the Swiss Federal Research Institute WSL, played a key role by contributing data, research, and feedback to our visualizations.
Climate scientists don’t consider only one possible future. Instead, they use different scenarios that describe how greenhouse gas emissions — and with them global warming — will evolve. Scientific studies or media articles sometimes work with the RCP8.5 scenario. This scenario assumes huge amounts of emissions that would lead to strong warming, but it is unlikely that the future will unfold in this way. Our story uses RCP4.5, a more probable, intermediate scenario.
According to the RCP4.5 scenario, temperatures will rise by around 2.5 degrees Celsius relative to pre-industrial levels by 2075. We were able to use the RCP4.5 scenario for all datasets except one, which was only available under the RCP6.2 scenario at the time of our inquiry.
Ultimately, four types of data and information shaped our story:
- Non-geographic climate data: This category includes data for future river temperatures, river levels, water demand, and irrigation. Scientists provided this data as a collection of files, each one with data from a different climate model. To approximate future developments, we calculated the median across all models using Pandas, a Python library for data analysis. These projections appear as data visualizations or as numbers in the story.
- Geographic climate data: This data is similar to the one above but contains location-specific information. For one, this data was used to visualize the future landscape. For example, a detailed dataset on glacier retreats and new lakes helped us modify the satellite imagery in the Alps. Geographic data that didn’t alter the landscape visually, like future forest composition, was overlaid on the map.
- Visual information: To accurately model vegetation, we used photographs and satellite imagery from similar but already warmer regions as references. For instance, the coloration of the Swiss Plateau was based on open-source satellite imagery from Europe’s hot, dry summer of 2003. The forest scene was modeled using photos of forests in other locations that were already impacted by similar warming trends.
- Scientific knowledge: Where high-resolution scientific data was not available, we worked with scientists to adapt the landscape based on scientific literature. For instance, knowing that south-facing slopes will be snow-free in summer by 2075, we removed snow from these areas.
Telling a fact-based story about the future can be challenging. With this plethora of scientific data and information at our disposal, we could ground our story in science and use data to visualize one possible future scenario for the Swiss landscape of 2075.
Future landscape: Visualizing climate change in 3D
To translate the data into a visualization of a future Swiss landscape, we used a combination of several novel techniques. The first key component is the 3D map with a satellite imagery layer that we modified to depict 2075. The second essential component is the immersive close-up scenes, where readers walk through the landscape rather than flying above it. For these scenes, we recreated two specific locations along the Aare in Unreal Engine, a 3D game platform, using topographic and climate data to simulate a future landscape.
Creating a future satellite map
In order to show a «future map», we needed to modify existing satellite data according to scientific climate projections. This custom satellite imagery layer was created by processing current satellite imagery, painting the future landscape on top of it, and uploading the new layer into the online map.
The process began in QGIS, an open-source software for processing, analyzing and visualizing geographic information. Using the Maptiler QGIS plugin, we loaded their satellite basemap. In addition, we imported the vector data layer representing the position and shape of future lakes in Switzerland. We then exported the entire alpine area and the relevant landscapes along the Aare river as PNG images. With each PNG we also exported a world file which specifies the image’s geographic coordinates or «georeference».
The exported images were then edited in Adobe Photoshop to visualize future environmental changes. For example we changed the appearance of the projected lakes to look realistic, increased vegetation coverage, and removed snow and glacier areas based on forecast data from ETH scientists. The color curves were also adjusted to match the vegetation dryness observed during the summer of 2003, creating a more accurate representation of potential future scenarios.
Throughout this process, we ensured the image dimensions remained unaltered to maintain the georeferencing information specified in the world file. Each modified image was then processed using Maptiler Engine, a software that generates map tiles from raster images. Map tiles are segments of map imagery that are usually pre-rendered for smooth and fast display in online maps. We assigned the location using the world file and set the appropriate coordinate system. We also configured the output settings for optimal performance.
As the camera moves across the map at varying heights, we needed to generate multiple tile overlays at different zoom and resolution levels. Our aim was always to make sure that the images would stay sharp while limiting file sizes to improve performance. We also consolidated several images into a single tile set to further boost performance and make the handling of this new layer easier. Finally, the custom tile was imported into Maptiler and integrated into the map style that we were using for this project.
Our custom map tiles proved more performant than the default satellite layer, especially on mid-range Android devices. For one, the new layer only contained the tiles and zoom-levels needed for the story, reducing the amount of tiles we would have to load. For another, our new tiles were lighter due to the compression we applied. Using this technique, we created a high-performance, customized map tile compatible with various devices while effectively visualizing potential future landscapes.
Simulating the future landscape
We created two future scenes: one where the readers can walk over a ridge in the Alps and look down at a newly formed lake surrounded by snowless mountains, and another where they walk along the edge of a forest altered by climate change by Belp, a town close to Bern. In the distance, a large forest fire looms, threatening a nearby farmhouse.
To create these accurate 3D modeled scenes of the future, we used present-day topography as our starting point. Switzerland’s mapping agency, Swisstopo, offers Digital Terrain Maps (DTM) for download as GeoTiffs, an image format that also specifies geographic information. The «swissALTI3D» dataset has an impressive 0.5m precision which proved invaluable in crafting accurate, detailed environments.
In addition to the DTM dataset, we received elevation data from scientific advisors who modeled changes where glacial retreat altered topography. We combined these two datasets in QGIS to create one single terrain map. Since the climate-modeled data was at a lower resolution, we applied algorithmic smoothing to create a seamless landscape that blended with the original high-resolution SwissALTI3D data.
This combined map became the foundation for our landscapes, offering a reasonable estimation of the terrain in 2075. We then re-exported the map as GeoTiffs and imported it into Unreal Engine — a versatile video game engine and real-time 3D creation tool. Unreal Engine is not only used for popular games like Fortnite but also for crafting environments in film production.
After importing the GeoTiff terrain data into Unreal, we could further refine the landscape by importing vector data for lakes and rivers. More importantly, we could begin to incorporate a variety of 3D assets — such as grass, rocks, trees, lakes, clouds, and even wind — to enhance the environment and create a more accurate representation of the landscape. We again consulted with scientific advisors to ensure we were using appropriate trees and shrubs that reflect what vegetation in the year 2075.
For the forest fire in the second scene, we used a traditional visual effects technique to create the smoke. Smoke and fire modeling in Unreal often doesn’t look realistic, so instead of modeling smoke, we used cinematic shots of smoke on a greenscreen. This 2D video is modified, looped and placed in the scene at the proper location and angle.
With an accurate environment created, the next step was rendering cinematic shots. Lighting, a key component of filmmaking, is achieved by adding a light-emitting sky-dome for diffuse light and clouds, and a sun for direct lighting and shadows. Shadows are crucial for creating depth and movement, especially when combined with wind effects — a subtle element for realism.
Unreal Engine has a suite of cameras and virtual post-production tools that assist in creating detailed shots and camera paths that can be exported from the environment. Working closely with the editors, a detailed camera path was created leading the viewer through the environments and story. In some instances, an effect was added to the camera that causes the image to bounce a little bit as though it is a hand-held camera giving the illusion of walking.
The final step was rendering out a video. This takes two to three hours for multiple passes which are compiled to reduce glitches and create a photorealistic look. These videos were then loaded into the story.
Through this approach, we could combine the strengths of Unreal Engine’s cinematic environment with data-driven models of real landscapes. The result is a visualization uniquely suited for journalistic storytelling, blending data with an immersive experience.
Visual design: Evoking a future world
The visual design of our story drew inspiration from games and films that play in fantastical, futuristic landscapes, such as Cyberpunk 2077, Starfield and Oblivion. The aesthetics of these works — with neon colors, gradients, and all-caps, mono-spaced fonts — are typically intended for large screens. As most of our subscribers read articles on mobile devices, we used visual effects like glowing lines but reduced the amount of them to a minimum so as not to crowd small screens. A reddish tone throughout the story subtly indicates that the world in 2075 will be warmer. Strong, vibrant colors help readers to see overlays and callouts on the busy 3D map.
We applied a futuristic design to the data visualizations as well. Like the text, the data visualizations seek to be eye-catching and straightforward at once. They use bright colors and gradients but are reduced to the essential data — without quartiles or additional time spans. Blue always denotes today and 2075 is encoded in an orange-red, allowing the reader to quickly grasp the main differences in the data between today and 2075.
Readers primarily navigate the map by scrolling but in some locations they can also interact with it. A long press reveals the landscape as it is today, emphasizing areas where the changes have been the most dramatic. While we considered integrating this «flashback» option into the main storyline, we ultimately kept it optional to avoid disrupting the narrative flow. After multiple revisions, we implemented the flashback as a glowing button that appears only where this option is available.
Online development: Building a smooth experience with all components
To combine all the aforementioned components into a single article, we used a web development stack consisting of Svelte, Node, Typescript and SCSS. Svelte is a powerful JavaScript framework for creating efficient, interactive applications. This stack was enhanced by two additional libraries: The Maptiler SDK, a set of tools that extends the open-source library MapLibre GL JS to render and interact with map tiles on the web, and ScrollyVideo.js by Daniel Kao, which allowed us to synchronize video playback with scroll control.
From the outset, we used a JSON file to specify each step the readers take on their journey along the Aare. Each step contained information about the position and angle of the camera (how we see the map), the annotations and overlays on the map, and the text, video or data visualization displayed. This setup enabled us to quickly experiment with new and alternative ways of telling the story throughout the development process.
{
id: 'map-4',
type: StepType.MAP,
center: [8.38763, 46.60141],
bearing: 8,
duration: 4000,
//zoom: 11.88,
zoom: 12.1,
pitch: 60,
section: {
content: [
'Glaciers and permafrost have disappeared, and are no longer stabilizing the slopes. As a consequence, rockfalls are becoming more frequent. <span class="underscore underscore--waterbody">New lakes</span> have emerged in the former glacial valleys.',
],
},
annotations: [
{
position: [8.40626,46.64512],
text: 'Rhône Glacier',
},
],
shapes: ['future_lakes.json'],
minimap: [],
otherLayer: 'present',
}Throughout development, performance optimization was our primary focus. Rendering a 3D map draped with satellite imagery and videos with scroll control can be demanding for mobile devices, especially for older ones. Custom map tiles significantly improved performance, but we also had to optimize other implementations in order to create a smooth user experience.
One particular challenge was the «fly-to» effect, where the camera transitions from one point to another on the map by flying out and then in again, with automatic zooming and panning. This triggered the fetching of extra map tiles due to the zoom change, which increased network traffic and device resource use. Instead, we opted for the «ease-to» effect, which keeps zoom consistent during transitions, reducing map tile fetching. To help with orientation, we also introduced a small locator map at key points in the story.
A crucial part of the user experience was a smooth transition between the map and the rendered videos. To create the illusion of flying in and out of the scenes, we added a zoom and a fade-out-fade-in effect. For a seamless transition, both the map and video elements had to remain active. This approach, however, taxed performance. We resolved this by preloading the video element a few steps before it was needed and adding a loading indicator for slow connections.
A further performance optimization concerned the loading of the map tiles. Occasionally, white gaps appeared before map tiles were fully loaded, disrupting the user experience. Setting an olive green background helped to visually mask these gaps. In addition, we implemented a «preflight» feature that allowed the camera to preload tiles along the map route. This worked well, but it increased the initial loading time of the story. A shorter preflight, on the other hand, reduced the number of map tiles that could be preloaded. Ultimately, we had to find a balance between shorter initial loading times and sufficient tile preloading.
With the project nearing completion, the remaining tasks were labeling the map using so-called markers, and visualizing geographic data on to the landscape by adding custom GeoJSON layers. Both of these tasks were easy thanks to the out-of-the box solutions of the MapTiler SDK. However, having too many active markers affected performance, as each marker updated its position in real time with camera movement. To address this, we created markers shortly before the camera arrives at a given location and destroyed them after the camera moves on, hence reducing processing power needed during transitions.
Key takeaways: What we learned and how we will continue
The article was published in the fall of 2024 in German and English on nzz.ch. The article was well-read, especially as climate change topics often underperform with our readers. We want to end this making-of post with three takeaways from the project, both in terms of its setup and its output:
- Climate change topics can be engaging (but nobody wants to wait for a story to load): We lost a lot of readers at the loading screen at the very beginning of our story. Readers of daily news, as opposed to gamers, for example, are not used to waiting until they can use the product. In this case, the loading, if necessary, has to happen while they can already read a part of the story. Over fifty percent of the readers who stayed after the loading screen read the story to the end, indicating deep engagement with the storytelling. Our attention to detail on the tone, visual narrative and storyline for ‘Switzerland 2075’ had paid off.
- The technology-partner model is very promising: Maptiler’s contributions to this project were essential. We had access to their full suite of products, ranging from the QGIS Plugin, to Maptiler Engine, Maptiler Cloud and the Maptiler SDK. We could also use the new, high-resolution, seamless satellite layer for Switzerland. Their developer team continuously improved functionalities on our request and the project revealed potential new features for other articles, making the exchange mutually beneficial. Content was not discussed with the company, which ensured our journalistic independence.
- Using 3D tools for journalism requires new techniques combined with traditional journalism ethics: Once you start modeling and simulating a world, everything could be possible. In journalism though, we need to stick to the facts — and in this case, to the data. This required us to find relevant geographic data and build a pipeline that would allow us to import the data into the 3D tools. With that data as our foundation, we could then go on to build fact-based 3D worlds. Again, as to not drift into the fantastical, these newly simulated landscapes were then checked by scientific experts. Our approach called for scientific experts that were willing to engage with this new form of storytelling, which we were very lucky to have on our advisory board for this story.
We will continue to use the storytelling elements — the 3D map, the video simulation, and the online implementation — that were created for «Switzerland 2075». In future stories, we will continue to develop and improve them. What story would you tell with a 3D map and videos? We look forward to many more immersive experiences on nzz.ch.
