How to make an InfoBox pop up on demand

I know that when you extend viewer to add viewerEntityMixin, it will display a pop-up with everything that's in the description of a billboard in czml. At first, I was adding polylines to the czml and reference the two IDs in the "positions" object, but I was never able to create a click event for the polyline to display given information.

I then decided to remove the polylines from the czml, and create them within the javascript itself. This allows me to catch a click event when I click on a polyline, but I can't figure out how to make an InfoBox come up with a custom "description" once i've clicked a polyline.

Any help would be greatly appreciated, thanks!

David

Hi,

It’s a bit of a hack, but you can make the info popup display whatever you like by creating a fake entity and setting it as the viewer’s selected entity. For example:

var entity = new Cesium.Entity(‘Title to put in the infobox’);

entity.description = {

getValue : function() {

return ‘HTML to display in the infobox’;

}

};

viewer.selectedEntity = entity;

Kevin

Thanks Kevin, I'll take a hack, that worked great!

Since I want to be able to click on the polylines individually and have them highlight, or change colors, etc., would you say that creating a polyline collection object is the best way? I personally like how clean it would be to just integrate the polyline json object into the czml data source, but that seems to bind the polyline to the billboard automatically. Therefore, when I click on a polyline, it's no different than if I'd clicked on the billboard, and I can't manipulate the polyline individually.

Again, thanks for any advise you have.

David

Hi David,

I’m not sure if I’m understanding you completely, but if you want the polyline and billboard to be separately selectable, why not just put them in separate objects in the CZML? You can avoid duplicating the positions by using CZML reference properties.

Sadly there doesn’t seem to be any documentation on reference properties in CZML, but the pull requests that added support are here:

https://github.com/AnalyticalGraphicsInc/czml-writer/pull/66

https://github.com/AnalyticalGraphicsInc/cesium/pull/1774

Kevin

Ahh, of course...Just make separate polyline objects in czml! I was following the format in simple.czml where the polylines/references are part of the same object along with the billboard and label. I'll give that a shot, thanks!

David