How to use Cesium JS: step-by-step tutorial

In this step-by-step tutorial, you’ll learn how to create a 3D map and display it on a web page using MapTiler Cloud. Together we will make a simple full-screen map application, serving as a practical example of how to seamlessly integrate MapTiler maps with Cesium into your web mapping application.

By the end of this tutorial, you will be able to develop a full-screen 3D globe map. Your final map will resemble the following example:

  1. Create a basic HTML file.

  2. Include the Cesium JavaScript and CSS files in the <head> of your HTML file.

  3. Create a <div> element with a certain id where you want your map to be.

    Add <div> tag to your page. This div will be the container where the map will be loaded.

  4. The div must have a non-zero height.

    
     body {
       margin: 0;
       padding: 0;
     }
     #cesiumContainer {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
     
  5. Add the MapTiler logo to the map. Check the MapTiler map data licenses

  6. Initialize the Cesium Viewer in the HTML element with the id cesiumContainer.

  7. Set the initial camera view to the given longitude, latitude, and height.

  8. Add the MapTier API Key. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  9. Add the terrainProvider to see the terrain in 3D. We will use the Terrain 3D - Cesium quantized mesh as geometry for the terrain surface.

  10. Add the imageryProvider to provide the images to display on the terrain surface. We will use the MapTiler Satellite services. You can use any other map you have on MapTiler Cloud maps as an imageProvider.

Learn more

To learn more about 3D terrain data modeling, read the 3D vector tiles with Cesium article.

Check out the Photorealistic 3D terrain with aerial imagery using Cesium JS to know how to see an example of an outdoor map or how to display 3D terrain with aerial imagery from your server.

Related examples