Maps SDK for Web

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
String
default:None
Non-empty string with CSS class name to add to popup container.
Returns

this

addTo(map): Maps.Popup

Attaches the popup to a map

Parameters
Name Description
map
Map
default:None
Instance of a map
Returns

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

The geographical location of the popup's anchor.

isOpen( ): Boolean

Returns

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
String
default:None
The event type to remove listeners.
listener
Function
default:None
The listener function to remove.
Returns

this

on(type, listener): Object

Adds a listener to a specified event type.

Parameters
Name Description
type
String
default:None
The event type to add a listen for.
listener
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

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
String
default:None
The event type to listen for.
listener
Function
default:None
The function to be called when the event is fired the first time.
Returns

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
String
default:None
Non-empty string with CSS class name to remove from popup container.
Returns

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
Node
default:None
A DOM node to be used as content for the popup.
Returns

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
String
default:None
A string representing HTML content for the popup.
Returns

this

setLngLat(lnglat): Maps.Popup

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

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

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
String
default:None
Textual content for the popup.
Returns

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
String
default:None
Non-empty string with CSS class name to add/remove.
Returns

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.