diegoazh / gmap-vue

A wrapper component for consuming Google Maps API built on top of Vue. Fork of the popular vue-google-maps plugin.
https://diegoazh.github.io/gmap-vue/
173 stars 51 forks source link

Custom Cluster calculated labels #291

Closed Wewill closed 2 years ago

Wewill commented 2 years ago

What you try to do

Hey everyone, I'm trying to customize labels on clusters instead of showing the count.

What is the problem

I can't show nothing else than count or stats on a cluster.

What kind of things have you already treated

I have markers like this :

{
          name: "3T CONCEPT",
          position: { lat: 49.29976, lng: 2.39701 },
          value: 108,
},
{
          name: "ABC IP",
          position: { lat: 49.29976, lng: 2.39701 },
          value: 21,
},

I tried this, but in can't get the markers :

<GmapCluster :options="clusterOptions()">..</GmapCluster>

...

    clusterOptions() {
      return {
        //algorithm: new GridAlgorithm({}),
        renderer: {
          render: ({ count, position }, stats) => {
            console.log(stats, count);
            // change color if this cluster has more markers than the mean cluster
            const color = count > Math.max(10, stats.clusters.markers.mean) ? "#ff0000" : "#0000ff";
            //const color = this.palette(count / stats.clusters.markers.max);

            // 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" />
  </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",
              },
              title: `Cluster of ${count} markers`,
              // adjust zIndex to be above other markers
              zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
            });
          },
        },
      };
    },

How can I get the markers to calculate the value of a cluster of 2 markers ? For example :

{
          name: "3T CONCEPT",
          position: { lat: 49.29976, lng: 2.39701 },
          value: 108,
},
{
          name: "ABC IP",
          position: { lat: 49.29976, lng: 2.39701 },
          value: 21,
},

= 129 instead of 2

Thanks a lot, Wilhem

Steps to reproduce

Explain to us how to get the same problem or provide a small example repository to work on it.

Os

Mobile

Versions

Package manager

Plugin version

Wewill commented 2 years ago

Ok, just find a way to get markers :

render: ({ count, position, markers }, stats) => {