Extracting vector attributes and inserting them into Pop-ups in OpenLayers

Question

I am slowly getting to grips with OpenLayers v4.6.5 - I have pop-ups which pop-up - but now I'm attempting to get information into the pop-ups.

Here is the code I am using - I have vector items on my map - a mixture of GeoJSON, from local files, and points from coordinates in the code.

I can open the pop-ups, but all I get is 'undefined.'

//Popup on Pointermove

map.on('pointermove', function (event) {

    let layer;
    const feature = map.forEachFeatureAtPixel(
      event.pixel,
      function (feature) {
        return feature;
      },
      { 
        layerFilter: function (name) {
          layer = name;
          return true;
        }
      }
    );
    
    if (feature) {  
        var coordinate = event.coordinate;
        var name1 = feature.get('name');
        var desk1 = feature.get('description');
        
        // text written inside the popup
        content.innerHTML = '<b>'+name1+'<br>'+desk1+'</b>';
        overlay.setPosition(coordinate);
    }

})

Answer 1

I didn't have 'name' and 'description' for the points I had added to the script, so I added in the code for 'name and 'description':

const Whakatane = new ol.Feature({
geometry: new ol.geom.Point (
    ol.proj.fromLonLat([176.9822,-37.9585])),
    name: 'Whakatane',
    description: 'Largest Town'
});

I didn't do anything to the the other features, but suddenly the pop-up code is working for all features.

I did notice that having two features in the same pixel causes only one set of information to appear - I'm wondering if the 'undefined' pop-ups were obscuring the others.

There is case sensitivity between 'Name' and 'name' - so some 'or' code is required.