Design better format for setting & getting map bounds

[ansis]

LngLatBounds can currently represent an axis-aligned rectangular bounding box. When the map is rotated or tilted this doesn't fit the current view exactly.

Should switch LngLatBounds to storing four locations so that it can represent skewed and rotated bounding boxes?

We could it make it backwards compatible by making the constructor accept only two points.

cc @mourner

[jfirebaugh]

LatLngBounds is used:

• For the maxBounds Map option. This was basically inherited from Mapbox.js/Leaflet without much thought as to whether it makes sense for a rotate- and pitch-enabled map. We should come up with a plan for a better constraint system.
• As the return value for Map#getBounds. Not sure what the use cases for this are, given its behavior with rotated and pitched maps.
• As a parameter to Map#fitBounds. It's not fit to purpose there either: Allow custom bearing/rotation while using fitBounds() #1338, fix fitBounds in perspective view #1464. This API should probably be more like Map#fitFeature, accepting GeoJSON and calculating a camera position that fits.
• Internally in BoxZoomHandler. If box zooming did rotation and pitch aware box zooming (box zoom should not reset bearing #1225, Draw box zoom in map perspective #1345), it probably wouldn't use LatLngBounds.

My conclusion is that LatLngBounds doesn't even make sense as a geographical primitive for Mapbox GL and should over time be eliminated.

[indus]

My usecase for Map#getBounds is to use LatLngBounds as a constrain in a postgis-db query rertieving some GeoJSON.

[lucaswoj]

Lets focus this ticket on

• For the maxBounds Map option. This was basically inherited from Mapbox.js/Leaflet without much thought as to whether it makes sense for a rotate- and pitch-enabled map. We should come up with a plan for a better constraint system.
• As the return value for Map#getBounds. Not sure what the use cases for this are, given its behavior with rotated and pitched maps.

I'll ticket out other follow-ups separately

[iplanwebsites]

Any ways it's possible to have a fit bound across the dateline? For a flight product, we can't visualize any trans-pacific flights properly and it's pretty much a deal-breaker.

[anandthakker]

@iplanwebsites As discussed in #2112, I think the ideal solution to this problem is the fitFeature method proposed in #2245.

[iplanwebsites]

Thanks @anandthakker! Yes I think that'd be a much needed feature :)

[agiratech-vigneshm]

I need to get a closed loop (the visible area) from the map, But I am getting only two corners. I think there must be a way to get the other two corners. Is there any method for that or can anyone point me in the right direction? I need to get a closed loop like four sets of lat, lang values for the visible rectangle.

[ansis]

@agiratech-vigneshm map.unproject([x, y]) can give you the LngLat of any point on the map. Running this for all corners (map.unproject([width, height]) for bottom right) can get you the bounds as a workaround for this issue

[agiratech-vigneshm]

@ansis Thanks for your time, I solved it by using below code.

getMapBoundingBox()
  {
    const lat = this.map.getBounds();
    const multiPolygon = {
      type: 'MultiPolygon',
      coordinates: [[]]
    };
    const bound = [];
    bound.push(lat.getNorthEast().toArray());
    bound.push(lat.getNorthWest().toArray());
    bound.push(lat.getSouthWest().toArray());
    bound.push(lat.getSouthEast().toArray());
    bound.push(lat.getNorthEast().toArray());
    multiPolygon.coordinates[0].push(bound);
    return multiPolygon;
  }