Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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:

enter image description here

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

share|improve this question
add comment

4 Answers

up vote 5 down vote accepted

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...

googlestyle

i hope it helps you..

share|improve this answer
add comment

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

share|improve this answer
    
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
add comment

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) {
  alert(event.text);
}

Hope this will help you. :)

share|improve this answer
    
forgot to mention, you might need to get the xy property from event. ;) –  nasrulhazim Sep 20 '12 at 9:39
add comment

To get xy try event.xy.

For example:

...
new OpenLayers.Popup.FramedCloud(
             'chicken',
             map.getLonLatFromPixel(event.xy),
             ...
);
...
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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