Search code examples
leafletlayermapboxgeojsonangular-leaflet-directive

How to create a Leaflet map layer from 30,000+ points?


I'm building a map app for which I have to show the volume of our user base. I have 30,000+ coordinates and I am wondering what is the best way to display them without impinging too much on performance.

I figured creating a custom tile/layer would be the best way to do so but haven't found how to do it. I have looked at Mapbox but haven't found what I'm looking for.

The app is currently using Leaflet and the Angular-leaflet-directive.

I'm looking forward to hearing your suggestions.

Edit: I'm trying to do something similar to this visually http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/paths/3000-items-example


Solution

  • Talking about "density", you could be interested in showing a Heat map (see available heat maps plugins). Heatmap.js may fit your need, as it advertises being able to manage 40k+ data points.

    If you still need to access each individual point, you would be more interested in clustering plugins. The most popular one being MarkerCluster, but the current release version is a little slow at initialization (a few seconds) for that amount of points. A next release should be published soon that corrects for this performance issue. If you cannot wait, try PruneCluster, it is much faster but it does not animate.

    That being said, you will still need to download those 30k+ points before being able to display them (either through clustering or as a heat map), so make sure your data is lean! Another solution would be to generate your heat map tiles on server side.