3

I am experiencing a problem with rendering large amount of markers. Each marker is displayed as a SVG. Everything is fine until the number of markers increases to more than 1000. The map start lagging and there is delay when zoom in or zoom out, even moving the map. As I saw from this post: Stylable marker/feature in react-mapbox-gl?

Is there any other methods that I can render and interact smoothly without changing from react-map-gl to react-mapbox-gl? Because Feature component does not exist in react-map-gl.

Thanks for answering my question.

khang nguyen
  • 31
  • 2

2 Answers2

1

There are optimizations described here for rendering large numbers of markers and zooming/panning: https://github.com/visgl/react-map-gl/issues/750

ArchbishopLolly
  • 312
  • 2
  • 4
1

You will need to cluster your markers, there are different ways to accomplish this depending on your setup, for react-mapbox-gl there is a really good tutorial here using a custom hook for Supercluster

Ricardo Sanchez
  • 4,935
  • 11
  • 56
  • 86