This blog is a brief overview of CesiumJS, a cool JavaScript client library for visualizing a geospatial Earth map, including artifacts (both real and generated). The company eats its own dog food, so their homepage has a declaratively-rendered spinning globe by Cesium.

CesiumJS has a higher-level Entity API as well as a lower-level Primitive API. The API doc can be found here. I’ll point out a couple of interactive source examples that use the entity API; most Cesium apps use it. Cesium also provides open specification 3D Tiles to load, render, and cache on-demand terrain features, artifacts, and building renditions for surface viewing.

There is no IDE or download needed to interact with the material mentioned in this overview. You can interact with the material mentioned with your browser.

Sandcastle Cesium Playground

Access a Cesium playground named “Sandcastle” in a browser to see interactive samples using this link. The “QuickStart” page leads to a yellow button entitled, “Open in Sandcastle“.

Click the button (or use the link above) to render San Bruno Mountain. It splits South San Francisco from San Francisco. That white text on the lower hill is a real sign – not inserted by Cesium.

I once ascribed the sign to Hollywood envy. The San Francisco Peninsula was my turf for 12 years while I watched silicon replace apricots in a valley farther south. I digress. Back to the story…

Put the view panel in full-screen mode by clicking the icon in the lower right corner of the panel. You can zoom and pan much like you could in Google Maps and Google Earth. The Esc key exits full-screen mode. Play with the interactive icon buttons at the upper right. You can even zoom all the way out to outer space to see the Milky Way or the moon.

Look at the code tab. That flyTo source code is the only app-level JS needed to aim at San Bruno Mountain. 3D Tiles demand cache a subset of tiles used to render the terrain. How did Cesium know to render that view and angle? Check the code’s function, viewer.camera.flyTo(options):

viewer.camera.flyTo({
  destination : Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
    orientation : {
    heading : Cesium.Math.toRadians(0.0),
    pitch : Cesium.Math.toRadians(-15.0),
  }
});

The Cesium view’s hypothetical camera’s flyTo function dictates a location’s destination longitude, latitude, and altitude. Note that longitude precedes latitude in the parameters. The view heading and downward pitch degrees feed an orientation parameter.

Keyhole Software View

Let’s move over to Keyhole Software in Lenexa, KS.

viewer.camera.flyTo({
  destination : Cesium.Cartesian3.fromDegrees(-94.716184, 38.984, 400),
    orientation : {
    heading : Cesium.Math.toRadians(0.0),
    pitch : Cesium.Math.toRadians(-45.0),
  }
});

I gave it a decimal longitude and latitude, a view heading, a downward angle, and an altitude to center Keyhole’s building 0n the view.  I tweaked the decimal coordinates of Lenexa and Overland Park to zero in on the exact incantation. The library solidified close-ups of the buildings to gray blocks.

That was programmatic. Now let’s go interactive.

Search

The default Cesium view has a search button. Let’s supply the street address to the search popup: “11205 W 79th St, Lenexa, KS 66214.”

We could programmatically carry out the same search using a geocoding service to get the camera fly-to location. See this resource.

I manually added the underline to highlight Keyhole Software’s building in their screenshot. I could instruct Cesium to draw it, at the expense of adding noise to a simple view demo.

How?

Draw an Entity

Drawing an Entity API “polyline” is an instructive Sandcastle demo. Check it out here. We could use it as a reference to add a red underline at the rear of the Keyhole Software property.

Note the various kinds of lines. The straight green line uses 2D Cartesian coordinates. The curved red line renders a “Great Circle” 3D projection. It tracks a default WSG84 standard ellipsoid that hugs our non-spherical bumpy Earth. An explicit 3D spherical option can simplify those 3D graphics, trading accuracy for speed.

React

Cesium arguably integrates an amazing variety of geo capabilities with performant JS applications. Those include React applications.

Resium, an npm downloadable module, wraps Cesium functionality with React components. See this site for information.

Summary

This has been a shallow dive into CesiumJS. I briefly mentioned:

• a 3D geospatial JS library called CesiumJS
• a Cesium sandbox named Sandcastle
• two APIs: a high-level entity API as well as a low-level primitive API
• 3D Tiles, an open-source standard used to render surface features
• a simple online “QuickStart” that renders an interactive view of the San Francisco Peninsula
• programmatically changing the quickstart view to look at Keyhole Software
• an interactive search by street address to render a view of Keyhole Software
• a reference to using a geocoding service to find and render a street address
• drawing a line in either 2d cartesian coordinates  or 3d
• Resium, a React component wrapper for Cesium objects
• Cesium Sandcastle demos that allow interaction with myriad capabilities

If Cesium interests you, refer to the entity API while investigating myriad interactive demos in the gallery tab of Sandcastle. I think they’re fun to alter and observe. A breadth of applications can emerge from those live ideas.

Let me know how you would use (or currently use) Cesium in the comments below. If you liked this post, go follow us at the Keyhole Dev Blog.