Trying to Draw Polygon Using Polygon Hierarchy

1. A concise explanation of the problem you’re experiencing.

Trying to draw a dynamic polygon of user clicked positions, also, rather than just clicking blindly, it would be great to figure out how to have the shape appear as it is being drawn. I have saw the Drawing on Terrain Sandcastle ( but I’m trying to extend my current functionality to be able to draw different shapes by clicking on the appropriate button, so it’s similar to the dropdown selection.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.



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

var scene = viewer.scene;

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

var drawing = false;

var selectedType = null;

var polygonPoints = ;

var tooltip = document.getElementById(‘tooltip’);

document.querySelector("#add-polygon").addEventListener(“click”, setEntity);

handler.setInputAction(function(movement) {

if (drawing) {

if (selectedType === ‘polygon’) {

moveTooltip(movement.endPosition, ‘left click to draw, right click to finish the shape’);

handler.setInputAction(function(click) {

console.log(‘point added’);


}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

handler.setInputAction(function(click) {


}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);



}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

function setEntity() {

var type = this.dataset.type;

selectedType = type;

drawing = true;

if (type === ‘polygon’) {

polygonPoints = ;

var data = {

id: ‘test’,

entity: ‘polygon’,

name: ‘test’,

description: ‘test’,





function addPolygon(data)


var polygon = {



description: data.description,

allowPicking: true,

show: true,

polygon: {

show: true,

hierarchy: getPolygonPoints,

outline: true,

outlineColor: Cesium.Color.RED,

outlineWidth: 9,

perPositionHeight: true,

material: Cesium.Color.BLUE.withAlpha(0.0)


label: {

disableDepthTestDistance: Number.POSITIVE_INFINITY,


font: ‘9pt monospace’,

style: Cesium.LabelStyle.FILL_AND_OUTLINE,

outlineWidth: 2,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

pixelOffset: new Cesium.Cartesian2(0, -10)





function finishPolygon()


console.log(‘finished drawing polygon’);



// polygonPoints = ;



var getPolygonPoints = new Cesium.CallbackProperty(function() {

return Cesium.PolygonHierarchy(polygonPoints);

}, false);

function finishShape()




selectedType = null;


function showTooltip()

{ = ‘block’;


function hideTooltip()

{ = ‘none’;


function moveTooltip(position, message)


tooltip.innerHTML = message; = position.x + 30 + “px”; = position.y - 30 + “px”;



3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Would like to implement the ability to draw shapes.

4. The Cesium version you’re using, your operating system and browser.

1.62, OS X Mojave and Chrome

Just out of curiosity have you looked at cesium-drawhelper:
It hasn’t been updated in a while but it does pretty much what you’re asking for. If nothing else it should offer some inspiration.


Hi Dag,

Thanks, yes I have seen the draw helper. It’s pretty cool, but like you say, hasn’t been updated in a while but in addition to the drawing I want to calculate distances and a couple of other measurements like area for polygons. It’s helpful to look at the code and I have done that, but I think my attempt is fairly similar but for some reason I just can’t get it to work.


Martin, I think you may already be evaluating this, but in case others stumble on this thread, the commercial Analytics SDK (which is built on top of CesiumJS) has a set of measurement and drawing tools:

It’s only available on-premise right now but we’re working on building it into the Cesium ion platform.