Extremely simple CZML example

CesiumJS
1

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:

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

2

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

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.

3

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

4

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

5

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

This is perfect. Thank you.

7

Here’s an updated example:

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

–Ed.