Skip to main content

Popup

Pop-up component.

new Popup(options: Object?)

Parameters​

NameTypeDescription
optionsObjectRequiredparameter
nametypedefault valuedescription
classNameStringRequiredSpace-delimited CSS class names to add to the popup container.
anchorStringcenteroptionalCharacter representing the position of the pop-up window, associated with the coordinate set through Popup#setLngLat. The options are "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", and "bottom-right". If not set, the anchor point will be dynamically set to ensure that the pop-up window falls within the map container and is biased toward "bottom".
closeButtonBooleantrueoptionalIf true , a close button will appear in the upper right corner of the pop-up window.
closeOnClickBooleantrueoptionalIf true , the pop-up window will be closed when the map is clicked.
maxWidthString240pxoptionalSet the maximum width string in the pop-up CSS property, such as "300px". To ensure that the popup window can accommodate the content after scaling, this property should be set to "none".
offsetNumber/PointLike/ObjectoptionalThe pixel offset of the pop-up window position, specifically: a number representing the distance from the pop-up window position/PointLike representing a constant offset/Point object representing the offset degree of each anchor point position. Negative offsets represent left and upward.

Case​

var markerHeight = 50, markerRadius = 10, linearOffset = 25;
var popupOffsets = {
 'top': [0, 0],
 'top-left': [0,0],
 'top-right': [0,0],
 'bottom': [0, -markerHeight],
 'bottom-left': [linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'bottom-right': [-linearOffset, (markerHeight - markerRadius + linearOffset) * -1],
 'left': [markerRadius, (markerHeight - markerRadius) * -1],
 'right': [-markerRadius, (markerHeight - markerRadius) * -1]
 };
var popup = new mapmost.Popup({offset: popupOffsets, className: 'my-class'})
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);

##Instance members

addTo​

Add a popup to the map.

Parameters​
NameTypeDescription
mapMapRequiredMapmost GL JS map to add Popup.
Case​
var marker = new mapmost.Popup()
  .setLngLat([30.5, 50.5])
  .addTo(map); // Add a pop-up window on the map

getElement​

Returns the Popup’s HTML element.

Case​
// Modify the font size of the `Popup` element
const popup = new mapmost.Popup()
    .setLngLat([-96, 37.8])
    .setHTML("<p>Hello World!</p>")
    .addTo(map);
const popupElem = popup.getElement();
popupElem.style.fontSize = "25px";

getLngLat​

Returns the geographical location of the popup’s anchor.

The returned longitude will vary in multiples of 360 degrees based on the longitude previously set by setLngLat. This is because the Popup needs to completely surround the longitude of the anchor to ensure that the popup window can be displayed on the screen.

Case​
const lngLat = popup.getLngLat();

getMaxWidth​

Returns the maximum width of the popup window.

Case​
const maxWidth = popup.getMaxWidth();

isOpen​

If the pop-up window is in the pop-up state, it is true, if it is in the closed state, it is false.

Case​
const isPopupOpen = popup.isOpen();

remove​

Removed popup from adding map.

Case​
var popup = new mapmost.Popup().addTo(map);
popup.remove();

setDOMContent​

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

Parameters​
NameTypeDescription
htmlNodeNodeRequiredDOM node used as pop-up window content.
Case​
// Generate an element with pop-up window content
var div = window.document.createElement('div');
div.innerHTML = 'Hello, world!';
var popup = new mapmost.Popup()
  .setLngLat(e.lngLat)
  .setDOMContent(div)
  .addTo(map);

setHTML​

Sets the popup content to HTML provided as a string.

This method does not filter or sanitize HTML, so it should only be used with trusted content.

Parameters​
NameTypeDescription
htmlStringRequiredHTML string used to represent the content of the pop-up window.
Case​
const popup = new mapmost.Popup()
    .setLngLat(e.lngLat)
    .setHTML("<h1>Hello World!</h1>")
    .addTo(map);

setLngLat​

After setting the geographical location of the anchor of the pop-up window, move the pop-up window there. Replaces the effect of trackPointer().

Parameters​
NameTypeDescription
lnglatLngLatLikeRequiredSet the geographical location of the pop-up window.
Case​
popup.setLngLat([-122.4194, 37.7749]);

setMaxWidth​

Set the maximum width of the pop-up window. Essentially, you are setting the CSS max-width property.

Parameters​
NameTypeDescription
maxWidthStringRequiredA string representing the maximum width value.
Case​
popup.setMaxWidth('50');

setText​

Set the content of the pop-up window to a string of text.

This function will create a Text node within the DOM, making it impossible for the original HTML to be inserted. Use this method as a security measure against XSS when the popup content is provided by the user.

Parameters​
NameTypeDescription
textStringRequiredThe text content of the pop-up window.
Case​
var popup = new mapmost.Popup()
  .setLngLat(e.lngLat)
  .setText('Hello, world!')
  .addTo(map);

trackPointer​

Use the anchor of the popup to track the position of the cursor on the screen with the help of a pointing device (hidden in touch mode). Replaces the effect of setLngLat. In most cases, closeOnClick and closeButton should be set to false here.

Case​
const popup = new mapmost.Popup({closeOnClick: false, closeButton: false})
    .setHTML("<h1>Hello World!</h1>")
    .trackPointer()
    .addTo(map);

event​

open
Triggered when the pop-up window is opened manually or programmatically.
Parameters​
NameTypeDescription
popupPopupRequiredThe opened object.
 
close
Triggered when the pop-up window is closed manually or programmatically.
Parameters​
NameTypeDescription
popupPopupRequiredThe object that was closed.