Popup class
A popup component.
@param {Object} options
@param {boolean} options.closeButton=true
If true
, a close button will appear in the
top right corner of the popup.
@param {boolean} options.closeOnClick=true
If true
, the popup will closed when the
map is clicked.
@param {string} options.anchor
- A string indicating the part of the Popup that should
be positioned closest to the coordinate set via {@link Popup#setLngLat}.
Options are 'center'
, 'top'
, 'bottom'
, 'left'
, 'right'
, 'top-left'
,
'top-right'
, 'bottom-left'
, and 'bottom-right'
. If unset the anchor will be
dynamically set to ensure the popup falls within the map container with a preference
for 'bottom'
.
@param {number|PointLike|Object} options.offset
-
A pixel offset applied to the popup's location specified as:
- a single number specifying a distance from the popup's location
- a {@link PointLike} specifying a constant offset
- an object of {@link Point}s specifing an offset for each anchor position
Negative offsets indicate left and up.
@param {string}
options.className
Space-separated CSS class names to add to popup container @param {string}options.maxWidth='240px'
- A string that sets the CSS property of the popup's maximum width, eg'300px'
. To ensure the popup resizes to fit its content, set this property to'none'
. Available values can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width @example 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 mapboxgl.Popup({offset: popupOffsets, className: 'my-class'}) .setLngLat(e.lngLat) .setHTML("Hello World!
") .setMaxWidth("300px") .addTo(map); @see Display a popup @see Display a popup on hover @see Display a popup on click @see Attach a popup to a marker instance
Constructors
- Popup([PopupOptions? options])
-
factory
- Popup.fromJsObject(PopupJsImpl jsObject)
-
Creates a new Popup from a
jsObject
.
Properties
Methods
-
addClassName(
String className) → dynamic - Adds a CSS class to the popup container element.
-
addTo(
MapboxMap map) → Popup - Adds the popup to a map.
-
fire(
Event event, [dynamic properties]) → dynamic -
inherited
-
getElement(
) → HtmlElement -
Returns the
Popup
's HTML element. @returns {HtmlElement} element -
getLngLat(
) → LngLat - Returns the geographical location of the popup's anchor.
-
getMaxWidth(
) → String - Returns the popup's maximum width.
-
isOpen(
) → bool -
@returns {boolean}
true
if the popup is open,false
if it is closed. -
listens(
String type) → dynamic -
Returns a true if this instance of Evented or any forwardeed instances of Evented have a listener for the specified type.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
off(
String type, [dynamic layerIdOrListener, Listener? listener]) → MapboxMap -
Removes a previously registered event listener.
inherited
-
on(
String type, [dynamic layerIdOrListener, Listener? listener]) → MapboxMap -
Adds a listener to a specified event type.
inherited
-
once(
String type, Listener listener) → MapboxMap -
Adds a listener that will be called only once to a specified event type.
inherited
-
remove(
) → Popup - Removes the popup from the map it has been added to.
-
removeClassName(
String className) → dynamic - Removes a CSS class from the popup container element.
-
setDOMContent(
Node htmlNode) → Popup - Sets the popup's content to the element provided as a DOM node.
-
setEventedParent(
[Evented? parent, dynamic data]) → dynamic -
Bubble all events fired by this instance of Evented to this parent instance of Evented.
inherited
-
setHTML(
String? html) → Popup - Sets the popup's content to the HTML provided as a string.
-
setLngLat(
LngLat lnglat) → Popup - Sets the geographical location of the popup's anchor, and moves the popup to it. Replaces trackPointer() behavior.
-
setMaxWidth(
String maxWidth) → Popup -
Sets the popup's maximum width. This is setting the CSS property
max-width
. Available values can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width -
setText(
String text) → Popup - Sets the popup's content to a string of text.
-
toggleClassName(
String className) → bool - Add or remove the given CSS class on the popup container, depending on whether the container currently has that class.
-
toString(
) → String -
A string representation of this object.
inherited
-
trackPointer(
) → Popup -
Tracks the popup anchor to the cursor position, on screens with a pointer device (will be hidden on touchscreens). Replaces the setLngLat behavior.
For most use cases,
closeOnClick
andcloseButton
should also be set tofalse
here. @returns {Popup}this
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited