Draw HTML elements in a position?

CesiumJS
1

Hi,

I wonder if it possible to draw custom HTML element on a specific position? (and attach it to there...)

I mean to draw a HTML <table> element in a ceration position on the map and when the map moves or pans to move the element with it..

It is possible? because it should be simple to draw HTML on canvas... but I need the support for the events (pan, move, zoom etc)

Thanks!

2

You can convert 3D to 2D screen coordinates
https://groups.google.com/forum/#!topic/cesium-dev/aW4JTCxFNEI

“The screen space origin is the top, left corner of the canvas”

So add the offset to canvas.left and canvas.top to find the position on the document. Use that position to set the top and left style of the table. You can calculate this each frame. Might have to alter z-index of the table.

3

Take a look at the SelectionIndicator, which does exactly this: https://github.com/AnalyticalGraphicsInc/cesium/blob/1.6/Source/Widgets/SelectionIndicator/SelectionIndicatorViewModel.js

Basically you need to recompute the position every frame in order to keep the item tacked at the screen position. You can hook into the scene.preRender event and update the position there.

Could be a fun project to write a utility class to make this easy to do with any HTMLElement, shouldn’t be more than a couple of dozen lines of code.