CZML Streaming Error

CesiumJS
1

Hi all,

I am new to Cesium and I am trying to learn streaming.

I have been following the samples that I found on this forum, but I keep getting one error or another. I have the following javascript which is mostly lifted from some samples on the forum:

var viewer = new Cesium.Viewer('cesiumContainer');

//Create new CZML datasource
var czmlStream = new Cesium.CzmlDataSource();
var czmlStreamUrl = ‘http://localhost/stream/CZMLStream.php’;

//set up EventSource
var czmlEventSource = new EventSource(czmlStreamUrl); ##ERROR HERE "Event source not defined"

//Listen for EventSource data coming across as event: czml
czmlEventSource.addEventListener('czml', function(czmlUpdate) {
  //process the 'data:' coming across as JSON into the datasource
  czmlStream.process(JSON.parse(czmlUpdate.data));
}, false); ## ERROR HERE "SyntaxError: JSON.parse: expected property name or '}' at line 2 column 2 of the JSON data (on line 14)"

//put the datasource into Cesium
viewer.dataSources.add(czmlStream);

The Data stream is coming from a php page. It appears that the stream is open and working (though possibly malformed??)

The event string is (with the variables filled in of course)):

event:czml
data: {
data: {
data: "id" : "document",
data: "name" : "CZML Point",
data: "version" : "1.0"
data: },
data: {
data: "id" : "Test Drone",
data: "name": "RJP Test Drone",
data: "position" : {
data: "cartographicDegrees" : [' . $loc['lon'] . ', ' . $loc['lat'] . ', ' . $loc['alt'] . ']
data: },
data: "point": {
data: "color": {
data: "rgba": [100,0, 200, 255]
data: },
data: "outlineColor": {
data: "rgba": [200,0, 200, 255]
data: },
data: "pixelSize": {
data: "number": 10
data: }
data: }
data: }
data:}

Any help would be appreciated.

2

It looks like your outermost thing in the CZML is a JSON object rather than a JSON array. It has to be a JSON array. So do this instead:

[
  {
    "id" : "document",
    "name" : "CZML Point",
    "version" : "1.0"
  },
  {
    "id" : "Test Drone",
    "name": "RJP Test Drone",
    "position" : {
      "cartographicDegrees" : [' . $loc['lon'] . ', ' . $loc['lat'] . ', ' . $loc['alt'] . ']
    },
    "point": {
      "color": {
        "rgba": [100,0, 200, 255]
      },
      "outlineColor": {
        "rgba": [200,0, 200, 255]
      },
      "pixelSize": {
        "number": 10
      }
    }
  }
]