Legacy
Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.
Popup
Used to open popups in certain places of the map. Use Map#openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map#addLayer to open as many as you want.
Usage example
If you want to just bind a popup to marker click and then open it, it's really easy:
marker.bindPopup(popupContent).openPopup();
Path overlays like polylines also have a bindPopup
method. Here's a more complicated way to open a popup on a map:
var popup = L.popup()
.setLatLng(latlng)
.setContent('<p>Hello world!<br />This is a nice popup.</p>')
.openOn(map);
Creation
Factory | Description |
---|---|
L.popup(
|
Instantiates a Popup object given an optional options object that describes its appearance and location and an optional source object that is used to tag the popup with a reference to the ILayer to which it refers. |
Options
Option | Type | Default | Description |
---|---|---|---|
maxWidth |
Number |
300 |
Max width of the popup. |
minWidth |
Number |
50 |
Min width of the popup. |
maxHeight |
Number |
null |
If set, creates a scrollable container of the given height inside a popup if its content exceeds it. |
autoPan |
Boolean |
true |
Set it to false if you don't want the map to do panning animation to fit the opened popup. |
keepInView |
Boolean |
false |
Set it to true if you want to prevent users from panning the popup off of the screen while it is open. |
closeButton |
Boolean |
true |
Controls the presense of a close button in the popup. |
offset |
Point |
|
The offset of the popup position. Useful to control the anchor of the popup when opening it on some overlays. |
autoPanPaddingTopLeft |
Point |
null |
The margin between the popup and the top left corner of the map view after autopanning was performed. |
autoPanPaddingBottomRight |
Point |
null |
The margin between the popup and the bottom right corner of the map view after autopanning was performed. |
autoPanPadding |
Point |
|
Equivalent of setting both top left and bottom right autopan padding to the same value. |
zoomAnimation |
Boolean |
true |
Whether to animate the popup on zoom. Disable it if you have problems with Flash content inside popups. |
closeOnClick |
Boolean |
null |
Set it to false if you want to override the default behavior of the popup closing when user clicks the map (set globally by the Map closePopupOnClick option). |
className |
String |
'' |
A custom class name to assign to the popup. |
Methods
Method | Returns | Description |
---|---|---|
addTo(
|
this |
Adds the popup to the map. |
openOn(
|
this |
Adds the popup to the map and closes the previous one. The same as map.openPopup(popup) . |
setLatLng(
|
this |
Sets the geographical point where the popup will open. |
getLatLng() |
LatLng |
Returns the geographical point of popup. |
setContent(
|
this |
Sets the HTML content of the popup. |
getContent() |
<String|HTMLElement> |
Returns the content of the popup. |
update() |
this |
Updates the popup content, layout and position. Useful for updating the popup after something inside changed, e.g. image loaded. |