Photorealistic 3D terrain with aerial imagery using Cesium JS

The quantized mesh terrain data can be blended with satellite imagery to give a photorealistic look to your application. The photorealistic globe could be done using Cesium JS, an open-source JavaScript library for displaying 3D geodata on the web. This article shows how to do the whole process.

Following the How to use Cesium JS tutorial will help you to build your first application, quantized mesh terrain data, and satellite imagery are standard datasets on MapTiler Cloud (alternatively, it could be downloaded from MapTiler Data for self-hosted solution).

There is also a code sample showing the basic 3D terrain application.

Outdoor map in 3D

In the sample code, the imageryProvider specifies the URL of the satellite map. However, this could be changed to any other map you have on MapTiler Cloud. Therefore, if you want to show for instance hiking trails in 3D, change the imageryProvider to https://api.maptiler.com/maps/outdoor/{z}/{x}/{y}.png?key={{YOUR-OWN-KEY}}.

3D terrain on-prem with MapTiler Server

The example could be used for displaying 3D terrain with aerial imagery from your own server. You need to download, install, and run MapTiler Server, download 3D Terrain - Quantized Mesh and satellite datasets from MapTiler Data, and add them to Server.

Now you need to build your own application using the sample code above. In the sample code, just change the URLs in terrainProvider and imageryProvider. The default values for MapTiler Server running on localhost are

http://localhost:3650/api/tiles/maptiler-terrain_quantized_mesh

http://localhost:3650/api/tiles/satellite/{z}/{x}/{y}.jpg