Control OpenLayers FramedCloud Popup Position
By default, the OpenLayers FramedCloud popup will open in one of four positions (top-left, bottom-left, top-right, bottom-right) to best fit the popup on the screen.
I wanted to find a way to force the popup to always open to the top-right but I couldn’t find anything in the API that directly allows you to set this.
The fixedRelativePosition attribute allows you to specify that a custom popup you have created only opens in one position but setting this property to false on the out-of-the-box FramedCloud popup doesn’t have any effect.
The solution I found was to override the calculateRelativePostion method that is inherited from the OpenLayers.Popup.Anchored class as follows:
// Create the popup
var popup = new OpenLayers.Popup.FramedCloud("popup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100, 100),
"popup contents",
null, true, onPopupClose);
// Force the popup to always open to the top-right
popup.calculateRelativePosition = function () {
return 'tr';
}
The FramedCloud popup supports panMapIfOutOfView so the map will automatically pan to ensure that popup is displayed within the extent of the view frame.
