0

I'm on a leaflet map project. I'm working with a geoJson file; I'm looking a way to target the markers that are inside a cluster, in order to show their respective datas in a dynamic div; I have an OnEachFeature function, in which I build all the html to display my datas properly.

If I add :

clusters.on('clusterclick', function (a) {
    // a.layer is actually a cluster
    console.log('cluster ' + a.layer.getAllChildMarkers().length);
});

When I click on a cluster that have 2 markers, It shows me the number "2" in console.. enter image description here

But when I try to loop in it, it displays all my geoJson data for all markers of my map, instead of just the selected one.

clusters.on('clusterclick', function(a){
    if(a.layer._zoom == 18){
    var markers = a.layer.getAllChildMarkers();
    for (var i = 0; i < markers.length; i++) {
        $('#layer_infos .fill').append(html);
    }   
  }
})

With this, I get also exactly the same results..so I don't understand.

clusters.on('clusterclick', function(a){
    if(a.layer._zoom == 18){            
    $('#layer_infos .fill').append(html);                                       
    }
})

Can someone help me target only the clustered markers ?

I saw this turorial, which does exactly what I'm after, but I'm unable to use their code in my project, becaus all my html is inside a variable..

EDIT:

Here is my onEachFeature function :

 function onEachFeature(feature, layer) {

        var html = '';
        if (feature.properties.Professeur) {
            html += '<p class="prof">' + feature.properties.Professeur + '</p>';
        }
         if (feature.properties.Professeur2) {
            html += '<p class="prof2">' + feature.properties.Professeur2 + '</p>';
        }
        if (feature.properties.Chu) {
            html += '<p class="chu">' + feature.properties.Chu + '</p>';
        }
        if (feature.properties.Laboratoire) {
            html += '<p class="labo">' + feature.properties.Laboratoire + '</p>';
        }
        if (feature.properties.Prelevement) {
            html += '<p>' + feature.properties.Prelevement + '</p>';
        }
        if (feature.properties.Envoi) {
            html += '<p>' + feature.properties.Envoi + '</p>';
        }
        if (feature.properties.Adresse) {
            html += '<p class="adress">' + feature.properties.Adresse + '</p>';
        }
        if (feature.properties.Cp) {
            html += '<p class="cp">' + feature.properties.Cp + '</p>';
        }

        if (feature.properties.Tel) {
            html += '<p class="tel">' + feature.properties.Tel + '</p>';
        }
        if (feature.properties.Fax) {
            html += '<p class="fax">' + feature.properties.Fax + '</p>';
        }
        if (feature.properties.Mail) {
            html += '<p class="mail"><a href="mailto:' + feature.properties.Mail +'">' + feature.properties.Mail + '</a></p>';
        }
        if (feature.properties.Tel2) {
            html += '<p class="tel">' + feature.properties.Tel2 + '</p>';
        }
        if (feature.properties.Fax2) {
            html += '<p class="fax">' + feature.properties.Fax2 + '</p>';
        }
        if (feature.properties.Mail2) {
            html += '<p class="mail"><a href="mailto:' + feature.properties.Mail2 +'">' + feature.properties.Mail2 + '</a></p>';
        }
        if (feature.properties.Renseignement) {
            html += '<p class="rt">' + feature.properties.Renseignement + '</p>';
        }
        if (feature.properties.Url) {
            html += '<p class="url"><a href="' + feature.properties.Url + '">' + feature.properties.Url + '</a></p>';
        }
      html+='<div class="pictos">';


        if (feature.properties.Examen) {
            html += '<span class="' + feature.properties.Examen + '">' + feature.properties.Examen + '</span>';
        }

            html+='</div>';

        layer.on('click', function() {
            $('#layer_infos .fill').html(html);

            if (L.Browser.mobile) {
                $('#infos').addClass("slide"); 
                $('#filters').removeClass('slide');
                $('.hamburger').text('Sélectionner un examen').fadeIn();
             }
        }) 


        clusters.on('clusterclick', function(a){
            if(a.layer._zoom == 18){

                $('#layer_infos .fill').append(html);
            }



        })
    }
7
  • What's the value of html inside that loop? Apr 24 '20 at 15:18
  • Thanks Ivan. My html contains all geojson properties for each marker...
    – blogob
    Apr 24 '20 at 15:20
  • ...so where are you assigning a value to html, i.e. how does your var html = ... code looks like? Apr 24 '20 at 15:21
  • Thanks again Ivan, I edited my question.
    – blogob
    Apr 24 '20 at 15:26
  • 1
    The value of html is always the one from the last run of the loop, not what you think it's the "current" value. You have a variable scope problem, and you should read about closures e.g. at stackoverflow.com/questions/111102/… . Also, think how many times you attach event handlers to the MarkerCluster group (clusters.on('clusterclick',...). Even if you got the closures right, that's useless if there's one event handler per feature because all features will trigger something on any cluster marker. Apr 24 '20 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.