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(
                '<div style="color:#FF0000">'+feature.data.Name + '</br><a href="http://test.url">test.url</a>' + '</div>',

This creates a popup with the following appearance:

enter image description here

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

  • 1
    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

beside all answer you can make your popup as google map popup style. check out this link which will help you to make g-style popup...

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) {

Hope this will help you. :)

  • 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(

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.