Tiled raster image to be placed in an OSM/ Leaflet.js map

Question

I have a mapoverlay in a custom projection which I need to add as a layer to an Openstreet map within a website. Since I was not able to change the projection earlier, I decided to manipulate the raster image in Photoshop in order to make it "fit" onto the Openstreet base map.

Now I have a png file with the "correct" projection. My problem is that I now have to make tiles from this image which can be used as overlay and thus need to set the correct coordinates. I can find out the exact lat/lon values using OSM but how can I tell gdal2tiles where the top-left or bottom-right position of my image is?

My command line so far is:

$gdal2tiles.py -p 'raster' myimage.png

What I am missing is an idea on how to set coordinates. Do I have to use another tool prior to tile-making?

Answer 1

You can use QGIS for georeferencing (tutorial), then generate tiles with it (another tutorial). Finally, you should specify layer bounds in Leaflet tile layer with bounds option.

Answer 2

If your image uses paletted colours, you have to translate it first to RGB colours:

gdal_translate -expand rgb src_dataset dst_dataset

If your image is not placed correctly when loading into QGIS, use gdal_translate -a_ullr to set the bounds.

Since Openstreetmap uses EPSG:3857, you can directly reproject your image to that projection with

gdalwarp -s_srs ... -t_srs EPSG:3857 surcefile destinationfile

before tiling the destinationfile.