2

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:

enter image description here

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());
  });
3
  • Sorry, I hope it is more clear now. Its not so easy to explain...
    – Nicola
    Aug 8 at 15:28
  • 1
    Read the Leaflet.Markercluster documentation. Specifically, the bit about zoomToBoundsOnClick. Aug 8 at 16:44
  • Thank you. Yes I read that, but it is not stopping the points from seperating out of the cluster. My goal is to keep the points clustered and just get the information from the points in a PopUp or something.
    – Nicola
    Aug 9 at 7:17

1 Answer 1

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());
});
6
  • Thank you! This is working perfectly
    – Nicola
    Aug 10 at 9:35
  • Issue is just that with double click it is still seperating the cluster to the points location. But I have to think about a solution to solve that.
    – Nicola
    Aug 10 at 10:17
  • 1
    This has nothing to do with clusters, its Leaflet double click zoom. To prevent it, use map's doubleClickZoom: false option.
    – TomazicM
    Aug 10 at 10:27
  • Sure, with that I can not zoom in by double clicking. I dont want to disable zooming I wont to disable the cluster the be seperated into the single points when zooming in. I think then I have to use a cluster method not based on zooming.
    – Nicola
    Aug 10 at 11:32
  • 1
    For that see option disableClusteringAtZoom.
    – TomazicM
    Aug 10 at 12:52

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.