Popups

Popup is a window in which you can display arbitrary HTML-code. Popup associated with a particular location on the map.

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 = DG.popup()
    .setLatLng(latlng)
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);

Creation

Factory	Description
`DG.popup( <Popup options> options?, <Layer> 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 Layer to which it refers.

Options

Option	Type	Default	Description
`maxWidth`	`Number`	`300`	Max width of the popup, in pixels.
`minWidth`	`Number`	`50`	Min width of the popup, in pixels.
`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.
`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.
`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 presence of a close button in the popup.
`offset`	`Point`	`Point(0, 7)`	The offset of the popup position. Useful to control the anchor of the popup when opening it on some overlays.
`autoClose`	`Boolean`	`true`	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's closePopupOnClick option).
`zoomAnimation`	`Boolean`	`true`	Whether to animate the popup on zoom. Disable it if you have problems with Flash content inside popups.
`className`	`String`	`''`	A custom CSS class name to assign to the popup.
`pane`	`String`	`'popupPane'`	`Map pane` where the popup will be added.
`sprawling`	`Boolean`	`false`
`textDirection`	`string`	`'auto'`	The direction of the popup content text. The following values are possible: `'auto'`, `'rtl'`, `'ltr'`.

Events

Events inherited from Layer

Event	Data	Description
`add`	`Event`	Fired after the layer is added to a map
`remove`	`Event`	Fired after the layer is removed from a map

Popup events inherited from Layer

Event	Data	Description
`popupopen`	`PopupEvent`	Fired when a popup bound to this layer is opened
`popupclose`	`PopupEvent`	Fired when a popup bound to this layer is closed

Methods

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)`.
`getLatLng()`	`LatLng`	Returns the geographical point of popup.
`setLatLng( <LatLng> latlng)`	`this`	Sets the geographical point where the popup will open.
`getContent()`	`String\|HTMLElement`	Returns the main content of the popup.
`setContent( <String \| HTMLElement \| Function> htmlContent)`	`this`	Sets the HTML content of the popup (in main section). If a function is passed the source layer will be passed to the function. The function should return a `String` or `HTMLElement` to be used in the popup.
`getHeaderContent()`	`String \| HTMLElement`	Returns the content of the header section of the popup.
`setHeaderContent( <String\|HTMLElement> htmlContent)`	`this`	Sets the content of the header section of the popup.
`getFooterContent()`	`String \| HTMLElement`	Returns the content of the footer section of the popup.
`setFooterContent( <String \| HTMLElement> htmlContent)`	`this`	Sets the content of the footer section of the popup.
`getElement()`	`String \| HTMLElement`	Alias for getContent()
`update()`	`null`	Updates the popup content, layout and position. Useful for updating the popup after something inside changed, e.g. image loaded.
`isOpen()`	`Boolean`	Returns `true` when the popup is visible on the map.
`bringToFront()`	`this`	Brings this popup in front of other popups (in the same map pane).
`bringToBack()`	`this`	Brings this popup to the back of other popups (in the same map pane).

Popup methods inherited from Layer

Methods inherited from Layer