Algorithm or ready-made solution for dynamic map on Canvas JS?

Question

JavaScript

Hello, I am writing an interactive map without using third-party libraries.
Are there ready-made compact solutions for dynamically loading tiles?
And if not, could you explain how such applications work?

Answer 1

get the coordinates of the displayed section of the map - x, y of the upper left and lower right points, select from the database all objects located in these coordinates. to speed up the process, you can cache the result.

Answer 2

Are you sure you need a canvas map? Is the variant of the standard tile map (for example, based on Leaflet) with dynamic data overlay not suitable? Still, redrawing the canvas is quite costly in terms of resources and on older machines the map will not be smooth, on mobile devices it will consume the battery.
But if you really want to, then the "js canvas map" results are googled.

Answer 3

What's so difficult about that?
1. We load the central area, and after it - a circular perimeter of 3 screens of the visible area (the one behind the "frame" of the visible area).
2. By span - dynamically add tiles in the direction of the displacement vector with gradual filling of the zone from the line of tiles (where they were and where they moved) into the circle.
3. Each tile/block is loaded in an asynchronous queue.
4. Priority - first we load the one closest to the visible area in the direction of the displacement vector (with span-scrolling) and, then, along the perimeter of the end point, and then the circular filling from the center.