How to display millions of markers on the map in the mobile app?

Hello Developers!

I have a goal to bring 100 thousand markers on the map in the mobile app.
I should be grateful if you share your experience with me and tell me how to make a smooth display of the markers on the map.

the output of all tokens in the requested square
The application sends top_left and bottom_right visible area of the map, the API returns all tokens.
This approach is sad, because the server gives a token not as fast as wanted, and the amount of data transferred is not small:

8307 markers
Time: 1737 ms
Size: 423.41 KB

Mobile app groups the markers are not so fast as we would like. Besides, I would not like to waste resources of the mobile phone on it.

This option was immediately rejected.

the output of the grouped markers at the requested square
At the same top_left and bottom_right server returns the grouped markers.

335 markers
Time: 197 ms
Size: 25.5 KB

Then decided to stay on the server clustering option.

At the moment, the problem is that the app sends the request to the server, even if the map to move the map at 1px. It looks very ugly.

Please look at the record:
https://youtu.be/UoFGL4MmSJE

I assume that it is necessary to query the data in the square of twice the visible map area and send the request when the visible area is beyond the scope of the square with markers.

Maybe there are some ready libraries that implement this?
March 12th 20 at 08:08
1 answer
March 12th 20 at 08:10
Solution
Study methods that worked for a long time to display data in different cartographic frameworks for the web.
Approaches several. For example, break the requested data into fragments of the same (in the projection of the application window) size. This allows you to request the ones that you have already downloaded. You can request an area more of your viewport (and combine it with the previous method). And make new requests only when the value of scroll-and from the point of the previous query is greater than some value. For example, the user opened the card, the application has requested data to cover the viewport plus 50% of its width on each side. Unless you move the map more than 25% of the width of the viewport from the starting point of new queries not to do. You can also attend to the fact that the server is not counted every time, namely, to make prerender for different scale layers. And use caching on the server side. Or even to turn your markers in a static (or cached, conditionally static) raster layer, and with the server to communicate only when the user in the token poke to about it to get the information.
Thanks for the advice, that's what I did, requested more than the area of the viewport. Turned out beautifully :-)
Now probably even with the zoom can work something out to less requests to the server did fly, and instantly all your app. - dallin.Bradtke commented on March 12th 20 at 08:13
@dallin.Bradtke, well mark solution. - stephania4 commented on March 12th 20 at 08:16

Find more questions by tags CartographyMobile development