Class: Popup

component.Popup

classdesc Popup instance for rendering custom HTML content on top of images. Popups are based on 2D basic image coordinates (see the Viewer class documentation for more information about coordinate systems) and a certain popup is therefore only relevant to a single image. Popups related to a certain image should be removed when moving to another image.

A popup must have both its content and its point or rect set to be rendered. Popup options can not be updated after creation but the basic point or rect as well as its content can be changed by calling the appropriate methods.

To create and add one Popup with default configuration (tooltip visuals and automatic float) and one with specific options use

example

var defaultSpan = document.createElement('span');defaultSpan.innerHTML = 'hello default';
var defaultPopup = new Popup();defaultPopup.setDOMContent(defaultSpan);defaultPopup.setBasicPoint([0.3, 0.3]);
var cleanSpan = document.createElement('span');cleanSpan.innerHTML = 'hello clean';
var cleanPopup = new Popup({    clean: true,    float: Alignment.Top,    offset: 10,    opacity: 0.7,});
cleanPopup.setDOMContent(cleanSpan);cleanPopup.setBasicPoint([0.6, 0.6]);
popupComponent.add([defaultPopup, cleanPopup]);

description Implementation of API methods and API documentation inspired by/used from https://github.com/mapbox/mapbox-gl-js/blob/v0.38.0/src/ui/popup.js

Constructors#

constructor#

• new Popup(options?, viewportCoords?, dom?)

Parameters#

Name	Type
`options?`	`PopupOptions`
`viewportCoords?`	`ViewportCoords`
`dom?`	`DOM`

Defined in#

component/popup/popup/Popup.ts:78

Methods#

setBasicPoint#

▸ setBasicPoint(basicPoint): void

Sets a 2D basic image coordinates point to the popup's anchor, and moves the popup to it.

description Overwrites any previously set point or rect.

example

var popup = new Popup();popup.setText('hello image');popup.setBasicPoint([0.3, 0.3]);
popupComponent.add([popup]);

Parameters#

Name	Type	Description
`basicPoint`	`number`[]	Point in 2D basic image coordinates.

Returns#

void

Defined in#

component/popup/popup/Popup.ts:148

setBasicRect#

▸ setBasicRect(basicRect): void

Sets a 2D basic image coordinates rect to the popup's anchor, and moves the popup to it.

description Overwrites any previously set point or rect.

example

var popup = new Popup();popup.setText('hello image');popup.setBasicRect([0.3, 0.3, 0.5, 0.6]);
popupComponent.add([popup]);

Parameters#

Name	Type	Description
`basicRect`	`number`[]	Rect in 2D basic image coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) .

Returns#

void

Defined in#

component/popup/popup/Popup.ts:173

setDOMContent#

▸ setDOMContent(htmlNode): void

Sets the popup's content to the element provided as a DOM node.

example

var div = document.createElement('div');div.innerHTML = 'hello image';
var popup = new Popup();popup.setDOMContent(div);popup.setBasicPoint([0.3, 0.3]);
popupComponent.add([popup]);

Parameters#

Name	Type	Description
`htmlNode`	`Node`	A DOM node to be used as content for the popup.

Returns#

void

Defined in#

component/popup/popup/Popup.ts:197

setHTML#

▸ setHTML(html): void

Sets the popup's content to the HTML provided as a string.

description This method does not perform HTML filtering or sanitization, and must be used only with trusted content. Consider Popup.setText if the content is an untrusted text string.

example

var popup = new Popup();popup.setHTML('<div>hello image</div>');popup.setBasicPoint([0.3, 0.3]);
popupComponent.add([popup]);

Parameters#

Name	Type	Description
`html`	`string`	A string representing HTML content for the popup.

Returns#

void

Defined in#

component/popup/popup/Popup.ts:232

setText#

▸ setText(text): void

Sets the popup's content to a string of text.

description This function creates a Text node in the DOM, so it cannot insert raw HTML. Use this method for security against XSS if the popup content is user-provided.

example

var popup = new Popup();popup.setText('hello image');popup.setBasicPoint([0.3, 0.3]);
popupComponent.add([popup]);

Parameters#

Name	Type	Description
`text`	`string`	Textual content for the popup.

Returns#

void

Defined in#

component/popup/popup/Popup.ts:267