1

I have an image with known boundary and projection EPSG:4326 and want to overlay it to openstreetmap using Leaflet.js.

I have tried using function imageoverlay, but the image is not aligned with the basemap. 

L.imageOverlay(imgUrl, [[-15, 75], [45, 145]], {opacity: 0.6, autoZIndex: true});

So, I use gdalwarp to transform the image projection to EPSG:3857.

gdal_translate -of Gtiff -a_ullr -15 145 45 75 -a_srs EPSG:4326 test.png out_4326.tiff
gdalwarp -s_srs EPSG:4326 -t_srs EPSG:3857 -ts 850 728 out_4326.tiff out_3857.tiff
gdal_translate -of png out_3857.tiff final.png

However, the final image looks like distorted. Here is the original image. enter image description here

Here is the final image enter image description here

Improve this question
6
  • You should just be able to use leafletjs.com/reference.html#imageoverlay for that, since you already have the bounding box. What have you already tried and what didn't work for you?
    – BradHards
    Commented Dec 22, 2015 at 3:56
  • @BradHards I want to use simple basemap like openstreetmap which projection is in Web Mercator (EPSG:3857). Do you have any tile source which is is EPSG:4326 so that I can use with leaflet ?
    – kkkkky
    Commented Dec 22, 2015 at 4:09
  • What have you already tried? If your image isn't very big, the warping won't be significant and you can probably just use the imageoverlay method on a 3857 base map.
    – BradHards
    Commented Dec 22, 2015 at 4:12
  • @BradHards Ya I tried imageoverlay and the image is not aligned with basemap. The range is quite big. L.imageOverlay(imgUrl, [[-15, 75], [45, 145]], {opacity: 0.6, autoZIndex: true});
    – kkkkky
    Commented Dec 22, 2015 at 4:28
  • That that would have been really useful information to put in the question, along with what else you've already tried (e.g. gdalwarp offline first).
    – BradHards
    Commented Dec 22, 2015 at 4:31

1 Answer 1

Reset to default
2

gdal_translate expects the extent in the format -a_ullr ulx uly lrx lry. Form the picture I guess you swapped x (Easting) and y (Northing), and upper left and lower right.

I get the right picture with:

gdal_translate -of Gtiff -a_ullr 75 45 145 -15 -a_srs EPSG:4326 CJGMY.png out_4326.tiff
gdalwarp -s_srs EPSG:4326 -t_srs EPSG:3857 -ts 850 728 out_4326.tiff out_3857.tiff
gdal_translate -of png out_3857.tiff final.png

fitting to Openstreetmap background:

enter image description here

For the correct leaflet syntax, see http://leafletjs.com/reference.html#imageoverlay

var imageUrl = 'http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];

For an image of Newark NJ, this seems to be lower left, upper right in Northing-Easting order.

Improve this answer
0

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.