I have to render a map, that is rendered as a 2d collection of squares of different color, separated by white lines horizontally and vertically. There may be ~600000 squares surrounded by white area, and the actual borders of the map are arbitrary, only one part of map will be visible at a time, so it must not be rendered fully at once (the map is scrollable). The map is interactive, so it must change the color of square when hovering (dark green square) and it is possible to select some rectangle area (purple square collection), zoom in zoom out + a minimap to quickly move from one point to another. There are blue squares that are owned, and they have borders like in images. As an addition there can be images attached to any owned rectangular area.
Below is the current implementation which is based on html canvases, and it is not as performant as I want, so I decided to use webgl for rendering.
What I've Tried / Research
I tried using ThreeJS to achieve this, but I think it is mostly 3d oriented and also it has many unwanted functionality that I will not use, so I decided to go with bare minimum. I've tried to write some fragment shaders, and achieved some functionality (selected area, hovered object). I am quite new to WebGL/OpenGL, I've read somewhere that it is possible to pass buffer to fragment shader as a texture, and I was thinking about forming a buffer of UInt8 from whole map (even the empty area, for shader to be able to correctly draw borders) and passing it to fragment shader, which will distinguish the state by number of each element and draw the squares accordingly. But then I realized that even before adding images functionality much load will be offloaded to fragment shader, and it was not clear will the fragment shader be able to handle all this much load alone. Doing some research I found out that it is possible to use points and their size parameter to achieve this, and I think that it could be beneficial to split some of work to vertex shader, instead of doing everything in fragment shader.
What I want to achieve
I want to be able to render this map on nearly every device, because in my opinion current hardware is able to do this kind of work very efficiently and very performant. I understand that it is very dependent on implementation, so here are my questions:
Will it give some performance improvements or will it be worse to offload this type of work to vertex shader and draw each square as a point? What abilities of WebGL or techniques can I use (or are mostly used) to handle this kind of situation? How can I achieve performant rendering in case when there are multiple images?