How do you put GeoJSON attribute information in a popup with OpenLayers

Question

I am having some trouble putting GeoJSON attribute information in a pop-up. The selection control is working, and I create an alert (for testing) and this is working. But I can't figure out how you can put GeoJSON attribute information in the pop-up.

The code I have so far is:

function init(){

        function onFeatureSelect(feature){
            alert("boom");
        }

        function onFeatureUnselect(feature){
            alert("unBoom");
        }


        var myStyles = new OpenLayers.StyleMap({ 
            "default": new OpenLayers.Style({ 
                fillColor: "${getColor}",
                strokeWidth: 1,             
                strokeColor: "#000", 
                fillOpacity: 0.8, 
                graphicZIndex: 5,
                //label: "${getLabel}"                  
            },
            {
                context: {
                    getColor : function (feature) {
                        return feature.attributes.INW_T > 100000 ? '#ffc000' :
                               feature.attributes.INW_T > 10000 ? '#00317c' :
                                                                  '#FFEDA0' ;
                    }
                } 
            })
        }); 

        var map = new OpenLayers.Map('map', {
            units: 'm',
            numZoomLevels: 19,
            controls: [
                new OpenLayers.Control.Navigation(),
                new OpenLayers.Control.ScaleLine(),
                new OpenLayers.Control.MousePosition(),
                new OpenLayers.Control.LayerSwitcher()
            ],
            projection: epsg900913,
            displayProjection: epsg4326 //Is used for displaying coordinates in appropriate CRS by MousePosition control
        });


        //LAYERS            
        var lay_goo = new OpenLayers.Layer.Google('Google', {
            type: google.maps.MapTypeId.SATELLITE,
            sphericalMercator: true
        });

        var lay_osm = new OpenLayers.Layer.Google('OSM');

        var geojson_layer = new OpenLayers.Layer.Vector("GeoJSON", {
            styleMap: myStyles,
            projection: epsg4326,
            strategies: [new OpenLayers.Strategy.Fixed()],
            protocol: new OpenLayers.Protocol.HTTP({
                url: "pc2.geojson",
                format: new OpenLayers.Format.GeoJSON()
            })
        });


        map.addLayers([lay_osm, lay_goo, geojson_layer]);

        selectControl = new OpenLayers.Control.SelectFeature(geojson_layer, {
            onSelect: onFeatureSelect,
            onUnselect: onFeatureUnselect
        });
        map.addControl(selectControl);
        selectControl.activate();


        map.setCenter(new OpenLayers.LonLat(lon, lat).transform(epsg4326, epsg900913), zoom);}

The GeoJSON has the following attributes:

{
"type": "FeatureCollection",

"features": [
{ "type": "Feature", "id": 0, "properties": { "PC2CODE": "10", "PC2NR": 10, "INW_T": 697830 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 5.016855446988143, 52.349866914447176 ], [ 5.014431962156695, 52.347111770955848 ], [ 5.009350157428187, 52.344472149717674 ], [ 5.012133851358907, 52.344143065780877 ], [ 5.012314670330961, 52.343410242383534 ], more geometries

Hope someone can help!

Answer 1

Look at the properties of the feature objet passed to the onFeatureSelect(feature){} function.

For example, you can use :

    popup = new OpenLayers.Popup.FramedCloud(
        feature.attributes.PC2CODE,
        feature.geometry.getBounds().getCenterLonLat(),
        null,
          "<div style='font-size:.8em; font-weight: bold'>" + 
          feature.attributes.PC2CODE + " - "
           + feature.attributes.PC2NR
           + "<br />INW_T : " + feature.attributes.INW_T + "</div>",
        null,
        popupCloseBox,
        onPopupClose
   );
   feature.popup = popup;
   popup.feature = feature;
   map.addPopup(popup);

(Sorry for the quickly posted code).