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:
|
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
on(type, listener): Object
Adds a listener to a specified event type.
Parameters
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
Returns
this
remove( ): Maps.Popup
Removes the popup from a map
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.