Popup

A Popup is an information window that can be attached to a specific geographical coordinate on the map. It can contain custom HTML content and includes a close button by default.

Constructor

new gtswebsdkgl.Popup(options)

new gtswebsdkgl.Popup(options?: PopupOptions)

Creates a new Popup with the specified options.

Parameters:

Name	Type	Description
options	PopupOptions	Options for configuring the popup's appearance and behavior.

Example:

                        import { Popup, LngLat } from 'gtswebsdkgl'; 

                        // 1. Create a popup instance

                        const popup = new Popup({

                          closeButton: false,

                          closeOnClick: false,

                          offset: 25

                          })

                          .setLngLat([12.55, 55.66]) // Set its position

                          .setHTML("<h3>Hello!</h3><p>This is a custom popup.</p>") // Set its
                        content

                          .addTo(map); // Add it to the map

Properties

The following properties are set via the PopupOptions object during construction.

closeButton

boolean

If true, a close button will appear in the top right corner of the popup. **Default:** true.

closeOnClick

boolean

If true, the popup will close when the map is clicked. **Default:** true.

offset

number | PointLike | Object

The offset of the popup's anchor point from the coordinates. This can be a single number (for uniform offset), a PointLike array [x, y], or an object specifying offsets for different anchor positions. **Default:** 15.

anchor

string

The preferred position of the popup relative to the location specified by setLngLat. Valid values are the same as for Marker: 'top', 'bottom', 'left', 'right', etc. **Default:** 'bottom'.

className

string

A space-separated string of class names to add to the popup container element.

Events

The Popup class emits events related to its open/close state.

open

Event

Fired when the popup is opened.

Event

Fired when the popup is closed.

Methods

addTo()

addTo(map: Map): this

Adds the popup to the given map. This is required for the popup to become visible.

Parameters:

Parameter	Description
map	The map object to add the popup to.

Returns: this (The Popup instance)

remove()

remove(): this

Removes the popup from the map and destroys the component.

Returns: this (The Popup instance)

isOpen()

isOpen(): boolean

Checks if the popup is currently open on the map.

Returns: boolean

setHTML()

setHTML(html: string): this

Sets the HTML content of the popup.

Parameters:

Parameter	Description
html	The raw HTML string to set as the popup content.

Returns: this (The Popup instance)

setText()

setText(text: string): this

Sets the plain text content of the popup. Note that any HTML tags will be escaped.

Parameters:

Parameter	Description
text	The plain text string to set as the popup content.

Returns: this (The Popup instance)

setDOMContent()

setDOMContent(htmlNode: Node): this

Sets the content of the popup to a DOM element.

Parameters:

Parameter	Description
htmlNode	A DOM `Node` to use as the popup content (e.g., a `div`).

Returns: this (The Popup instance)

setLngLat()

setLngLat(lngLat: LngLatLike): this

Sets the popup's geographical position. This is required if the popup is not bound to a Marker.

Parameters:

Parameter	Description
lngLat	The new longitude and latitude array, or LngLat object.

Returns: this (The Popup instance)

getLngLat()

getLngLat(): LngLat | undefined

Gets the popup's current geographical location.

Returns: LngLat | undefined