CODEWITHSUNDEEP
javascriptcanvasmapbox-gl-js
Cristina
Cristina

Reputation: 35

Adding a fixed square in Mapbox gl?

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.

Upvotes: 0

Views: 1449

Answers (1)

user128511
user128511

Reputation:

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

Upvotes: 3

Related Questions