Add clustering

[JackGilmore]

Add clustering to the map using Leaflet.markercluster

[chrisdebian]

An AI view of implementation:

Implementation Steps

1. Install Dependencies

First, add the Leaflet.markercluster library to your project:

npm install leaflet.markercluster

Or include via CDN in your HTML:

<!-- CSS files -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css" />

<!-- JavaScript file (after Leaflet) -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>

2. Basic Implementation

Replace your current marker layer group with a MarkerClusterGroup:

// Instead of adding markers directly to the map:
// var markers = L.layerGroup().addTo(map);

// Create a cluster group
var markers = L.markerClusterGroup({
  // Optional: customize cluster behavior
  showCoverageOnHover: true,  // Show cluster bounds on hover
  zoomToBoundsOnClick: true,  // Zoom into cluster on click
  spiderfyOnMaxZoom: true,    // Spread out markers at max zoom
  maxClusterRadius: 80,        // Cluster radius in pixels
});

// Add your recycling center markers
var marker1 = L.marker([lat1, lng1]).bindPopup('Recycling Center 1 info');
markers.addLayer(marker1);

var marker2 = L.marker([lat2, lng2]).bindPopup('Recycling Center 2 info');
markers.addLayer(marker2);

// ... add more markers

// Add the cluster group to the map
map.addLayer(markers);

3. Custom Cluster Icons (Optional)

For better visual integration with OpenWasteMap's waste management theme:

var markers = L.markerClusterGroup({
  iconCreateFunction: function(cluster) {
    var childCount = cluster.getChildCount();
    var className = 'marker-cluster-';
    
    if (childCount < 10) {
      className += 'small';
    } else if (childCount < 50) {
      className += 'medium';
    } else {
      className += 'large';
    }
    
    return L.divIcon({
      html: '<div><span>' + childCount + '</span></div>',
      className: 'marker-cluster ' + className,
      iconSize: L.point(40, 40)
    });
  }
});

4. Performance Best Practices

For optimal performance with many recycling centers:

// Add all markers BEFORE adding the cluster group to the map
var markers = L.markerClusterGroup();

// Build all markers first
recyclingCenters.forEach(function(center) {
  var marker = L.marker([center.lat, center.lng])
    .bindPopup(createPopupContent(center));
  markers.addLayer(marker);
});

// Then add to map (much faster)
map.addLayer(markers);

5. Integration with Existing Code

If OpenWasteMap is fetching data from OpenStreetMap, modify the data processing:

// After fetching recycling center data from OSM
function displayRecyclingCenters(data) {
  var markers = L.markerClusterGroup({
    disableClusteringAtZoom: 15,  // Stop clustering at detailed zoom
  });
  
  data.elements.forEach(function(element) {
    if (element.lat && element.lon) {
      var marker = L.marker([element.lat, element.lon])
        .bindPopup(formatCenterInfo(element.tags));
      markers.addLayer(marker);
    }
  });
  
  map.addLayer(markers);
}

6. Additional Options for Waste Centers

Since this is for recycling centers, you might want:

var markers = L.markerClusterGroup({
  // Don't cluster when fully zoomed in
  disableClusteringAtZoom: 16,
  
  // Larger radius for rural areas
  maxClusterRadius: 100,
  
  // Animate markers being added
  animateAddingMarkers: true,
  
  // Custom spiderfy distance for better visibility
  spiderfyDistanceMultiplier: 1.5
});

Key Benefits for OpenWasteMap

• Performance: Handles hundreds/thousands of recycling centers smoothly
• User Experience: Cleaner map view, especially in urban areas with many centers
• Zoom Behavior: Auto-adjusts clustering as users zoom in/out
• Mobile Friendly: Touch-optimized cluster interaction

The implementation should be straightforward - mainly replacing the existing marker layer group with L.markerClusterGroup() and keeping the rest of your marker creation logic the same!