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?
)
#
ParametersName | Type |
---|---|
options? | PopupOptions |
viewportCoords? | ViewportCoords |
dom? | DOM |
#
Defined incomponent/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]);
#
ParametersName | Type | Description |
---|---|---|
basicPoint | number [] | Point in 2D basic image coordinates. |
#
Returnsvoid
#
Defined incomponent/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]);
#
ParametersName | Type | Description |
---|---|---|
basicRect | number [] | Rect in 2D basic image coordinates ([topLeftX, topLeftY, bottomRightX, bottomRightY]) . |
#
Returnsvoid
#
Defined incomponent/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]);
#
ParametersName | Type | Description |
---|---|---|
htmlNode | Node | A DOM node to be used as content for the popup. |
#
Returnsvoid
#
Defined incomponent/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]);
#
ParametersName | Type | Description |
---|---|---|
html | string | A string representing HTML content for the popup. |
#
Returnsvoid
#
Defined incomponent/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]);
#
ParametersName | Type | Description |
---|---|---|
text | string | Textual content for the popup. |
#
Returnsvoid