Leaflet spiderfy onclick on link to open poup

Question

first, sorry for my english...

I am working on a map using openstreetmap and information leaflet and a listing

According to checked "rubrics", I show markers of different structures on the map and the list of its structures under the map

When they click on the title of the list of structures under the map, I open the popup on the map.

My problem is that there are structures with the meme address (same lat and lon), therefore markers overlaps. Markers is clusters. if they click on the map on cluster, that "spiderfy" and i can see several markers. On the contrary when they click on the title of structure under the map, it doesn't show that spiral and the popup

I have found a solution which disable cluster and that no longer indicates that there are multiple markers to the same address. It is a solution which I am not fully satisfied because I'd like that users see that there are several structures/markers to this address

the map is : http://www.ecocitoyen-grenoble.org/joomla/index.php/annuaire ( to test with the last checkbox "Loisirs, espaces naturels" - picto of a man and click on the last structure in the list)

Scripts:

The map:

<script type="text/javascript">
// <![CDATA[
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
});
var map = L.map('map', {
    center: [45.1666700, 5.7166700],
    zoom: 13,
    layers: [osm]
});
var markers = L.markerClusterGroup({
    //disableClusteringAtZoom: 18
});
// ]]>
</script>

Display markers :

function rech_picto_structure()
      {


    map.removeLayer(markers);
    markers.clearLayers();

    var rub1 = '0';
    var rub2 = '0';
    var rub3 = '0';
    var rub4 = '0';
    var rub5 = '0';
    var rub6 = '0';

          var cp_ville = '';

          cp_ville =  document.getElementById("cp_ville").value;

    if (document.getElementById("box_layer_1").checked ) 
    {
        rub1 = '1';            
    }

    if (document.getElementById("box_layer_2").checked ) 
    {
        rub2 = '1';            
    }

    if (document.getElementById("box_layer_3").checked ) 
    {
        rub3 = '1';            
    }

    if (document.getElementById("box_layer_4").checked ) 
    {
        rub4 = '1';            
    }

    if (document.getElementById("box_layer_5").checked ) 
    {
        rub5 = '1';            
    }

    if (document.getElementById("box_layer_6").checked ) 
    {
        rub6 = '1';            
    }   

    if (rub1 == '0' && rub2 == '0' && rub3 == '0' && rub4 == '0' && rub5 == '0' && rub6 == '0')
    {
        document.getElementById('liste_annuaire').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
        document.getElementById('picto_structure_div').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";

    }
    else
    {

        var xhr = getXhr();

        // On défini ce qu'on va faire quand on aura la réponse
        xhr.onreadystatechange = function()
        {

          // On ne fait quelque chose que si on a tout reçu et que le serveur est ok
          if(xhr.readyState == 4  && xhr.status == 200)
          {
          var picto = xhr.responseText;
          if (picto.length > 3)
          {
                          liste_structure = '';
                          var tab_picto = [];
                          markers_all = [];
                          var addressPoints = picto.split("|");
                          //alert (addressPoints);
                          for (var i = 0; i < addressPoints.length; i++) {
                              var cel = addressPoints[i].split("µ");
                              tab_picto.push(cel);
                          }
                          for (var i = 0; i < tab_picto.length; i++) {
                              var a = tab_picto[i];
                              var title = a[2];
                              var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title }).bindPopup("<div><b>" + a[3] + "</b><br/>"  + a[4] + "<br><br>" + a[5] + "<br/></div>");

                              liste_structure += a[6];

                              markers_all.push(marker);
                          }      

                          for (var i in markers_all){
                              markers.addLayer(markers_all[i]);
                          }

                          map.addLayer(markers);
                          map.fitBounds(markers.getBounds());

            if (liste_structure == '')
            {
            document.getElementById('liste_annuaire').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
            document.getElementById('picto_structure_div').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
            }
            else
            {
            document.getElementById('liste_annuaire').innerHTML = liste_structure;
            document.getElementById('picto_structure_div').innerHTML = tab_picto.length + " structures trouvées";
            }
          }
          else
          {
            document.getElementById('liste_annuaire').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
            document.getElementById('picto_structure_div').innerHTML = "Veuillez choisir une rubrique pour afficher les structures.";
          }
          }
        }

        xhr.open("POST","../../admin/annuaire/generer_carte.php",true);
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.send("rub1="+rub1+"&rub2="+rub2+"&rub3="+rub3+"&rub4="+rub4+"&rub5="+rub5+"&rub6="+rub6+"&cp_ville="+cp_ville);
    }
      }

Open popup on click on the title of the list under the map

  function markerFunction(id){
for (var i in markers_all){
var markerID = markers_all[i].options.title;
//alert(markerID);
if (markerID == id){

      LatLng = markers_all[i].getLatLng();
      //alert(LatLng);

      //map.setView([45.19116, 5.7311], 15);
      map.setView([LatLng.lat, LatLng.lng], 20);
      //markers.spiderfy();
              //markers.unspiderfy()
      markers_all[i].openPopup();

};
}}

Thx stephane

Answer 1

If I understand well, you want to open the popup corresponding to the item in the list, but the marker is in a cluster

Providing you put all your markers in an array when you create them, you can remove the marker from the cluster and add it to the map when you want to open the popup

markerCluster.removeLayer(markers[selectedId]);
map.addLayer(markers[selectedId]);
markers[selectedId].openPopup();

Look at the page source of this: http://franceimage.github.io/leaflet/8/?map=46.566414,2.4609375,6&popup=81

In my case, I want to highlight the marker when I have a 'popup' parm in the url