# Add polylines dynamically with time

**URL:** <https://community.cesium.com/t/add-polylines-dynamically-with-time/16978>\
**Category:** CesiumJS\
**Created:** [January 20, 2022, 3:10pm UTC](https://community.cesium.com/t/add-polylines-dynamically-with-time/16978 "2022-01-20T15:10:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![NancyLSnyder](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/nancylsnyder/32/3476_2.png) [@NancyLSnyder](https://community.cesium.com/u/NancyLSnyder)\
**Post date:** [January 20, 2022, 3:10pm UTC](https://community.cesium.com/t/add-polylines-dynamically-with-time/16978/1 "2022-01-20T15:10:58Z")

</div>

I am trying to add a polyline to viewer every minute. The polylines are constant. Once added they will not change. The number will increase over time. Example: If you added a polyline every minute for an hour, you would have 60 polylines at the end. I want to animate this, so if you scrolled the timeline from start to end, you would see the lines being added.  
Previously I have animated moving entities. But the lines are moving, I just want to animate them being added to viewer over time. Not sure how to do this. This is what I have tried.

```auto
 viewer.clock.startTime = modelStart.clone();
 viewer.clock.stopTime = modelStop.clone();
 viewer.clock.currentTime = modelStart.clone();
 viewer.clock.multiplier = 1;
 viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
 viewer.clock.shouldAnimate = true;
 viewer.timeline.zoomTo(modelStart, modelStop);
 
 const avail = new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
   start: modelStart,
   stop: modelStop,
 })]);
...
 In loop for each new time with new linePosition 
 ...
      const positionWithTime = new Cesium.SampledPositionProperty();
      const linePosition = Cesium.Cartesian3.fromDegreesArrayHeights([
        lon1, lat1, alt1, lon2, lat2, alt2
      ]);
      newTime = Cesium.JulianDate.fromDate(time);
      positionWithTime.addSample(newTime, linePosition);
      viewer.clock.currentTime = newTime;
 
     // This draws lines without timeline
/*
      viewer.entities.add({
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
             lon1, lat1, alt1, lon2, lat2, alt2
          ]),
          material: Cesium.Color.RED,
        }
      });
*/

      // Trying to draw a new line that will be added over time
      // I tried this but no lines show up
      viewer.entities.add({
	 availability: avail,
         polyline: {
            positions: positionWithTime,
            material: Cesium.Color.RED,
        }
      });
      // I also tried a callback, lines show up but not associated with time
      viewer.entities.add({
        availability: avail,
        polyline: {
          positions: new Cesium.CallbackProperty((time) => {
             const linePosition = Cesium.Cartesian3.fromDegreesArrayHeights([
               lon1, lat1, alt1, lon2, lat2, alt2
             ]);
             return linePosition;
          }, false),
          material: Cesium.Color.RED,
        }
      });
 end of loop

```

Any hints or suggestions?  
Thanks in advance

---

<div class="post-metadata">

**Author:** ![Jacky](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jacky/32/7686_2.png) [@Jacky](https://community.cesium.com/u/Jacky)\
**Post date:** [January 20, 2022, 3:43pm UTC](https://community.cesium.com/t/add-polylines-dynamically-with-time/16978/2 "2022-01-20T15:43:48Z")

</div>

Welcome @NancyLSnyder !  
What kind of animation you are looking for? I’m not very clear about your requirement. Would you please explain it more with the help of reference link of sandcastle or by any drawing?

- Regards,

---

<div class="post-metadata">

**Author:** ![NancyLSnyder](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/nancylsnyder/32/3476_2.png) [@NancyLSnyder](https://community.cesium.com/u/NancyLSnyder)\
**Post date:** [January 20, 2022, 4:49pm UTC](https://community.cesium.com/t/add-polylines-dynamically-with-time/16978/3 "2022-01-20T16:49:01Z")

</div>

When you move the timeline from start to finish, you will see a new polyline show up at each minute. Once the polyline added, it does not change. The only thing that changes, is the viewer has more polylines.

---

<div class="post-metadata">

**Author:** ![Jacky](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/jacky/32/7686_2.png) [@Jacky](https://community.cesium.com/u/Jacky)\
**Post date:** [January 20, 2022, 5:46pm UTC](https://community.cesium.com/t/add-polylines-dynamically-with-time/16978/4 "2022-01-20T17:46:45Z")

</div>

Thanks for the reply. Please create a sandcastle example for better understanding. 🍻

---

<div class="post-metadata">

**Author:** ![tzgardner](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/tzgardner/32/7836_2.png) [@tzgardner](https://community.cesium.com/u/tzgardner)\
**Post date:** [January 20, 2022, 6:38pm UTC](https://community.cesium.com/t/add-polylines-dynamically-with-time/16978/5 "2022-01-20T18:38:21Z")

</div>

I’m currently doing something similar. Maybe this will help . . .

I’m using a CallbackProperty function in the position property of the Polyline which updates the position each timestep. My entities are kept in an array (entityList).

```auto
polyline:{
            positions: new Cesium.CallbackProperty(()=>{return points;}, false),

```

“points” is an array of Cesium.Cartesian3.fromDegrees(lon, lat, alt);

On a change of state, I create the new Polyline and start with the previous point.

```auto
entityList[name].polyPath = createTrailPolyline();//Overwrites old line
entityList[name].polyPath.points.push(entityList[received.name].prevPosition);
entityList[name].polyPath.entity.polyline.material.color = myNewColor;

```

```auto
//This happens each timestep 
entityList[received.name].polyPath.points.push(position);
entityList[received.name].prevPosition = position;

```

This is what I’m doing. My add entity call is inside the function createTrailPolyline(). Whenever I want to create a new polyline I just call my function. Then each timestep I just update position by calling push.

---

<div class="post-metadata">

**Author:** ![david](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/david/32/3484_2.png) [@david](https://community.cesium.com/u/david)\
**Post date:** [February 15, 2022, 9:25pm UTC](https://community.cesium.com/t/add-polylines-dynamically-with-time/16978/6 "2022-02-15T21:25:24Z")

</div>

> [@NancyLSnyder](#):
>
> add a polyline to viewer every minute. The

If you have all the data already and just want them to incrementally be shown on the globe as time progresses, one method of achieving this would be to set the availability value on the entities accordingly. So, you could add all of them initially and then they would slowly be shown as their availability is reached.

Another way would be to set an interval for their show property.

---

<div class="post-metadata">

**Author:** ![Anand17](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/anand17/32/12429_2.png) [@Anand17](https://community.cesium.com/u/Anand17)\
**Post date:** [April 19, 2023, 10:03am UTC](https://community.cesium.com/t/add-polylines-dynamically-with-time/16978/7 "2023-04-19T10:03:51Z")

</div>

Thank you David. This worked for me:)