By default, the property pin clusters on the IDX Broker Map Search page use the standard Leaflet cluster styling.

You can customize:

• The outer cluster circle color
• The inner cluster circle color
• The cluster number text color
• Individual property pin icons

This lesson focuses specifically on changing the cluster icon colors using CSS.

Inspect the Cluster Icons

Using your browser developer tools, inspect one of the cluster icons on the map.

You should see CSS similar to:

.marker-cluster-medium {
    background-color: rgba(149, 169, 195, 0.60);
}

You can experiment directly in the browser developer tools by adjusting the RGBA values until you find the desired colors.

Change the Outer Circle Color

To change the outer ring color of the cluster icon, add the following CSS to:

• The IDX Broker CSS section
• Your website stylesheet
• Your wrapper CSS

Example:

.marker-cluster {
    background-color: rgba(255, 0, 0, 1) !important;
}

This example changes the outer circle to red.

The !important rule is required to override the default Leaflet cluster styling.

Change the Inner Circle Color

The inner circle is controlled by:

.marker-cluster div

Example:

.marker-cluster div {
    background-color: rgba(46, 129, 255, 1) !important;
}

This example changes the inner circle to blue.

Change the Cluster Number Color

To change the number text inside the cluster icon:

.marker-cluster div {
    color: white !important;
}

This example changes the cluster count text to white.

Complete Example

.marker-cluster {
    background-color: rgba(255, 0, 0, 1) !important;
}

.marker-cluster div {
    background-color: rgba(46, 129, 255, 1) !important;
}

.marker-cluster div {
    color: white !important;
}

Result

The final result would display:

• A red outer cluster circle
• A blue inner circle
• White cluster count text

Notes

• RGBA values can be adjusted to any color combination you prefer.
• The fourth RGBA value controls opacity.
• Changes apply to all cluster icons on the Map Search page.
• You can also customize individual property pin icons separately using CSS or JavaScript.