How to implement the loading of a large number of markers on the map, react / svg?

Question

JavaScript

Good afternoon! Please tell me how best to implement the loading of markers on the map if there are about 5 thousand of them and maybe more.
Project on react , map on svg .
Markers should be shown gradually, in groups.
At the moment, in the component, I take an array of these elements and after a set interval I write a certain number of elements to the state.
And I'm already extracting data from the state.
But something I do not like it)
I would be grateful for the best option / idea for rendering these markers)

Answer 1

Do you really need to visualize 5 thousand markers, or can you resort to clustering?

Answer 2

Draw only those markers that are within the scope of the map. Even better, download from the server only those markers that are in the map's visibility area. those. when receiving markers, transfer your area (position and size) to the server, make a list of markers in this area on the server and return it to the client. because it is not very good to store 5 thousand objects on the client, let alone display them.
UPD: if you want to display everything, you can do some optimization.
1) Do not put an array of points in state. Create a separate markers array of points, and add the iteration variable to state. And after you change something in the markers objects, change the iteration variable in the state, and then the rendering will be done.
2) Store all markers in one path, not in multiple elements.
Here is an example https://jsfiddle.net/7z9grsxe/6/ I can easily hold 10,000 objects.

Answer 3

mapbox has a function that checks the location of a marker within a given path. If the answer is true, then you can safely display it on the screen.