How to Change the Map Cluster Icons in Listdom?

If you are using Listdom’s map features, you might notice that clustered map markers use blue circular icons by default. These clusters are generated using a PNG background image that visually groups nearby listings on the map.

However, if you want to customize the appearance, for example, to match your brand’s colors, editing the image files directly inside the plugin folder is not recommended. Any direct file modification will be lost when the plugin updates.

Instead, you can change the cluster icons safely using one of the following methods.

Method 1: CSS Override (Recommended)

The simplest and most update-safe method is to apply a CSS override.

1. Go to Appearance → Customize → Additional CSS in your WordPress dashboard.
2. Add the following code snippet, replacing the image URLs with your own paths.

.lsd-map-canvas div[style*="cluster1/m1.png"] {
    background-image: url('https://yourdomain.com/path/to/cluster1.png') !important;
}
.lsd-map-canvas div[style*="cluster1/m2.png"] {
    background-image: url('https://yourdomain.com/path/to/cluster2.png') !important;
}
.lsd-map-canvas div[style*="cluster1/m3.png"] {
    background-image: url('https://yourdomain.com/path/to/cluster3.png') !important;
}

This CSS will override the default cluster images used by Listdom and replace them with your own images hosted on your website.

Dica

It’s best to upload your custom cluster icons to your theme or media library rather than an external source. This ensures they load quickly and remain stable after updates.

Method 2: PHP Filter (Advanced)

If you prefer a programmatic approach or want more flexibility, you can use the listdom_cluster_images filter hook (if available in your version of Listdom).

Add the following snippet to your theme’s functions.php file:

add_filter('listdom_cluster_images', function($images) {
    $images['1'] = 'https://yourdomain.com/path/to/cluster1.png';
    $images['2'] = 'https://yourdomain.com/path/to/cluster2.png';
    $images['3'] = 'https://yourdomain.com/path/to/cluster3.png';
    return $images;
});

This filter dynamically replaces the cluster image URLs with your own paths and will persist through plugin updates.

Nota

If your current version of Listdom doesn’t include this filter, you can still use the CSS override method above to achieve the same result.

Next Steps

If you are customizing the appearance of your maps, you can also adjust map styles, marker icons, and themes under the Map tab of your shortcode configuration.

Learn More About Shortcodes Settings in Listdom