How to customize the coverage area styles on Leaflet.markercluster?

Question

I'm aiming to customize the default color of the coverage area boundary displayed on a map when hovering over a cluster in Leaflet.markercluster. As illustrated in the image below:

After reviewing the documentation, it seems there's no built-in feature for achieving this customization. I've explored writing manual events to override the default behavior, including disabling showCoverageOnHover, but this approach would require reimplementing the functionality from scratch, which isn't ideal.

Is there a preferred approach for effectively overriding these CSS properties or incorporating custom classes while still preserving the capability of displaying the coverage area on hover?

Answer 1

For anyone seeking a solution to this question:

The issue is not directly related to the markerCluster plugin itself. According to the documentation, it utilizes default Leaflet settings:

polygonOptions: Options to pass when creating the L.Polygon(points, options) to show the bounds of a cluster. Defaults to empty, which lets Leaflet use the default Path options.

You can utilize this feature to set custom options, including the color. Here's how you can do it:

let markers = new L.MarkerClusterGroup({
    polygonOptions: {
        color: 'orange'
    }
});

This code snippet demonstrates how to customize the color of the coverage area boundary by setting the polygonOptions property when initializing the MarkerClusterGroup. Adjust the color value ('orange' in this example) as needed to achieve the desired appearance.