Marker clustering implemented when more than 50 markers are visible

Rendering more than 50 individual markers simultaneously causes browser performance to degrade visibly — marker overlap makes the map unreadable, and the DOM overhead of 50+ custom elements causes frame drops on mid-range devices. ISO 25010:2011 performance-efficiency classifies this as a resource-utilization defect. For a directory with significant geographic density — urban restaurant guides, event listings, retail locators — unclustered markers make the map's core navigation function unusable at typical zoom levels.

Integrate a clustering library and route all marker rendering through it. The cluster layer must update when filters change — see directory-map-location.map-rendering.markers-sync-filters.

import Supercluster from 'supercluster';

const cluster = new Supercluster({ radius: 40, maxZoom: 16 });
cluster.load(listings.map(l => ({
  type: 'Feature',
  geometry: { type: 'Point', coordinates: [l.lng, l.lat] },
  properties: l
})));

const clusters = cluster.getClusters(mapBbox, currentZoom);
// Render `clusters` array — each item is either a cluster (with point_count) or an individual listing

Mapbox GL JS also supports native source-level clustering via cluster: true on a GeoJSONSource, which offloads the computation to the GL layer.