only one datasource clock tracked

I’m not sure if this is a bug or intended functionality. When I add a czml datasource, I can set the datasource clock and the viewer clock and animation widget update accordingly. But if I add a geojson datasource, the viewer clock stops updating from the czml. I found that the viewer tracks the geojson datasource instead of the czml datasource that I want. I thought the viewer would track both datasource clocks, but thats not the case. I’ve tried changing the order in which the datasources are added, but that makes no difference. Is there a way to force the viewer to track the datasource clock that I’m updating, so I can update the clock through czml?

Here’s a sandcastle example. Uncomment the last line to see the clock update stop working:

var czml = [{

"id" : "document",

"name" : "document",

"version" : "1.0"

}, {

"id" : "dynamicPolygon",

"name": "Dynamic Polygon with Intervals",

"availability":"2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",

"polygon": {

    "positions": [{

        "interval" : "2012-08-04T16:00:00Z/2012-08-04T16:20:00Z",

        "cartographicDegrees" : [

            -50, 20, 0,

            -50, 40, 0,

            -40, 40, 0,

            -40, 20, 0

        ]

    }, {

        "interval" : "2012-08-04T16:20:00Z/2012-08-04T16:40:00Z",

        "cartographicDegrees": [

            -35, 50, 0,

            -35, 10, 0,

            -45, 30, 0

        ]

    }, {

        "interval" : "2012-08-04T16:40:00Z/2012-08-04T17:00:00Z",

        "cartographicDegrees" : [

            -35, 50, 0,

            -40, 50, 0,

            -40, 20, 0,

            -35, 20, 0

        ]

    }],

    "material": {

        "solidColor": {

            "color": [{

                "interval" : "2012-08-04T16:00:00Z/2012-08-04T16:30:00Z",

                "rgbaf" : [1, 0, 1, 1]

            }, {

                "interval" : "2012-08-04T16:30:00Z/2012-08-04T17:00:00Z",

                "rgbaf" : [0, 1, 1, 1]

            }]

        }

    }

}

}, {

"id" : "california",

"name" : "static california with set availability",

"availability":"2012-08-04T16:10:00Z/2012-08-04T16:30:00Z",

"polygon" : {

    "positions" : {

        "cartographicDegrees" : [

            -120, 42, 50000,

            -124, 42, 30500,

            -124.5, 40, 3000,

            -123, 38, 0,

            -122, 36, 0,

            -120.8, 34.2, 0,

            -118, 34, 0,

            -117, 32.2, 6000,

            -115.5, 32.5, 1530,

            -115, 35, 1530,

            -120, 39, 30500

        ]

    },

    "material" : {

        "solidColor" : {

            "color" : {

                "rgba" : [255, 0, 0, 150]

            }

        }

    },

    "perPositionHeight" : true,

    "extrudedHeight": 0

}

}, {

"id" : "pennsylvania",

"name" : "static pennsylvania with set availability",

"availability":"2012-08-04T16:20:00Z/2012-08-04T16:40:00Z",

"polygon" : {

    "positions" : {

        "cartographicDegrees" : [

            -75.5, 42, 0,

            -79.8, 42, 0,

            -79.9, 42.3, 0,

            -80.5, 42, 0,

            -80.5, 39.8, 0,

            -75.7, 39.8, 0,

            -74.5, 40.2, 0,

            -75.2, 40.8, 0,

            -74.7, 41.3, 0

        ]

    },

    "material" : {

        "solidColor" : {

            "color" : {

                "rgba" : [0, 255, 0, 150]

            }

        }

    },

    "height" : 50000,

    "extrudedHeight": 200000

}

}];

var viewer = new Cesium.Viewer(‘cesiumContainer’);

viewer.entities.add({

position : Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),

billboard :{

    image : '../images/Cesium_Logo_overlay.png'

}

});

var czmlSource = new Cesium.CzmlDataSource();

viewer.dataSources.add(czmlSource.load(czml));

function changeTimeline1() {

var czmlUpdate = [{

    "id" : "document",

    "name" : "document",

    "version" : "1.0",

    "clock": {

        "interval": "2012-08-04T15:00:00Z/2012-08-04T17:00:00Z",

        "currentTime": "2012-08-04T15:00:00Z",

        "multiplier": 900

    }

}];

czmlSource.process(czmlUpdate);

}

function changeTimeline2() {

var czmlUpdate = [{

    "id" : "document",

    "name" : "document",

    "version" : "1.0",

    "clock": {

        "interval": "2012-08-04T16:00:00Z/2012-08-04T17:00:00Z",

        "currentTime": "2012-08-04T16:00:00Z",

        "multiplier": 1

    }

}];

czmlSource.process(czmlUpdate);

}

Sandcastle.addToolbarMenu([{

text : 'Change to timeline 1',

onselect : function() {

    changeTimeline1();

    //Sandcastle.highlight(changeTimeline);

}

}, {

text : 'Change to timeline2',

onselect : function() {

    changeTimeline2();

    //Sandcastle.highlight(changeTimeline);

}

}]);

//viewer.dataSources.add(Cesium.GeoJsonDataSource.load(’…/…/SampleData/ne_10m_us_states.topojson’));

``

Thanks for the great code example! That made this really easy to reproduce.
This seems like a bug to me. I can’t think of a good reason why you’re seeing this behavior.

I’ve written up an issue on our GitHub so we can look into this: https://github.com/AnalyticalGraphicsInc/cesium/issues/4163

Best,

Hannah

Thanks for the quick reply!

If anyone else needs a temporary fix, here’s what I’ve done:

czmlDataSource.process(czml).then(function () {

if (czml[“id”] === “document”) {

viewer.clock.currentTime = czmlDataSource.clock.currentTime;

viewer.clock.startTime = czmlDataSource.clock.startTime;

viewer.clock.stopTime = czmlDataSource.clock.stopTime;

viewer.clock.clockRange = czmlDataSource.clock.clockRange;

viewer.clock.clockStep = czmlDataSource.clock.clockStep;

viewer.clock.multiplier = czmlDataSource.clock.multiplier;

viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime);

}

});

``