CZML using offline map


I’m trying to learn Cesium and starting with something similar to this:

I want to create a similar project in React using an offline map so I’m creating my viewer using the Natural Earth II that came with Cesium. However, I ran into issues like undefined ‘Cesium’ and undefined ‘Sandcastle’. Is there any packages that I should install? I did import Cesium from “cesium” package but that does not seem to work. Any advice would be greatly appreciated. Thanks!


The following may be able to help you get setup properly.

  1. Using a bridge-library (i.e. wrapper for Cesium): This link provides step by step instructions on how to integrate Cesium with React - Integrating Cesium with React – Cesium.
  2. Without the bridge-library (i.e. wrapper for Cesium): This example integrates Cesium without the bridge-library from the first link - How to setup CesiumJS to use in ReactJS, Webpack, and Typescript | by Viet Hoang Le | Medium.

I’m more familiar with Angular. Hope either of these links help.


Hi there,

The Sandcastle variable is not a part of the core CesiumJS library. It is a set of helper functions for the Sandcastle application we use for demos and testing.

We recommend importing named exports from the Cesium ES module, via the import keyword. This allows a build tool like webpack to tree shake your application automatically. This is the style looks like:

import { Color } from 'cesium';
var c = Color.fromRandom();

If you do want one named Cesium variable, you can do the following:

import * as Cesium from `cesium`;

If you are importing from a script tag in HTML. you will need to import an IIFE style module. This is not the default export from the package, so you will need to import cesium/Build/Cesium/Cesium.js directly.

Hope that helps!

Do you have any recommendation for creating a starter project using react with the Cesium map and satellites path flying similar to that example?

I did go through those links and created a project for Cesium in React but was getting these errors:
Uncaught TypeError: cesium__WEBPACK_IMPORTED_MODULE_0___default() is undefined

Probably did not have my setup or config.js correct.

CesiumJS and the React library itself shouldn’t need any special configuration to work. However, many React apps use Webpack to build and serve. cesium-webpack-example has a minimal config in order to build an app with CesiumJS and Webpack.