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);
}
.marker-cluster-small div {
   background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
   background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
   background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
   background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
   background-color: rgba(241, 128, 23, 0.6);
}

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:

0
0
100
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>