# Changing colour of Entity using Time-Slider

**URL:** <https://community.cesium.com/t/changing-colour-of-entity-using-time-slider/5859>\
**Category:** CesiumJS\
**Created:** [July 26, 2017, 1:32pm UTC](https://community.cesium.com/t/changing-colour-of-entity-using-time-slider/5859 "2017-07-26T13:32:40Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jack\_Metcalfe](https://avatars.discourse-cdn.com/v4/letter/j/df705f/32.png) [@Jack\_Metcalfe](https://community.cesium.com/u/Jack_Metcalfe)\
**Post date:** [July 26, 2017, 1:32pm UTC](https://community.cesium.com/t/changing-colour-of-entity-using-time-slider/5859/1 "2017-07-26T13:32:40Z")

</div>

I'm very new to Cesium and Javascript so please bear with me.

I am trying to add an event listener onTick so that the colour of a roof panel changes colour based on values from within my CZML. However, the roof panel remains white and no errors are thrown. The CO2 value array in the CZML is being pulled in from a google spreadsheet. My code is as follows:

viewer.clock.onTick.addEventListener(function (clock) {  
var rf = dataSource.entities.getById('roof');  
col = roofColour();  
rf.polygon.material = col;

function roofColour() {  
var c;  
var bl = Cesium.Color.fromCssColorString('blue');  
var gr = Cesium.Color.fromCssColorString('green');  
var roof = dataSource.entities.getById('custom\_roof');  
var sample\_co2 = roof.properties.getValue(viewer.clock.currentTime);  
var co2 = sample\_co2.co2value

&nbsp;&nbsp;&nbsp;if (co2 \> 500) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c = bl;  
&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;else {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;c = gr;  
&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;return c;  
}  
});  
And my CZML:

var czml = [{  
"id" : "document",  
"name" : "CZML Custom Properties",  
"version" : "1.0",  
"clock": {  
&nbsp;&nbsp;&nbsp;&nbsp;"interval": interval,  
&nbsp;&nbsp;&nbsp;&nbsp;"currentTime": time,  
&nbsp;&nbsp;&nbsp;&nbsp;"multiplier": 10  
&nbsp;&nbsp;}  
&nbsp;&nbsp;},  
&nbsp;&nbsp;{  
&nbsp;&nbsp;"id" : "custom\_roof",  
&nbsp;&nbsp;"name" : "An roof with custom properties",  
&nbsp;&nbsp;"properties" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"constant\_property" : true,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"co2value" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"number": array  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;},  
&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"id" : "roof",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"name" : "OlympicStadiumRoofSegment",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"description" : "A section of the Olympic Stadium Roof with an air quality sensor installed",  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"polygon" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"positions" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"cartographicDegrees" : [  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0180193, 51.5391786, 44.892484,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0176612, 51.5391213, 47.7758748,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0174239, 51.5393854, 47.7758488,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0173332, 51.5394864, 47.7758388,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0176184, 51.5396248, 44.89244,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0177748, 51.5397008, 43.3117697,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0177942, 51.5396876, 43.2577824,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0178749, 51.5396253, 43.0838257,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0178788, 51.5396223, 43.0758278,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.017946, 51.539564, 42.9708558,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0179916, 51.5395202, 42.9278694,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.018048, 51.5394594, 42.9148781,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0180864, 51.539413, 42.9378777,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0181221, 51.5393657, 42.9858723,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0181554, 51.5393178, 43.0538624,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0181656, 51.5393018, 43.0838576,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0181928, 51.5392588, 43.1648447,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0182199, 51.5392107, 43.2768254,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-0.0180193, 51.5391786, 44.892484  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;]  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"material" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"solidColor" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"color" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"rgba" : 0  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"perPositionHeight" : true

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},

&nbsp;&nbsp;];  
Thanks for any insight...

---

<div class="post-metadata">

**Author:** ![Rachel\_Hwang](https://avatars.discourse-cdn.com/v4/letter/r/d78d45/32.png) [@Rachel\_Hwang](https://community.cesium.com/u/Rachel_Hwang)\
**Post date:** [July 27, 2017, 2:49pm UTC](https://community.cesium.com/t/changing-colour-of-entity-using-time-slider/5859/2 "2017-07-27T14:49:49Z")

</div>

Hi there,

For this you should use the Entity API’s Property system. Here’s an example of how to use it: [http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=de4e010c54af2141b74665c42117ee2c](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&gist=de4e010c54af2141b74665c42117ee2c)

[http://cesiumjs.org/Cesium/Build/Documentation/Property.html?classFilter=Property](http://cesiumjs.org/Cesium/Build/Documentation/Property.html?classFilter=Property)

hope that helps,

- Rachel

---

<div class="post-metadata">

**Author:** ![Jack\_Metcalfe](https://avatars.discourse-cdn.com/v4/letter/j/df705f/32.png) [@Jack\_Metcalfe](https://community.cesium.com/u/Jack_Metcalfe)\
**Post date:** [August 3, 2017, 12:43pm UTC](https://community.cesium.com/t/changing-colour-of-entity-using-time-slider/5859/3 "2017-08-03T12:43:25Z")

</div>

Hi Rachel

Many thanks for the information. I can now integrate the colour change based on my imported sensor values.

However when I am setting the colour I am receiving the following error:

TypeError: Cannot set property ‘geometry’ of undefined  
TypeError: Cannot set property ‘geometry’ of undefined  
at Object.PrimitivePipeline.unpackCombineGeometryParameters ([http://localhost:8080/Source/Scene/PrimitivePipeline.js:616:35](http://localhost:8080/Source/Scene/PrimitivePipeline.js:616:35))  
at combineGeometry ([http://localhost:8080/Source/Workers/combineGeometry.js:11:44](http://localhost:8080/Source/Workers/combineGeometry.js:11:44))  
at [http://localhost:8080/Source/Workers/createTaskProcessorWorker.js:56:42](http://localhost:8080/Source/Workers/createTaskProcessorWorker.js:56:42)

Dood  
Do you know what might be causing this?

Thanks,

Jack