How to use Cesium JS

This tutorial shows how to create a 3D map and display it on a web page using MapTiler Cloud.

  1. Create a basic HTML file.

  2. Include the Cesioum 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 into your page. This div will be the container where the map will be loaded.

  4. The div must have 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 displaying 3D terrain with aerial imagery from your own server.