# Trying to Draw Polygon Using Polygon Hierarchy

**URL:** <https://community.cesium.com/t/trying-to-draw-polygon-using-polygon-hierarchy/8756>\
**Category:** CesiumJS\
**Created:** [October 16, 2019, 9:39am UTC](https://community.cesium.com/t/trying-to-draw-polygon-using-polygon-hierarchy/8756 "2019-10-16T09:39:03Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![martincarlin87](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@martincarlin87](https://community.cesium.com/u/martincarlin87)\
**Post date:** [October 16, 2019, 9:39am UTC](https://community.cesium.com/t/trying-to-draw-polygon-using-polygon-hierarchy/8756/1 "2019-10-16T09:39:03Z")

</div>

**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 ([https://sandcastle.cesium.com/?src=Drawing%20on%20Terrain.html](https://sandcastle.cesium.com/?src=Drawing%20on%20Terrain.html)) 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.**

Sandcastles:

> **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=rRf7b+I2+F+xqCZSDQx93KTjaLVey61otFQH12kaU2USQ6wzdmY7PG7q/77PTmKSwO2mbfkByPd+fx9rotCa0Q1V6AoJukG3VLN0hZ8dLGiG7vVWCkOYoKp5+m4m1sCjQyoosGS82L3mqJiIiNflTUJFqZgkJKSDNRXmPiMKHCMOCXDqQnakyIaJJQhYEK4LsZpyGhoaTXeJVSxSznNMIvluKcWTZMJoQP32OyAylJGSG5YAMJJhugLFeEnNgFP78/1uGAXNnMR5NhOe7I+Uqt3E6ZQqmDVOSBS1c02zximGV+fIiGkDLliSkLPw86zRAlPNQBhmdpnMPCAYwEORpOYmNEyKYJGK7MdKrp09p+hPS44QW6AgD4KDIXiyT4upBuLqCjVzs5pegH2s1Gnmm9eAqYiepGZWbQs1OV0Y5KyGQLmwt5Biy7gEXDDBdIxMTJGOSULzMGUqvuWYk+I9sE8ohZacYi6XAZgNCUMQSBo5sQVRJZ84SXUclMsMJyC18OKoa6d7aa+tr1WgDR8eDT5MX25Hw9uf/5tfWZieMsODf6z+4/Cn+5J+x2G/Xq0t3+B9GH+aDF4exs+DzPTCun31Bd5E1wpZ35iYaRwRQ4AMW1iut9ZeJUz2uW9Ko9IqyhalOV6MR1O6b9EC7boebAJMicnJjnqoaag2zVYVQZ2Lvb2+Gl6QFf0Ka0R1qFhig3WE4rViGVRnkVVroM+Sc/61Evc66UyUop9bWXXQOmdJMYtKBmSWO7j9WcJUDHcEJUiJjnAuN09Qo5CwnstXCaljuTkA5ub16uE/SuxahFFFVBhDBmCgPpXTW6OUqeGwOo5KyXG3kkvVK6rdveGPg7vjxL+wyMQ99LaGTagq2v+e2hl2VOGKGKoY4TVl70efBnjDTHzDk5gEXdw9LRVESQYnc8oPohQxTeac3tHExFMopzvYCUSE4PNjuprDIHkaT4bT4fPgZfj4Yfg4nP5aM8vQrTmecjdcYPtCob5NDAx1IbWdA/Wa1mbHqfdqZM2cWBD+MByNXm4e717Gn6aj4ePgb4N6XsOuqTIsJHwMW4EJL/65Asbvx9Pp+KGeD7alfLxYwJjplQ+BW6Kg4xgR50G3hdpnlUjnzeU7MB/7rtcZ1XbpBnmp2k6s9l9tBvv2q+ycjIhGfp75cZV3djH7FbWbpTz+//ke+fdyagshE9XpHJ+f+8Uzsas58CGxA6feldVz7BZGxJzAGlUSGgdWhd9tfmwralIlCoZc1n3R9kHFIqe5lZ1rtW1UMTDPyf8T45hF/sDJIMdPxGqV2InmuXJ78hMQuybC0M0JJzsQ0JxzGX5uHsioaP6WDCEFPRRRvs4Sf5GtqNZkSesymYAD8376MAJ5Ocm7Q53umrtChTS8Rd+jiy58zBrJdtY4wmFkUmbYofYBQyVcmReNVqPv+K+zQvmRrRKpDEoVDzDuGLoC16HHO/M0/AxHRqj1aeVeOCmucj9G83DBoJCC+uOpMKyHyBw6ODV7lPW1h950v/MQ8KUK2GQjjaRGetiKbNs5/LzbTbYe8aXNRES3PXTmQbY9lkqmApb0yUX34uLihz1OqojCxjpLtggsYxE6uby89Ogw22cnNFrAU+NqKxKxVPfQZUl/ApPNLes3IPHs3GMg3P1OEex+xNZwM1zBP43qv7JZAw52ojVgFlDzE/aFzhrX/Q7QV9i4JFbLGMY6RNuSxGfXowyIMe534PWQy2ZrTkCJy3d/nhoDBWwPPkBmbyUDMtPaHu5EVP47uT3Xzvk99PomilA+ZfqdjN2akZtTNwjKx7v4Fw)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

and

> **[Cesium Sandcastle](https://sandcastle.cesium.com/#c=rVd5b9s2FP8qhIPBMmbTztEBdZ1gaeIsxpw4qN0MwzwEtERbRGlSkygfHfLd90hRtCSra3foDyd65+89voPakBhtGN3SGF0iQbfohiYsXeNnQ/Oavnm9kUIRJmjcbL2biw3oJD4VFFQyXWxeLSskIuBVe1M/plRMI+LT4YYKdZ8JeUYR+wQ0k9x2EJMtEyswsCQ8yc0mlFNf0WC2j7RjkXJuOZHk+5UUT5IJlQDrt9+BkbGUlFyxCIiB9NM1OMYrqoac6n/f70eB17QiJrK5cGJ/pDTeT41PGXvzxgkJgo71NG+0MLyaQMYsURCCFvE58z/NG22AqoZCMbXPbNqEYCCPRJSqa18xKbxlKrJ/1nJj8LTQn1ocIbZEnk2CoSF4sl/NKSfi8hI1LaymM6AfbXWWxeY8YCqCJ5kw7baNmpwuFTKoIVEm7W0Us1VYIC6ZYEmIVEhREpKI2jRlLr4WmLHiItCPL0UiOcVcrjyADQeGIJE0MGZzodJ54ihNQq9YZjgCq3kUtaG1DtZe21+qQJ0+PB7ezV5uxqObn/9bXFmanjLg3je7/zD66b7g32joP68ay1d0HyYfp8OXh8nzMIOeoztUn+cgmlbI+kaFLMEBUQTEsKZZv5X2KnCy30NTqjgts3RRqvpirD3SQ4vmbNP1gAk4BSVjO+ijpqKJarbLDGpC7B/8VfiCrOkXVAOa+DGLdLJqJF5LyKA681PVAN0pmeBfS3mvis5FIfsWZTlAHZwWxSwoAMiQG7r+t8ApATcCBUpBjnAut09Qo3BgfXNeBWYSyu0R0cLrV9NfK2xahNGYxH4IJ1CY8jfgeUGgO2MZ0Rgq0LVMq2pZPzFVaSyKBmwC73PrXqlwikPCdpfZEK0KOJkqDtuqFrjl3Ugu477Drd/wh+FtvfAvLFBhH72tcCHEfOLcUz02ax2uiaIxI7zi7P344xBvmQqveRQSr4d7rUINFmxwsqD86GAClpAFp7c0UuEMKvgW1hARPsT8mK4XMLueJtPRbPQ8fBk93o0eR7NfK7AU3an6KjPzDBY+9MbbSMEeETLRo6faRonac+qiGmuYU03Cd6Px+OX68fZl8nE2Hj0O/zapZxXuBuqG+YRPYBEx4cw/l8j4/WQ2mzxUz4PtKJ8slzDZKlUZQ5MzIs68Xht1TkuZtv3smt5uGjNeGE30ns+LUJdfueUrY991fGnNZUI0cCPUTUhbzvm6ialeZsWN8+2r69/bqeygzFS3Wz+yD7tuqm8DnkuJnnFws3qqKP2z2WDnwTfPAtf/72pOxQK0Z/L/5DhkgbtTZZT6W2m5SvQQdVoWj711YtNEGLo54mQPBpoLLv1PzSMbJc9fsyGkoMcmihfCyF0C1zRJyIpWbTIBd9r72cMY7FmRd8c+zQXyEuXW8A59j8578DNvRLt5o0ZDyaiosEedI4VSurIoGu3GwOhfZYXyI1tHMlYojbmHcVfRNYQOPd5dpP4nuNf4idsV2e9J/iHgxqhNFwwKKajbKzmwPiIL6OBUHVg61j560/vOUSCWMmGbjTSSKuloa7LrWPpZrxftHONzh4mA7vro1JF0e6ximQq4F5yc987Pz3848GQcUNhYp9EOATIWoJOLiwvH9rN9dkKDJTwVrU5MApYmfXRR8B/BZDP3gzdg8fTMcSDdg26e7EHANnBNuYSPm/KH4LwB3wgkSYCzhJqfss903rgadEG+pMYl0V4mMNYh21okPL0aZ0SM8aALr8da+rQWBJyY8x4sUqWggPUdE5jZWwFABq3j6MZE6XPN7LmO1XfUq+sgQHbKDLqZuoZh4VQBQfm4EP8C)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

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’);

polygonPoints.push(viewer.scene.pickPosition(movement.endPosition));

}, Cesium.ScreenSpaceEventType.LEFT\_CLICK);

handler.setInputAction(function(click) {

finishPolygon();

}, 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’,

};

addPolygon(data);

}

}

