If you are using either Google Maps or open source alternative Leaflet.js with Open Street Map data drawing a 10 000 (or more) markers on the map at once can cause some performance issues. This is one solution how to do this efficiently using Leaflet.

Solution for this is to use canvas option on Leaflet so each marker is not a DOM element. Another key point is to use super simple circleMarker markerstyle instead of typical svg pins. Just by doing these two things there is not going to be any performance issues.

Here’s a jsfiddle with solution drawing 10 000 random markers on top of Finland. Just for test I put all of them to be different color.

Short description what is happening here:

• First we create a world map
• Then we set map view around Helsinki with certain zoom level
• Then we have our renderer using canvas option
• Then we have a for loop that runs 10 000 times and in it we create circleMarker  and pass it result of our randomGeo function (lon and lat), our renderer function, radius and color (randomColor function)
• Then we have our randomGeo and randomColor functions that do just what name suggest, return a random longitude / latitude object and color value