viewer timeline needle position not updating after new clock range and current time set

CesiumJS
1

What I have noticed is that if you have the viewer clock update its time range and currentTime, the timeline needle will not update its position after calling timeline.zoomTo().

The use case seems to be the following:

1. update the viewer clock startTime and stopTime.
2. update the timeline zoom using the new times used for the viewer clock start and stop time using: timeline.zoomTo(startTime, stopTime)
3. update the viewer clock currentTime to be that of the new startTime.

The time is displayed correctly on the timeline clock, however the timeline needle/scrubber doesn't update its position to reflect the new current clock time.
One thing to note is that if you use the mouse wheel on the timeline after this, the needle does jump to the correct position. So it only seems to be an issue during the initial setting of time.

My best guess would be because its in the process of redrawing the timeline dom element due to calling timeline.zoomTo(). Thus it cannot update the css position properly for the timeline needle.

I will share the sandcastle example below to demonstrate the issue.

/* !!~~ SANDCASTLE START ~~!! */

var viewer = new Cesium.Viewer('cesiumContainer');
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;

function first() {
    Sandcastle.declare(first);
    var start = "2017-06-08T11:00:00.000Z";
    var stop = "2017-08-08T11:00:00.000Z";
    console.log("first: "+ start);

    viewer.clock.startTime = new Cesium.JulianDate.fromIso8601(start);
    viewer.clock.stopTime = new Cesium.JulianDate.fromIso8601(stop);
    //set the new current time
    viewer.clock.currentTime = new Cesium.JulianDate.fromIso8601(start);
    //zoom the map timeline to show full range
    viewer.timeline.zoomTo(
        viewer.clock.startTime,
        viewer.clock.stopTime
    );
}

function second() {
    Sandcastle.declare(second);

    var start = "2017-04-01T01:00:00.000Z";
    var stop = "2017-08-08T11:00:00.000Z";
    console.log("second: "+ start);
    
    viewer.clock.startTime = new Cesium.JulianDate.fromIso8601(start);
    viewer.clock.stopTime = new Cesium.JulianDate.fromIso8601(stop);
    //set the new current time
    viewer.timeline.zoomTo(
        viewer.clock.startTime,
        viewer.clock.stopTime
    );
    
    viewer.clock.currentTime = new Cesium.JulianDate.fromIso8601(start);
    
}

Sandcastle.addToolbarMenu([{
    text : 'first',
    onselect : function() {
        first();
        Sandcastle.highlight(first);
    }
},{
    text : 'second',
    onselect : function() {
        second();
    }
}]);

/* !!~~ SANDCASTLE END ~~!! */

2

Hi Chris,

To update the needle, call timeline.updateFromClock() before the timeline.ZoomTo(). Here’s your updated code example.

Sorry if that was not obvious – out timeline code is quite old a due for an update.

Thanks for sharing that example code! By the way, just so you don’t have to copy paste in the future, if you create a Sandcastle example you can click the “Share” button at the top of the page to save your code as a gist and generate a link to it that’s easier to share.

In case you’re interested, here are a bunch of other helpful Sandcastle tips: http://cesiumjs.org/tutorials/Sandcastle-Tutorial/

Hope that helps,

  • Rachel
3

Thank you very much Rachel.

This was the method I was looking for.
I see it was available when looking at available methods just not in the documentation.
Regardless though, thanks for the help and tip for the share of sandcastles.