image.js

// the A3 poster in pixels
// width: 3508 px
// height: 4961 px
const size = getPrintSize(poster.direction, poster.dimensions)

// As the max Static API images are 1280px wide,
// determinate how many of them we need.
const widthRatio = Math.ceil(size.width / 1280)
const heightRatio = Math.ceil(size.height / 1280)

// imageWidth: 1169px
const imageWidth = Math.round(size.width / widthRatio)
// imageHeight: 1240px
const imageHeight = Math.round(size.height / heightRatio)

// My full poster bounds
// _ne: {lat: 48.87881893120735, lng: 2.3629223030318656}
// _sw: {lat: 48.84129644079769, lng: 2.3225976969708597}
const bounds = poster.bounds

// As we have a matrix 3x4 to compose the full poster
// according to the imageWidth and imageHeight computed
// previously, we determine deltas of each images.

// Each images have a longitude of 0.013441535353668618
const deltaX = (bounds['_ne'].lng - bounds['_sw'].lng) / widthRatio
// Each images have a latitude of 0.009380622602414235
const deltaY = (bounds['_ne'].lat - bounds['_sw'].lat) / heightRatio

const images = []
let coord = [0, 0]

for (let i=1; i<=(widthRatio*heightRatio); i++) {

  // Create the coordinates of an image depending on
  // its place in the matrix.
  const image = {
    _ne: {
      lat: bounds['_ne'].lat - (coord[1] * deltaY),
      lng: bounds['_sw'].lng + ((coord[0] + 1) * deltaX),
    },
    _sw: {
      lat: bounds['_ne'].lat - ((coord[1] + 1) * deltaY),
      lng: bounds['_sw'].lng + (coord[0] * deltaX),
    }
  }

  // In order to determine the center and the zoom level
  // of each image, we use geoViewport with the imageWidth
  // and imageHeight sizes.
  const imageViewport = geoViewport.viewport([
      image['_sw'].lat,
      image['_sw'].lng,
      image['_ne'].lat,
      image['_ne'].lng
    ], [imageWidth, imageHeight])

  // Update the matrix coordinate for the next image computing  
  coord[1] = coord[0] === (widthRatio - 1) ? coord[1] + 1 : coord[1]
  coord[0] = coord[0] === (widthRatio - 1) ? 0 : coord[0] + 1

  images.push(imageViewport)
}

return <div className='flex' style={{ width: size.width, height: size.height }}>
  {images.map((image, key) => (
      <img
        key={key}
        src={`https://api.mapbox.com/styles/v1/${theme}/static/${image.center[1]},${image.center[0]},${image.zoom},0,0/${imageWidth}x${imageHeight}?access_token=${MAPBOX_ACCESS_TOKEN}`}
      />
  ))}
</div>