Loading objects from CZML

CesiumJS
1

Alright, I've seen some previous discussion on this topic, and even borrowed code from one, but it's still not working quite right. Basically, I've got some data in CZML format and I'm trying to use it to create a 3D object on the map.

I've got two divs, a CesiumContainer div and a button div. The CesiumContainer div has the following script:

<script>
var cesiumWidget = new Cesium.Viewer('cesiumContainer');
</script>

and the button div has this script:

<script>
function getShape() {
var czmlSource = new Cesium.CzmlDataSource();
czmlSource.loadUrl("http://i_cut_the_url");
cesiumWidget.dataSources.add(czmlSource);
}
</script>

Looking at the console, I can see that it isn't giving me any errors, and I can also see that the network request is being made successfully. But it still isn't displaying on my globe. Am I missing something?

Also, I tossed my complete code here: http://pastebin.com/zp9u33vz in case that helps any. You'll have to provide your own path to some CZML data if you want to run it on its own, but here's what I've been using:

[{"polygon": {"material": {"solidColor": {"color": {"rgba": [255, 255, 255, 0]}}}, "fill": {"boolean": true}, "vertexPositions": {"cartographicDegrees": [30, 30, 1000, 0, 30, 1000, 30, 0, 1000, 0, 0, 1000]}, "show": {"boolean": true}}, "position": {"cartographicDegrees": [0, 0, 1000]}, "label": {"text": "Square", "fillColor": {"rgba": [255, 0, 0, 0]}, "show": {"boolean": true}}, "id": "Square", "name": "Square"}]

2

...well, that was kind of embarrassing. Turns out the CZML I was being passed had a problem. The alpha transparency was set so that the object was invisible. Changing that made the object appear on-screen.

3

In addition to the alpha problem, the “vertexPositions” property currently needs to be specified on the packet, not on the “polygon” property.

Here’s a working example you can paste into Sandcastle:

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Cesium%20Viewer%20Widget.html&label=Showcases

require([‘Cesium’], function(Cesium) {

“use strict”;

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

var czml = [{

“polygon” : {

“material” : {

“solidColor” : {

“color” : {

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

}

}

},

“show” : {

“boolean” : true

}

},

“vertexPositions” : {

“cartographicDegrees” : [30, 30, 1000, 0, 30, 1000, 30, 0, 1000, 0, 0, 1000]

},

“position” : {

“cartographicDegrees” : [0, 0, 1000]

},

“label” : {

“text” : “Square”,

“fillColor” : {

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

},

“show” : {

“boolean” : true

}

},

“id” : “Square”,

“name” : “Square”

}];

var czmlSource = new Cesium.CzmlDataSource();

czmlSource.load(czml);

viewer.dataSources.add(czmlSource);

Sandcastle.finishedLoading();

});