Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. clusters

Mapping Millions: How to Cluster Thousands of Markers with Next.js, Leaflet, and Supercluster

Imago voragine.net
• , , , ,

The easier approach is to cluster the markers on the client-side, due to leaflet plugins like Leaflet.markercluster.

…client-side clustering has its limitations. In order to ake it work, you need to load all the markers at once! This is not a problem if you have a small number of markers, but when you have thousands or millions of markers, it can quickly become a performance bottleneck.

Backend clustering addresses this problem by processing the data on the server. Only clusters for the current viewport and zoom level are sent to the client. This minimizes bandwidth usage and reduces client-side processing. In my solution, I utilized Supercluster, a high-performance clustering library suitable for Leaflet maps.

[Question] Build clusters depending on some geographical entity

Imago voragine.net
• , , ,
Example of clustering markers depending on a given geographical entities

Clusters are built purely with an algorithm. In many cases clustering markers depending on a given geographical entity is better (country, administrative region, zipcode, city, whatever).
People are familiar with such entities, and it avoids putting clusters in locations that don’t feel ‘natural’.

We developed a map where both algorithmical and ‘geographical’ approaches are used (depending on the zoom level) : https://thefoodassembly.com/

So we are both using Leaflet.markercluster and our own cluster logic. They are totally separated, which is a disadvantage because our own clusters don’t benefit from Leaflet.markercluster animations, automatically created clickable polygons, and so on.