Large dataset of markers or dots in Leaflet [closed]

The performance issue is due to the fact that each marker is an individual DOM element. Browsers struggle in rendering thousands of them.

In your case, an easy workaround would be instead to use Circle Markers and have them rendered on a Canvas (e.g. using map preferCanvas option, or with a specific canvas renderer that you pass as renderer option for each of your Circle Marker). That is how Google Maps works by default: its markers are actually drawn on a Canvas.

var map = L.map('map', {
    preferCanvas: true
});
var circleMarker = L.circleMarker(latLng, {
    color: '#3388ff'
}).addTo(map);

or

var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var circleMarker = L.circleMarker(latLng, {
    renderer: myRenderer,
    color: '#3388ff'
}).addTo(map);

With this solution, each Circle Marker is no longer an individual DOM element, but instead is drawn by Leaflet onto a single Canvas, which is much easier to handle for the browser.

Furthermore, Leaflet still tracks the mouse position and related events and triggers the corresponding events on your Circle Markers, so that you can still listen to such events (like mouse click, etc.).

Demo with 100k points: https://jsfiddle.net/sgu5dc0k/

You should check https://github.com/robertleeplummerjr/Leaflet.glify. It provides way of rendering leaflet points and polygons using web gl, allowing to scale more easily.

It's also available for the people that uses R to produce their leaflet: https://github.com/tim-salabim/leaflet.glify

The R version is super easy.

I got good results with the official Leaflet plugin PixiOverlay. https://github.com/manubb/Leaflet.PixiOverlay

[2019]

Maybe a little too late but Pedro Vicente's answer seems to be the best option out there. Leaflet.glify ( https://github.com/robertleeplummerjr/Leaflet.glify.) is good but you don't have options other than create a dot, shapes and line on your map. (no customization yet.) PixiOverlay works with native/custom markers. It also has nice visualization (animation,scaling,etc..) It also works in IE 11. For me it's a must if you're dealing with tons of markers. go try it out https://github.com/manubb/Leaflet.PixiOverlay

P.S Glify and PixiOverlay are both utilizing WebGL so performance varies on your users' computer.