I can't understand how to get map viewport coordinates which will be right after user changes pitch and bearing
This is an example of my code - https://jsfiddle.net/5uwdfhdp/6/
I use .getBounds() method but it seems it works wrong.
After clicking on the map before user rotates it I get a right rectangle, after - something ridiculous.
Might I use coordinates wrong but it seems to me mapbox method doesn't work as expected.
The problem is that when you build a rectangle with the orthogonal reflection of coordinates, you do not take into account the rotation and pitch. Try to get a geo-polygon through the pixel coordinates of the container:
const canvas = map.getCanvas()
const w = canvas.width
const h = canvas.height
const cUL = map.unproject ([0,0]).toArray()
const cUR = map.unproject ([w,0]).toArray()
const cLR = map.unproject ([w,h]).toArray()
const cLL = map.unproject ([0,h]).toArray()
const coordinates = [cUL,cUR,cLR,cLL,cUL]
const polygon = turf.polygon([coordinates])