6

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  
  • Can you share a snippet of your GeoJSON file? Looks like the id is not provided in the correct way. Otherwise what you were trying should have worked. On a side note, there is no ol.events.condition.mouseclicked. – ahocevar Dec 16 '14 at 10:05
  • Thanks for comment: about the mouseclicked, thanks for the note, it should be singleClick. I've updated the question with a snippet of my geoJSON file. – antonLundkvist Dec 16 '14 at 12:49
  • Your GeoJSON does not have an id for a feature. See b-eyes's answer below. What your GeoJSON has is features with two attributes, 'id' and 'sovereignt'. So you'll have to use feature.get('id'). – ahocevar Dec 17 '14 at 14:03
4

Have you tried:

var id = feature.get('id'); 

As far as I know

var id = feature.getId();

gives you an internal OL3 feature id, not the JSON id.

  • 1
    This is incorrect. feature.getId() does not return an internal OpenLayers feature id, it returns the server's id for the feature. And feature.get('id') does not return the GeoJSON id, it returns the value of the feature's id attribute (just like feature.get('sovereignt') returns the value of the feature's sovereignt attribute). – ahocevar Dec 17 '14 at 14:00
4

you have to set the id outside of the properties ... your geoJson Should look like that :

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" },                                                                          
"features": [
{ 
"type": "Feature",
"id": 1 ,
"properties": { "sovereignt": "Afghanistan"}, 
"geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 61.210817091725744 ...] ] ] ]
...
  • Correct. The id in the above snippet will be returned with feature.getId(). – ahocevar Dec 17 '14 at 14:02
0

Thanks for the answers! The solution in this case was:

var id = feature.get('id');

This returns the geoJSON id.

Whereas:

var id = feature.getID();

returns the openLayers id, just as Anders Finn pointed out above.

Thanks again for guiding!

  • In this case the solution is correct, but the explanation is misleading. See my comment on Andreas Finn's post below. – ahocevar Dec 17 '14 at 14:19

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.