feat(markerClusterer): change style

[rbalet]

Feature Request

Plugin

• capacitor-google-maps

Description

Being able to change the style of marker clusterer

Preferred Solution

Being able to change the render class while enabling the clustering.

googleMap.enableClustering(5, customRenderer)

Then anyone could fiddle with it by passing a custom renderer

// Example
import { Cluster, ClusterStats, DefaultRenderer, Marker } from '@googlemaps/markerclusterer';

export class CustomRenderer extends DefaultRenderer {

  constructor() {
    super()
  }

  render({ count, position }: Cluster, stats: ClusterStats, map: google.maps.Map): Marker {
    const color =
      count > Math.max(10, stats.clusters.markers.mean)
        ? "#ff0000" // <-- Change the color here
        : "#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,
    });
   }
}

Alternatives

We could instantiate a CustomRenderer object and be able to change the style & logic of it from other methods.

Additional Context

• How to
• Angular did found a solution to make us being able to change the style.