googlemaps / js-markerclusterer

Create and manage clusters for large amounts of markers
https://googlemaps.github.io/js-markerclusterer/
Apache License 2.0
230 stars 86 forks source link

renderer not returning correct number of clusters #482

Open JamshedHabibi opened 2 years ago

JamshedHabibi commented 2 years ago

I believe there is some lost behaviour between @googlemaps/markerclustererplus and js-markerclusterer

the clusters returned from @googlemaps/markerclustererplus will also return a cluster for single markers. This allows me to set the clusters outside of google.map.Marker by using React.useState(), check for cluster.getMarkers().length > 1 and if so render a specific custom react component for the cluster icon and another custom react component for when getMarkers().length === 1.

The clusters returned from @googlemaps/markerclusterer will ONLY return clusters where markers.length >= 2. This is the case even though stats will return a cluster count including clusters where markers.length === 1. Also, the protected clusters response from const markerClustererResponse = initialiseMarkerClusterer(map, propertyMarkers) will also include clusters where markers.length === 1.

@googlemaps/markerclustererplus IMPLEMENTATION

const StaticGoogleMap = ({properties = mockData}): JSX.Element => {
    const [clusters, setClusters] = useState([]);

    const onGoogleApiLoaded = ({map, maps}) => {
        extendMapBoundsAndZoom(map, maps, properties);

        const propertyMarkers = initialisePropertyMarkers(properties);       
        const markerClustererResponse = initialiseMarkerClusterer(map, propertyMarkers)

        map.addListener('tilesloaded', () => {
            setClusters(markerClustererResponse.getClusters());
        });   
    }

    return (
        <div className={styles.staticGoogleMap}>
            <GoogleMapReact
                bootstrapURLKeys={{ key: '' }}
                {...mapsConfig}
                yesIWantToUseGoogleMapApiInternals
                onGoogleApiLoaded={onGoogleApiLoaded}
            >
                {clusters.map((cluster, index) => {
                    const propertyIndex = index + 1;

                    return cluster.getMarkers().length > 1 ? (
                        <MapPinCluster 
                            key={propertyIndex}
                            propertyIndex={propertyIndex}
                            lat={cluster.getCenter().lat()}
                            lng={cluster.getCenter().lng()}
                            numberOfPropertiesAtCluster={cluster.getSize()}
                        />
                    ) : (
                        <MapPinSingle
                            key={propertyIndex}
                            propertyIndex={propertyIndex}
                            lat={cluster.getCenter().lat()}
                            lng={cluster.getCenter().lng()}
                        />
                    )
                })}
            </GoogleMapReact>
        </div>
    );
};

export default StaticGoogleMap;

@googlemaps/markerclusterer IMPLEMENTATION

const renderer = {
            render(cluster, stats) {
                **console.log(cluster)**; // RETURNS ONLY CLUSTERS WITH MARKERS.LENGTH >= 2. 
                **console.log(stats)**; // RETURNS stats.cluster NOT CONSISTENT WITH cluster response. It returns clusters where there is only one marker. 

                return new google.maps.Marker({
                    ....
                });
            }
}

new MarkerClusterer({map, markers, renderer});
JamshedHabibi commented 2 years ago
Screenshot 2022-11-04 at 09 29 30

Another example of what i mean.

Am I missing something here? Is there any way to get the clusters from the new MarketClusterer({map, markers, renderer }) response?