# OpenLayers.Popup

A popup is a small div that can opened and closed on the map. Typically opened in response to clicking on a marker. See OpenLayers.Marker. Popup’s don’t require their own layer and are added the the map using the OpenLayers.Map.addPopup method.

#### Example

>     popup = new OpenLayers.Popup("chicken",
>                        new OpenLayers.LonLat(5,40),
>                        new OpenLayers.Size(200,200),
>                        "example popup",
>                        true);

>     map.addPopup(popup);

Summary

OpenLayers.Popup | A popup is a small div that can opened and closed on the map.
Properties |
events | {OpenLayers.Events} custom event manager
id | {String} the unique identifier assigned to this popup.
lonlat | {OpenLayers.LonLat} the position of this popup on the map
div | {DOMElement} the div that contains this popup.
contentSize | {OpenLayers.Size} the width and height of the content.
size | {OpenLayers.Size} the width and height of the popup.
contentHTML | {String} An HTML string for this popup to display.
backgroundColor | {String} the background color used by the popup.
opacity | {float} the opacity of this popup (between 0.0 and 1.0)
border | {String} the border size of the popup.
contentDiv | {DOMElement} a reference to the element that holds the content of the div.
groupDiv | {DOMElement} First and only child of ‘div’.
closeDiv | {DOMElement} the optional closer image
autoSize | {Boolean} Resize the popup to auto-fit the contents.
minSize | {OpenLayers.Size} Minimum size allowed for the popup’s contents.
maxSize | {OpenLayers.Size} Maximum size allowed for the popup’s contents.
displayClass | {String} The CSS class of the popup.
contentDisplayClass | {String} The CSS class of the popup content div.
padding | {int or OpenLayers.Bounds} An extra opportunity to specify internal padding of the content div inside the popup.
disableFirefoxOverflowHack | {Boolean} The hack for overflow in Firefox causes all elements to be re-drawn, which causes Flash elements to be re-initialized, which is troublesome.
Functions |
fixPadding | To be removed in 3.0, this function merely helps us to deal with the case where the user may have set an integer value for padding, instead of an OpenLayers.Bounds object.
Properties |
panMapIfOutOfView | {Boolean} When drawn, pan map such that the entire popup is visible in the current viewport (if necessary).
keepInMap | {Boolean} If panMapIfOutOfView is false, and this property is true, contrain the popup such that it always fits in the available map space.
closeOnMove | {Boolean} When map pans, close the popup.
map | {OpenLayers.Map} this gets set in Map.js when the popup is added to the map
Constructor |
OpenLayers.Popup | Create a popup.
Functions |
destroy | nullify references to prevent circular references and memory leaks
draw | Constructs the elements that make up the popup.
updatePosition | if the popup has a lonlat and its map members set, then have it move itself to its proper position
moveTo |
visible | {Boolean} Boolean indicating whether or not the popup is visible
toggle | Toggles visibility of the popup.
show | Makes the popup visible.
hide | Makes the popup invisible.
setSize | Used to adjust the size of the popup.
updateSize | Auto size the popup so that it precisely fits its contents (as determined by this.contentDiv.innerHTML).
setBackgroundColor | Sets the background color of the popup.
setOpacity | Sets the opacity of the popup.
setBorder | Sets the border style of the popup.
setContentHTML | Allows the user to set the HTML content of the popup.
registerImageListeners | Called when an image contained by the popup loaded.
getSafeContentSize |
getContentDivPadding | Glorious, oh glorious hack in order to determine the css ‘padding’ of the contentDiv.
addCloseBox |
panIntoView | Pans the map such that the popup is totaly viewable (if necessary)
registerEvents | Registers events on the popup.
onmousedown | When mouse goes down within the popup, make a note of it locally, and then do not propagate the mousedown (but do so safely so that user can select text inside)
onmousemove | If the drag was started within the popup, then do not propagate the mousemove (but do so safely so that user can select text inside)
onmouseup | When mouse comes up within the popup, after going down in it, reset the flag, and then (once again) do not propagate the event, but do so safely so that user can select text inside
onclick | Ignore clicks, but allowing default browser handling
onmouseout | When mouse goes out of the popup set the flag to false so that if they let go and then drag back in, we won’t be confused.
ondblclick | Ignore double-clicks, but allowing default browser handling

### Properties

### events

{OpenLayers.Events} custom event manager

### id

{String} the unique identifier assigned to this popup.

### lonlat

{OpenLayers.LonLat} the position of this popup on the map

### div

{DOMElement} the div that contains this popup.

### contentSize

{OpenLayers.Size} the width and height of the content.

### size

{OpenLayers.Size} the width and height of the popup.

### contentHTML

{String} An HTML string for this popup to display.

### backgroundColor

{String} the background color used by the popup.

### opacity

{float} the opacity of this popup (between 0.0 and 1.0)

### border

{String} the border size of the popup. (eg 2px)

### contentDiv

{DOMElement} a reference to the element that holds the content of the div.

### groupDiv

{DOMElement} First and only child of ‘div’. The group Div contains the ‘contentDiv’ and the ‘closeDiv’.

