How to display a million markers on a map in a mobile application?

Question

Mobile development

Hello Developers!
I have a task: display 100 thousand markers on the map in a mobile application.
I would be grateful if you share your experience with me and tell me how to make the markers display smoothly on the map.
output of all markers for the requested square
The application sends the top_left and bottom_right of the visible area of ​​the map, the API returns all markers.
This approach is unfortunate, because the server does not return tokens as quickly as we would like, and the amount of data transferred is not small:
8307 tokens
Time: 1737 ms
Size: 423.41 KB The
mobile application does not group tokens as quickly as we would like. In addition, I would not want to waste mobile phone resources on this.
This option was immediately rejected.
output of grouped markers by the requested square
With the same top_left and bottom_right, the server returns grouped markers.
335 markers
Time: 197 ms
Size: 25.5 KB
After that I decided to stop at the server version of clustering.
At the moment, the problem is that the application sends a request to the server, even if the map is moved the map by 1px. This looks very ugly.
Please see the entry:
https://youtu.be/UoFGL4MmSJE
I assume that you need to request data on a square twice the visible area of ​​the map and send a request when the visible area goes beyond the square with markers.
Maybe there are some ready-made libraries that implement this?

Answer 1

Learn long-established techniques for displaying data in various web mapping frameworks.
Several approaches. For example, split the requested data into fragments of the same (in the projection of the application window) size. This allows you not to request those that you already have downloaded. It is possible to request an area larger than your viewport (and combine this with the previous method). And make new requests only when the amount of scroll from the point of the previous request exceeds some value. For example, the user opened the map, the application requested data for the viewport coverage plus 50% of its width on each side. Until the user moves the map further than 25% of the viewport width from the starting point, do not make new requests. You can also take care that the server does not recalculate everything every time, namely, make a prerender for different scale layers. And use server side caching.