CODEWITHSUNDEEP
google-maps-api-3markerclusterer
Suffii
Suffii

Reputation: 5784

Getting Google Map MarkerClusterer Plus Icons In One Color

Can some one please let me know how to set MarkerClusterer plus to show all Clusters in One color? as you can see the MarkerClusterer automatically changes the color of the clusters when they are out on a range but I want get them all in one color?

Thanks

enter image description here

Upvotes: 12

Views: 15001

Answers (3)

Ray Dragon
Ray Dragon

Reputation: 84

You can add/set the styles in the following manner :

import MarkerClusterer from '@google/markerclustererplus';

let cluster = new MarkerClusterer(
                  map, 
                  markers, 
                  {
                    styles: [
                       MarkerClusterer.withDefaultStyle({
                        width: 50,
                        height: 50,
                        anchorIcon: [0, 0],
                        anchorText: [2, 2],
                        url: '/assets/img/m2.png', // This refers to local
                                                   // path of marker's image 
                        textColor: '#ffffff',
                        textSize: 10,
                      }),
                    ],
                  }
);

Upvotes: 0

Tomasz Rozmus
Tomasz Rozmus

Reputation: 1656

I had similar problem. Solution: develop a function with color parameter which generates inline svg icon. It's not so difficult to reverse engineer it with basic shapes:

 var getGoogleClusterInlineSvg = function (color) {
        var encoded = window.btoa('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 200 200"><defs><g id="a" transform="rotate(45)"><path d="M0 47A47 47 0 0 0 47 0L62 0A62 62 0 0 1 0 62Z" fill-opacity="0.7"/><path d="M0 67A67 67 0 0 0 67 0L81 0A81 81 0 0 1 0 81Z" fill-opacity="0.5"/><path d="M0 86A86 86 0 0 0 86 0L100 0A100 100 0 0 1 0 100Z" fill-opacity="0.3"/></g></defs><g fill="' + color + '"><circle r="42"/><use xlink:href="#a"/><g transform="rotate(120)"><use xlink:href="#a"/></g><g transform="rotate(240)"><use xlink:href="#a"/></g></g></svg>');

        return ('data:image/svg+xml;base64,' + encoded);
    };

var cluster_styles = [
        {
            width: 40,
            height: 40,
            url: getGoogleClusterInlineSvg('blue'),
            textColor: 'white',
            textSize: 12
        },
        {
            width: 50,
            height: 50,
            url: getGoogleClusterInlineSvg('violet'),
            textColor: 'white',
            textSize: 14
        },
        {
            width: 60,
            height: 60,
            url: getGoogleClusterInlineSvg('yellow'),
            textColor: 'white',
            textSize: 16
        }
        //up to 5
    ];

//...

 markerClusterer = new MarkerClusterer(map, markers, {
            //...
            styles: cluster_styles
        });

SVG source:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-100 -100 200 200">
    <defs>
        <g id="a" transform="rotate(45)">
            <path d="M0 47A47 47 0 0 0 47 0L62 0A62 62 0 0 1 0 62Z" fill-opacity="0.7"/>
            <path d="M0 67A67 67 0 0 0 67 0L81 0A81 81 0 0 1 0 81Z" fill-opacity="0.5"/>
            <path d="M0 86A86 86 0 0 0 86 0L100 0A100 100 0 0 1 0 100Z" fill-opacity="0.3"/>
        </g>
    </defs>
    <g fill="#004b7a ">
        <circle r="42"/>
        <g>
            <use xlink:href="#a"/>
        </g>
        <g transform="rotate(120)">
            <use xlink:href="#a"/>
        </g>
        <g transform="rotate(240)">
            <use xlink:href="#a"/>
        </g>
    </g>
</svg>

Upvotes: 57

TResponse
TResponse

Reputation: 4125

Hi the colors are defined by the images which came with the cluster.js file

Your images will range from m1.png to m5.png:

markercluster/images

Just copy the images and make them all the color which you want

Upvotes: 5

Related Questions