Leaflet on click event returns undefined value from a geojson-CodePudding

Trying to create a map using leaflet and geojson file which will return the country name as its value when i click it. however all im currently getting is undefined.

var popup = L.popup();
function onMapClick(e) {
    popup
        .setLatLng(e.latlng)
        .setContent("click"   MYGEOJSON.features[0].properties.name ) // Have to add
        .openOn(map);
}

name_of_countries = []
eu['features'].forEach(feature => name_of_countries.push(feature['properties']['NAME'].value))

console.log(name_of_countries)
var myStyle = {
    "color": "grey",
    "weight": 2.5,
    "opacity": 1
};
L.geoJSON(MYGEOJSON,{
  style:myStyle
}).addTo(map)
map.on('click', onMapClick);
var options = {
  maxZoom: 16,
  tolerance: 3,
  debug: 0,
  style: {
    fillColor: "#1EB300",
    color: "#F2FF00",
  },
};

console.log(MYGEOJSON.features[0].properties.name)`

I have a geojson file with all european countries mapped as polygons.

Im trying to solve it doing two things. one is to log it into console to see if it works an other is as a click event when i click on the map. However both return undefined.

CodePudding user response：

Add to the polygons directly a popup while creating:

L.geoJSON(MYGEOJSON,{
  style:myStyle,
  onEachFeature: function(feature, layer){
    layer.bindPopup(feature.properties.name)
  }
}).addTo(map)