A Gantt-style timeline widget for visualizing temporal events organized
in rows or categories. Provides interactive pan, zoom, and selection
capabilities with full Cesium clock synchronization.
This is a wrapper around the Svelte-based GanttTimeline component that
provides a Timeline-compatible API for use in the Cesium Viewer.
| Name | Type | Description | |||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
container |
Element | string | The DOM element or ID that will contain the widget | |||||||||||||||||||||||||||||||||||||||||||||
clock |
Clock | The Cesium Clock instance to synchronize with | |||||||||||||||||||||||||||||||||||||||||||||
options |
Object |
optional
Optional configuration
|
Example:
const gantt = new GanttTimeline('container', viewer.clock, {
rows: [
{ id: 'sat1', label: 'Satellite Alpha' },
{ id: 'sat2', label: 'Satellite Beta' }
],
events: [
{
id: 'pass1',
rowId: 'sat1',
start: new Date('2024-01-15T10:00:00Z'),
end: new Date('2024-01-15T10:15:00Z'),
label: 'Ground Pass',
color: '#4CAF50'
}
],
styles: {
nowIndicatorColor: '#ff0000',
nowIndicatorWidth: 3
}
});Members
Gets the parent container.
Gets or sets whether the gantt body is expanded (visible).
When expanded, the gantt body with rows and events is shown below the header.
When collapsed, only the timeline header with dates is visible.
readonly timeChangeEvent : Event
Gets the time change event that fires when the user scrubs the timeline.
Methods
Adds an event listener.
Compatible with Cesium Timeline API.
| Name | Type | Default | Description |
|---|---|---|---|
type |
string | Event type ('settime') | |
listener |
function | Event listener callback | |
useCapture |
boolean |
false
|
optional Whether to use capture (ignored) |
Appends category events to the timeline.
| Name | Type | Description |
|---|---|---|
items |
Object | Array.<Object> | Events to append |
Clears all events from the timeline.
Collapses the gantt timeline to show only the header with dates.
Destroys the widget.
Expands the gantt timeline to show the body with rows and events.
Returns true if this object was destroyed; otherwise, false.
Returns:
True if destroyed, false otherwise
Removes an event listener.
Compatible with Cesium Timeline API.
| Name | Type | Default | Description |
|---|---|---|---|
type |
string | Event type | |
listener |
function | Event listener callback | |
useCapture |
boolean |
false
|
optional Whether to use capture (ignored) |
Replaces all category events immediately, bypassing Svelte prop batching.
| Name | Type | Description |
|---|---|---|
categoryEvents |
Array.<Object> | Category event definitions |
Resizes the widget to fit its container.
Enables or disables auto-scaling of the timeline range based on the clock multiplier.
When enabled, the visible time range adjusts proportionally to the multiplier,
maintaining a consistent visual animation rate regardless of playback speed.
| Name | Type | Description |
|---|---|---|
enabled |
boolean | Whether to enable auto-scaling |
baseTimeSpanSeconds |
number | optional Optional base time span in seconds at 1x multiplier (default: 60) |
Example:
// Enable with default 60-second base span
gantt.setAutoScaleWithMultiplier(true);
// Enable with custom 30-second base span
gantt.setAutoScaleWithMultiplier(true, 30);
// At 1x multiplier, shows 30 seconds
// At 10x multiplier, shows 300 seconds
// At 100x multiplier, shows 3000 seconds
Sets the category events for the timeline.
| Name | Type | Description |
|---|---|---|
categoryEvents |
Array.<Object> | Category event definitions |
Sets the events for the timeline.
| Name | Type | Description |
|---|---|---|
events |
Array.<Object> | Event definitions |
Sets the rows for the timeline.
| Name | Type | Description |
|---|---|---|
rows |
Array.<Object> | Row definitions |
Sets the style options for the timeline.
Allows customization of colors, sizes, and other visual properties.
| Name | Type | Description |
|---|---|---|
styles |
GanttTimelineStyles | Style customization options |
Example:
gantt.setStyles({
nowIndicatorColor: '#ff0000',
nowIndicatorWidth: 3,
containerBackground: 'rgba(0, 0, 0, 0.95)',
gridLineColor: 'rgba(255, 255, 255, 0.2)'
});
Toggles the expanded/collapsed state of the gantt timeline.
Returns:
The new expanded state
Synchronizes the visible timeline state with the attached Cesium clock.
The Svelte timeline already observes the provided clock directly, so the
compatibility surface used by Viewer only needs a no-op implementation.
Zooms the timeline to show the specified time range.
Compatible with Cesium Timeline API.
| Name | Type | Description |
|---|---|---|
startTime |
JulianDate | Start of the time range |
stopTime |
JulianDate | End of the time range |