Search code examples
javascriptcesiumjs

Standalone Cesium Timeline Widget


Has anyone taken the time to extract the timeline widget from the Cesium app? I'm looking to use the timeline widget without the Dojo dependency. I was able to find a teaser saying that it's possible, but the timeline example isn't the easiest to reverse engineer. Does anyone have an idea of how I can extract the necessary libraries and remove the Dojo dependency?

google groups timeline discussion

cesium timeline demo


Solution

  • The timeline itself (outside of that demo app) does not use Dojo. Here's a sample of how this works. You can Run this demo on Sandcastle.

    function onTimelineScrubfunction(e) {
      var clock = e.clock;
      clock.currentTime = e.timeJulian;
      clock.shouldAnimate = false;
    }
    
    var timeControlsContainer = document.getElementById('timeControlsContainer');
    var clock = new Cesium.Clock();
    var clockViewModel = new Cesium.ClockViewModel(clock);
    var animationContainer = document.createElement('div');
    animationContainer.className = 'cesium-viewer-animationContainer';
    timeControlsContainer.appendChild(animationContainer);
    var animation = new Cesium.Animation(animationContainer, new Cesium.AnimationViewModel(clockViewModel));
    var timelineContainer = document.createElement('div');
    timelineContainer.className = 'cesium-viewer-timelineContainer';
    timeControlsContainer.appendChild(timelineContainer);
    var timeline = new Cesium.Timeline(timelineContainer, clock);
    timeline.addEventListener('settime', onTimelineScrubfunction, false);
    timeline.zoomTo(clock.startTime, clock.stopTime);
    clockViewModel.shouldAnimate = true;
    
    
    window.setInterval(function() {
      clock.tick();
    }, 32);