# Extremely simple CZML example

**URL:** <https://community.cesium.com/t/extremely-simple-czml-example/524>\
**Category:** CesiumJS\
**Created:** [June 6, 2013, 5:57pm UTC](https://community.cesium.com/t/extremely-simple-czml-example/524 "2013-06-06T17:57:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![linden.kyle](https://avatars.discourse-cdn.com/v4/letter/l/f6c823/32.png) [@linden.kyle](https://community.cesium.com/u/linden.kyle)\
**Post date:** [June 6, 2013, 5:57pm UTC](https://community.cesium.com/t/extremely-simple-czml-example/524/1 "2013-06-06T17:57:09Z")

</div>

Does anyone have an examples for how to get data from an extremely simple CZML loaded onto a CesiumWidget (preferably not the viewer). I'm basically just trying to draw some polygons on the map. Nothing would change based on time. For example, here's the CZML I'd like to render:

[  
&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"id": "MyTestData",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"polygon": {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"material": {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"solidColor": {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"color": {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"rgba": [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;255,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;165,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;255  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"vertexPositions": {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"cartographicDegrees": [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-80.3982608081762,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;40.7897431538943,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-50.3906446069755,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;40.7897431538943,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-80.3906446069755,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10.7821269526935,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-80.3982608081762,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20.7821269526935,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-60.3982608081762,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30.7897431538943,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;}  
]

---

<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:** [June 6, 2013, 5:58pm UTC](https://community.cesium.com/t/extremely-simple-czml-example/524/2 "2013-06-06T17:58:55Z")

</div>

Take a look at the “Client CZML” Sandcastle example:

[http://cesium.agi.com/Cesium/Apps/Sandcastle/?src=Client%20CZML.html](http://cesium.agi.com/Cesium/Apps/Sandcastle/?src=Client%20CZML.html)

I was able to paste your CZML into the editor as the value of var czml and run it with F8.

---

<div class="post-metadata">

**Author:** ![linden.kyle](https://avatars.discourse-cdn.com/v4/letter/l/f6c823/32.png) [@linden.kyle](https://community.cesium.com/u/linden.kyle)\
**Post date:** [June 6, 2013, 6:07pm UTC](https://community.cesium.com/t/extremely-simple-czml-example/524/3 "2013-06-06T18:07:35Z")

</div>

Thanks. Is there any way I can do with without the viewer though?

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [June 6, 2013, 6:12pm UTC](https://community.cesium.com/t/extremely-simple-czml-example/524/4 "2013-06-06T18:12:24Z")

</div>

The easiest way for you would probably be the new DataSource abstraction. I’ll post some code in a few minutes.

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [June 6, 2013, 6:28pm UTC](https://community.cesium.com/t/extremely-simple-czml-example/524/5 "2013-06-06T18:28:47Z")

</div>

Here is a complete example which shows your CZML. If you copy and paste this as a replacement to HelloWorld.html, you should be good to go. You’ll probably have to tweak the paths to Cesium.js and CesiumWidget.css depending on if you are using a release or git version of Cesium. Let me know if you have problems getting this running.

```
<title>Hello World!</title>

<script type="text/javascript" src="../Build/Cesium/Cesium.js"></script>

<style>

  @import url(../Build/Cesium/Widgets/CesiumWidget/CesiumWidget.css);

  body {

    padding: 0;

    margin: 0;

    overflow: hidden;

  }

</style>

```

---

<div class="post-metadata">

**Author:** ![linden.kyle](https://avatars.discourse-cdn.com/v4/letter/l/f6c823/32.png) [@linden.kyle](https://community.cesium.com/u/linden.kyle)\
**Post date:** [June 6, 2013, 6:47pm UTC](https://community.cesium.com/t/extremely-simple-czml-example/524/6 "2013-06-06T18:47:28Z")

</div>

This is perfect. Thank you.

---

<div class="post-metadata">

**Author:** ![Ed\_Mackey](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/ed_mackey/32/2226_2.png) [@Ed\_Mackey](https://community.cesium.com/u/Ed_Mackey)\
**Post date:** [September 26, 2013, 6:59pm UTC](https://community.cesium.com/t/extremely-simple-czml-example/524/7 "2013-09-26T18:59:10Z")

</div>

Here’s an updated example:

[http://cesium.agi.com/Cesium/Apps/Sandcastle/index.html?src=CZML.html](http://cesium.agi.com/Cesium/Apps/Sandcastle/index.html?src=CZML.html)

–Ed.