Performant clustering for large datasets on Google Maps.
By not creating a Google Maps Marker instance for every point, the performance, especially for large datasets (> 1000), is much better than the official clustering library.
Once below the cluster threshold the library uses the Marker Spiderfy library to work with overlapping Markers.
Using the integrated PubSub API you can control hover and click interactions as you please. We're using Tippy, but you can use whatever you want.
Branding is important. You have the power to make your clusters and markers look spectacular by adjusting options and overriding CSS.
Subscribe to the libraties PubSub events to handle custom interactions. With hover, click, count, and marker-show events, you have control over the interactivity.
Based on the convex hull of the cluster polygon, we intelligently zoom the user into the best view based upon that data.
| Prop | Description | Default | Required |
|---|---|---|---|
| map | Your google maps instance. | N/A | true |
| collection | Your collection of lat/lng points. | N/A | true |
| mapContainer | String of ID holding your map. | 'map' | true |
| clusterRange | The size of the squares which the clusters are evaluated. The larger the #, the less total clusters per view. | 200 | false |
| threshold | The number of points where we switch from clusters to markers. | 200 | false |
| clusterRgba | RGBA color for the clusters. | '34, 34, 34, 1' | false |
| clusterFontColor | Font color for count inside cluster. | '#FBBDC7' | false |
| polygonStrokeColor | Stroke color for the hover polygon showing the convex hull of the cluster. | '#222' | false |
| polygonStrokeOpacity | Opacity setting for the convex hull polygon. | '0.5' | false |
| polygonStrokeWeight | Weight of the polygon. | 4 | false |
| polygonFillColor | Fill color of the polygon. | '#222' | false |
| polygonFillOpacity | Opacity of the polygon fill color. | '0.3' | false |