# how to change ColorMaterialProperty

**URL:** <https://community.cesium.com/t/how-to-change-colormaterialproperty/1801>\
**Category:** CesiumJS\
**Created:** [December 24, 2014, 8:57pm UTC](https://community.cesium.com/t/how-to-change-colormaterialproperty/1801 "2014-12-24T20:57:38Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![thomlep](https://avatars.discourse-cdn.com/v4/letter/t/43a26b/32.png) [@thomlep](https://community.cesium.com/u/thomlep)\
**Post date:** [December 24, 2014, 8:57pm UTC](https://community.cesium.com/t/how-to-change-colormaterialproperty/1801/1 "2014-12-24T20:57:38Z")

</div>

Hello,

I'm getting an exception when I try to change the color of a path element of an Entity imported from dragged CZML. Cesium version 1.4.

if( this.material instanceof Cesium.ColorMaterialProperty ) {  
&nbsp;&nbsp;if( this.material.color ) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// CODE BLOWS-UP HERE  
&nbsp;&nbsp;this.material.color = Cesium.Color.RED;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// THIS ALSO BLOWS-UP  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.material = new $wnd.Cesium.ColorMaterialProperty( $wnd.Cesium.Color.RED );  
&nbsp;&nbsp;}  
}

where \*this\* is PathGraphics object from an Entity.

What are the errors of my ways?

Thanks for advice!

Here's the CZML segment:

\<snip\>  
},  
"path":{"material":{"solidColor":{"color":{"rgba":[255,255,100,100]}}},  
"width":[{ "number":1.0}],  
"show":[{"interval": "2014-09-03T11:45:10Z/2014-09-03T12:16:24Z","boolean":true}]  
},  
\<snip\>

---

<div class="post-metadata">

**Author:** ![thomlep](https://avatars.discourse-cdn.com/v4/letter/t/43a26b/32.png) [@thomlep](https://community.cesium.com/u/thomlep)\
**Post date:** [December 29, 2014, 2:05pm UTC](https://community.cesium.com/t/how-to-change-colormaterialproperty/1801/2 "2014-12-29T14:05:19Z")

</div>

I'm getting this exception: Would appreciate any shared successes. Thanks

An error occurred while rendering. Rendering has stopped.  
undefined  
TypeError: undefined is not a function  
TypeError: undefined is not a function  
&nbsp;&nbsp;&nbsp;&nbsp;at Function.i.getValueOrClonedDefault ([http://localhost:8080/sdat/js/cesium\_1.4/Cesium.js:392:28514](http://localhost:8080/sdat/js/cesium_1.4/Cesium.js:392:28514))  
&nbsp;&nbsp;&nbsp;&nbsp;at l.getValue ([http://localhost:8080/sdat/js/cesium\_1.4/Cesium.js:393:1636](http://localhost:8080/sdat/js/cesium_1.4/Cesium.js:393:1636))  
&nbsp;&nbsp;&nbsp;&nbsp;at Function.o.getValue ([http://localhost:8080/sdat/js/cesium\_1.4/Cesium.js:397:29330](http://localhost:8080/sdat/js/cesium_1.4/Cesium.js:397:29330))

---

<div class="post-metadata">

**Author:** ![thomlep](https://avatars.discourse-cdn.com/v4/letter/t/43a26b/32.png) [@thomlep](https://community.cesium.com/u/thomlep)\
**Post date:** [December 29, 2014, 3:25pm UTC](https://community.cesium.com/t/how-to-change-colormaterialproperty/1801/3 "2014-12-29T15:25:16Z")

</div>

GOT IT! The right way:  
this.material = Cesium.ColorMaterialProperty.fromColor(Cesium.Color.RED);

where 'this' is the PathGraphics object.

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [December 29, 2014, 3:26pm UTC](https://community.cesium.com/t/how-to-change-colormaterialproperty/1801/4 "2014-12-29T15:26:13Z")

</div>

If you aren’t in complete control of the data (such as loading from an external file) you’ll always want to assign a new property rather than try and re-use the existing one. Here’s a simple example that loads a CZML file and assigns random colors to all entity paths when the button is clicked. You can paste the below directly into Sandcastle: [http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html](http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html)

var gallery = ‘…/…/SampleData/’;

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var czmlDataSource = new Cesium.CzmlDataSource();

czmlDataSource.loadUrl(gallery + ‘simple.czml’);

viewer.dataSources.add(czmlDataSource);

Sandcastle.addToolbarButton(‘Change colors’, function() {

var entities = czmlDataSource.entities.entities;

for(var i = 0, len = entities.length; i \< len; i++) {

var entity = entities[i];

if(entity.path) {

entity.path.material = Cesium.ColorMaterialProperty.fromColor(Cesium.Color.fromRandom({ alpha: 1.0 }));

}

}

});

---

<div class="post-metadata">

**Author:** ![Matt\_Amato](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/matt_amato/32/1993_2.png) [@Matt\_Amato](https://community.cesium.com/u/Matt_Amato)\
**Post date:** [December 29, 2014, 3:28pm UTC](https://community.cesium.com/t/how-to-change-colormaterialproperty/1801/5 "2014-12-29T15:28:31Z")

</div>

I’ll also add that we are in the process of making the high-level API much easier to use. Keep your eye on [https://github.com/AnalyticalGraphicsInc/cesium/pull/2315](https://github.com/AnalyticalGraphicsInc/cesium/pull/2315), which I expect to be in the Feb. 1st release