function addPolygon(data)

{

var polygon = {

id: data.id,

name: data.name,

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,

text: data.name,

font: ‘9pt monospace’,

style: Cesium.LabelStyle.FILL\_AND\_OUTLINE,

outlineWidth: 2,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

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

}

};

viewer.entities.add(polygon);

}

function finishPolygon()

{

console.log(‘finished drawing polygon’);

handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT\_CLICK);

handler.removeInputAction(Cesium.ScreenSpaceEventType.RIGHT\_CLICK);

// polygonPoints = ;

finishShape();

}

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

return Cesium.PolygonHierarchy(polygonPoints);

}, false);

function finishShape()

{

handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT\_CLICK);

hideTooltip();

selectedType = null;

}

function showTooltip()

{

tooltip.style.display = ‘block’;

}

function hideTooltip()

{

tooltip.style.display = ‘none’;

}

function moveTooltip(position, message)

{

tooltip.innerHTML = message;

tooltip.style.left = position.x + 30 + “px”;

tooltip.style.top = position.y - 30 + “px”;

showTooltip();

}

**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

---

<div class="post-metadata">

**Author:** ![Dag\_Wastberg](https://avatars.discourse-cdn.com/v4/letter/d/43a26b/32.png) [@Dag\_Wastberg](https://community.cesium.com/u/Dag_Wastberg)\
**Post date:** [October 17, 2019, 3:52pm UTC](https://community.cesium.com/t/trying-to-draw-polygon-using-polygon-hierarchy/8756/2 "2019-10-17T15:52:21Z")

</div>

Just out of curiosity have you looked at cesium-drawhelper: [https://github.com/smills2929/cesium-drawhelper](https://github.com/smills2929/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.

Dag

---

<div class="post-metadata">

**Author:** ![martincarlin87](https://avatars.discourse-cdn.com/v4/letter/m/ed8c4c/32.png) [@martincarlin87](https://community.cesium.com/u/martincarlin87)\
**Post date:** [October 18, 2019, 8:06am UTC](https://community.cesium.com/t/trying-to-draw-polygon-using-polygon-hierarchy/8756/3 "2019-10-18T08:06:12Z")

</div>

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.

Cheers,  
Martin

---

<div class="post-metadata">

**Author:** ![omar](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/omar/32/1999_2.png) [@omar](https://community.cesium.com/u/omar)\
**Post date:** [October 19, 2019, 1:31pm UTC](https://community.cesium.com/t/trying-to-draw-polygon-using-polygon-hierarchy/8756/4 "2019-10-19T13:31:23Z")

</div>

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:

[https://cesium.com/ion-sdk/](https://cesium.com/ion-sdk/)

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