Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Linkoteca. leaflet

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.

A Leaflet Developer’s Guide to High-Performance Map Visualizations in React

Imago voragine.net
• , , , , , ,

When I tried to render around 40k Geojson objects in Leaflet’s canvas mode, it took around 30 seconds to render the map. When I used Leaflet’s GeoJSON, instead of React Leaflet GeoJSONs, initial rendering took a few seconds. The response from the library maintainer was that React Leaflet is an additional abstraction and it’s expected that rendering is less performant. My first advice would be avoid leaning solely on this library.

While Leaflet’s canvas mode is an option, rendering over 100k objects stretches its limits. Fortunately, there are solutions that perform very well with large amounts of data, such as WebGL rendering engines and Vector Tiles. Leaflet doesn’t support WebGL or Vector Tiles out of box, but its plugins bridge the gap.

Leaflet.markercluster seems like a go-to solution, yet its performance falters beyond 100k markers. For a leap in performance, consider supercluster.

[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.