Generate bounding box from PNG image and World File

Question

From this folder I can get two files:

PNG Image
World File   (.wld)

From this page where they document how these files are to be used, they say that they are generated in the EPSG:4326 projection.

My question is - how can I take these two files (image and world file) and generate a bounding box from them, using javascript (or just math that you can do in javascript)? By bounding box I mean an array of two or four coordinates, e.g.:

[[33.644214, -82.829214], [44.3182149, -72.155215]]

(Mapbox requires four coordinates for an image overlay, but leaflet only needs two. I am fairly confident I can find a way of generating the remaining two points if I am given the first two that will work with leaflet, but if there is a way to get 4, that would be awesome.)

I saw this answer: https://gis.stackexchange.com/a/288308/206737 that detailed how you might go about doing this, but overlaying the resulting coordinates onto a Leaflet map is slightly incorrect. The center is off, and the overlay is too small. I assume that is because that answer was using EPSG:3857, but since my image uses 4326 I will need a different way of doing it.

I am using browser javascript, and will end up overlaying the image onto a Mapbox GL JS map.

Answer 1

I got what I think is a solution - I just had to render my map in EPSG:4326. Loaded up the image + world file in QGIS and it worked fine. You can do this in Mapbox GL JS by setting the projection option to equirectangular:

const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/bright-v9',
    zoom: 3,
    center: [-98.5606744, 36.8281576],
    projection: 'equirectangular'
});