Setting the name of feature in geoJSON and retrieving client side

Question

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'))

Answer 1

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
          }
        }
       ]
     }

Answer 2

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);
 });