wpsl_cluster_marker_colors

  1. Description
  2. Parameters
  3. Usage
  4. Changelog
  5. Source File
  6. Related

Description

This filter changes the colors of the cluster markers on a Google Maps map. It only runs when Google Maps is the map service and marker clusters are enabled.

The easier way is Store Locator > Settings > Markers. When Google Maps is the map service and Enable marker clusters? is checked, you can pick the Low density color, High density color and Label color there. See the Markers settings. The filter receives the colors from these settings, so only use it when you need to set the colors in code.

Mapbox, OpenStreetMap and Stadia Maps don’t use this filter. Their cluster markers are changed with the wpsl_cluster_marker_props filter, as explained in Change the Marker Cluster Style.

Since WP Store Locator 3.0 the keys use the PHP naming style: low_density_color, high_density_color and label_color, instead of lowDensityColor, highDensityColor and labelColor. A snippet written for 2.x with the old keys gives PHP warnings, and the cluster colors end up empty. Change the keys in your snippet to the new names.

Parameters

$colors (array) The cluster colors from the Markers settings.

KeySettingDefaultUsed for
low_density_colorLow density color#0000ffClusters with few markers.
high_density_colorHigh density color#ff0000Clusters with many markers.
label_colorLabel color#ffffffThe number inside the cluster.
With the "Default style" cluster, a cluster gets the high density color when it holds more than 10 markers and more than the average cluster. With the "Interpolation style" cluster, the color moves from the low to the high density color as the number of markers grows.

Usage

This example keeps the low density color from the settings, and changes the high density color to yellow and the label color to black.

add_filter( 'wpsl_cluster_marker_colors', 'custom_cluster_marker_colors' );
function custom_cluster_marker_colors( $colors ) {
// Keep the low density color from the Markers settings, and change the other two.
$colors['high_density_color'] = '#ffff00';
$colors['label_color'] = '#000000';
return $colors;
}

Return all three keys. A missing key causes a PHP warning, and that color ends up empty.

Changelog

VersionDescription
3.0Moved to includes/frontend/maps/class-markers.php. The keys were renamed to low_density_color, high_density_color and label_color, without support for the old keys. The colors now come from the new Low density color, High density color and Label color settings. The low density default changed from #0066ff to #0000ff. The filter only runs when Google Maps is the map service.
2.3.2Introduced.

Source File

This filter is located in /includes/frontend/maps/class-markers.php.

Placement

The code needs to be placed in the functions.php file inside your active theme folder.