[OpenLayers-Users] RE: Styling FramedCloud popups
Emmanuel Lopez
emmanuel.lopez at tierconnect.com
Sat May 19 10:36:20 PDT 2012
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;
}
More information about the Users
mailing list