3

How do I extract the name of a feature? I want to make it so when I mouse over the feature it is highlighted and is able to have a tooltip with the name of the feature that is moused over.

Here is part of my geoJSON;

"features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -13623642.663851619,
              5984966.7642723517
            ],
            [
              -13623264.36027813,
              5984616.0795468809
            ],
            [
              -13623234.20348176,
              5984616.8260022318
            ],
            [
              -13623255.850687083,
              5984636.9802967971
            ]
          ]
        ]
      },
      "name": "testName"
    },
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [

And the code I am sing to try to get it;

var selectPointerMove = new ol.interaction.Select({
                            condition: ol.events.condition.pointerMove
                        });
                        map.addInteraction(selectPointerMove);
                        selectPointerMove.on('select', function (e) {
                            console.log(e.target.getFeatures().getLength())
                            console.log(e.target.getFeatures().get('name'))
                        });

Seems like whatever I try I cannot extract the name.

I resolved the issue by adding the properties to my geoJSON so it looks like this;

    "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "IMPORT"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              -13623642.663851619,
              5984966.7642723517
            ],
            [
              -13623264.36027813,
              5984616.0795468809
            ],
            [
              -13623234.20348176,
              5984616.8260022318
            ],
            [
              -13623255.850687083,
              5984636.9802967971
            ]
          ]
        ]
      }
    },
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [

And using the Javascript;

map.on('pointermove', function (evt) {
    if (evt.dragging) {
        return;
    }
    pixel = map.getEventPixel(evt.originalEvent);
});
var feature = map.forEachFeatureAtPixel(pixel, function (feature) {
        return feature;
    });
console.log(feature.get('name'))
1
  • try to see this OpenLayers example, it fills the deired layer with fill and stroke, then getInfo – Moh Feb 15 '18 at 12:54
2

The problem is likely in your GeoJSON. The property name must be within a 'properties' JSON object. Additionally, your polygon must start and end with the same coordinates. See here. Here is what it should look like:

{ "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
        "geometry": {
          "type": "Polygon",
          "coordinates": 
         [ [
            [
              -13623642.663851619,
              5984966.7642723517
            ],
            [
              -13623264.36027813,
              5984616.0795468809
            ],
            [
              -13623234.20348176,
              5984616.8260022318
            ],
            [
              -13623255.850687083,
              5984636.9802967971
            ],
           [
              -13623642.663851619,
              5984966.7642723517
            ]
        ]]
          },
        "properties": {
          "name": "testName",
          "otherProperty": 0.0
          }
        }
       ]
     }
1
  • Thanks for the reply, I had tried this before, and have just added it again so now I have "type": "Feature", "geometry": { "type": "Polygon", "coordinates": [ [ ] ], "name": "IMPORT" }, "properties": { "name": "IMPORT" } However the name is still undefined on e.target.getFeatures().get('name') – mattz330 Feb 15 '18 at 13:19
1

The Select interaction event returns a collection of features, that you can access via the getFeatures() property.

Since it is a collection and not a single feature, you can't just get the feature (which one, if several are selected?) attribute, but instead you would need to loop through the selected features and then read their properties.

As answered by @15Step, make sure your JSON syntax is correct.

map.addInteraction(selectPointerMove);
selectPointerMove.on('select', function (e) {
      console.log(e.target.getFeatures().getLength())

      var NME='';
      e.selected.forEach(function(e2){
         NME = NME + e2.get('name');
      })

       console.log(NME);
 });

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.