CODEWITHSUNDEEP
reactjsreact-map-gl
khang nguyen
khang nguyen

Reputation: 31

Rendering over 1000 markers using React Map GL

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.

Upvotes: 3

Views: 3977

Answers (2)

Ricardo Sanchez
Ricardo Sanchez

Reputation: 5167

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

Upvotes: 1

ArchbishopLolly
ArchbishopLolly

Reputation: 322

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

Upvotes: 1

Related Questions