Updating a CZML 'description' upon opening the InfoBox

CesiumJS
1

I am working with CZML source data. I would like to update the InfoBox ‘description’ with continually evolving information and images from a server. I have picked and pulled at some forum threads but have not found how to grab hold of the czml ‘description’ data and have it display the updated description on each InfoBox update.

As always in appreciation of any suggestions… Erik

For sandcastling, upon selecting “Boston” I’d like to see “Boston’s current temperature is…” instead of “Boston is a city…”.

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

var czml =
[{“id” : “document”,
“version” : “1.0”
},{“id” : “Boston”,
“label”:{“text”:“Boston”},
“position”:{“cartographicDegrees”:[-71.0589,42.3601,0]},
“description”:“Boston is a city…”,
},{“id” : “New York City”,
“label”:{“text”:“New York”},
“description”:“New York is a city…”,
“position”:{“cartographicDegrees”:[-74.0059,40.7127,0]},
}];

var promise = Cesium.CzmlDataSource.load(czml);
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);

function pickEntity(viewer, windowPosition) {
var picked = viewer.scene.pick(windowPosition);
if (defined(picked)) {
var id = Cesium.defaultValue(picked.id, picked.primitive.id);
… ADD BOSTON DESCRIPTION UPDATE (‘description’ : “Boston’s current temperature is…”:wink:
if (id instanceof Cesium.Entity) {

  return id;
}

}
return undefined;
};

``

2

Hello,

Setting the description property should update it. Here is an example:

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

handler.setInputAction(function(click) {

var pickedObject = scene.pick(click.position);

if (Cesium.defined(pickedObject)) {

pickedObject.id.description = ‘New description’;

}

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

``

pickedObject.id is the entity.

Best,

Hannah

3

Perfect Hannah. Thank you.

Completed sandcastle for those curious:

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

//------ create CZML ------
var czml =
[{“id” : “document”,
“version” : “1.0”
},{“id” : “Boston”,
“label”:{“text”:“Boston”},
“position”:{“cartographicDegrees”:[-71.0589,42.3601,0]},
“description”:“Boston is a city…”,
},{“id” : “New York City”,
“label”:{“text”:“New York”},
“description”:“New York is a city…”,
“position”:{“cartographicDegrees”:[-74.0059,40.7127,0]},
}];

var promise = Cesium.CzmlDataSource.load(czml);
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
//------ Get the array of entities
var entities = dataSource.entities.values;
//------ Loop entities
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var name = entity.label;
entity.label.translucencyByDistance = new Cesium.NearFarScalar(100000,1.0,500000,0.0);
}
}).otherwise(function(error){
//------ Display error
window.alert(error);
});

//------ Use SSEH to update to current description

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {
var pickedObject = scene.pick(click.position);
if (Cesium.defined(pickedObject)) {
pickedObject.id.description = ‘The current temperature is…’;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

``