### closeDiv

{DOMElement} the optional closer image

### autoSize

{Boolean} Resize the popup to auto-fit the contents. Default is false.

### minSize

{OpenLayers.Size} Minimum size allowed for the popup’s contents.

### maxSize

{OpenLayers.Size} Maximum size allowed for the popup’s contents.

### displayClass

{String} The CSS class of the popup.

### contentDisplayClass

{String} The CSS class of the popup content div.

### padding

{int or OpenLayers.Bounds} An extra opportunity to specify internal padding of the content div inside the popup. This was originally confused with the css padding as specified in style.css’s ‘olPopupContent’ class. We would like to get rid of this altogether, except that it does come in handy for the framed and anchoredbubble popups, who need to maintain yet another barrier between their content and the outer border of the popup itself.

Note that in order to not break API, we must continue to support this property being set as an integer. Really, though, we’d like to have this specified as a Bounds object so that user can specify distinct left, top, right, bottom paddings. With the 3.0 release we can make this only a bounds.

### disableFirefoxOverflowHack

{Boolean} The hack for overflow in Firefox causes all elements to be re-drawn, which causes Flash elements to be re-initialized, which is troublesome. With this property the hack can be disabled.

### Functions

### fixPadding

> fixPadding: function()

To be removed in 3.0, this function merely helps us to deal with the case where the user may have set an integer value for padding, instead of an OpenLayers.Bounds object.

### Properties

### panMapIfOutOfView

{Boolean} When drawn, pan map such that the entire popup is visible in the current viewport (if necessary). Default is false.

### keepInMap

{Boolean} If panMapIfOutOfView is false, and this property is true, contrain the popup such that it always fits in the available map space. By default, this is not set on the base class. If you are creating popups that are near map edges and not allowing pannning, and especially if you have a popup which has a fixedRelativePosition, setting this to false may be a smart thing to do. Subclasses may want to override this setting.

Default is false.

### closeOnMove

{Boolean} When map pans, close the popup. Default is false.

### map

{OpenLayers.Map} this gets set in Map.js when the popup is added to the map

### Constructor

### OpenLayers.Popup

Create a popup.

#### Parameters

id | {String} a unqiue identifier for this popup. If null is passed an identifier will be automatically generated.
lonlat | {OpenLayers.LonLat} The position on the map the popup will be shown.
contentSize | {OpenLayers.Size} The size of the content.
contentHTML | {String} An HTML string to display inside the popup.
closeBox | {Boolean} Whether to display a close box inside the popup.
closeBoxCallback | {Function} Function to be called on closeBox click.

### Functions

### destroy

> destroy: function()

nullify references to prevent circular references and memory leaks

### draw

> draw: function( | px | )

Constructs the elements that make up the popup.

#### Parameters

px | {OpenLayers.Pixel} the position the popup in pixels.

#### Returns

{DOMElement} Reference to a div that contains the drawn popup

### updatePosition

> updatePosition: function()

if the popup has a lonlat and its map members set, then have it move itself to its proper position

### moveTo

> moveTo: function( | px | )

#### Parameters

px | {OpenLayers.Pixel} the top and left position of the popup div.

### visible

> visible: function()

#### Returns

{Boolean} Boolean indicating whether or not the popup is visible

### toggle

> toggle: function()

Toggles visibility of the popup.

### show

> show: function()

Makes the popup visible.

### hide

> hide: function()

Makes the popup invisible.

### setSize

> setSize:function( | contentSize | )

Used to adjust the size of the popup.

#### Parameters

contentSize | {OpenLayers.Size} the new size for the popup’s contents div (in pixels).

### updateSize

> updateSize: function()

Auto size the popup so that it precisely fits its contents (as determined by this.contentDiv.innerHTML). Popup size will, of course, be limited by the available space on the current map

### setBackgroundColor

> setBackgroundColor:function( | color | )

Sets the background color of the popup.

#### Parameters

color | {String} the background color. eg “#FFBBBB”

### setOpacity

> setOpacity:function( | opacity | )

Sets the opacity of the popup.

#### Parameters

opacity | {float} A value between 0.0 (transparent) and 1.0 (solid).

### setBorder

> setBorder:function( | border | )

Sets the border style of the popup.

#### Parameters

border | {String} The border style value. eg 2px

### setContentHTML

> setContentHTML:function( | contentHTML | )

Allows the user to set the HTML content of the popup.

#### Parameters

contentHTML | {String} HTML for the div.

### registerImageListeners

> registerImageListeners: function()

Called when an image contained by the popup loaded. this function updates the popup size, then unregisters the image load listener.

### getSafeContentSize

> getSafeContentSize: function( | size | )

#### Parameters

size | {OpenLayers.Size} Desired size to make the popup.

#### Returns

{OpenLayers.Size} A size to make the popup which is neither smaller than the specified minimum size, nor bigger than the maximum size (which is calculated relative to the size of the viewport).

### getContentDivPadding

> getContentDivPadding: function()

