I'm working on a webmap using OpenLayers 3
and vector layers, geoJSON
. I've managed to render the layers and add click interactions:
select = new ol.interaction.Select({
condition: ol.events.condition.mouseclicked,
style: myStyle,
});
var map = new ol.Map({
interactions:
ol.interaction.defaults().extend([select]),
The interaction works fine, it sets a new style to the selected feature (borders of the selected country etc).
What I want is to retrieve the selected feature's id from the geoJSON file and use that to know what country is selected. Depending on what country is selected a network (lines) will be drawn from that country to other countries, retrieved from a DB.
Is there a way of doing this? I've tried the following (without proper formatting):
select = new ol.interaction.Select({
condition: ol.events.condition.mouseclicked,
style: myStyle,
});
var features = select.getFeatures();
var feature = features.item(0);
var id = feature.getId();
This gives me an id
that is undefined even though the feature has an id
in the geoJSON file.
Is there another way of doing this? I've searched around the web and this forum without finding an answer.
This is a snippet of my geoJSON file, all features have the same properties:
{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "sovereignt": "Afghanistan", "id": 1 },
"geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 61.210817091725744
ol.events.condition.mouseclicked
.feature.get('id')
.