Adding a fixed square in Mapbox gl?

0
votes

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.

1
javascriptcanvasmapbox-gl-js
If you just want a box that doesn't move why draw in WebGL? Just make a div and position with with CSS? - gman
Wouldn't that make the area non scrollable? I don't want to loose the map controls - zoom/pan - over the area where the square is, if that make sense. - Cristina
What do you mean by non scrollable? Would pointer-events: none; handle it? - gman
Actually you're absolutely right!! Thanks for your help :) - Cristina

1 Answers

3
votes

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

enter image description here