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

  • 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 Dec 22 '15 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 Dec 22 '15 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 Dec 22 '15 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 Dec 22 '15 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 Dec 22 '15 at 4:31
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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