How to Disable CesiumJS Timeline and Animation Controls in God’s Eye View

Set timeline: false and animation: false in the Cesium.Viewer constructor options within src/main.js to permanently remove the time slider and playback controls from the default UI.

God’s Eye View is a CesiumJS-based visualization application that provides a streamlined mapping interface by hiding the framework’s default UI chrome. To disable CesiumJS timeline and animation controls, the application configures the viewer instance with specific boolean flags during initialization.

Viewer Configuration in src/main.js

The Cesium viewer is instantiated in src/main.js (lines 94-95) where the configuration object explicitly disables the timeline and animation widgets. This occurs when the new Cesium.Viewer() constructor is called with the target container and an options hash.

Disabling the Timeline and Animation Widgets

The options object passed to the constructor controls which UI components render at startup. According to the God’s Eye View source code, the following properties are set to false:

• timeline: false — Removes the horizontal time scrubber from the bottom of the viewport.
• animation: false — Hides the circular play/pause/step control widget.

// src/main.js – Cesium Viewer initialization
import * as Cesium from 'cesium';

const viewer = new Cesium.Viewer('cesiumContainer', {
  // Turn off Cesium UI chrome
  timeline: false,      // ⬅ disables the time slider
  animation: false,     // ⬅ disables play/pause/step controls
  baseLayerPicker: false,
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  fullscreenButton: false,
  vrButton: false,
  selectionIndicator: false,
  infoBox: false,
  // … other app‑specific options …
});

Because the viewer is built once at startup, these controls are permanently hidden for the lifetime of the application unless the source code is altered and the viewer is recreated.

Re‑enabling Controls for Debugging

If you need to restore the timeline or animation widgets after the viewer has been created—typically for debugging temporal data—you can manually manipulate the CSS display properties of the underlying DOM containers:

// Re‑enable after viewer creation (for debugging only)
viewer.timeline.container.style.display = '';   // show timeline
viewer.animation.container.style.display = ''; // show animation controls

This approach does not require reconstructing the Cesium.Viewer instance and allows you to toggle visibility programmatically during runtime.

Summary

• src/main.js contains the Cesium.Viewer constructor where God’s Eye View disables the default UI.
• Pass timeline: false to remove the bottom time slider.
• Pass animation: false to hide the play/pause/step controls.
• These settings take effect only at initialization; changing them later requires rebuilding the viewer.
• You can temporarily reveal the widgets via container.style.display for debugging purposes without restarting the application.

Frequently Asked Questions

Where is the Cesium viewer initialized in God’s Eye View?

The viewer is created in src/main.js at approximately lines 94-95 using the statement new Cesium.Viewer('cesiumContainer', { ... }). This file serves as the entry point for all Cesium configuration.

Can I hide the timeline while keeping the animation controls?

Yes. Set only timeline: false while omitting the animation property (or setting it to true) in the constructor options. This retains the circular playback widget in the top-left corner while removing the horizontal scrubber at the bottom.

Does disabling these controls affect Cesium’s internal clock?

No. The timeline and animation properties only govern the UI widgets. The underlying viewer.clock continues to run, and you retain full programmatic control over time advancement, pause states, and clock multipliers through the JavaScript API.

How do I toggle the timeline visibility at runtime?

After the viewer is instantiated, you can toggle visibility by accessing the DOM containers directly:

// Toggle timeline visibility
const isHidden = viewer.timeline.container.style.display === 'none';
viewer.timeline.container.style.display = isHidden ? '' : 'none';

This method is useful for debugging but should not be used for production user interfaces, as it bypasses Cesium’s widget lifecycle management.

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