Draw screen overlay, instead of use image

CesiumJS
1

Hello,

I need to be able to draw dynamically basic things line rectangles and lines as a screen overlay. I have seen this link:

http://analyticalgraphicsinc.github.io/cesium-google-earth-examples/examples/screenOverlay.html

but cannot figure out how to dynamically draw on the screen, instead of using an image file.

Any help?

Thanks
-Alex

2

For future generations:

This requires an understanding of how javascript interfaces with html 'elements' which are divs, imgs, etc.

Here is the code:

// Create a new HTML div, equivalent to <div>
var rect = document.createElement("div");
// Add the new div to the same element that contains the cesium widget.
widget.container.appendChild(rect);

// Set the various style options for the div exactly as if they were
// in the HTML textually.
rect.style.position = 'absolute';
rect.style.width = '400px';
rect.style.height = '200px';
rect.style.backgroundColor = 'blue';
rect.style.top = '100px';
rect.style.left = '100px';

3

You can also use an images

//add overlay by creating an HTML element
var img = document.createElement(‘img’);
img.src = ‘./static/frame.png’;
widget.container.appendChild(img)

//position overlay with CSS styling
img.style.position = ‘absolute’;
img.style.top = 0;
img.style.left = 0;
img.style.width = ‘100%’;
img.style.height = ‘100%’;
img.style[‘pointer-events’] = ‘none’;

``

For more examples view the overlay examples on the Google Earth Migration guides