# OpenLayers.Popup.Framed

#### Inherits from

- OpenLayers.Popup.Anchored

Summary

OpenLayers.Popup.Framed |
Properties |
imageSrc | {String} location of the image to be used as the popup frame
imageSize | {OpenLayers.Size} Size (measured in pixels) of the image located by the ‘imageSrc’ property.
isAlphaImage | {Boolean} The image has some alpha and thus needs to use the alpha image hack.
positionBlocks | {Object} Hash of different position blocks (Object/Hashs).
blocks | {Array[Object]} Array of objects, each of which is one “block” of the popup.
fixedRelativePosition | {Boolean} We want the framed popup to work dynamically placed relative to its anchor but also in just one fixed position.
Constructor |
OpenLayers.Popup.Framed |
Functions |
destroy |
setBackgroundColor |
setBorder |
setOpacity | Sets the opacity of the popup.
setSize | Overridden here, because we need to update the blocks whenever the size of the popup has changed.
updateRelativePosition | When the relative position changes, we need to set the new padding BBOX on the popup, reposition the close div, and update the blocks.
calculateNewPx | Besides the standard offset as determined by the Anchored class, our Framed popups have a special ‘offset’ property for each of their positions, which is used to offset the popup relative to its anchor.
createBlocks |
updateBlocks | Internal method, called on initialize and when the popup’s relative position has changed.

### Properties

### imageSrc

{String} location of the image to be used as the popup frame

### imageSize

{OpenLayers.Size} Size (measured in pixels) of the image located by the ‘imageSrc’ property.

### isAlphaImage

{Boolean} The image has some alpha and thus needs to use the alpha image hack. Note that setting this to true will have no noticeable effect in FF or IE7 browsers, but will all but crush the ie6 browser. Default is false.

### positionBlocks

{Object} Hash of different position blocks (Object/Hashs). Each block will be keyed by a two-character ‘relativePosition’ code string (ie “tl”, “tr”, “bl”, “br”). Block properties are ‘offset’, ‘padding’ (self-explanatory), and finally the ‘blocks’ parameter, which is an array of the block objects.

Each block object must have ‘size’, ‘anchor’, and ‘position’ properties.

Note that positionBlocks should never be modified at runtime.

### blocks

{Array[Object]} Array of objects, each of which is one “block” of the popup. Each block has a ‘div’ and an ‘image’ property, both of which are DOMElements, and the latter of which is appended to the former. These are reused as the popup goes changing positions for great economy and elegance.

### fixedRelativePosition

{Boolean} We want the framed popup to work dynamically placed relative to its anchor but also in just one fixed position. A well designed framed popup will have the pixels and logic to display itself in any of the four relative positions, but (understandably), this will not be the case for all of them. By setting this property to ‘true’, framed popup will not recalculate for the best placement each time it’s open, but will always open the same way. Note that if this is set to true, it is generally advisable to also set the ‘panIntoView’ property to true so that the popup can be scrolled into view (since it will often be offscreen on open) Default is false.

### Constructor

### OpenLayers.Popup.Framed

#### Parameters

id | {String}
lonlat | {OpenLayers.LonLat}
contentSize | {OpenLayers.Size}
contentHTML | {String}
anchor | {Object} Object to which we’ll anchor the popup. Must expose a ‘size’ (OpenLayers.Size) and ‘offset’ (OpenLayers.Pixel) (Note that this is generally an OpenLayers.Icon).
closeBox | {Boolean}
closeBoxCallback | {Function} Function to be called on closeBox click.

### Functions

### destroy

> destroy: function()

### setBackgroundColor

> setBackgroundColor:function( | color | )

### setBorder

> setBorder:function()

### setOpacity

> setOpacity:function( | opacity | )

Sets the opacity of the popup.

#### Parameters

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

### setSize

> setSize:function( | contentSize | )

Overridden here, because we need to update the blocks whenever the size of the popup has changed.

#### Parameters

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

### updateRelativePosition

> updateRelativePosition: function()

When the relative position changes, we need to set the new padding BBOX on the popup, reposition the close div, and update the blocks.

### calculateNewPx

> calculateNewPx:function( | px | )

Besides the standard offset as determined by the Anchored class, our Framed popups have a special ‘offset’ property for each of their positions, which is used to offset the popup relative to its anchor.

#### Parameters

px | {OpenLayers.Pixel}

#### Returns

{OpenLayers.Pixel} The the new px position of the popup on the screen relative to the passed-in px.

### createBlocks

> createBlocks: function()

### updateBlocks

> updateBlocks: function()

Internal method, called on initialize and when the popup’s relative position has changed. This function takes care of re-positioning the popup’s blocks in their appropropriate places.

Instances of this class represent a width/height pair

> destroy: function()

> setBackgroundColor:function( | color | )

> setBorder:function()

> setOpacity:function( | opacity | )

Sets the opacity of the popup.

> setSize:function( | contentSize | )

Overridden here, because we need to update the blocks whenever the size of the popup has changed.

> updateRelativePosition: function()

When the relative position changes, we need to set the new padding BBOX on the popup, reposition the close div, and update the blocks.

> calculateNewPx:function( | px | )

Besides the standard offset as determined by the Anchored class, our Framed popups have a special ‘offset’ property for each of their positions, which is used to offset the popup relative to its anchor.

> createBlocks: function()

> updateBlocks: function()

Internal method, called on initialize and when the popup’s relative position has changed.
This class represents a longitude and latitude pair
This class represents a screen coordinate, in x and y coordinates
The icon represents a graphical icon on the screen.
Close