How create a grid map on mapping API?

I want to create a Web application/Browser integration who display a real map (Google-map, OpenStreetMap, etc..) with a hexagon grid that can contain data and interaction. The grid will probably be only visible when zooming enough. One hexagon represent 1KM² (that's many hexagon to represent the whole world)

I've made some research but some solution seems to be outdated - most of the grid generation topic are from ~2014 era

• OpenStreetMap with Leaflet is opensource with good documentation but a struggle with the grid generation and data binding.

• GoogleMap is a great tool with cool feature.

• MapBox is good but the documentation is kinda hard to get into.

• "Discrete global grid" is a thing i'm not sure this is suitable for my project.

Do i need to create all the hexagon in a database, when the webApp need to show the hexagon grid, load and cache it into the browser ?

What data type use ? The grid need to be always the same

• GeoJSON is usefull but with a huge data can it be slow ?

There is a gap between show a grid on map and make a grid that will be always the same and can have data in them.

In my mind i see this :

• DATABASE
  • hexagon_id, hexagon_geographic_coordinates, data[]
• WebApp
  • When the zoom trigger the grid display, send request to the DB with the hexagon_geographic_coordinates, process the receive data and create the grid + fill the data for each hexagon. Do the same when the view change, cache it when the hexa is outside of the view.

I'm a bit confuse on how begin this project and on which technology use. The DB will probably be big. If anyone have some clue on how to do this, with a good user experience. I'm considering all the options.

Thank you.