CZML using offline map

CesiumJS
1

Hello,

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!

2

Hello,

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.

Sirin

3

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!

4

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.

5

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.