I am attempting to create a rectangle that 'draws' on the map (much the same way DrawHelper does, click to select start position, move mouse to 'draw' rectangle (from the starting position to the current mouse position), click to finalize rectangle).

I was able to do it successfully with circle, however, I am not sure how to go about using the CallbackProperty to update the rectangles coordinates.

function getExtent() {

console.log("getExtent()");

var e = new Cesium.Rectangle();

var firstPos = Cesium.Cartographic.fromCartesian(firstPoint);

var mousePos = Cesium.Cartographic.fromCartesian(mousePosition);

// Re-order so west < east and south < north

e.west = Math.min(firstPos.longitude, mousePos.longitude);

e.east = Math.max(firstPos.longitude, mousePos.longitude);

e.south = Math.min(firstPos.latitude, mousePos.latitude);

e.north = Math.max(firstPos.latitude, mousePos.latitude);

function toDegrees(radians) {

var pi = Math.PI;

return (radians * (180/pi));

}

return [toDegrees(e.west), toDegrees(e.south), toDegrees(e.east), toDegrees(e.north)];

}

extent = viewer.entities.add({

name : 'Extent',

rectangle : {

coordinates : Cesium.Rectangle.fromDegrees(new Cesium.CallbackProperty(getExtent(), false)),

material : Cesium.Color.GREEN.withAlpha(0.5)}

});

Is what I was trying to do, so on moving the mouse, the getExtent() function calculates a new rectangle from the firstPosition clicked and the current mousePosition.

The issue I have is I am not sure how to go about doing this. I've tried using Cartesian cords from the firstPosition (click.position) and the mousePosition (movement.endPosition). But I need cartographic points to make new coordinates. So I tried changing the Cartesian to Cartographic and doing it again (changing the radians to degrees then the getExtent() should return an array of degrees) but I couldn't get the CallbackProperty to update with the mouse moving.

Any clues? Any help would be amazing,

Andrew