This tutorial will get developers of all skill levels up and running with their first Cesium app.

To get started, check that Cesium works in your web browser by viewing the Hello World example. If the globe isn’t displayed, first check the troubleshooting guide for tips.

Downloading a Cesium release

Click this button to grab the latest Cesium release: Cesium-1.35.zip

Once downloaded, extract the zip file into a new directory of your choice, I’ll refer to this throughout the tutorial as the Cesium root directory. The contents should look something like the below.

It may be tempting to double-click on index.html, but you’ll only be greeted with disappointment. For the app to work, it needs to run within a web server.

Setting up a web server

Cesium apps require a local web server to host our files. We’ll use Node.js for this and other tutorials. However, because Cesium is completely client side, any web server that can host static content can also host Cesium.

Setting up a web server with Node.js is easy:

  1. Install Node.js from their website.
  2. Open a command shell in the Cesium root directory and download/install the required modules by executing npm install
  3. Finally, start the web server by executing node server.js

You should see something like the below:

Hello (again) world!

Now that the web server is running, launch a browser and navigate to http://localhost:8080/Apps/HelloWorld.html

This is the same Hello World app we checked at the beginning of the tutorial, but now it’s running on your system instead of the Cesium website. Open HelloWorld.html in an editor to find the following simple app:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8">
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
        @import url(../Build/Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
    var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>

These are the four lines needed to add Cesium to an app:

  1. First include Cesium.js in a script tag. This defines the Cesium object, which contains the entire Cesium library.
<script src="../Build/Cesium/Cesium.js"></script>
  1. The Cesium Viewer widget requires this CSS.
@import url(../Build/Cesium/Widgets/widgets.css);
  1. In the HTML body, create a div for the viewer to live.
<div id="cesiumContainer"></div>
  1. Finally, in another script tag add the JavaScript for your app, in this case just an instance of viewer.
var viewer = new Cesium.Viewer('cesiumContainer');

Where to go from here

Congratulations! You’re ready to start writing your own Cesium app! Depending on your learning style, next see: