CODEWITHSUNDEEP
javascriptmapbox-gl-js
Rantiev
Rantiev

Reputation: 2232

How to get mapbox-gl map viewport edges coordinates considering pitch and bearing?

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.

Upvotes: 6

Views: 7122

Answers (1)

stdob--
stdob--

Reputation: 29172

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])

https://jsfiddle.net/7vzyrx9d/

https://github.com/mapbox/mapbox-gl-js/issues/2375

Upvotes: 7

Related Questions