-3

I'm using react-leaflet to show markers on a map, and have 5000 markers with pop up to show up on the map, which works perfectly, but markers taking too much time to show on the map like 5 to 7sec in react.js. Is their a way to make it faster?

Qamar Azam
  • 91
  • 4

1 Answers1

0

You should consider rendering markers in a group.... meaning... when the user zooms out, instead of showing 100 markets in a giving area, you only show one that represents those 100, when the user clicks the marker you zoom in and render those markers only.

The idea here is to avoid rendering hundreds of markers, the main performance issues is that react needs to iterate all your components to find out which one has changed, it would be faster if you have as less makers as possible.

Crysfel
  • 7,926
  • 3
  • 33
  • 41
  • I think you want to say show clusters instead of individual markers, but i want user to have 2 views, one by cluster which working fine and one all markers view – Qamar Azam Mar 12 '18 at 16:38
  • 1
    @QamarAzam I doubt that showing >500 markers on a single map has any benefits for the user. How is he supposed to see anything on the map when it is cluttered with markers? It's just something that nobody needs and a bad UX. – trixn Mar 12 '18 at 16:50