[GIS] Display tiles from a custom GeoTiFF overlayed on googles satellite map using leaflet

Question

I want to overlay tiles generated from a GeoTIFF raster I created on a google satellite map. What I have tried is:

1. Style and output a high quality colored PNG using qgis's map composer
2. Tile this PNG using gdal2tiles.py
3. Use leaflet to point to these generated tiles

This is simple and works well, result is:

Since I want to have a "swipe" functionality to contrast my custom tiles with googles satellitle map, my tiles must be spatially aligned with googles product and have transparency where I indicate. I have not found a way to properly do this. Could someone propose a way to do this correctly?

Answer 1

You would probably be interested in Leaflet.Control.SideBySide plugin, it provides that exact functionality (demo).

However, it assumes that your tiles already perfectly match.

I do not know unfortunately how you can specify in gdal2tiles a Z, X, Y offset. But you might be interested in that post: Specifying Lat & Long for Leaflet TileLayer. Note that modifying the tile numbers on the fly should work, but you may still have some offset if your image was not aligned with Google Maps tiles when performing the tiling operation.