1

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

  • do you have unique ids for you polygons? – Mapperz Jun 15 '12 at 15:44
  • yes. I generated the geojson file with QGIS so all the elements have independent ids and properties. – zom-pro Jun 15 '12 at 15:48
  • I tried and it works if you add the elements as independent featurecollections. However, this doesn't represent a very useful solution considering big files. – zom-pro Jun 15 '12 at 15:55
1

OK I Solved it.

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.

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.