Showing popup with info about all markers in the clustered marker in Leaflet?

Question

I'm using Leaflet PlugIn markercluster for leaflet https://github.com/Leaflet/Leaflet.markercluster to visualize Points. My goal is to stop the process of "getting closer" to the points, so marker won't be created. The idea behind it is, to not show the exact location of the point.

Im think about a visualization like this:

The best would be if I can set the radius I want all Points to be clustered and then just showing the result of the cluster not the point itself. When clicking the Cluster I want to get the information of all the points within a cluster, but not the points visualized.

Below you can find the code I have so far.

 var map = new L.Map("map").setView([50.110924, 8.682127],11);
    

    var cartodbAttribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>';

    var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: cartodbAttribution
    }).addTo(map);
    
    


  var dcStyle = {
   
            weight: 2,
            opacity: 0.5,
            color: 'white',
            dashArray: '3',
            fillColor: "yellow",
            fillOpacity: 0.3,
    
  };
  

  var ffm =
    "http://localhost:8080/geoserver/wfs?service=wfs&version=2.0.0&request=GetFeature&typeNames=cite:ffm&outputFormat=application/json&srsName=epsg:4326";



  $.getJSON(ffm).then((res) => {
    var layer = L.geoJson(res, {
     

      style: dcStyle,
    }).addTo(map);

    map.fitBounds(layer.getBounds());
  });
    var dc = 
    "http://localhost:8080/geoserver/wfs?service=wfs&version=2.0.0&request=GetFeature&typeNames=cite:dc&outputFormat=application/json&srsName=epsg:4326";

const markers = new L.markerClusterGroup({
    spiderfyOnMaxZoom:false,
    showCoverageOnHover: false,
    });

 $.getJSON(dc).then((res) => {
    var layer = L.geoJson(res, {
      onEachFeature: function (feature, layer) {
           const popupContent =
          '<h4 class = "text-primary">Information</h4>'+
           '<div class="container"><table class="table table-striped">' +
          "<thead><tr><th>Properties</th><th>Value</th></tr></thead>" +
          "<tbody><tr><td> Name </td><td>" +
          feature.properties.dc_name;
    layer.bindPopup(popupContent);
      },  
    pointToLayer: function(feature,latlng){
        return markers.addLayer(L.circleMarker(latlng,geojsonMarkerOptions)) 
        },
    }).addTo(map);
    map.fitBounds(layer.getBound());
  });

Answer 1

To display popup upon marker cluster click with info about all the markers in the cluster, there are several things needed:

• cluster marker layer markers has to be created with zoomToBoundsOnClick: false option, to prevent markers to be unclustered upon click;
• event processing function for marker cluster clusterclick has to be set, where popup is defined and triggered, with info from all the markers in the cluster;
• basic GeoJSON layer layer with unclustered markers has to be added to the clustered marker layer markers, and this layer then to the map.

Code could then look something like this:

const markers = new L.markerClusterGroup({
  spiderfyOnMaxZoom:false,
  showCoverageOnHover: false,
  zoomToBoundsOnClick: false
});
markers.on('clusterclick', function(evt) {
  var clusterMarkers = evt.layer.getAllChildMarkers();
  var popupContent =
    '<h4 class = "text-primary">Information</h4>'+
    '<div class="container"><table class="table table-striped">' +
    '<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
    '<tbody>';
  clusterMarkers.forEach(function(marker) {
    popupContent += '<tr><td>Name</td><td>' + marker.feature.properties.dc_name + '</td></tr>';
  });
  popupContent += '</tbody></table></div>';
  var popup = L.popup()
    .setLatLng(evt.latlng)
    .setContent(popupContent)
    .openOn(map);
});

$.getJSON(dc).then((res) => {
  var layer = L.geoJson(res, {
    onEachFeature: function (feature, layer) {
      const popupContent =
        '<h4 class = "text-primary">Information</h4>'+
        '<div class="container"><table class="table table-striped">' +
        '<thead><tr><th>Properties</th><th>Value</th></tr></thead>' +
        '<tbody>' +
        '<tr><td> Name </td><td>"' + feature.properties.dc_name + '</td></tr>' +
        '</tbody></table></div>';
      layer.bindPopup(popupContent);
    },  
    pointToLayer: function(feature,latlng){
      return L.circleMarker(latlng,geojsonMarkerOptions);
    }
  }).addTo(markers);
  markers.addTo(map);
  map.fitBounds(markers.getBound());
});