Independent feature selection in Openlayers using GEOJson format

Question

I'm working with OpenLayers and loading a couple of GEOJson files which works perfectly. Now I want to be able to select individual components of the GEOJson file. As for example if I have more than one Feature (a couple of polygons) when I activate the hover selection, nothing happens.

I added the hover selector to this example http://openlayers.org/dev/examples/geojson.html

I can actually drag the elements independently but I can't select them. I assume it is because of the projection I'm using. Any Ideas how to fix it?

Cheers!

function init(){

var options = {
    projection: new OpenLayers.Projection("EPSG:900913"),
    displayProjection: new OpenLayers.Projection("EPSG:4326"),
    units: "m",
    numZoomLevels: 18,
};

map = new OpenLayers.Map('map', options );
var mapnik = new OpenLayers.Layer.OSM({layers: 'basic'});           
map.addLayer(mapnik);

map.addControl(new OpenLayers.Control.MousePosition());

var lon = 12.18;
var lat = 53.81;
var lonLat = new OpenLayers.LonLat(lon,lat).transform(map.displayProjection,  map.projection);

var mapcent = new OpenLayers.LonLat(lon, lat).transform(map.displayProjection, map.projection);
zoom = 5.5;
map.setCenter(mapcent, zoom);
document.getElementById('noneToggle').checked = true;

var proj = new OpenLayers.Projection("EPSG:4326");

var file = [];
file[0] = "geojson/nuts3.geojson";

var style = [];

i=0;
while(i<file.length){
    style[i] = new OpenLayers.StyleMap({
        pointRadius: 2,
        strokeColor: 'red',
        strokeWidth: 1,
        strokeOpacity: 1,
        fillColor: 'red',
        fillOpacity: 0.2
    });

    var layer_name = "layer_" + i;
    vectorLayer[i] = new OpenLayers.Layer.Vector(layer_name,  {
        styleMap: style[i],
        projection: map.displayProjection,
        preFeatureInsert: function(feature){
        feature.geometry.transform(proj, map.getProjectionObject());
        },
    });
    map.addLayer(vectorLayer[i]);   

    var gjson = new OpenLayers.Format.GeoJSON();
    var featurecollection = ReadFile(file[i]);
    //Readfile is just a normal Request.POST function   
    vectorLayer[i].addFeatures(gjson.read(featurecollection));  
    i=i+1;
}

controls = {
    selecthover: new OpenLayers.Control.SelectFeature(vectorLayer[0],{
        hover: true,
        highlightOnly: true
    })
};

for(var key in controls) {
    map.addControl(controls[key]);
    controls[key].activate();

}

            var report = function(e) {
            OpenLayers.Console.log(e.type, e.feature.id);
        };

        var highlightCtrl = new OpenLayers.Control.SelectFeature(vectors, {
            hover: true,
            highlightOnly: true,
            renderIntent: "temporary",
            eventListeners: {
                beforefeaturehighlighted: report,
                featurehighlighted: report,
                featureunhighlighted: report
            }
        });


        map.addControl(highlightCtrl);
        map.addControl(selectCtrl);            
}

The geojson file looks something like

{ "type": "FeatureCollection", "features": [ { "type": "Feature", "id": 0, "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 9.244170, 48.847009 ], [ 9.246171, 48.822260 ], [ 9.248220, 48.796910 ], [ 9.248433, 48.794277 ], [ 9.290007, 48.791633 ], [ 9.298732, 48.785304 ], [ 9.145165, 48.859655 ], [ 9.153553, 48.861241 ], [ 9.207493, 48.852769 ], [ 9.235667, 48.848344 ], [ 9.244170, 48.847009 ] ] ] } } , { "type": "Feature", "id": 1, "properties": {}, "geometry": { "type": "Polygon", "coordinates": [ [ [ 9.064848, 48.755577 ], [ 9.038994, 48.741317 ], [ 9.104720, 48.709080 ], [ 9.104721, 48.709079 ], [ 9.146561, 48.663574 ], [ 9.156822, 48.652414 ], [ 9.162166, 48.646602 ], [ 9.174173, 48.633544 ], [ 9.064848, 48.755577 ] ] ] } } , ... etc

zom-pro zom-pro · Accepted Answer · 2012-06-18T09:56:30

OK I Solved it.

https://gis.stackexchange.com/questions/25314/change-vector-projection-in-openlayers

Following the projection proposed in the right answer of that question and using independent id's for each part of the geojson file it is possible to select on hover.

Independent feature selection in Openlayers using GEOJson format

1 Answers