Adding second czml packet to datasource. help wanted please

1. A concise explanation of the problem you’re experiencing.

I have developed an app which uses Cesium to show flight traces for gliders. I have got it working for one trace and it works really well. I now need to add a second glider trace so that they can be compared. I have czml files which are time coordinated so that they start at zero seconds, and provide the actual start time and time band at run time. The first trace always show perfectly, but the second trace is ignored.

The second czml packet is generating the error “The first CZML packet is required to be the document object.” in the Chrome js console, which, to be frank and being new to cesium, I have no idea what it means. I got the first trace working following the Sandcastle example which shows the hang glider flight trace, and try as I might I am having trouble following the API documentation. Great for individual statements, but it doesn’t help with this issue.

The full error is:

t {name: “RuntimeError”, message: “The first CZML packet is required to be the document object.”, stack: “Error↵ at new t (http://localhost:59484/Scripts…calhost:59484/Scripts/Cesium/Cesium.js:554:11146)”}

message

:

“The first CZML packet is required to be the document object.”

name

:

“RuntimeError”

stack

:

“Error↵ at new t (http://localhost:59484/Scripts/Cesium/Cesium.js:517:29185)↵ at Tt (http://localhost:59484/Scripts/Cesium/Cesium.js:554:8811)↵ at Function.It._processCzml (http://localhost:59484/Scripts/Cesium/Cesium.js:554:12095)↵ at At (http://localhost:59484/Scripts/Cesium/Cesium.js:554:10513)↵ at http://localhost:59484/Scripts/Cesium/Cesium.js:554:10266↵ at i.then (http://localhost:59484/Scripts/Cesium/Cesium.js:516:27615)↵ at e (http://localhost:59484/Scripts/Cesium/Cesium.js:516:27328)↵ at Pt (http://localhost:59484/Scripts/Cesium/Cesium.js:554:10243)↵ at It.load (http://localhost:59484/Scripts/Cesium/Cesium.js:554:11894)↵ at Function.It.load (http://localhost:59484/Scripts/Cesium/Cesium.js:554:11146)”

proto

:

Error

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

I am developing in .Net/MVC so rather than showing the view razor code I have copied the following from the js console sources. The traces I have truncated to just the beginning and end portions as they are 25,000 points.

var czml = [{

“id”: “document”,

“name”: “CZML Path”,

“version”: “1.0”,

“clock”: {

“interval”: “2017-01-08T00:49:21Z/2017-01-08T04:43:08Z”,

“currentTime”: “2017-01-08T00:49:21Z”,

“multiplier”: 10

}

}, {

“id”: “path”,

“name”: “718_UC - Copy - Copy.igc”,

“description”: “718_UC - Copy - Copy.igc”,

“availability”: “2017-01-08T00:49:21Z/2017-01-08T04:43:08Z”,

“path”: {

“material”: {

“polylineOutline”: {

“color”: {

“rgba”: [102, 255, 255, 255]

},

“outlineColor”: {

“rgba”: [0, 0, 0, 255]

},

“outlineWidth”: 2

}

},

“width”: 5,

“leadTime”: 10,

//“trailTime”: 1000,

“resolution”: 5

},

“position”: {

“epoch”: “2017-01-08T00:49:21Z”,

“cartographicDegrees”: [ 0,169.942566666667,-44.55215,1987,1,169.942233333333,-44.5519666666667,1983,2,169.941883333333,-44.5518,1980,3,169.941516666667,-44.5516333333333,1977,4,169.94115,-44.5514666666667,1973,5,169.940766666667,-44.5513166666667,1969,6,169.940366666667,-44.5511666666667,1964,7,169.939966666667,-44.5510166666667,1957,8,169.93955,-44.5508833333333,1949,9,169.939116666667,-44.5507333333333,…14025,169.984016666667,-44.4529333333333,656,14027,169.98345,-44.4539666666667,659]

}

}];

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));

if (true) {

var czmlP2 = [{

“id”: “document2”,

“name”: “CZML Path2”,

“version”: “1.0”,

“clock”: {

“interval”: “2017-01-08T00:49:21Z/2017-01-08T04:43:08Z”,

“currentTime”: “2017-01-08T00:49:21Z”,

“multiplier”: 10

}

}, {

“id”: “path2”,

“name”: “718_UC - Copy - Copy.igc”,

“description”: “718_UC - Copy - Copy.igc”,

“availability”: “2017-01-08T00:49:21Z/2017-01-08T04:43:08Z”,

“path”: {

“material”: {

“polylineOutline”: {

“color”: {

“rgba”: [255, 120, 0, 255]

},

“outlineColor”: {

“rgba”: [0, 0, 0, 255]

},

“outlineWidth”: 2

}

},

“width”: 5,

“leadTime”: 10,

//“trailTime”: 1000,

“resolution”: 5

},

“position”: {

“epoch”: “2017-01-08T00:49:21Z”,

“cartographicDegrees”: [ 0,169.944783333333,-44.5553333333333,2200,1,169.944233333333,-44.5553166666667,2198,2,169.943666666667,-44.5553,2194,3,169.943116666667,-44.5553,2192,4,169.94255,-44.5552833333333,2189,5,169.941983333333,-44.5552833333333,2188,6,169.941416666667,…-44.4512333333333,781,12832,169.9867,-44.45185,778,12833,169.986633333333,-44.45245,775,12834,169.9866,-44.4530666666667,773,12835,169.986583333333,-44.4537,769]

}

}];

viewer.dataSources.add(Cesium.CzmlDataSource.load(czmlP2));

}

var entity = viewer.entities.add({

position: Cesium.Cartesian3.fromDegrees(169.942566666667,-44.55215),

ellipse: {

semiMinorAxis: 1.0,

semiMajorAxis: 1.0,

material: Cesium.Color.BLUE.withAlpha(0.5)

}

});

viewer.zoomTo(viewer.entities);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

See 1. above

4. The Cesium version you’re using, your operating system and browser.

Cesium 1-36, Windows 10 Chrome

I have just found a post which fixes the problem. I give the second trace the same id as the first and it now works.

Hi Brian,

Glad you got it working! Just in case you need it, we have a CZML Guide and specifically a page on Packets.

Thanks!

Gabby

Hi Gabby,

Thanks for responding. I had stumbled across the CZML link which helped, but at the time I didn’t realise that I was using packets(!) - very new to this.

The packets link would have been really useful so I’ll revisit how I have coded it.

I am new to Cesium, and the app which uses it is coded in .NET/MVC 5/C# using razor code for the view, which calls the Cesium scripts.

There is precious little information about MVC and Cesium, do you think it worth me posting my view code to the dev blog as a guide to others? If you don’t know MVC the view is basically the HTML page body.

I cobbled it together using the Sandcastle demos, but it was hard finding out how to incorporate it into the MVC schema, and the only other MVC code I found was a demo, so not really that useful.

The app is for glider pilots, taskpilot.org . I will have the Cesium pages on the live site in a few days, in testing it looks brilliant and pilots who have viewed the test site are blown away.

I’m very impressed with Cesium, if only it was easier to understand!

Cheers

Brian