# Customizing Popups in Openlayers

Is it possible to customize the shape of popups in OpenLayers? For example, I am creating a pop-up using the following approach:

var popup = new OpenLayers.Popup.FramedCloud(
"popup",
OpenLayers.LonLat.fromString(feature.geometry.toShortString()),
null,
'<div style="color:#FF0000">'+feature.data.Name + '</br><a href="http://test.url">test.url</a>' + '</div>',
null,
true
);


This creates a popup with the following appearance:

Is it possible to change from the rounded corners and a curved 'connection' to a more square pop-up?

• can you please show me your full framecloud code i actually want to know how to use framecloud to fetch data from WMS on click for a particular polygon and a particular column. – Ahsan Mukhtar May 19 '15 at 13:56

popup script codes,

popup images,

and so css...

i hope it helps you..

In your library files, there is img/cloud-popup-relative.png file. You have to customize it in order to get infowindow you like

• Thanks @Odoakr! Is there any advice on how to change it? At the moment I do see a png with the various pieces that create the pop-up, but I'm not sure what would happen if I changed the shape of each piece, or how the shape-boundary within the png is used. – djq Aug 27 '12 at 6:59
• To be honest, default cloud is fine for me. I didn't try to change it:) I googled for a while, but I didn't find any custom example... – Odoakr Aug 27 '12 at 7:02

Just a note, from my recent task - to create custom popup in OpenLayers for WMSGetFeatureInfo.

What I do:

var highlightControl = new OpenLayers.Control.WMSGetFeatureInfo({
url: 'url to wms',
infoFormat: 'text/html',
queryVisible: true,
eventListeners: {
getfeatureinfo: function(event) {
this_is_popup_handler_function(event);
}
}
});

this_is_popup_handler_function(event) {
}


• forgot to mention, you might need to get the xy property from event. ;) – nasrulhazim Sep 20 '12 at 9:39
• function this_is_popup_handler_function(event) { alert(event.text) } – Balazs Dec 7 '16 at 7:29

To get xy try event.xy.

For example:

...
new OpenLayers.Popup.FramedCloud(
'chicken',
map.getLonLatFromPixel(event.xy),
...
);
...