Setting Clustering Icons
If you are using marker clustering, it's relatively easy to override the default clustering icons with your own custom icons. The default clustering icons are created using a dynamic SVG.
Here is a helpful script which replicates the default behavior...
# Download the renderer.js file
Download this file, and place it into a public front-end directory.
This file belongs to you now
Once you have copied the renderer.js file locally, you are free to make any further adjustments as you deem necessary.
If multiple renderers are required, you may copy and/or rename the files and functions.
# Load JS script into the page
Now that you have a new JavaScript file, load it into the page...
{% js url('path/to/renderer.js') at head %}
The file should be loaded at head to ensure that it's available when needed.
# Enable custom icon rendering
Pass the name of your new renderer function in as the renderer option value.
// Set a custom cluster rendering function
const options = {
'cluster': {
'renderer': CustomRenderer
}
};
In JavaScript, you are directly specifying a callback function. Do not put quotes around the renderer name, since you are explicitly referencing a callback variable.
In Twig/PHP, you must specify the renderer as a string. The callback will be parsed correctly.
# Customize renderer function
From here, you are free to customize the renderer function until you are satisfied with the results.
More Info
For more information, see the official Google docs for a custom renderer... (opens new window)