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
A popup is a small div that can opened and closed on the map.
{OpenLayers.Events} custom event manager
{String} the unique identifier assigned to this popup.
{OpenLayers.LonLat} the position of this popup on the map
{DOMElement} the div that contains this popup.
{OpenLayers.Size} the width and height of the popup.
{String} The HTML that this popup displays.
{String} the background color used by the popup.
{float} the opacity of this popup (between 0.0 and 1.0)
{String} the border size of the popup.
{DOMElement} a reference to the element that holds the content of the div.
{DOMElement} the parent of OpenLayers.Popup.contentDiv
{int} the internal padding of the content div.
{OpenLayers.Map} this gets set in Map.js when the popup is added to the map
Create a popup.
nullify references to prevent circular references and memory leaks
Constructs the elements that make up the popup.
if the popup has a lonlat and its map members set, then have it move itself to its proper position
{Boolean} Boolean indicating whether or not the popup is visible
Toggles visibility of the popup.
Makes the popup visible.
Makes the popup invisible.
Used to adjust the size of the popup.
Sets the background color of the popup.
Sets the opacity of the popup.
Sets the border style of the popup.
Allows the user to set the HTML content of the popup.
Registers events on the popup.
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)
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)
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
Ignore clicks, but allowing default browser handling
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.
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.

size

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

contentHTML

{String} The HTML that this popup displays.

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} the parent of OpenLayers.Popup.contentDiv

padding

{int} the internal padding of the content div.

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.
size{OpenLayers.Size} The size of the popup.
contentHTML{String} The HTML content to display inside the popup.
closeBox{Boolean} Whether to display a close box inside the popup.

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(size)

Used to adjust the size of the popup.

Parameters

size{OpenLayers.Size} the new size of the popup in pixels.

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.

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.

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
{DOMElement} a reference to the element that holds the content of the div.
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(size)
Used to adjust the size of the popup.
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.
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