# Dynamic polyline

**URL:** <https://community.cesium.com/t/dynamic-polyline/4962>\
**Category:** CesiumJS\
**Created:** [December 28, 2016, 5:58pm UTC](https://community.cesium.com/t/dynamic-polyline/4962 "2016-12-28T17:58:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mark.nebrat](https://avatars.discourse-cdn.com/v4/letter/m/c89c15/32.png) [@mark.nebrat](https://community.cesium.com/u/mark.nebrat)\
**Post date:** [December 28, 2016, 5:58pm UTC](https://community.cesium.com/t/dynamic-polyline/4962/1 "2016-12-28T17:58:52Z")

</div>

Hello  
I'm trying to change the end of polyline position to current mouse cursor  
position on MOUSE\_MOVE event (in the same way as in Picking example we change position for a label), but the line changes position very very slowly.  
May be I do something wrong?

The code:

var viewer = new Cesium.Viewer('cesiumContainer', {  
&nbsp;&nbsp;&nbsp;&nbsp;selectionIndicator : false,  
&nbsp;&nbsp;&nbsp;&nbsp;infoBox : false  
});

var scene = viewer.scene;  
var handler;

Sandcastle.addDefaultToolbarButton('Show Cartographic Position on Mouse Over', function() {  
&nbsp;&nbsp;&nbsp;&nbsp;var entity = viewer.entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;label : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;show : false  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;});  
&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;var redLine = viewer.entities.add({  
&nbsp;&nbsp;&nbsp;&nbsp;name : 'Red line on the surface',  
&nbsp;&nbsp;&nbsp;&nbsp;polyline : {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;positions : Cesium.Cartesian3.fromDegreesArray([-75, 35,  
&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;-125, 35]),  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width : 1,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;material : Cesium.Color.RED  
&nbsp;&nbsp;&nbsp;&nbsp;}  
});

&nbsp;&nbsp;&nbsp;&nbsp;// Mouse over the globe to see the cartographic position  
&nbsp;&nbsp;&nbsp;&nbsp;handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);  
&nbsp;&nbsp;&nbsp;&nbsp;handler.setInputAction(function(movement) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (cartesian) {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var cartographic = Cesium.Cartographic.fromCartesian(cartesian);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(2);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(2);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//entity.position](https://entity.position) = cartesian;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//entity.label.show](https://entity.label.show) = true;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[//entity.label.text](https://entity.label.text) = '(' + longitudeString + ', ' + latitudeString + ')';  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;redLine.polyline.positions=Cesium.Cartesian3.fromDegreesArray([-75, 35,  
&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;longitudeString, latitudeString]);  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} else {  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;entity.label.show = false;  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}  
&nbsp;&nbsp;&nbsp;&nbsp;}, Cesium.ScreenSpaceEventType.MOUSE\_MOVE);  
});

---

<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:** [December 28, 2016, 7:59pm UTC](https://community.cesium.com/t/dynamic-polyline/4962/2 "2016-12-28T19:59:51Z")

</div>

Hello,

The line is drawing slowly because it is being drawn asynchronously. To force it to draw synchronously, you can use a [CallbackProperty](http://cesiumjs.org/Cesium/Build/Documentation/CallbackProperty.html). Here is your updated example:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {  
selectionIndicator : false,  
infoBox : false  
});

var scene = viewer.scene;  
var handler;

var pos1 = Cesium.Cartesian3.fromDegrees(-75, 35);  
var pos2 = Cesium.Cartesian3.fromDegrees(-75, 35);  
function getLinePositions() {  
return [pos1, pos2];  
}

var redLine = viewer.entities.add({  
name : ‘Red line on the surface’,  
polyline : {  
positions : new Cesium.CallbackProperty(getLinePositions, false),  
width : 1,  
material : Cesium.Color.RED  
}  
});

// Mouse over the globe to see the cartographic position  
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);  
handler.setInputAction(function(movement) {  
var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);  
if (cartesian) {  
pos2 = cartesian;  
}  
}, Cesium.ScreenSpaceEventType.MOUSE\_MOVE);

``

Best,

Hannah

---

<div class="post-metadata">

**Author:** ![fcfc](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/fcfc/32/2977_2.png) [@fcfc](https://community.cesium.com/u/fcfc)\
**Post date:** [May 21, 2020, 6:36pm UTC](https://community.cesium.com/t/dynamic-polyline/4962/3 "2020-05-21T18:36:31Z")

</div>

> [@hannah](#):
>
> getLinePositions

When calling in the context of a class be sure to call it as `this.getLinePositions.bind(this)`