I know it is possible to add lines, points or polygons by adding a geojson source in Mapbox gl, these would be located on the map through coordinates. However, what I am trying to do is adding a simple polygon that would be fixed on the canvas, and would remain at the same position of the canvas - not the globe - even if the user pans or zooms.
(Note that I am aware that this could be achieved by resetting the data of the initial geojson on zoom/pan, but the figure would then glitch).
I would appreciate any idea, thanks.
If you just want a box that doesn't move why draw in WebGL? Just make a div and position with with CSS?
The example on this page has 2 div based rectangles. One says "US population density" and the other is the legend.
If the mouse is over them they block scrolling.
If I right click on one and pick "inspect" I see it has a "map-overlay" CSS class. If I add
pointer-events: none to it suddenly I can scroll