Porting over GE to Cesium using network links with KML files

Miceli_Carlo_J · May 30, 2017, 2:34pm

Hi Rachel,

I ran this in your sandcastle app. If you let it run for an hour or so the browser will hang and

Eventually run out of memory on Chrome. I think it will fail quicker with Mozilla.

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Billboard%20and%20Label.html&label=CZML

Link is above and I deleted the JS code and pasted in the below code.

Let me know what you think.

Thanks,

Carlo

var czml =

[

{

“id” : “document”,

“name” : “TEST”,

“version” : “1.0”

},

{

“id” : “trk1”,

“name” : “1 {477088000}”,

“position” : {“cartographicDegrees” : [-82.392379761,27.857116699,53.2013]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

},

“description”: " <table border=“1”><th colspan=“3”>TRACK Item Value Units \

Latitude 27.7578 deg WGS 84 Longitude -82.523 \ deg WGS 84 Speed 11.0 knots Heading \ 11.7 deg Kind AIS Age 00:03:33 \ duration Last Update 0x02010001 SensorId Last Update 2017-05-17T12:03:08.529Z "

},

{

“id” : “trk2”,

“name” : “2 {477058800}”,

“position” : {“cartographicDegrees” : [-82.513336182,27.787147522,12.1227]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk3”,

“name” : “3 {366390000}”,

“position” : {“cartographicDegrees” : [-82.523002625,27.757831573,10.2413]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk4”,

“name” : “4 {367168230}”,

“position” : {“cartographicDegrees” : [-82.629875183,27.776863098,0.0922988]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk5”,

“name” : “5 {366967050}”,

“position” : {“cartographicDegrees” : [-82.558769226,27.633367538,22.9583]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk6”,

“name” : “6 {367003260}”,

“position” : {“cartographicDegrees” : [-82.559936523,27.634202957,22.5965]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk7”,

“name” : “7 {366341000}”,

“position” : {“cartographicDegrees” : [-82.574996948,27.685241699,10.0483]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk8”,

“name” : “8 {CARNIVAL INSPIRATION}”,

“position” : {“cartographicDegrees” : [-82.444549561,27.848119736,34.3424]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk9”,

“name” : “9 {636091540}”,

“position” : {“cartographicDegrees” : [-82.56124115,27.632991791,22.7631]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk10”,

“name” : “10 {367078740}”,

“position” : {“cartographicDegrees” : [-82.441169739,27.81936264,31.8315]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk11”,

“name” : “11 {367168440}”,

“position” : {“cartographicDegrees” : [-82.633415222,27.760282516,0.115857]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk12”,

“name” : “12 {567035000}”,

“position” : {“cartographicDegrees” : [-82.999794006,27.591011047,130.836]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk13”,

“name” : “13 {567308000}”,

“position” : {“cartographicDegrees” : [-82.428703308,27.907411575,51.4946]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},

{

“id” : “trk14”,

“name” : “14 {309319000}”,

“position” : {“cartographicDegrees” : [-82.41242981,27.797065735,39.4494]},

“point” :

{

“color”: {“rgba”:[255,255,255,255]},

“outlineColor”: {“rgba”:[255,0,0,255]},

“outlineWidth”: 4,

“pixelSize”: 2

}

},];

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var nIntervId = setInterval(updateTracks(),1000);

updateTracks();

function updateTracks()

{

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));

}

Miceli_Carlo_J · May 30, 2017, 8:18pm

Hi Rachel,

I ran this in your sandcastle app. If you let it run for an hour or so the browser will hang and

Eventually run out of memory on Chrome. I think it will fail quicker with Mozilla.

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Billboard%20and%20Label.html&label=CZML

Link is above and I deleted the JS code and pasted in the below code.

Let me know what you think.

Thanks,

Carlo

var czml =

[

{

“id” : “document”,

“name” : “TEST”,

“version” : “1.0”

},

{

“id” : “trk1”,

“name” : “1 {477088000}”,

“position” : {“cartographicDegrees” : [-82.392379761,27.857116699,53.2013]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  },

“description”: " <table border=“1”><th colspan=“3”>TRACK Item Value Units \

                <tr><td>Latitude</td><td align=\"right\">27.7578</td><td>deg WGS 84</td></tr><tr><td>Longitude</td><td align=\"right\">-82.523</td> \

                <td>deg WGS 84</td></tr><tr><td>Speed</td><td align=\"right\">11.0</td><td>knots</td></tr><tr><td>Heading</td> \

                <td align=\"right\">11.7</td><td>deg</td></tr><tr><td>Kind</td><td colspan=\"2\">AIS</td></tr><tr><td>Age</td><td align=\"right\">00:03:33</td>

\

                <td>duration</td></tr><tr><td>Last Update</td><td>0x02010001</td><td>SensorId</td></tr><tr><td>Last Update</td><td colspan=\"2\">2017-05-17T12:03:08.529Z</td></tr></b></table>"

},

{

“id” : “trk2”,

“name” : “2 {477058800}”,

“position” : {“cartographicDegrees” : [-82.513336182,27.787147522,12.1227]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk3”,

“name” : “3 {366390000}”,

“position” : {“cartographicDegrees” : [-82.523002625,27.757831573,10.2413]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk4”,

“name” : “4 {367168230}”,

“position” : {“cartographicDegrees” : [-82.629875183,27.776863098,0.0922988]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk5”,

“name” : “5 {366967050}”,

“position” : {“cartographicDegrees” : [-82.558769226,27.633367538,22.9583]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk6”,

“name” : “6 {367003260}”,

“position” : {“cartographicDegrees” : [-82.559936523,27.634202957,22.5965]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk7”,

“name” : “7 {366341000}”,

“position” : {“cartographicDegrees” : [-82.574996948,27.685241699,10.0483]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk8”,

“name” : “8 {CARNIVAL INSPIRATION}”,

“position” : {“cartographicDegrees” : [-82.444549561,27.848119736,34.3424]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk9”,

“name” : “9 {636091540}”,

“position” : {“cartographicDegrees” : [-82.56124115,27.632991791,22.7631]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk10”,

“name” : “10 {367078740}”,

“position” : {“cartographicDegrees” : [-82.441169739,27.81936264,31.8315]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk11”,

“name” : “11 {367168440}”,

“position” : {“cartographicDegrees” : [-82.633415222,27.760282516,0.115857]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk12”,

“name” : “12 {567035000}”,

“position” : {“cartographicDegrees” : [-82.999794006,27.591011047,130.836]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk13”,

“name” : “13 {567308000}”,

“position” : {“cartographicDegrees” : [-82.428703308,27.907411575,51.4946]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},

{

“id” : “trk14”,

“name” : “14 {309319000}”,

“position” : {“cartographicDegrees” : [-82.41242981,27.797065735,39.4494]},

“point” :

  {

     "color": {"rgba":[255,255,255,255]},

     "outlineColor": {"rgba":[255,0,0,255]},

     "outlineWidth": 4,

     "pixelSize": 2

  }

},];

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var nIntervId = setInterval(updateTracks(),1000);

updateTracks();

function updateTracks()

{

viewer.dataSources.add(Cesium.CzmlDataSource.load(czml));

}

Miceli_Carlo_J · May 31, 2017, 12:01pm

I Ran the same test on firefox and it lasted only 30 minutes or so.

Here is what I got.

Miceli_Carlo_J · June 1, 2017, 5:53pm

Hi Rachel,

Were you able to catch the issue we are having with our example ?

Happens with Chrome,Firefox and IE.

Let me know.

Thank you

Carlo

Rachel_Hwang · June 5, 2017, 4:05pm

Hi Carlo,

Apologies – I’m still having trouble reproducing your issue. Please paste your code into a sandcastle example, make sure that it runs, then click the “Share” button on the toolbar. This will save your code as a gist and generate a link to it that I can run.

I suspect there’s some sort of memory leak in your code which we’ll hopefully be able to debug together. Internet Explorer has some known issues with texture memory, but other browsers should be fine.

Thanks,

Rachel

Miceli_Carlo_J · June 5, 2017, 4:50pm

Hi Rachel,

Here it is… Select Run (F8) and run.

http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=5fa1cfe568621bf54bf85e94a829988d

Let it run for a while in firefox for example… Just let it sit . There is a 1 second interval that will keep redrawing.

I have given this to multiple colleagues and it crashes on all of their different browsers machines.

Let me know what you find out.

Thanks,

Carlo

Rachel_Hwang · June 5, 2017, 8:17pm

Hi Carlo,

I believe the culprit, as Scott mentioned earlier in this thread is that you were adding a new datasource each time. You can just call load on an existing datasource to update it rather than adding a new datasource to the viewer. See this example: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=8ba5cd9007c969080b176ad857148a2e

Best,

Rachel

Miceli_Carlo_J · June 5, 2017, 8:28pm

Hi Rachel,

Thank you for the example. I will run the example as well to see what happens.

I tried this and I was not seeing my tracks moving to new location. I think my syntax was not the same.

I will double check my syntax on my real program and let you know what I find.

Thanks,

Carlo

Miceli_Carlo_J · June 7, 2017, 11:46am

Hi Rachel,

Ok I am running some tests on the example you sent me to see if there still are memory issues…

I run the CZML example you sent me and click on one of the tracks on the map and a description box comes up and stays up even after all intervals

If I convert this example to KML with a box from one of you examples… it runs but when you click on the box with your

Mouse the description box comes up on the map but then clears at the one second interval.

This does not happen with czml but it does with kml.

Here is the example

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=8ba5cd9007c969080b176ad857148a2e

Is there a reason why a KML data source at interval time clears the displayed box on the map from when you click on the source on the map but

With CZML data source this behavior does not happen

You can use my example from before (link below) to see this differences in behavior.

Let me know what you think

Thanks,

Carlo

Miceli_Carlo_J · June 7, 2017, 11:49am

Sorry…

Here is the shared link

http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=f9d28503e82ca94571236b6a206b83d7

Miceli_Carlo_J · June 7, 2017, 11:50am

Sorry here is the shared link

http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=f9d28503e82ca94571236b6a206b83d7

Miceli_Carlo_J · June 7, 2017, 12:11pm

Here is a better point.

http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=0aa3e1f2794962a52505c98237f0b553

Click on point… Description comes up… Then clears at interval time with KML data source.

Behavior does not clear displayed description with CZML data source

Miceli_Carlo_J · June 12, 2017, 11:14am

Hi Did anyone get a chance to look at the links below that show the difference of the description popup clears at

Every interval for KML but not for CZML ?

Is this a design flaw in KML ?

Please let me know ?

Thanks,

Carlo

Matt_Amato · June 19, 2017, 7:29pm

Just to close the loop, I replied to the other thread on this subject: https://groups.google.com/d/msg/cesium-dev/mBfPYXSySl0/5NR4O6GBBAAJ so let’s continue the conversation there.

Miceli_Carlo_J · June 26, 2017, 12:36pm

Hi.
With my continue port of GE to Cesium I have some other Google Earth Plugin procedures I need to port.
Google.earth.addEventListener (“click”)… type is KmlPlaceMark.
Does Cesium have an equivalent of this function for KML ?
Thank you,
Carlo

Rachel_Hwang · June 26, 2017, 2:16pm

Hi,

If you need to implement any sort of on click behavior, check out ScreenSpaceEventType: http://cesiumjs.org/Cesium/Build/Documentation/ScreenSpaceEventType.html

Here’s a code example for mouse movement handler : http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=All

Hope that helps,

Rachel

Miceli_Carlo_J · June 26, 2017, 2:52pm

Hi…

This helps … to be more specific I am trying to port this code over.

Any examples would help using KML placemark.

Thanks,

Carlo

function addPlacemarkEventListener() {

//This code captures clicks on placemarks and places data within the left hand pane of web page

// Listen for mouse click on the window (look specifically for point placemarks).

var croName;

var croDesc;

var placemark;

var hookNum = 0;

google.earth.addEventListener(ge.getWindow(), ‘click’, function(event) {

if ( event.getTarget().getType() == ‘KmlPlacemark’ &&

( event.getTarget().getGeometry().getType() == ‘KmlPoint’ || event.getTarget().getGeometry().getType()
== ‘KmlMultiGeometry’ )

){

event.preventDefault();

placemark = event.getTarget();

croName = placemark.getName();

croDesc = placemark.getDescription();

if (!croDesc == “”) {

hookNum = hookNum + 1;

if (hookNum > 3)

{

hookNum = 1;

}

// Add to Cro Based upon Hook Number

if (hookNum ==1)

{

document.getElementById(“trk1Id”).innerHTML = "Id: " + croName;

document.getElementById(“trk1Details”).innerHTML = croDesc;

croObjects[0] = croName;

}

else if (hookNum == 2)

{

document.getElementById(“trk2Id”).innerHTML = "Id: " + croName;

document.getElementById(“trk2Details”).innerHTML = croDesc;

croObjects[1] = croName;

}

else

{

document.getElementById(“trk3Id”).innerHTML = "Id: " + croName;

document.getElementById(“trk3Details”).innerHTML = croDesc;

croObjects[2] = croName;

}

if (event.getTarget().getGeometry().getType() == ‘KmlMultiGeometry’ ) {

//this most Likely ADSB point therefore create point based placemark other downstream processing
can handle

//alert (“detected multiGeometry”);

placemark = ge.createPlacemark(’’);

var point = ge.createPoint(’’);

//var destLat = event.getTarget().getAbstractView().getLatitude();

//var destLon = event.getTarget().getAbstractView().getLongitude();

//var destAlt = event.getTarget().getAbstractView().getAltitude() * 0.3048;

//alert ("this is the values " + destLat + " " + destLon + " " + destAlt );

point.setLatitude(event.getTarget().getAbstractView().getLatitude());

point.setLongitude(event.getTarget().getAbstractView().getLongitude());

// NOTE UNLIKE OTHER DATA FROM AFT & GE THIS ALTITUDE DATA IS IN FEET THEREFORE MUST CONVERT
TO METERS!!!

point.setAltitude(event.getTarget().getAbstractView().getAltitude() * 0.3048);

placemark.setGeometry(point)

}

// always add placemarks points for ruler calculations regardless of ruler style

if (placemarkRulerEnabled || pointRulerEnabled) {

addRulerPoint(placemark);

}

if (cameraViewEnabled) {

pointCamera(placemark);

objectTrackedByCamera = croName;

}

else {

//not a placemark or kml point however if pointRulerEnabled then we want to get the lat/lon/alt
of the point(s)

// selected to compute the distance

if (pointRulerEnabled) {

// get point geometry from window

// Create the placemark and add it to Earth.

placemark = ge.createPlacemark(’’);

var point = ge.createPoint(’’);

point.setLatitude(event.getLatitude());

point.setLongitude(event.getLongitude());

point.setAltitude(event.getAltitude());

placemark.setGeometry(point);

if (rulerIndex==0) {

var tempId = ‘s’ + numRulers;

placemark.setName(tempId);

currentKmlObjects[tempId] = placemark;

}

else {

var tempId = ‘e’ + numRulers;

placemark.setName(tempId);

currentKmlObjects[tempId] = placemark;

}

ge.getFeatures().appendChild(placemark);

addRulerPoint (placemark);

}

if (cameraViewEnabled) {

// get point geometry from window

// Create placemark holder

var tempPlacemark = ge.createPlacemark(’’);

var point = ge.createPoint(’’);

point.setLatitude(event.getLatitude());

point.setLongitude(event.getLongitude());

point.setAltitude(event.getAltitude());

tempPlacemark.setGeometry(point);

pointCamera(tempPlacemark);

objectTrackedByCamera = “”;

}

});

}

On Behalf Of Rachel Hwang

Miceli_Carlo_J · June 28, 2017, 2:48pm

With the continue Google Earth Port… I am having style issues with the entities name. They are blurred and hard to read especially zoomed out.

Here is a placemark in our KML file.

4 {DEBBIE LOU}0.55264.8730.65./trackAIS.png-82.629890442,27.776836395,0.0917636<![CDATA[

27.7768AIS

TRACK
Item	Value	Units
Latitude	deg WGS 84
Longitude	-82.6299	deg WGS 84
Speed	0.0	knots
Heading	264.9	deg
Kind
Age	01:29:21	duration
Last Update	0x02010001	SensorId
Last Update	2017-06-28T14:46:36.663Z

]]>

Any ideas would greatly be appreciated. Thank you

Carlo

On Behalf Of Rachel Hwang

Miceli_Carlo_J · July 5, 2017, 7:37pm

Ok. Since I have not heard on this… I am assuming this is how Cesium renders KML files and this is normal ?

Rachel_Hwang · July 7, 2017, 2:55pm

Hi Carlo,

You can adjust the styling of your KML placemarks once they’ve been loaded as Entities in Cesium. The code will be very similar to this: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=GeoJSON%20and%20TopoJSON.html&label=Showcases

You can change the label properties however you’d like by accessing entity.label. see here for styling examples: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Labels.html&label=All

Hope that helps,

Rachel