How to change the color of marker clusters / display an icon below clusters

The colors of the marker clusters can be changed via CSS only. Please add the following CSS styles to the end of your theme´s style.css and adjust the colors accordingly.

A tool for getting the color values in rgba can be found at https://www.hexcolortool.com/ – please be aware that the last number is the transparency value, reaching from 0 to 1:

.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6) !important;
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6) !important;
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6) !important;
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6) !important;
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6) !important;
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6) !important;
}

As an alternative you can also use hex color codes like #C0C0C0.

If on the other hand you want to add a custom icon below a cluster, see the following example as reference (use your own URLs to icons please):

.marker-cluster-small::after {
content: " ";
background: url('https://www.mapsmarker.com/wp-content/uploads/maps-marker-pro/icons/hospital-building.png');
height: 36px;
width: 36px;
background-repeat: no-repeat;
display: inline-block;
}

Example output:

1
0
1213
Rate this user guide

Thanks for your feedback, please add a comment to help us improve this post.

Leave a Comment

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>