Maps SDK for Web - Maps.Popup

tt.Popup

Creates a popup component

Constructor

tt.Popup([options])

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 tt.Popup({offset: popupOffsets, className: 'my-class'})
.setLngLat(e.lngLat)
.setHTML("<h1>Hello I'm a Popup!</h1>")
.addTo(map);

Parameters

Name	Description
options Object default:None	Object with options
options.closeButton Boolean default: true	If true ,a close button will appear in the top right corner of the popup.
options.closeOnClick Boolean default: true	If true , the popup will closed when the map is clicked. of the popup.
options.anchor String default:None	A string indicating the part of the Popup that should be positioned closest to the coordinate set via 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' . of the popup.
options.offset Number \| Maps.PointLike \| Object default:None	A pixel offset applied to the popup's location specified as: a single number specifying a distance from the popup's location a PointLike specifying a constant offset an object of Points specifing an offset for each anchor position Negative offsets indicate left and up.
options.className String default:None	Space-separated CSS class names to add to popup container

Methods

addClassName(className): Maps.Popup

Adds a CSS class to the popup container element.

Example

var popup = new tt.Popup();
popup.addClassName('some-class');

Parameters

Name	Description
className Required String default:None	Non-empty string with CSS class name to add to popup container.

Returns

Popup this

addTo(map): Maps.Popup

Attaches the popup to a map

Parameters

Name	Description
map Required Map default:None	Instance of a map

Returns

Popup this

getLngLat( ): Maps.LngLat

Returns the geographical location of the popup's anchor.* The longitude of the result may differ by a multiple of 360 degrees from the longitude previously set by setLngLat because Popup wraps the anchor longitude across copies of the world to keep the popup on screen.

Returns

LngLat The geographical location of the popup's anchor.

isOpen( ): Boolean

Returns

Boolean true if the popup is open, false if it is closed.

off(type, listener): Object

Removes a previously registered event listener.

Parameters

Name	Description
type Required String default:None	The event type to remove listeners.
listener Required Function default:None	The listener function to remove.

Returns

Object this

on(type, listener): Object

Adds a listener to a specified event type.

Parameters

Name	Description
type Required String default:None	The event type to add a listen for.
listener Required Function default:None	The function to be called when the event is fired. The listener function is called with the data object passed to fire, extended with the target and type properties.

Returns

Object this

once(type, listener): Object

Adds a listener that will be called only once to a specified event type. The listener will be called the first time the event fires after the listener is registered.

Parameters

Name	Description
type Required String default:None	The event type to listen for.
listener Required Function default:None	The function to be called when the event is fired the first time.

Returns

Object this

remove( ): Maps.Popup

Removes the popup from a map

Returns

Popup this

removeClassName(className): Maps.Popup

Removes a CSS class from the popup container element.

Example

var popup = new tt.Popup();
popup.removeClassName('some-class');

Parameters

Name	Description
className Required String default:None	Non-empty string with CSS class name to remove from popup container.

Returns

Popup this

setDOMContent(htmlNode): Maps.Popup

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

Example

// create an element with the popup content
var div = window.document.createElement('div');
div.innerHTML = 'Hello, world!';
var popup = new tt.Popup()
  .setLngLat(e.lngLat)
  .setDOMContent(div)
  .addTo(map);

Parameters

Name	Description
htmlNode Required Node default:None	A DOM node to be used as content for the popup.

Returns

Popup this

setHTML(html): Maps.Popup

Sets the popup's content to the HTML provided as a string. 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.

Parameters

Name	Description
html Required String default:None	A string representing HTML content for the popup.

Returns

Popup this

setLngLat(lnglat): Maps.Popup

Sets the geographical location of the popup's anchor, and moves the popup to it.

Parameters

Name	Description
lnglat Required Maps.LngLat default:None	The geographical location to set as the popup's anchor.

Returns

Popup this

setText(text): Maps.Popup

Sets the popup's content to a string of text.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 tt.Popup()
.setLngLat(e.lngLat)
.setText('Hello, world!')
.addTo(map);

Parameters

Name	Description
text Required String default:None	Textual content for the popup.

Returns

Popup this

toggleClassName(className): Boolean

Add or remove the given CSS class on the popup container, depending on whether the container currently has that class.

Example

var popup = new tt.Popup();
popup.toggleClassName('toggleClass');

Parameters

Name	Description
className Required String default:None	Non-empty string with CSS class name to add/remove.

Returns

Boolean if the class was removed return false, if class was added, then return true.

Events

All the class events are keys of the Events static member.

To learn more about how to listen events please refer to the Evented class.

close : Maps.Popup

Fired when the popup is closed manually or programatically.

open : Maps.Popup

Fired when the popup is opened manually or programatically.