Mapbox-gl-js: Rotating the map does not update its bounds appropriately

[ghost]

The map bounds do not update correctly as you rotate the map.

See demo: https://jsfiddle.net/kmmky7h5/

As you rotate the map in the demo, we expect to see the map bounds to update to the latest lat-long coordinates at the corners of the viewport, but instead, the bounds nest directly on top of each other based on the original bounds.

[indus]

The bounds you get are defined by only two Points [minLng, minLat] and [maxLng, maxLat] so you can only use them to construct a "north-facing" rectangle that encloses the viewport.

But you can use the 4 unprojected corners of the viewport to construct a real "corner-bound" polygon:

var canvas = map.getCanvas(),
  w = canvas.width,
  h = canvas.height,
  cUL = map.unproject([0,0]).toArray(),
  cUR = map.unproject([w,0]).toArray(),
  cLR = map.unproject([w,h]).toArray(),
  cLL = map.unproject([0,h]).toArray();

  var coordinates = [cUL,cUR,cLR,cLL,cUL];

see: https://jsfiddle.net/kmmky7h5/2/

(Be aware that you may face some problems at ± 180° and towards the poles)

[ghost]

Awesome! Thanks indus!

Still a +1 to accommodate rotations in map.getBounds

[lucaswoj]

Thanks for the workaround @indus!

Let's merge this discussion with https://github.com/mapbox/mapbox-gl-js/issues/2112

[ghost]

The only thing is that the corners of the canvas are not exactly the corners of the map; the lower-right coordinate of the canvas goes beyond the map view. But it still works well for the most part.

[chriswhong]

Thanks @indus, just used this workaround!

For anyone feeding this into Postgis with ST_GeomFromGeoJSON(), you need to add a crs to your geoJSON, thusly:

    var canvas = this.map.getCanvas(),
    w = canvas.width,
    h = canvas.height,
    cUL = this.map.unproject([0,0]).toArray(),
    cUR = this.map.unproject([w,0]).toArray(),
    cLR = this.map.unproject([w,h]).toArray(),
    cLL = this.map.unproject([0,h]).toArray();

    var polygon = {
      type: 'Polygon',
      coordinates: [[cUL,cUR,cLR,cLL,cUL]],
      "crs":{"type":"name","properties":{"name":"EPSG:4326"}}
    }

[chriswhong]

Here's a blog post that describes using this approach when building a "clip and ship" tool. https://medium.com/nycplanninglabs/getbounds-in-the-era-of-pitch-able-and-rotate-able-maps-4de97f35e64b

Here's a widget that visually shows the difference between the getBounds() rectangle and the actual map extent: https://chriswhong.github.io/mapboxgl-view-bounds/#12.51/40.7768/-73.964/13.6/43