3

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!

1 Answer 1

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

3
  • 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
    Commented Feb 7, 2013 at 18:26
  • @GreyHippo are you still interested in the code or did you solve the issue. Sorry for the late response...
    – Stefan
    Commented May 22, 2013 at 13:32
  • I was able to solve it.
    – GreyHippo
    Commented May 23, 2013 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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