Class DefaultRenderer

The default render function for the library used by MarkerClusterer.

Currently set to use the following:

// change color if this cluster has more markers than the mean cluster
const color =
  count > Math.max(10, stats.clusters.markers.mean)
    ? "#ff0000"
    : "#0000ff";

// create svg url with fill color
const svg = window.btoa(`
<svg fill="${color}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
  <circle cx="120" cy="120" opacity=".6" r="70" />
  <circle cx="120" cy="120" opacity=".3" r="90" />
  <circle cx="120" cy="120" opacity=".2" r="110" />
  <circle cx="120" cy="120" opacity=".1" r="130" />
</svg>`);

// create marker using svg icon
return new google.maps.Marker({
  position,
  icon: {
    url: `data:image/svg+xml;base64,${svg}`,
    scaledSize: new google.maps.Size(45, 45),
  },
  label: {
    text: String(count),
    color: "rgba(255,255,255,0.9)",
    fontSize: "12px",
  },
  // adjust zIndex to be above other markers
  zIndex: 1000 + count,
});
Copy