Creating an interactive map consisting of a million squares and objects in it

[raivo]

Hello!

The question is the following:

1.) We need to make a home page where a map is displayed, which consists of 1,000,000 (million) square fields (x is 0 to 1000 and y is 0 to 1000);

2.) It must be possible to place other squares 2x2, 4x4 on these squares (these squares did not overlap, but can be placed next to each other);

3.) The user who places these fields does not need to see the entire large area, but of course it would be good to see as large an area around as possible. The user clicks on the square of the map and an ajax popup appears from which the user can select the desired object that he wants to place on the map;

4.) The homepage must also be usable on mobile devices;

5.) It is not necessary to think about saving data at the moment, but it will be necessary. Saving data should also be done via ajax without refreshing the window. The data will be stored in the database and then the saved 2x2 and 4x4 fields (objects) will be displayed on this map;

6.) It is expected that over time the map will be used by hundreds of online users.

What solution would you recommend to use to draw the map?

Thank you!

 

[MilesWeb]

You can consider combination of HTML, CSS, JavaScript, and a server-side language, in order to implement the described functionality. Here are some general outline solution provided,

Step 1:
1. you can use HTML to create web page structure
2. use CSS for styling and responsiveness, for better use friendly design
3. you will need to display the interactive map, with help of JavaScript and a mapping library
4. implement AJAX to fetch and display the popup when a user clicks on a square

Step 2:
1. initialize the map library and define the grid with required squares
2. make use of library's event listeners
3. display the popup with AJAX when a square is clicked

Step 3:
1. implement logic to ensure that 2x2 or 4x4 squares do not overlap
2. update the map in real-time

Step 4:
1. set up a server-side application
2. use AJAX to send data to the server
3. implement it to retrieve and display the saved 2x2 and 4x4 fields on the map

Hope these steps help you create a dynamic and interactive map application.