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

> Learn how to configure CesiumJS context options in God's Eye View by editing the JavaScript object in src/main.js to control UI widgets and rendering behavior.

- Repository: [Bilawal Sidhu/gods-eye-view](https://github.com/bilawalsidhu/gods-eye-view)
- Tags: how-to-guide
- Published: 2026-09-06

---

**You configure CesiumJS context options by editing the JavaScript object passed to the `Cesium.Viewer` constructor in [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js)

The primary configuration resides at the top of **[`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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.

```javascript
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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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:

```javascript
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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/config/context.json) containing your overrides:

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

```

Then import and spread this configuration in [`src/main.js`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/src/main.js):

```javascript
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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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`](https://github.com/bilawalsidhu/gods-eye-view/blob/main/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.