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(m.data);
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.
<html>
<head>
<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]); }
</script>
<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; }
</style>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
</style>
</head>
<body>
<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();
viewer.dataSources.add(czmlDataSource);
var room = {
join: function(name) {
this._username=name;
var location = "ws://localhost:9090/czml-stream";
this._ws=new WebSocket(location);
this._ws.onmessage=this._onmessage;
this._ws.onclose=this._onclose;
},
_onmessage: function(m) {
if (m.data){
// Parse our message data
var response = JSON.parse(m.data);
czmlDataSource = new Cesium.CzmlDataSource();
czmlDataSource.process(response);
viewer.dataSources.add(czmlDataSource);
// This code displays the text bellow
var chat=$('chat');
var spanText = document.createElement('span');
spanText.className='text';
spanText.innerHTML=m.data;
var lineBreak = document.createElement('br');
chat.appendChild(spanText);
chat.appendChild(lineBreak);
chat.scrollTop = chat.scrollHeight - chat.clientHeight;
}
},
_onclose: function(m) {
this._ws=null;
}
};
room.join("Testing");
</script>
</body>
</html>