Search code examples
javascriptcesiumjs

How to toggle visibility property (billboard.show) of a CZML entity's billboard?

According to the Cesium API, to toggle the visibility of an asset's billboard (or label) you can simply assign the billboard.show property to false. When I attempted to do this, Cesium would error with

An error occurred while rendering.  Rendering has stopped.
TypeError: undefined is not a function
...

This discussion from the cesium-dev google group includes some example code to toggle billboard visibility on/off. The same code does not work if you attempt show = false on an entity from CZML (this example does not use CZML).

Here is what I tried

var asset = loadedCZML.entities.getById(id);
asset.billboard.show = false; //Error!

(loadedCZML is a Cesium.CzmlDataSource)

Solution

  • The API doc's don't mention that the show property of your entity might not always be a simple boolean property (as the API describes).

    When working with a CzmlDataSource's entity, the show property is considered a TimeIntervalCollectionProperty (at least it was with my CZML).

    All properties in Cesium must implement a getValue function, and when you go to set your show = false, the setter for the property is unable to apply false to a TimeIntervalCollectionProperty and instead replaces the entire property with a simple value of false.

    The error undefined is not a function is a result of the cesium render call attempting to call getValue() on our show property. Regardless, the fix is simple:

    Instead of this:

    asset.billboard.show = false; //error

    Do this:

    asset.billboard.show = new Cesium.ConstantProperty(false);

    PS: This applies for other Cesium properties, see the following example:

    entity.billboard.image = pinBuilder.fromColor(Cesium.Color.CRIMSON, 48); //error

//do this instead
entity.billboard.image = new Cesium.ConstantProperty(pinBuilder.fromColor(Cesium.Color.CRIMSON, 48).toDataURL());