Mapbox.js is no longer in active development. To learn more about our newer mapping tools see Mapbox GL JS.

You are viewing an older version of Mapbox.js. Check out v3.3.1 for the latest.

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:


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()
	.setContent('<p>Hello world!<br />This is a nice popup.</p>')


Factory Description
L.popup( <Popup options> options?, <ILayer> source? ) 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.
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 Point(0, 6) 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 Point(5, 5) 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.


Method Returns Description
addTo( <Map> map ) this Adds the popup to the map.
openOn( <Map> map ) this Adds the popup to the map and closes the previous one. The same as map.openPopup(popup).
setLatLng( <LatLng> latlng ) this Sets the geographical point where the popup will open.
getLatLng() LatLng Returns the geographical point of popup.
setContent( <String|HTMLElement> htmlContent ) 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.