OpenLayers 2 GeoJSON – Adding an Infowindow to an OpenLayers GeoJSON Layer

geojsongetfeatureinfoopenlayers-2

In my OpenLayers script I refer to an geojson layer. Is it possible to add an info window?If yes, how can I create this. Script is as follows:

var lon = 5,
    lat = 52,
    zoom = 7,
    epsg4326 = new OpenLayers.Projection('EPSG:4326'),
    epsg900913 = new OpenLayers.Projection('EPSG:900913');

function init(){

        var myStyles = new OpenLayers.StyleMap({ 
        "default": new OpenLayers.Style({ 
        fillColor: "${getColor}",
            strokeWidth: 1,             
        strokeColor: "#000", 
        fillOpacity: 0.8, 
        graphicZIndex: 5 

    },
    {
        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
    });

    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]);

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

GeoJson file has the following format:

{
"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?

UPDATE

Selecting an feature is working now. In the function init I added the following 2 things:

  1. feature select

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

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

  2. selectControl

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

So now I have a popup with 'boom' on my screen. How can I put the data from the geojson layer in the pop-up.

Even better, I rather not have a pop-up but want the data to be visible below the map. Similar to http://workshops.opengeo.org/openlayers-intro/controls/select.html (step 4)

The code they use: 

buildings.events.on({
    featureselected: function(event) {
        var feature = event.feature;
        var area = feature.geometry.getArea();
        var id = feature.attributes.key;
        var output = "Building: " + id + " Area: " + area.toFixed(2);
        document.getElementById("output-id").innerHTML = output;
    }
});

Can I refer to a geojson layer with this code?

Thanks!

Best Answer

Option #1:

Use a click Handler (EXAMPLE).

and Inside click trigger build the infoWindow like so:

...
trigger: function(e) {
   var feature = geojson_layer.getFeatureById(e.target._featureId); //<--feature being clicked on.
   map.addPopup(new OpenLayers.Popup.FramedCloud(
        "chicken", 
        map.getLonLatFromPixel(e.xy),
        null,
        "some text",
        null,
        true
    ));
}
...

You can determine/retrieve the feature which is being clicked on by doing var feature = geojson_layer.getFeatureById(e.target._featureId);

Option #2:

Use the OpenLayers.Control.SelectFeature control. This example includes the infoWindow (popup)

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