1

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.

1 Answer 1

0

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'
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.