How to Configure CesiumJS Context Options in God's Eye View

You configure CesiumJS context options by editing the JavaScript object passed to the Cesium.Viewer constructor in src/main.js, where boolean flags like timeline, animation, and baseLayerPicker toggle UI widgets and rendering behavior.

God's Eye View is an open-source geospatial visualization application built on CesiumJS. All viewer initialization—including the complete UI context and scene configuration—is controlled through a single options object in the main entry point. Understanding this configuration object allows you to customize every aspect of the Cesium interface, from hiding individual widgets to replacing the default credit container.

Locate the Viewer Initialization in src/main.js

The primary configuration resides at the top of src/main.js around line 112. This is the only location in the main application where the Cesium.Viewer is instantiated, making it the definitive source for context options.

const viewer = new Cesium.Viewer('cesiumContainer', {
  timeline: false,
  animation: false,
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  fullscreenButton: false,
  vrButton: false,
  selectionIndicator: false,
  infoBox: false,
  baseLayer: false,
  creditContainer: (() => {
    const el = document.createElement('div');
    el.id = 'cesium-credits';
    document.body.appendChild(el);
    return el;
  })(),
});

Each key in this object maps directly to a CesiumJS Viewer constructor option. The repository initializes most widgets to false to provide a minimal, custom interface, but you can toggle any of these values to true to restore default Cesium UI elements.

Modifying CesiumJS Context Options

To customize the viewer, modify the properties within the options object before the new Cesium.Viewer call. Common configuration targets include:

• timeline – Set to true to display the playback timeline at the bottom of the screen.
• animation – Set to true to show the animation widget with play/pause controls.
• baseLayerPicker – Set to true to allow users to switch between Cesium ion imagery layers.
• geocoder – Set to true to enable the location search widget.
• homeButton – Set to true to display the button that returns the camera to the default view.
• sceneModePicker – Set to true to let users switch between 3D, 2D, and Columbus view modes.
• navigationHelpButton – Set to true to show the camera control instructions overlay.
• fullscreenButton and vrButton – Control fullscreen and VR mode toggles respectively.

You can also pass additional Cesium-standard options not explicitly listed in the default object, such as showRenderLoopErrors, useDefaultRenderLoop, or skyBox, and they will be passed through to the Viewer constructor.

Customizing the Credit Container

The creditContainer option in src/main.js demonstrates advanced context configuration by accepting a DOM element rather than a boolean. The current implementation uses an immediately invoked function expression (IIFE) to create a hidden div element with the ID cesium-credits and appends it to the document body. This moves attribution text out of the default Cesium overlay.

To modify this behavior, replace the IIFE with a reference to an existing DOM element:

creditContainer: document.getElementById('my-custom-footer')

Or remove the property entirely to use Cesium's default credit display in the bottom-right corner.

Configuration in the Standalone Renderer

God's Eye View includes a separate command-line rendering tool that also instantiates a Cesium Viewer. The files tools/cesium-render.mjs and tools/cesium-render.html contain similar initialization logic with a reduced UI set tailored for automated screenshot generation. If you are using the standalone renderer, you must edit the options object in cesium-render.html (around the viewer creation) or in the corresponding module file to apply consistent context settings across both the web application and the rendering utility.

Externalizing Configuration for Runtime Flexibility

While the repository currently hardcodes options in src/main.js, you can refactor this to load settings from an external JSON file for runtime configurability. Create a file at config/context.json containing your overrides:

{
  "timeline": true,
  "animation": true,
  "geocoder": true
}

Then import and spread this configuration in src/main.js:

import contextConfig from '../config/context.json' assert { type: 'json' };

const viewer = new Cesium.Viewer('cesiumContainer', {
  timeline: false,
  animation: false,
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  fullscreenButton: false,
  vrButton: false,
  selectionIndicator: false,
  infoBox: false,
  baseLayer: false,
  creditContainer: document.getElementById('cesium-credits'),
  ...contextConfig
});

After modifying any context options, rebuild the Vite bundle using npm run build (or rely on the hot-reload dev server) and reload the page to apply the new configuration.

Summary

• Primary configuration location: Edit the options object in src/main.js (line ~112) to control CesiumJS behavior.
• UI widget toggles: Boolean properties like timeline, animation, and baseLayerPicker determine which default Cesium widgets appear.
• Custom containers: The creditContainer property accepts DOM elements to relocate attribution information.
• Build requirement: Changes require a Vite rebuild (npm run build) or dev server reload to take effect.
• Secondary instances: The standalone renderer in tools/cesium-render.mjs and tools/cesium-render.html maintains separate options for command-line rendering tasks.

Frequently Asked Questions

How do I disable the timeline widget in God's Eye View?

Set the timeline property to false in the options object within src/main.js. This is the default configuration in the repository, hiding the playback scrubber entirely. Set it to true if you need to visualize time-dynamic data.

Can I configure Cesium options without rebuilding the application?

Currently, no. The options are defined as a static JavaScript object in src/main.js and bundled by Vite at build time. To enable runtime configuration without rebuilding, you would need to implement the JSON import pattern described above and ensure your server serves the configuration file as a static asset that can be fetched or imported dynamically.

How do I customize where attribution credits appear?

Modify the creditContainer property in the Viewer options. Instead of using the default implementation that creates a hidden div, provide your own DOM element reference (e.g., document.getElementById('footer')). Cesium will render all imagery and terrain attribution strings inside that element rather than the default overlay.

What is the difference between the main viewer and the cesium-render tool?

The main application in src/main.js provides the interactive web interface with a fully customized UI. The tools/cesium-render.mjs script is a Node.js utility for headless screenshot generation; it loads tools/cesium-render.html, which contains its own minimal Cesium.Viewer initialization optimized for automated rendering without user interaction. You must update both locations if you want consistent context options across the web app and the rendering pipeline.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}