Ndtyjky

I created a map using Leaflet with clusters. I wanted to add a popup when you click the cluster and it will show a popup list of names of the markers inside the cluster. I found a code and it does exactly what I’m looking for: a list popup showing the names of the markers inside the cluster and when you click on the different names on the popup list the related marker popup appears. But when I added the code to my project, I get the error, “reference error onclick is not defined” and the function won't run. I research this error and I found it’s not good practice to use the onclick function in my javascript/HTML in the way the code is written. My question is, how do I rewrite the script to work the way the example I’m using. Here’s a link to the example I’m using to show what I’m trying to accomplish (and this example works when I download it and run it…no error) - http://www.digital-geography.com/working-with-clusters-in-leaflet-increasing-useability/. And I also included my script. Any help on how to make this work will greatly be appreciated. Or, I’m open to achieve this in a different way. Thanks in advance!

function openPopUp(id, clusterId){

map.closePopup(); //which will close all popups

map.eachLayer(function(layer){     //iterate over map layer

if (layer._leaflet_id == clusterId){         // if layer is markerCluster

layer.spiderfy(); //spiederfies our cluster

     }

});

map.eachLayer(function(layer){//iterate over map rather than clusters

if (layer._leaflet_id == id){// if layer is marker

layer.openPopup();

     }

});



markers.on('clusterclick', function(a){

if(a.layer._zoom == 6){

var myText = '<ul>';

for (feat in a.layer._markers){

myText += '<li><u onclick="openPopUp"(' + a.layer._markers[feat]._leaflet_id + ',' + a.layer._leaflet_id + ')>' + a.layer._markers[feat].feature.properties['cityName2'] + ',' + a.layer._markers[feat].feature.properties['cityName2'] + '</u></li>';

        }

myText += '</u>';

var popup = L.popup().setLatLng([a.layer._cLatLng.lat,a.layer._cLatLng.lng]).setContent(myText).openOn(map);



    }

})

Because .setContent can accept an HTMLElement rather than just an HTML string, all you need to do is pass in an element with the listener attached, instead of the HTML string - construct the elements explicitly with createElement, and use addEventListener on the element you want to attach the listener to:

markers.on('clusterclick', function(a) {

  if (a.layer._zoom !== 6) return;

  const ul = document.createElement('ul');

  a.layer._markers.forEach(({ _leaflet_id, feature }) => {

    const { cityName2 } = feature.properties;

    const li = ul.appendChild(document.createElement('li'));

    const u = li.appendChild(document.createElement('u'));

    u.addEventListener('click', () => openPopUp(_leaflet_id, a.layer._leaflet_id));

    u.textContent = cityName2 + ',' + cityName2;

  });

  const popup = L

    .popup()

    .setLatLng([a.layer._cLatLng.lat, a.layer._cLatLng.lng])

    .setContent(ul)

    .openOn(map);

})