Displaying GeoJSON data in Leaflet?

Question

I am trying to access and display some data in a GeoJSON layer.

Can someone take a look at my code below and suggest what I need to do to make it work?

The result of the console.log is:

Object {latlng: o.LatLng, layerPoint: o.Point, containerPoint: o.Point, originalEvent: MouseEvent, type: "click"…}

---

var wrldbndryData;

function wrldbndryStyle(feature) 
{
    return {
        weight: 2,
        opacity: 0.1,
        color: 'black',
        fillOpacity: 0.1
    };
}

function highlightFeature(e) 
{
    var layer = e.target;

    layer.setStyle(
    {
        weight: 9,
        color: '#666',
        fillOpacity: 0.5
    });

    if (!L.Browser.ie && !L.Browser.opera) 
    {
        layer.bringToFront();
    }
}

function resetHighlight(e) 
{
    wrldbndryData.resetStyle(e.target);
}

function showFeature(feature)  <-- *** THIS IS WHERE I AM TRYING TO ACCESS THE GEOJSON DATA *****
{
    console.log(feature); 
    if (feature.properties && feature.properties.NAME) 
    {
        $('#sidecol').html('<b><center> COUNTRY INFO </center</b>' + '<br><b>' + feature.properties.NAME + '</b>');
    }
}

function eachFeature(feature, layer) 
{
    layer.on(
    {
        click: showFeature,
        mouseover: highlightFeature,
        mouseout: resetHighlight
    });
}

wrldbndryData = L.geoJson(wrldbndry,
{
    style:wrldbndryStyle,
    onEachFeature:eachFeature
});

wrldbndryData.addTo(map);

Answer 1

the showFeature function that you attached to click event receive a MouseEvent object as argument.

To get the layer from a MouseEvent object, you can use its target property. And if the layer was created using geojson,then that layer has a property call feature with the data.

try this:

function showFeature(e) 
{
    var layer = e.target;
    var feature = layer.feature;

    console.log(feature); 
    if (feature.properties && feature.properties.NAME) 
    {
        $('#sidecol').html('<b><center> COUNTRY INFO </center</b>' + '<br><b>' + feature.properties.NAME + '</b>');
    }
}