Changing colour of Entity using Time-Slider

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

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

var czml = [{
"id" : "document",
"name" : "CZML Custom Properties",
"version" : "1.0",
"clock": {
    "interval": interval,
    "currentTime": time,
    "multiplier": 10
  }
  },
  {
  "id" : "custom_roof",
  "name" : "An roof with custom properties",
  "properties" : {
      "constant_property" : true,
      "co2value" : {
          "number": array
          }
        }

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

         }
       },

  ];
Thanks for any insight...

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/Build/Documentation/Property.html?classFilter=Property

hope that helps,

  • Rachel

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)
at combineGeometry (http://localhost:8080/Source/Workers/combineGeometry.js:11:44)
at http://localhost:8080/Source/Workers/createTaskProcessorWorker.js:56:42

Dood
Do you know what might be causing this?

Thanks,

Jack