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.

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!

share|improve this question

1 Answer 1

up vote 2 down vote accepted

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

share|improve this answer
    
This was really helpful. Thanks! –  Stefan Dec 5 '12 at 12:41
    
Stefan, can you possibly post your final code to get this to work, I am having the same issue and can't seam to figure it out. –  GreyHippo Feb 7 '13 at 18:26
    
@GreyHippo are you still interested in the code or did you solve the issue. Sorry for the late response... –  Stefan May 22 '13 at 13:32
    
I was able to solve it. –  GreyHippo May 23 '13 at 13:58

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.