Dynamically Update KML Colors

CesiumJS
1

Is it possible to dynamically update the KML styling? We need to be able to change the colors of specific polygons in real time, and I was wondering how we might do that?

2

Hi there,

Once you’ve read in your KML data, your objects are stored as entities, which can be programmatically manipulated (almost) however you want!

For instance, here’s a code example that loads in some data then changes the entity material properties to change over time: http://cesiumjs.org/Cesium/Apps/Sandcastle/?src=Hello%20World.html&label=Showcases&gist=ccd44ffb8e83710699a92a4a2a99fd31

Hope that helps,

  • Rachel
3

Thank you! That is very helpful! It would be useful if there was a simple method to change this, like polygon.setColor(0x0), but this will work!

4

If it’s a one-time change to a new constant value, you can just do 'polygon.material = Color.RED". But setting the color that way ever frame will lead to poor performance with large amounts of data.

5

So you recommend something like

$.each(viewer.dataSources.get(0).entities.values, function(i, value) {
  if(value.polygon) value.polygon.material = Cesium.Color.fromRandom();
});

for setting the values for a lot of data?

6

Hi there,

That logic will work – Matt’s point is just that this may be inefficient if you’re trying to do this every frame. Depending on your desired behavior, there’s a lot of different ways to update your entities material. I’d recommend looking into the Property System.

Here’s a code example showcasing different material changes over time. If you just need to change the color once though, your code should work.

Here’s also example code that updates color randomly at set intervals,

Hope that helps,

  • Rachel
7

We will be updating our polygons about once every 15 minutes, so I think it should be fine.