mapbox geojson properties not available on hover

Question

I'm using mapbox and loading multiple geojson layers on to the map, like so:

...

var aLayer = L.mapbox.featureLayer('/a.geojson');
var bLayer = L.mapbox.featureLayer('/b.geojson');
var cLayer = L.mapbox.featureLayer('/c.geojson');

var layers = {
    LayerA: aLayer,
    LayerB: bLayer,
    LayerC: cLayer
}

...

layers.LayerA.addTo(map).on('ready', function(e) {
  map.fitBounds(LayerA.getBounds(), {animate: true});
});

L.control.layers(layers).addTo(map);

Each geojson feature contains a number of properties; the title and description display correctly within the tooltips, for instance.

Where I'm having trouble is accessing these properties with other interactions. I'm adjusting the style of each polygon on hover, like so:

LayerA.on('mouseover', function(e)
{
    e.layer.setStyle({
        weight: 2,
        fillOpacity: 0.7
    });

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

LayerA.on('mouseout', function(e)
{
    e.layer.setStyle({
        weight: 0.5,
        fillOpacity: 0.5
    });
});

Any attempt to access the properties within the interactions, via e.layer or e.target, fails. I assume the tooltip working means they are available, but can't work out where I've gone wrong...?

iH8 iH8 · Accepted Answer · 2015-01-26T16:54:19

What you are doing is handling events of the featureLayer, not of the individual layers that are contained within the featureLayer. FeatureLayer is a group of layers, a layer for each feature within the collection you pass to it on initialization. Take this collection for instance, renders three markers in one featureLayer:

var featureCollection = {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "id": 1
        },
        "geometry": {
            "type": "Point",
            "coordinates": [0, 0]
        }
    },{
        "type": "Feature",
        "properties": {
            "id": 2
        },
        "geometry": {
            "type": "Point",
            "coordinates": [30, 30]
        }
      },{
        "type": "Feature",
        "properties": {
            "id": 3
        },
        "geometry": {
            "type": "Point",
            "coordinates": [-30, -30]
        }
    }]
};

var featureLayer = L.mapbox.featureLayer(featureCollection).addTo(map);

Now if a hook a handler to the click event of featureLayer:

featureLayer.on('click', function (e) {
    console.log('Clicked featureLayer');
});

That will fire regardless of which marker i click. It isn't even aware of which marker i clicked, in there e.target will hold the instance of the featureLayer not of the individual layers contained within it. Now if i hook clickhandler onto the click events of the indivual layers within featureGroup:

featureLayer.eachLayer(function (layer) {
    layer.on('click', function (e) {
        console.log('Clicked feature ID: ' + e.target.feature.properties.id);
    });
});

Now in the click handler e.target holds the instance of the clicked marker, which has the feature object available as a property for you to use.

Here's a working example on Plunker: http://plnkr.co/edit/qwgDtQMRuR4XTcrnC1vf?p=preview

mapbox geojson properties not available on hover

1 Answers