Custom ConvexHull Polygon Demo

This example demonstrates how to customize the cluster coverage polygon using the clustermouseover and clustermouseout events.

Note: The built-in showCoverageOnHover option already displays a convex hull polygon. This example shows how to implement custom styling (red polygon) by manually handling the events.

// Disable built-in polygon
showCoverageOnHover: false

// Handle hover events manually
markers.on("clustermouseover", function(a) {
  let hull = a.sourceTarget.getConvexHull();
  
  // Create custom red polygon
  polygon = new L.Polygon(hull, {
    color: '#ff0000',
    weight: 3,
    fillColor: '#ff0000',
    fillOpacity: 0.3
  });
  
  map.addLayer(polygon);
});

// Remove polygon on mouseout
markers.on("clustermouseout", function() {
  map.removeLayer(polygon);
});

Key code:

• showCoverageOnHover: false – Disable built-in polygon
• a.sourceTarget.getConvexHull() – Get convex hull points
• new L.Polygon(hull, {...}) – Create custom styled polygon
• map.addLayer(polygon) – Display on map