0

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);
  • 1
    Do you get some error when you look at the console? You can try console.log(feature.properties.NAME) and see what you get. – againstflow Aug 21 '14 at 12:18
3

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

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.