Using Apache Camel Websockets and Cesium

I'm currently trying to implement Cesium JS with a Java (Not JS) back end. I'm using Apache Camel as the back end which is sending packets over.

To test that the CZML packets are sent over correctly I'm outputting them in a div tag below the Cezium one.

Currently the "Chat" window displays all the incoming data however Cesium keeps throwing this error "The first CZML packet is required to be the document object."

I've tried googling the error and the only solution I could find was to add the line:
var response = JSON.parse(;

However I already have this line in place.

The data that I'm sending across and that get's output in the textbox looks like this:

{ "id" : "PredatorUAV", "position" : { "referenceFrame" : "FIXED", "cartographicDegrees" : [ "-75.5", "40", "100.0" ] }, "point" : { "color" : { "rgba" : [ "0", "0", "255", "1" ] }, "outlineColor" : { "rgba" : [ "0", "0", "255", "1" ] }, "outlineWidth" : 0.0, "pixelSize" : 15.0, "show" : true } }

Any help would be greatly appreciated. I've copied my web page below.

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

        if (!window.WebSocket) {
        alert("WebSocket not supported by this browser");

        function $() { return document.getElementById(arguments[0]); }

    <style type='text/css'>
        div { border: 0px solid black; }
        div#chat { clear: both; width: 80em; height: 60ex; overflow: auto; background-color: #f0f0f0; padding: 4px;
        border: 1px solid black; }
        @import url(../Build/Cesium/Widgets/widgets.css);
<div id="cesiumContainer" class="fullSize"></div>
<div id='chat'></div>
<script type='text/javascript'>
    var viewer = new Cesium.Viewer('cesiumContainer');
    var czmlDataSource = new Cesium.CzmlDataSource();

        var room = {
            join: function(name) {
                var location = "ws://localhost:9090/czml-stream";
                this._ws=new WebSocket(location);

            _onmessage: function(m) {
                if ({
                    // Parse our message data
                    var response = JSON.parse(;

                    czmlDataSource = new Cesium.CzmlDataSource();

                    // This code displays the text bellow
                    var chat=$('chat');
                    var spanText = document.createElement('span');
                    var lineBreak = document.createElement('br');
                    chat.scrollTop = chat.scrollHeight - chat.clientHeight;

            _onclose: function(m) {



Hi ,

The first packet you send to the viewer needs to contain the id and version. I modified your example to include it and your data, so its encompassed by brackets. You could also send it individually as the first item to avoid the brackets I think.

troubleshooting.czml (559 Bytes)

Hi Chris,

That small fix has stopped the errors being thown!

Unfortunately the point's are not appearing on the map though but I'll keep looking into it.

Thank you very much for your help.

You’re welcome. And I think the visibility problem is because of the alpha level you set for the point color. The values in Cesium go from 0-255, so setting it to 1 means its effectively invisible.

Ah right, yep that's fixed it. It's odd that cesium uses 0-255 when html uses 0-1.

Thanks for your help!

So the next problem I'm facing is that the points are being added in addition to the points rather than replacing it.

Using the code above ( I'm processing each response when the websocket gets a message. This means every message has to be it's own document.

When cesium is processing it, another dot is being added rather than replacing it even though they have the same id. (As suggested here )

I'm a little confused as to why this is happening. Any suggestions are welcome.

Your code is creating a new CzmlDataSource for every packet received. You should instead be creating one CzmlDataSource, and processing all packets into that single data source.