需要 @react-google-maps/api 中 MarkerClusterer 的动态图标

Question

TL;DR: In @react-google-maps/api, I want to be able to make dynamic cluster icons/symbol in the style of pie charts, based on the markers in the cluster, but it seems I can only make icons from a static array, and cannot pass the the markers as parameters.

Full Description: I am using typescript react with the package @react-google-maps/api, and I'm trying to find a way with the ClustererComponent/MarkerClusterer to take a callback or similar in order to be able to be able to create an svg for each cluster based on the markers in the given cluster.

The current issue is that the way I understand it, I am limited to a static array of urls to icons, and thought I can make an svg in those, I have no way to pass parameters into those svgs, as the only way the package allows me to chose a style is thought index in the style array.

I have read thought the following material, but have not been able to get find a way to make an icon dynamically based on the markers:

• Documentation for @react-google-maps/api: https://react-google-maps-api-docs.netlify.app/#markerclustere
• Documentation for google maps markerclusterer: https://developers.google.com/maps/documentation/javascript/marker-clustering

I have found libraries like this: https://github.com/hassanlatif/google-map-chart-marker-clusterer , that should be able to be used as a solution, but they don't seem to work with the @react-google-maps/api, only with earlier versions of google map. If this is not the case, and these can be used directly, then I would be more then happy with an answer describing how to use libraries like the one above with @react-google-maps/api, as that should allow be to make clusters in the same way as the picture below.

EDIT: as I got reminded in the comments, here is the code I have so far:

What I've tried: I have tried to find any way to set in an svg element instead of a url, but have since just decided to make a url with the svg data, as shown below. I have tried to edit the url of the clusters under the MarkerClusterer thought the callback for onClusteringBegin , onClusteringEnd and onLoad , but so far, no luck.

How I make the svg into url-data, so it can be used for img src

/*
 * Pie Chart SVG Icon in URL form
 *
 * Inspiration taken from: https://medium.com/hackernoon/a-simple-pie-chart-in-svg-dbdd653b6936
 *
 * Note: As of right now, I am identifying the difference in marker types by setting the type-number I use in the title of the marker
 */
    const serializeXmlNode = (xmlNode: any) => {
        if (typeof window.XMLSerializer != "undefined") {
            return (new window.XMLSerializer()).serializeToString(xmlNode);
        } else if (typeof xmlNode.xml != "undefined") {
            return xmlNode.xml;
        }
        return "";
    }

    function getCoordinatesForPercent(percent: number) {
        const x = Math.cos(2 * Math.PI * percent);
        const y = Math.sin(2 * Math.PI * percent);
        return [x, y];
    }

    const makePieChartIcon = (slices: any[]) => {
        const svgNS = 'http://www.w3.org/2000/svg';

        var svg = document.createElementNS(svgNS, 'svg')
        svg.setAttribute('viewBox', '-1.1 -1.1 2.2 2.2')
        svg.setAttribute('style', 'transform: rotate(-90deg)')
        svg.setAttribute('height', '60')

        var circle = document.createElementNS(svgNS, 'circle')
        circle.setAttribute('r', '1.1')
        circle.setAttribute('fill', 'white')
        svg.appendChild(circle);

        let cumulativePercent = 0;

        slices.map((slice: any) => {
            const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
            cumulativePercent += slice.percent;
            const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
            const largeArcFlag = slice.percent > .5 ? 1 : 0;
            const pathData = [
                `M ${startX} ${startY}`, // Move
                `A 1 1 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
                `L 0 0`, // Line
            ].join(' ');
            const path = document.createElementNS(svgNS, 'path');
            path.setAttribute('d', pathData);
            path.setAttribute('fill', slice.color);
            svg.appendChild(path);
        })

        var svgUrl = 'data:image/svg+xml;charset=UTF-8,' + serializeXmlNode(svg)
        return svgUrl
    }

    const makeDynamicClusterIcon = (markers: any[]) => {
        var numMarkers = markers.length;
        var slices = markers.reduce((acc: any, marker: any) => {
            acc[parseInt(marker.title)].percent += 1 / numMarkers;
            return acc;
        }, [
            { percent: 0, color: 'Green' },
            { percent: 0, color: 'Blue' },
            { percent: 0, color: 'Red' },
        ])
        var newIconURL = makePieChartIcon(slices)
        return newIconURL;
    }

How I use the MarkerClusterer Component

<MarkerClusterer
    options={{
        averageCenter: true,
        styles: clusterStyles,
    }}
>
    {(clusterer) =>
        markerData.map((marker: any) => (
            <Marker
                key={marker.key}
                title={String(marker.type)}
                position={{ lat: marker.lat, lng: marker.lng }}
                clusterer={clusterer}
            />
        ))
    }
</MarkerClusterer>

Right now, I can only use some static styles, but I have them as the following for testing:

const clusterStyles = [
        {
            height: 50, textColor: '#ffffff', width: 50,
            url: 'data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="50" width="100"%3E%3Ccircle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="green" /%3E%3C/svg%3E',
        },
        {
            height: 50, textColor: '#ffffff', width: 50,
            url: 'data:image/svg+xml;charset=UTF-8,%3Csvg xmlns="http://www.w3.org/2000/svg" height="50" width="100"%3E%3Ccircle cx="25" cy="25" r="20" stroke="black" stroke-width="3" fill="red" /%3E%3C/svg%3E',
        }
    ];

Answer 1

I found a solution, by finding out that the style array for each cluster (ClusterStyles) can be changed, and then I have change it with the data from the specific markers in the given cluster. I ended up doing this in the callback onClusteringEnd, as here:

{/*  Added to the MarkerClusterer  */}
onClusteringEnd={(clusterer) => {
    clusterer.clusters.map((cluster) => {
        cluster.clusterIcon.styles = makeDynamicClusterIcon(cluster.markers)
    })
}}

And I changed the last line with return of the makeDynamicClusterIcon function I showed above to instead say:

return [{ url: newIconURL, height: 60, width: 60, textColor: '#FFFFFF', textSize: 22 }];