1

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!

2

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();
  • 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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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