Skip to main content
Version: Next

Class: HtmlOverlayTool

Defined in: packages/tools/src/HtmlOverlay/HtmlOverlayTool.ts:153

Manages HTMLoverlays for Cognite3DViewer. Attaches HTML elements to a 3D position and updates its position/visibility as user moves the camera. This is useful to create HTML overlays to highlight information about key positions in the 3D model.

Attached elements must have CSS style 'position: absolute'. It's also recommended in most cases to have styles 'pointer-events: none' and 'touch-action: none' to avoid interfering with 3D navigation. Consider also applying 'transform: translate(-50%, -50%)' to anchor the center of the element rather than the top-left corner. In some cases the zIndex-attribute is necessary for the element to appear on top of the viewer.

Example​

const el = document.createElement('div');
el.style.position = 'absolute'; // Required!
// Anchor to center of element
el.style.transform = 'translate(-50%, -50%)';
// Avoid being target for events
el.style.pointerEvents = 'none;
el.style.touchAction = 'none';
// Render in front of other elements
el.style.zIndex = 10;

el.style.color = 'red';
el.innerHtml = '<h1>Overlay</h1>';

const overlayTool = new HtmlOverlayTool(viewer);
overlayTool.add(el, new Vector3(10, 10, 10));
// ...
overlayTool.remove(el);
// or, to remove all attached elements
overlayTool.clear();

// detach the tool from the viewer
overlayTool.dispose();

Extends​

Constructors​

Constructor​

new HtmlOverlayTool(viewer, options?): HtmlOverlayTool

Defined in: packages/tools/src/HtmlOverlay/HtmlOverlayTool.ts:195

Parameters​

viewer​

Cognite3DViewer<DataSourceType>

options?​

HtmlOverlayToolOptions

Returns​

HtmlOverlayTool

Overrides​

Cognite3DViewerToolBase.constructor

Accessors​

elements​

Get Signature​

get elements(): object[]

Defined in: packages/tools/src/HtmlOverlay/HtmlOverlayTool.ts:215

Returns all added HTML elements along with their 3D positions.

Returns​

object[]

Methods​

add()​

add(htmlElement, position3D, options?): void

Defined in: packages/tools/src/HtmlOverlay/HtmlOverlayTool.ts:239

Registers a HTML overlay that will be updated on rendering.

Parameters​

htmlElement​

HTMLElement

position3D​

Vector3

options?​

HtmlOverlayOptions = {}

Returns​

void

clear()​

clear(): void

Defined in: packages/tools/src/HtmlOverlay/HtmlOverlayTool.ts:289

Removes all attached HTML overlay elements.

Returns​

void

dispose()​

dispose(): void

Defined in: packages/tools/src/HtmlOverlay/HtmlOverlayTool.ts:225

Override

Removes all elements and detaches from the viewer.

Returns​

void

Overrides​

Cognite3DViewerToolBase.dispose

forceUpdate()​

forceUpdate(customCamera?): void

Defined in: packages/tools/src/HtmlOverlay/HtmlOverlayTool.ts:331

Updates positions of all overlays. This is automatically managed and there shouldn't be any reason to trigger this unless the attached elements are modified externally.

Calling this function often might cause degraded performance.

Parameters​

customCamera?​

PerspectiveCamera

Optional camera to be used in place of viewerCamera when calculating positions

Returns​

void

off()​

off(event, handler): void

Defined in: packages/tools/src/Cognite3DViewerToolBase.ts:38

Unregisters an event handler for the 'disposed'-event.

Parameters​

event​

"disposed"

handler​

() => void

Returns​

void

Inherited from​

Cognite3DViewerToolBase.off

remove()​

remove(htmlElement): void

Defined in: packages/tools/src/HtmlOverlay/HtmlOverlayTool.ts:276

Removes a overlay and removes it from the DOM.

Parameters​

htmlElement​

HTMLElement

Returns​

void

visible()​

visible(enable): void

Defined in: packages/tools/src/HtmlOverlay/HtmlOverlayTool.ts:308

Hide/unhide all HTML overlay elements.

Parameters​

enable​

boolean

Returns​

void