# Loading objects from CZML

**URL:** <https://community.cesium.com/t/loading-objects-from-czml/1051>\
**Category:** CesiumJS\
**Created:** [March 7, 2014, 7:10pm UTC](https://community.cesium.com/t/loading-objects-from-czml/1051 "2014-03-07T19:10:47Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![reppaken](https://avatars.discourse-cdn.com/v4/letter/r/b77776/32.png) [@reppaken](https://community.cesium.com/u/reppaken)\
**Post date:** [March 7, 2014, 7:10pm UTC](https://community.cesium.com/t/loading-objects-from-czml/1051/1 "2014-03-07T19:10:47Z")

</div>

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](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"}]

---

<div class="post-metadata">

**Author:** ![reppaken](https://avatars.discourse-cdn.com/v4/letter/r/b77776/32.png) [@reppaken](https://community.cesium.com/u/reppaken)\
**Post date:** [March 7, 2014, 7:28pm UTC](https://community.cesium.com/t/loading-objects-from-czml/1051/2 "2014-03-07T19:28:04Z")

</div>

...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.

---

<div class="post-metadata">

**Author:** ![Scott\_Hunter](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/scott_hunter/32/2006_2.png) [@Scott\_Hunter](https://community.cesium.com/u/Scott_Hunter)\
**Post date:** [March 7, 2014, 7:35pm UTC](https://community.cesium.com/t/loading-objects-from-czml/1051/3 "2014-03-07T19:35:07Z")

</div>

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](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();

});