Distorted image overlay in Leafet and Mapbox

Question

I have created some png images from a tiff using gdal_translate It fits well in QGIS

Info from QGIS about the layer

Extent -63.0499992370605469,-11.0499992370605469 : 101.9500007629394531,71.4500007629394531 Width 1650

Height 825 Data type Byte - Eight bit unsigned integer

Visualized in Leaflet (https://jsfiddle.net/perikut/k6dach2t/1/) you see the main yellow 'spots' much more north than it corresponds.

Curiously, it happens also in Mapbox! https://jsfiddle.net/perikut/nu1jbgot/

So I am completely lost. As you can see, the coordinates limiting the image are the correct ones, in QGIS and in Mapbox/leaflet

Answer 1

As you wrote in your comment, your image is in EPSG:4326 CRS, so it cannot show correctly in default Leaflet map that uses EPSG:3857 CRS.

Since Leaflet (unlike OpenLayers) supports only one CRS per map, you'll have to either reproject your image or use base layer that's in EPSG:4326 CRS.

Using this base layer

L.tileLayer('https://api.maptiler.com/maps/basic-4326/256/{z}/{x}/{y}.png?key=VLOIr7c4qlKYS7Edr8bk').addTo(map);

gives this image:

Answer 2

If your image is in EPSG:4326 then it needs to be spatially reprojected when drawn in a EPSG:3857 map. QGIS knows how to "distort" its pixels in the right way but if you use simple image overlays in Leaflet or Mapbox, they will simply scale the pixels linearly. For proper display the pixels would need to be drawn scaled larger in growing distance from the equator.

Reproject (warp) the image to EPSG:3857 in QGIS and use the result, it should look correct then.