Glorious, oh glorious hack in order to determine the css ‘padding’ of the contentDiv. IE/Opera return null here unless we actually add the popup’s main ‘div’ element (which contains contentDiv) to the DOM. So we make it invisible and then add it to the document temporarily.

Once we’ve taken the padding readings we need, we then remove it from the DOM (it will actually get added to the DOM in Map.js’s addPopup)

#### Returns

{OpenLayers.Bounds}

### addCloseBox

> addCloseBox: function( | callback | )

#### Parameters

callback | {Function} The callback to be called when the close button is clicked.

### panIntoView

> panIntoView: function()

Pans the map such that the popup is totaly viewable (if necessary)

### registerEvents

> registerEvents:function()

Registers events on the popup.

Do this in a separate function so that subclasses can choose to override it if they wish to deal differently with mouse events

Note in the following handler functions that some special care is needed to deal correctly with mousing and popups.

Because the user might select the zoom-rectangle option and then drag it over a popup, we need a safe way to allow the mousemove and mouseup events to pass through the popup when they are initiated from outside. The same procedure is needed for touchmove and touchend events.

Otherwise, we want to essentially kill the event propagation for all other events, though we have to do so carefully, without disabling basic html functionality, like clicking on hyperlinks or drag-selecting text.

### onmousedown

> onmousedown: function ( | evt | )

When mouse goes down within the popup, make a note of it locally, and then do not propagate the mousedown (but do so safely so that user can select text inside)

#### Parameters

evt | {Event}

### onmousemove

> onmousemove: function ( | evt | )

If the drag was started within the popup, then do not propagate the mousemove (but do so safely so that user can select text inside)

#### Parameters

evt | {Event}

### onmouseup

> onmouseup: function ( | evt | )

When mouse comes up within the popup, after going down in it, reset the flag, and then (once again) do not propagate the event, but do so safely so that user can select text inside

#### Parameters

evt | {Event}

### onclick

> onclick: function ( | evt | )

Ignore clicks, but allowing default browser handling

#### Parameters

evt | {Event}

### onmouseout

> onmouseout: function ( | evt | )

When mouse goes out of the popup set the flag to false so that if they let go and then drag back in, we won’t be confused.

#### Parameters

evt | {Event}

### ondblclick

> ondblclick: function ( | evt | )

Ignore double-clicks, but allowing default browser handling

#### Parameters

evt | {Event}

This class represents a longitude and latitude pair
Instances of this class represent a width/height pair
Instances of this class represent bounding boxes.

> fixPadding: function()

To be removed in 3.0, this function merely helps us to deal with the case where the user may have set an integer value for padding, instead of an OpenLayers.Bounds object.
Instances of OpenLayers.Map are interactive maps embedded in a web page.

> destroy: function()

nullify references to prevent circular references and memory leaks

> draw: function( | px | )

Constructs the elements that make up the popup.

> updatePosition: function()

if the popup has a lonlat and its map members set, then have it move itself to its proper position

> moveTo: function( | px | )

> visible: function()

{Boolean} Boolean indicating whether or not the popup is visible

> toggle: function()

Toggles visibility of the popup.

> show: function()

Makes the popup visible.

> hide: function()

Makes the popup invisible.

> setSize:function( | contentSize | )

Used to adjust the size of the popup.

> updateSize: function()

Auto size the popup so that it precisely fits its contents (as determined by this.contentDiv.innerHTML).

> setBackgroundColor:function( | color | )

Sets the background color of the popup.

> setOpacity:function( | opacity | )

Sets the opacity of the popup.

> setBorder:function( | border | )

Sets the border style of the popup.

> setContentHTML:function( | contentHTML | )

Allows the user to set the HTML content of the popup.

> registerImageListeners: function()

Called when an image contained by the popup loaded.

> getSafeContentSize: function( | size | )

> getContentDivPadding: function()

Glorious, oh glorious hack in order to determine the css ‘padding’ of the contentDiv.

> addCloseBox: function( | callback | )

> panIntoView: function()

Pans the map such that the popup is totaly viewable (if necessary)

> registerEvents:function()

Registers events on the popup.

> onmousedown: function ( | evt | )

When mouse goes down within the popup, make a note of it locally, and then do not propagate the mousedown (but do so safely so that user can select text inside)

> onmousemove: function ( | evt | )

If the drag was started within the popup, then do not propagate the mousemove (but do so safely so that user can select text inside)

> onmouseup: function ( | evt | )

When mouse comes up within the popup, after going down in it, reset the flag, and then (once again) do not propagate the event, but do so safely so that user can select text inside

> onclick: function ( | evt | )

Ignore clicks, but allowing default browser handling

> onmouseout: function ( | evt | )

When mouse goes out of the popup set the flag to false so that if they let go and then drag back in, we won’t be confused.

> ondblclick: function ( | evt | )

Ignore double-clicks, but allowing default browser handling
Instances of OpenLayers.Marker are a combination of a OpenLayers.LonLat and an OpenLayers.Icon.

> addPopup: function( | popup,
> | exclusive | )

This class represents a screen coordinate, in x and y coordinates
Close