GIS Tools

Language

Made withfor the GIS community

Clustered Points Renderer

Cluster dense point data with customizable thresholds

Map Viewing

Drop files here or click to browse

Supported formats: GeoJSON

GeoJSON

or

Cluster Legend

< 10 points
10 - 100 points
> 100 points

Tips

  • Click on a cluster to zoom in
  • Click on unclustered points to see attributes
  • Increase radius for more aggregation
  • Lower max zoom to keep clusters at higher zooms

What Is a Marker Cluster Map?

A marker cluster map is an interactive visualization technique for rendering large point datasets on a web map without overwhelming the user with overlapping markers. Instead of drawing every point individually, nearby points are grouped into cluster icons that show the count of points inside. When you zoom in, clusters break apart and reveal their children; when you zoom out, clusters merge into larger clusters. The pattern was popularized by Google Maps and Leaflet's MarkerClusterGroup plugin and has become the default way to display dense point data on interactive maps.

Marker clustering solves two problems at once: visual clutter (a thousand overlapping pins are unreadable) and performance (drawing a thousand DOM markers or SVG elements makes the map sluggish). By replacing a dense region of points with a single cluster icon, the map renders in milliseconds and the user sees meaningful aggregate information at every zoom level.

The gis.tools cluster renderer implements the same algorithm as Leaflet.markercluster but runs on WebGL for better performance at very high feature counts. It handles tens of thousands of points fluidly and supports customizable cluster thresholds, color schemes, and expansion behavior.

How Point Clustering Works

The greedy clustering algorithm

The Leaflet.markercluster algorithm (and most production point clustering implementations) uses a simple greedy approach. For each marker, the algorithm checks if there is an existing cluster within the cluster radius. If yes, the marker joins that cluster. If no, the algorithm checks for an unclustered marker within the radius β€” if found, the two form a new cluster. Otherwise, the marker stands alone. This process runs at the deepest (highest) zoom level, then the resulting cluster centroids are fed into the same algorithm at the next zoom level up, and so on until the world view.

The result is a hierarchical cluster tree where each cluster at zoom level N can be expanded into its children at zoom level N+1. This tree is computed once at load time and reused as the user navigates.

Spatial indexing

To make the clustering itself fast, modern implementations use a kd-tree or similar spatial index so that the cluster radius search is O(log n) per marker instead of O(n). Supercluster, the library that powers most web map cluster renderers, uses a flat kd-tree representation for extreme performance β€” clustering a million points in a few hundred milliseconds.

Rendering

At render time, the cluster renderer asks the tree: which clusters (and individual markers) are visible in the current viewport at the current zoom level? The answer is typically a few dozen to a few hundred items, regardless of the total dataset size. Each cluster is drawn with a circle showing the child count, optionally color-coded by count magnitude.

Key Parameters and Options

Cluster radius

The pixel distance within which nearby markers are merged into a cluster. Typical values: 40 pixels for dense data, 80 pixels for sparser data, 20 pixels to preserve more detail.

Maximum zoom

The highest zoom level at which clustering still applies. At higher zooms, individual markers always appear. Typical default is 17 (street level).

Minimum cluster size

The smallest number of markers that counts as a cluster. Usually 2. Setting higher (e.g., 5) creates a hybrid mode where small groups remain as individual markers.

Cluster color and size

Clusters can be colored by count magnitude (using a Graduated Styling ramp) and sized proportionally.

Spiderfy on max zoom

When you click a cluster at the maximum zoom, its children can spiderfy outward in a ring pattern so you can click them individually even though they are at the same location.

Show coverage on hover

Hovering a cluster shows the bounding box of its child markers as a polygon overlay, giving a quick sense of the cluster's spatial extent.

Practical Applications

Retail store locators

Every chain restaurant and retail locator page uses clustering. Zoom out to see country-level dots with counts; zoom in to see state-level, then city-level, then individual stores. This is the canonical use case.

Real estate listings

A real estate search returning thousands of listings uses clustering to avoid swamping the user at low zoom. As the user zooms and pans, individual listings appear and can be clicked for details.

Customer and user geodata

SaaS dashboards showing user distributions globally need clustering to render fluidly β€” a million users scattered across continents would crash a simple marker implementation.

Event and conference maps

Upcoming events filtered on a map benefit from clustering to show activity density without hiding individual events.

Wildlife tracking and citizen science

iNaturalist, eBird, and other citizen science platforms display millions of observations with clustering so users can explore at any scale.

Logistics and fleet tracking

A delivery company tracking thousands of active drivers uses clustering to show fleet distribution at the regional level before drilling down to individual vehicles.

