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.

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!

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

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();
share|improve this answer
    
Thanks for your answer, but I can't get it working. I am new to OpenLayers First I want to select a feature. I tried this with your second options, but can't get it to work. Also found this: workshops.opengeo.org/openlayers-intro/controls/select.html I tried step 3, but it isn't doing anything... –  Stefan Nov 28 '12 at 8:50
add comment

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.