[OpenLayers-Users] RE: Styling FramedCloud popups

[Emmanuel Lopez]

Hi Dheeraj,
See my answer below,

1. What is the .CSS or HTML that we'd have to edit to change the contents of what's in there?
A: you can create your own html table, see below for code example.
  In the example below it shows the selectedFeature.attributes to display it, (assuming you have  OpenLayers.Control.SelectFeature )
  but you can delete it and do a simple html table to fit your needs. 

2. How does map.addPopup() convert event.text into HTML/CSS that's put into the popup?
A: You already have control of the Html by sending it in the text.
  

  info = new OpenLayers.Control.WMSGetFeatureInfo({
        
        url             : 'http://geos.pccc.co/geoserver/nm01/wms',
        title           : 'Geography Information',
        queryVisible    : true,
        eventListeners : {
            getfeatureinfo: function(event) {
                map.addPopup(new OpenLayers.Popup.FramedCloud(
                    "Fleem",
                    map.getLonLatFromPixel(event.xy),
                    null,
                    createPopupForm(),
                    null,
                    true
                    ));
            }
        }        
    });

    map.addControl(info);
    info.activate();


function createPopupForm(){
    var theHTML = '';
    var layerVector   = map.layers[1];
    var selectedFeature = layerVector.selectedFeatures[0];
    var attributeName  = selectedFeature.attributes['name'] ? selectedFeature.attributes['name'] : "no name available";

    theHTML += '<table style="background-color:#BBCCFF">';

    theHTML += '<tr><td colspan="2"><span style="font-size:14px;font-weight:bold;background-color:#BBCCFF">' +          attributeName + '</span><hr></td></tr>' ;

    for(var key in selectedFeature.attributes)
    {   if(key != "name" && key != "time")
        theHTML += '<tr><td>' + key + ' :</td><td>' + selectedFeature.attributes[key] + '</td></tr>';
    }

    theHTML += '</table>';
    return theHTML;
}