projectImage.js

// Call projectImage with your image size to get back a set
// of lnglat coordinates representing the four corners of
// the image scaled to fit on the map canvas centered at 0 zoom
projectImage(imgSize) {
  // imgSize is in the form { x: int, y: int }
  const uL = this.map.project([-180, 85]);
  const uR = this.map.project([180,  85]);
  const lR = this.map.project([180, -85]);
  const lL = this.map.project([-180,-85]);

  const mapSize = { x: lR.y - uR.y, y: uR.x - uL.x };

  // fit image width to map width and scale height
  let scaledImgX = mapSize.x;
  let scaledImgY = (imgSize.y * mapSize.x) / imgSize.x;
  if(scaledImgY > mapSize.y) {
    // the scaled image is the wrong ratio
    // fit image height to map height and scale width;
    scaledImgY = mapSize.y;
    scaledImgX = (imgSize.x * mapSize.y) / imgSize.y;
    const xLeftOver = mapSize.x - scaledImgX;
    const xPosLeft = Math.floor(xLeftOver / 2);
    const xPosRight = Math.floor(xPosLeft + scaledImgX);
    const coords = this.unprojectCoords(uL.y, lR.y, xPosLeft, xPosRight);
    return coords;
  } else {
    // scaled image is the correct proportion
    const yLeftOver = mapSize.y - scaledImgY;
    const yPosTop = Math.floor(yLeftOver / 2);
    const yPosBtm = Math.floor(yPosTop + scaledImgY);
    const coords = this.unprojectCoords(yPosTop, yPosBtm, uL.x, uR.x);
    return coords;
  }
}

unprojectCoords(top, bottom, left, right) {
  const upLeft = this.map.unproject([left, top]);
  const upRight = this.map.unproject([right, top]);
  const downRight = this.map.unproject([right, bottom]);
  const downLeft = this.map.unproject([left, bottom]);
  return { upLeft, upRight, downRight, downLeft };
}