Navigating CesiumJS Without a CesiumIon Token and Open-Access Tile Providers

Phạm Vân AnhPhạm Vân Anh
2 min read

CesiumJS, a powerful JavaScript library for creating 3D globe-based applications, is often associated with CesiumIon, a platform for hosting geospatial data. While the default setup urges users to obtain a CesiumIon token, it is entirely possible to harness the capabilities of CesiumJS without this token. In this guide, we'll explore how to break free from the token dependency and tap into open-access tile providers to enrich your geospatial applications.

Understanding the Token Conundrum

The CesiumJS Quickstart guide typically steers developers toward obtaining a CesiumIon token as the initial step. However, given that CesiumJS is free, open source, and permissively licensed under Apache-2.0, the need for a token may seem perplexing. We'll delve into the reasons behind this and explore scenarios where avoiding the token is not only beneficial but also aligns with the principles of freedom and flexibility.

Getting Started with CesiumJS

The first step involves including the CesiumJS library in your project. This can be achieved by downloading and hosting it locally or, for simplicity, using a Content Delivery Network (CDN). We'll guide you through the process of setting up a static HTML page and initializing the CesiumJS library within your JavaScript code. Notably, we'll set the Cesium Ion token to null to bypass any unnecessary warnings.

html

<!-- Example of including CesiumJS using a CDN -->

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<!-- Include the CesiumJS JavaScript and CSS files -->

<script src="https://cesium.com/downloads/cesiumjs/releases/1.87.1/Build/Cesium/Cesium.js"></script>

<link href="https://cesium.com/downloads/cesiumjs/releases/1.87.1/Build/Cesium/Widgets/widgets.css" rel="stylesheet">

</head>

<body>

<div id="cesiumContainer"></div>

</body>

</html>

Open-Access Tile Sources

With CesiumJS initialized without a token, the next step involves integrating open-access tile sources to enhance your application's geospatial context. We'll provide a list of basemap tile sources from Stamen Design, Carto, OpenStreetMap, and USGS National Map. This ensures that you're not restricted to CesiumIon assets, offering flexibility and diversity in your mapping endeavors.

javascript

// Initialize the viewer - this works without a token!

viewer = new Cesium.Viewer('cesiumContainer', {

imageryProviderViewModels: imageryViewModels,

selectedImageryProviderViewModel: imageryViewModels[0],

animation: false,

timeline: false,

infoBox: false,

homeButton: false,

fullscreenButton: false,

selectionIndicator: false,

});

// Remove the Terrain section of the baseLayerPicker

viewer.baseLayerPicker.viewModel.terrainProviderViewModels.removeAll()

Conclusion

By following this guide, you've successfully untethered your CesiumJS experience from the need for a CesiumIon token. You can now explore a multitude of open-access tile providers, expanding your options for basemaps and eliminating dependencies on a commercial platform. This approach not only aligns with the principles of open-source software but also grants you the freedom to customize and share your geospatial applications without constraints.

10
Subscribe to my newsletter

Read articles from Phạm Vân Anh directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Phạm Vân Anh
Phạm Vân Anh

Currently I am working as Marketing Executive at Bac Ha Software - Leading software development company in Vietnam https://bachasoftware.com/