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