# czml stream of dynamically updated polylineCollection

**URL:** <https://community.cesium.com/t/czml-stream-of-dynamically-updated-polylinecollection/4147>\
**Category:** CesiumJS\
**Created:** [May 24, 2016, 4:55am UTC](https://community.cesium.com/t/czml-stream-of-dynamically-updated-polylinecollection/4147 "2016-05-24T04:55:57Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![ksj.animator](https://avatars.discourse-cdn.com/v4/letter/k/7ea924/32.png) [@ksj.animator](https://community.cesium.com/u/ksj.animator)\
**Post date:** [May 24, 2016, 4:55am UTC](https://community.cesium.com/t/czml-stream-of-dynamically-updated-polylinecollection/4147/1 "2016-05-24T04:55:57Z")

</div>

Hi,

I would like to draw a dynamically updating path with Cesium using CZML. I currently have a working solution with a dynamically updating point.

I am trying to implement a solution using a polylineCollection and adding polylines to it (code included below).

Where am I going wrong with this?

Thanks,  
Kris

//--------------------------------------------------  
// CZML packet for one satellite tracked position  
// Send as a path.  
//--------------------------------------------------  
function createMsg1()  
{  
&nbsp;&nbsp;&nbsp;&nbsp;var entity = {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"id" : coordinates[0],  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"description" : animalName + ', tag ID: ' + coordinates[0] + '\n',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"availability" : dateTime\_start + '/' + dateTime\_end,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"polylineCollection" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"polyline" : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"positions" : {  
&nbsp;&nbsp;&nbsp;&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;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;coordinates[3], coordinates[4], coordinates[5]  
&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;"show" : true,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"width" : 2,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"resolution" : 60,  
&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;&nbsp;&nbsp;&nbsp;"solidColor" : {  
&nbsp;&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;"rgba" : thisTagColour  
&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;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;};  
&nbsp;&nbsp;&nbsp;return JSON.stringify(entity);  
}

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [May 24, 2016, 4:31pm UTC](https://community.cesium.com/t/czml-stream-of-dynamically-updated-polylinecollection/4147/2 "2016-05-24T16:31:18Z")

</div>

Hello,

Can you please explain what’s not working with your code? I don’t see any obvious problems from the code snippet you posted.

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![ksj.animator](https://avatars.discourse-cdn.com/v4/letter/k/7ea924/32.png) [@ksj.animator](https://community.cesium.com/u/ksj.animator)\
**Post date:** [May 25, 2016, 12:09am UTC](https://community.cesium.com/t/czml-stream-of-dynamically-updated-polylinecollection/4147/3 "2016-05-25T00:09:38Z")

</div>

Hi Hannah,  
Thanks for the reply. The problem with the code is that the JSON streams to the browser OK but does not actually draw anything. I was streaming through the same code as for the dynamically updating point and so I assumed that the error was with my CZML for the polyline. Here's some more code and JSON output:

Streaming Code (streams at particular time stamps in the data):  
function finishDraw(res)  
{  
&nbsp;&nbsp;// dateTime\_start is global  
&nbsp;&nbsp;var timeDifference = ;  
&nbsp;&nbsp;  
&nbsp;&nbsp;for (var i = 0; i \< intervalList.length; i++)  
&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var d1 = new Date(intervalList[i]);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var d2 = new Date(intervalList[i+1]);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (d2 \> d1)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;timeDifference[i] = d2 - d1;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;}  
&nbsp;&nbsp;  
&nbsp;&nbsp;function streamMsg(t)  
&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res.write('id: ' + t + '\n');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (position.length \> 0)  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;res.write('data:' + createMsg1() + '\n\n');  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;}

&nbsp;&nbsp;var startDate = new Date(dateTime\_start);  
&nbsp;&nbsp;var startMilliseconds = startDate.getTime();

&nbsp;&nbsp;var tick = startMilliseconds;

&nbsp;&nbsp;var myFunction = function(){  
&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(interval);  
&nbsp;&nbsp;&nbsp;&nbsp;if (timeDifference.length \> -1)  
&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;tick = tick + timeDifference.shift();  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;streamMsg(tick);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;interval = setInterval(myFunction, tick);  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;else  
&nbsp;&nbsp;&nbsp;&nbsp;{  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;streamMsg(1); // last message  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clearInterval(interval);  
&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;}  
&nbsp;&nbsp;var interval = setInterval(myFunction, tick);

}

Resulting JSON packets:  
{"id":"document","version":"1.0"}

{"id":824,"description":"White Shark, tag ID: 824\n","availability":"2012-10-10T00:00:00Z/2013-05-20T00:00:00Z","polylineCollection":{"polyline":{"positions":{"cartographicDegrees":[152.348,-32.722,0]},"show":true,"width":2,"resolution":60,"material":{"solidColor":{"color":{"rgba":[211.2,90.9,179.2,255]}}}}}}  
{"id":824,"description":"White Shark, tag ID: 824\n","availability":"2012-10-10T00:00:00Z/2013-05-20T00:00:00Z","polylineCollection":{"polyline":{"positions":{"cartographicDegrees":[152.31300000000002,-32.548,0]},"show":true,"width":2,"resolution":60,"material":{"solidColor":{"color":{"rgba":[211.2,90.9,179.2,255]}}}}}}  
etc...