Step-by-Step Workflow

  1. Load your point data in the Online Map Viewer (Multi-Layer). CSV, GeoJSON, KML, or GPX all work.
  2. Open the cluster renderer panel.
  3. Set the cluster radius β€” 40 pixels is a good starting point.
  4. Choose how to color clusters (fixed, by count, or by another attribute).
  5. Configure the maximum clustering zoom level.
  6. Apply and test by panning/zooming.
  7. For interaction, enable spiderfy-on-max-zoom to expose colocated markers.
  8. For an alternative density view, try Heatmap Renderer or Density Grid.

Worked Example: Mapping Airbnb Listings

You have a CSV of 50,000 Airbnb listings across a city with lat/lon and nightly price. Loading the CSV via CSV to Points Layer and rendering as raw points produces a dense black mass over the downtown area. Switching to the cluster renderer, you set radius to 50 pixels. Now downtown shows as a single cluster labeled 12,843; neighborhood clusters show 500–3,000. You color clusters by median price using graduated styling, and the downtown cluster glows red while distant neighborhoods fade to blue. Clicking a cluster zooms into the city, revealing sub-clusters by district, then sub-sub-clusters by neighborhood, and finally individual listings at street level.

Common Pitfalls and Gotchas

  • Cluster radius too large. Over-aggregation hides the spatial structure.
  • Cluster radius too small. Under-aggregation leaves overlapping clusters at low zoom.
  • Expecting semantic clusters. Point clustering is purely geometric β€” it does not understand that points belong to different brands or categories. For semantic clustering, filter first.
  • Missing max zoom. Without a max zoom, clusters persist even at street level where users expect to see individuals.
  • Color by count on uniform data. If all clusters have similar counts, the color ramp adds no information.
  • Performance on low-end devices. Despite clustering, very large datasets (millions of points) still need additional optimizations like tile-based loading.
  • Data-dependent centers. The cluster marker sits at the weighted centroid of its children, which may not correspond to any real feature location.

Tips for Best Results

  • Test your cluster radius at multiple zoom levels. What looks right at zoom 10 may be wrong at zoom 6.
  • Combine with attribute filtering via the Attribute Filter Builder to show subsets.
  • Enable spiderfy so users can access colocated markers without infinite zooming.
  • Use proportional cluster sizing to communicate density visually.
  • For extremely dense data, pre-aggregate with Density Grid or use a heatmap instead.
  • Show a count badge on each cluster.

Comparison with Desktop GIS

Desktop GIS (QGIS, ArcGIS) has a feature called point displacement or marker clustering but it is not interactive in the same way β€” the clustering is typically applied at a fixed scale. The interactive zoom-dependent clustering experience comes from web mapping libraries (Leaflet.markercluster, Supercluster, Mapbox GL cluster). The gis.tools cluster renderer implements that web-native experience with WebGL acceleration.

Performance Considerations

Supercluster can cluster a million points in a few hundred milliseconds. The bottleneck at extreme counts is rendering, not clustering. The gis.tools implementation uses WebGL quads for cluster markers, which scales to tens of thousands of clusters per viewport. For multi-million-point datasets, consider pre-aggregating to tiles with the Vector Tile Packager.

Data Privacy and Browser-Based Processing

Point clustering happens entirely in your browser. Your location data never leaves your computer, which is particularly important for personal or sensitive datasets like customer addresses, patient locations, or incident reports.

Related GIS Concepts

Supercluster. Mapbox's open source JavaScript library for hierarchical point clustering. De facto standard for web map clustering.

k-means clustering. A statistical clustering method that differs from marker clustering β€” k-means tries to find meaningful groupings, while marker clustering is purely about visual aggregation.

Spiderfy. The UI technique of exploding a cluster at the same point into a visible ring of individual markers.

Cluster hierarchy tree. The data structure that makes zoom-dependent clustering efficient.

Frequently Asked Questions

How many points can the cluster renderer handle?

Tens of thousands of points cluster and render fluidly. Hundreds of thousands are feasible. Millions require pre-tiling.

Can I color clusters by a meaningful attribute?

Yes. The cluster renderer supports coloring by count or by any aggregated attribute.

Does clustering hide individual markers entirely?

No. At maximum zoom, clusters break apart into individual markers. You can also enable spiderfy to expose colocated markers at the same zoom level.

What is the difference between a heatmap and a marker cluster?

Heatmaps show continuous density; marker clusters show discrete aggregation with interactive drill-down. Cluster renderer is interactive; heatmap is typically non-interactive.

Related Tools on gis.tools

100% client-side processing - your data stays private and never leaves your device