Loop through leaflet FeatureGroup

Question

I have a map with 3 geoJson layers representing school district boundaries. The functionality I need is simple: click the map, get a popup with the school names for each level (elementary, middle, and high school.) [eLayer,mLayer,hLayer]

Here's my feature group:

var fGroup = new L.featureGroup([eLayer,mLayer,hLayer]).addTo(map);

I figured I could use the eachLayer method with a click event to get the school name for each polygon at that location. The code below gets me close.

fGroup.on('click',function(e){
    fGroup.eachLayer(function(layer){
        alert(e.layer.feature.properties.School);
    });
});

I only get the name of the last added geoJson layer, which in this case is the high school. I'm a novice programmer, but I researched this for days now and I found one example that sort of had a suggestion, but their solution didn't actually work.

Just to be perfectly clear, I want my output to be like below.

___________________________
|                         |
|Lincoln Elementary School|
|Tubman Middle School     |
|Frederick High School    |
|_________________________|

I don't understand how the data is formed and how you can associate schools from different levels. Please could you give an extract of your geojson data so that we can see what could be usefull to build an alert/popup for each triplet ? What you want to do does not seem very complicated but i don't have all the elements. — Julien V, Mar 31 '17 at 14:57

Julien V · Accepted Answer · 2017-03-31T05:56:20.890

I guess you have several feature groups and each one just concerns one triplet of schools.

You are close. If i understand you correctly, what you need is :

fGroup.on('click',function(e){
    var txt = '';
    fGroup.eachLayer(function(layer){
        txt = txt + layer.feature.properties.School + ' ; ';
    });
    alert(txt);
});

The click on the group generates one single alert with the three names.

Edit

I still don't get how you retrieve the geojson contents. eLayer, for example, contains one school or several ? What follows only works if each of your *Layer contains just one school. Otherwise, if they contain several features, i don't see how you could make an association between one of the eLayer feature and one of mLayer...

var txt = '';
var eLayer = L.geoJson(ejsoncontent, {
    onEachFeature: function(feature, layer){
      txt = txt + feature.properties.School;
    }
});
var mLayer = L.geoJson(mjsoncontent, {
    onEachFeature: function(feature, layer){
      txt = txt + ' ; ' + feature.properties.School;
    }
});
var hLayer = L.geoJson(hjsoncontent, {
    onEachFeature: function(feature, layer){
      txt = txt + ' ; ' + feature.properties.School;
    }
});

var fGroup = new L.featureGroup([eLayer,mLayer,hLayer]).addTo(map);
fGroup.on('click',function(e){
    alert(txt);
});

The way Leaflet currently works, the `eachLayer` will loop through the immediate child GeoJSON groups, which probably do not have `feature.properties.School` data. Furthermore, your code would blindly append all data, irrespective of what was exactly clicked on. — ghybs, Mar 31 '17 at 04:55
Ok so you need to build the alert content before the feature group. I'll edit my answer. — Julien V, Mar 31 '17 at 05:37
@JulienV, the eLayer (for example) contains many polygons. I'm building a bus and school locator application. eLayer is made up of approximately 6000 polygons. Each polygon retrieves 2 properties: School (name) and BusNumber (the bus a student rides.) The above code almost gets me to where I need to be, except the txt variable is being assigned the school name for every single feature in the layer. — Doug Kampe, Mar 31 '17 at 12:43

score 1 · Answer 2 · answered Mar 31 '17 at 05:03

e.layer will get you only the exactly clicked layer / feature, the click does not "propagate" to layers underneath, even though they may cover that exact location as well. That is why you get the most recently added group data only (i.e. High School).

Furthermore, you arer looping on each layer of fGroup, but do not do anything specific with each child layer, which are actually your 3 GeoJSON layer gorups. So you would get 3 alerts with the same message.

Instead, you should simply get the clicked position (e.latlng) and loop through each individual layer / feature to determine if this layer contains that position.

See Leaflet event how to propagate to overlapping layers

Loop through leaflet FeatureGroup

2 Answers2