Draw screen overlay, instead of use image


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


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

Any help?


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.

// 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';

You can also use an images

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

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