Description
Add custom cluster marker shapes to WP Store Locator settings.
The shapes are listed in the Cluster marker shape dropdown on Store Locator > Settings > Markers, next to the built-in Square, Hexagon, Diamond, Donut and Pulse shapes. The dropdown shows up when Enable marker clusters? is checked. See the Markers settings.
Parameters
$shapes - (array) Existing cluster marker shapes. Each shape is an array with these keys:
| Key | Description |
|---|---|
label | The name shown in the Cluster marker shape dropdown. |
svg | The SVG code of the cluster marker, with a 240 x 240 viewBox. |
size | The width and height in pixels the SVG is scaled to on the map. Defaults to 50. |
The SVG code can use these placeholders. They are replaced when the cluster marker is drawn on the map:
| Placeholder | Replaced with |
|---|---|
${color} | The "Low density color" or "High density color" setting. With the "Interpolation style" it's a color between the two. |
${labelColor} | The "Label color" setting. |
${labelSize} | A font size for the number, scaled to the size of the shape, so the number looks the same size as on the default circles. |
${count} | The number of markers in the cluster. |
Usage
This example adds a Shield, a Map Pin and an Octagon shape. Select one of them in the Cluster marker shape dropdown and save the settings.
| add_filter( 'wpsl_cluster_marker_shapes', 'custom_wpsl_cluster_marker_shapes' ); | |
| function custom_wpsl_cluster_marker_shapes( $shapes ) { | |
| // 1. Shield Shape | |
| $shapes['shield'] = array( | |
| 'label' => __( 'Shield', 'your-textdomain' ), | |
| 'svg' => '<svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><path d="M120 10 L220 45 V115 C220 178 120 230 120 230 C120 230 20 178 20 115 V45 Z" opacity=".25" /><path d="M120 28 L202 57 V115 C202 166 120 209 120 209 C120 209 38 166 38 115 V57 Z" opacity=".85" /><text x="50%" y="46%" style="fill:${labelColor}" text-anchor="middle" font-size="${labelSize}" dominant-baseline="middle" font-family="roboto,arial,sans-serif">${count}</text></svg>', | |
| 'size' => 60, | |
| ); | |
| // 2. Map Pin / Teardrop Shape | |
| $shapes['pin'] = array( | |
| 'label' => __( 'Map Pin', 'your-textdomain' ), | |
| 'svg' => '<svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><path d="M120 10 C62 10 15 57 15 115 C15 175 120 230 120 230 C120 230 225 175 225 115 C225 57 178 10 120 10 Z" opacity=".25" /><path d="M120 26 C71 26 31 66 31 115 C31 163 120 210 120 210 C120 210 209 163 209 115 C209 66 169 26 120 26 Z" opacity=".85" /><text x="50%" y="44%" style="fill:${labelColor}" text-anchor="middle" font-size="${labelSize}" dominant-baseline="middle" font-family="roboto,arial,sans-serif">${count}</text></svg>', | |
| 'size' => 60, | |
| ); | |
| // 3. Octagon Shape | |
| $shapes['octagon'] = array( | |
| 'label' => __( 'Octagon', 'your-textdomain' ), | |
| 'svg' => '<svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240"><polygon points="72,10 168,10 230,72 230,168 168,230 72,230 10,168 10,72" opacity=".25" /><polygon points="77,26 163,26 214,77 214,163 163,214 77,214 26,163 26,77" opacity=".85" /><text x="50%" y="50%" style="fill:${labelColor}" text-anchor="middle" font-size="${labelSize}" dominant-baseline="middle" font-family="roboto,arial,sans-serif">${count}</text></svg>', | |
| 'size' => 55, | |
| ); | |
| return $shapes; | |
| } |
Use font-size="${labelSize}" on the <text> element instead of a fixed font size. Wrap the SVG code in single quotes, so PHP doesn’t try to replace the ${…} placeholders.
If the SVG code of the selected shape isn’t valid, the cluster markers fall back to the default circles.
To use an image as the cluster marker, see Change the Marker Cluster Style. To change the templates of the “Default style” and “Interpolation style” directly, use the wpsl_cluster_marker_templates filter. It receives an array with a default and an interpolation key, each with an svg and a size, after the selected shape is applied.
Changelog
| Version | Description |
|---|---|
| 3.0 | Moved to includes/core/functions/functions-misc.php. Added the ${labelSize} placeholder, and the built-in shapes now use it instead of a fixed font size. |
| 2.3.22 | Introduced. |
Source File
This filter is located in /includes/core/functions/functions-misc.php.
Placement
The code needs to be placed in the functions.php file inside your active theme folder.