Using mapbox static image api as a raster layer is distorted

Question

I'm trying to generate a static image of a map for use when the user's device is offline. I request the static image with a bounding box (that is calculated automatically to fit all my features in) and the maximum resolution in the aspect ratio of the bounding box.

I then load the static image into the map when they are offline, but it doesn't line up to original map tiles behind it.

// Extend bounds by 1 mile
const extendedBounds = bbox(
buffer(bboxPolygon(bbox(parcelGeoJson)), 0.1, {
  units: 'miles'
})
)

// Get north west, north east, south east, south west coordinates from bounding box
const northWest = [extendedBounds[0], extendedBounds[3]]
const northEast = [extendedBounds[2], extendedBounds[3]]
const southEast = [extendedBounds[2], extendedBounds[1]]
const southWest = [extendedBounds[0], extendedBounds[1]]

const cornerCoordinates = [northWest, northEast, southEast, southWest]

// Get aspect ratio from bounding box
const aspectRatio = (extendedBounds[2] - extendedBounds[0]) / (extendedBounds[3] - extendedBounds[1])
const height = Math.round(1280 / aspectRatio)

let mapboxUrl = new URL(
  `https://api.mapbox.com/styles/v1/mapbox/satellite-v9/static/geojson(${encodeURIComponent(
    JSON.stringify({
      type: 'FeatureCollection',
        features: []
      })
  )})/[${extendedBounds.join(',')}]/1280x${height}`
)

Extracted FE code below

map.addSource('offline-satellite', {
  type: 'image',
  url: offlineSatelliteImage.imageBase64,
  coordinates: offlineSatelliteImage.cornerCoordinates
})

map.addLayer({
  id: 'offline-satellite-layer',
  type: 'raster',
  source: 'offline-satellite'
})

Image below shows static image overlayed on Mapbox's normal tiles. They should be overlapping!

(left side = static image, right side = tiles)

Here is a gif showing the issue. The blue markers denote the bounding box the image was generated from: https://p193.p3.n0.cdn.getcloudapp.com/items/geuPEmRo/8e4fd233-bd87-4619-a2ba-b1ea1667e15e.gif?v=ac6b83644a5f6a8cc456916e4f4e66c9

It's almost like the bounding box corners don't line up with the generated static image. Where am I going wrong?

Answer 1

This isn't possible, response from Mapbox employee:

To position it properly, you would need the exact bounds of the corners of the image. This isn't retuned unfortunately, so there's no way to calculate them.

I took a different approach which worked well:

1. @mapbox/tile-cover tiles(boundingBox) to get all tiles at zoom level 14 inside a bounding box

2. @mapbox/tilebelt tileToBBOX() on each tile returned from #1 and keep extending a latlng bounds to encompass all tiles

3. Request each tile from Mabox's static tile API and merge all tiles into a single image using sharp