Skip to main content

Popup

Pop-up component.

new Popup(options: Object?)

parameter​

nametypedescribe
optionsObjectRequiredparameter
NameTypeDefaultDescription
classNameStringRequiredSpace-separated list to add to the popup container CSS Class name.
anchorStringcenterOptionalCharacter representing the position of the pop-up window, passed Popup#setLngLat Associated with a coordinate set. The options are "center"， "top"， "bottom"， "left"， "right"， "top-left"， "top-right"， "bottom-left"，as well as "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 towards "bottom"。
closeButtonBooleantrueOptionalif for true ，A close button will appear in the upper right corner of the pop-up window.
closeOnClickBooleantrueOptionalif for true ，When you click on the map, the popup will close.
maxWidthString240pxOptionalSet popup window CSS The maximum width of the string in the attribute, e.g. "300px"。To ensure that the pop-up window can accommodate the content after scaling, this property should be set to "none"。
offsetNumber/PointLike/ObjectOptionalPixel offset of the pop-up window position, specifically: a number indicating the distance from the pop-up window position/represents a constant offset PointLike/Indicates the offset degree of each anchor point position Point Object, negative offset means 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.

parameter​
nametypedescribe
mapMapRequiredto add Popup of Mapmost GL JS map.
Case​
var marker = new mapmost.Popup()
  .setLngLat([30.5, 50.5])
  .addTo(map); // Add a popup to the map

getElement​

returnPopupof HTML element.

Case​
// Revise `Popup` The font size of the 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 be passed previously setLngLat Set the longitude based on 360 changes in multiples of degrees, this is because Popup The longitude of the anchor should be completely surrounded by the surrounding area to ensure that the pop-up 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 closed, 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​

Set the pop-up window content to DOM Elements provided as nodes.

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

setHTML​

Set the popup content to be provided as a string HTML。

This method will not proceed HTML Filter or sanitize so it can only be used with trusted content.

parameter​
nametypedescribe
htmlStringRequiredUsed to represent pop-up window content HTML string.
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. replaced trackPointer() effect.

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

setMaxWidth​

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

parameter​
nametypedescribe
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 feature will be available in DOM Create one within Text node, thus making the original HTML Cannot be inserted. When the pop-up content is provided by the user, this method can be used as a target XSS safety protection measures.

parameter​
nametypedescribe
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). replaced setLngLat effect. In most cases, here closeOnClick and closeButton should be set to false 。

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.
parameter​
nametypedescribe
popupPopupRequiredThe opened object.
 
close
Triggered when the pop-up window is closed manually or programmatically.
parameter​
nametypedescribe
popupPopupRequiredThe object is closed.