What Problem Does This Solve?
Too many markers near each other start overlapping which makes them difficult to distinguish and interact with
When to Use This Pattern
Any application that needs to display point data across a wide range of scales will benefit from the cluster marker pattern. While it is often viable to render features only at certain scales to avoid this problem in the first place, single purpose applications need to highlight the data at all zoom levels.
There are two types of cluster markers, one that labels the cluster with the number of markers it represents. Examples for this type include applications that focus on the actual locations like events, incidents, or policies.
The second type exposes metrics of the clustered features and labels the cluster markers with sums or averages of that variable. Examples include insurance providers that need to see Annual Average Loss of their policies or applications with real estate focus showing average prices of recent home sales.
What’s the Solution?
Group markers that are close to each other into clusters. These clusters typically use similar symbology as the original marker but are larger in size, often in the form of a circle with a number inside indicating the number of markers that have been consolidated into the new cluster marker. Often the diameter of the cluster marker increases proportional to the number of markers it represents.
As the user zooms in, the number of clusters decrease, and individual markers start to appear instead. Zooming out has the opposite effect and markers are being consolidated into cluster markers again.
If the user is zoomed into the lowest zoom level and markers are still clustered a means to explode or “spiderfy” the cluster marker should be provided.
Expected interactions are:
- Hovering the mouse over a cluster marker symbol will outline the area – the bounds – used to consolidate markers
- Clicking on a cluster marker symbol will zoom to that area
Cluster Marker algorithms calculate counts based on distance which results in a balanced distribution. Pre-defined grid systems work as well if the cluster marker is positioned based on the average relative distances of the markers within each cell.
Why Use This Pattern?
Clustering can cut down on the visual clutter and increase the information exposed in the map. It is almost inevitable that features that are displayed across multiple or even all scales will start to overlap at small scales, e.g. point locations like restaurants are nicely spread out on a map while zoomed in to streets level but appear to be on top of each other as the user zooms out to city, county, or even national levels.
Consider adding animations that show the addition or removal of markers from the cluster. On touch devices explode cluster markers by default as hover interactions are not available.
Avoid the following:
- Cluster Marker is based on distance between markers and shouldn’t be used to show counts by geographic boundary, use the Choropleth Map visualization instead.
- Clicking on a cluster marker should not open an Info Window as seen in some samples, but zoom to the bounds of the cluster instead.