I decided to network several coffee shops, canteens, etc., to simplify the search, I combined everything into one array of seats. I deduce the picture + map area (I take the coordinates from the database). Now the finished array consists of 200x200 places (40000), each place in the MySql database is 6 int11 fields plus 2 varchar255 fields. I highlight the script maphilight , and if you use a div , then the highlight of the occupied places could be implemented through the banal classes and css! Now it seems to be displaying normally, in fact, not all 40,000 places are displayed there, but for now, 1000 is out of force, so I think what to do to optimize the output on the page is to leave area + maphilight or is it a div? If you still have to display 40,000 zones?

  • one
    for 40k zones the DOM will lag. maybe as an option on canvas to do? - Invision
  • one
    All 40k places, I think you will not be able to withdraw, anyway, so, it is still easier to split into pages. Well, at the expense of highlighting, it is better to use the client part, rather than through the server. - And
  • In fact, the trick is to do everything on one page, let all the zones be small, the main visual coverage. so anyway area or div? and the canvas is better ??? an array of numbers comes from the database, so it's not very difficult to fix, but the browser itself cares about the output ... - Sergey V.
  • read about canvas - sort of like little compatibility with browsers, only modern ones are supported - Sergey V.

1 answer 1

By experimenting on different hosting and on different browsers, I found out that map is faster than area plus!
The output of 5000 div elements was successful in half the cases, on mobile gadgets there was a failure of 90%. More than 5,000 items almost everywhere complete failure.
The output of one map and inside the 50000 area tags passed flawlessly on all the experimental resources !!
In all cases, the load on the database is minimal, i.e. purely browser war ....
Yuzay map!