Specify tilelayer position on Leaflet

Question

I have 2 raster images (.png), 2 maps that are geographically next to each other (east part and west part of a city). These images are part of a bigger set, and cannot be merged (or my PC dies).

These PNGs have been georeferenced (WGS 84) using QGIS georeferencer, and I have 2 tilemapresource.xml has a result. The maps have then been split in tile-trees using gdal2tiles.

The problem is that when running my server, leaflet consistently loads both maps exactly on top of each other (which can bee seen because maps are loaded in order, the second one replacing the first one after a second).

I feel like this is how it's supposed to work (I never feed leaflet my .xml files, so it just put them at the default coordinates), but I have no idea how to tell leaflet where to place my map.

My code looks like this:

var map = L.map('map', {
center: [0, 0],
zoom: 1
});

var tif_map = L.tileLayer('http://localhost:5000/test/{z}/{y}/{x}', {
    maxZoom: 8,
    continuousWorld: true,
    noWrap: true,
    attribution: 'Astrosias'
}).addTo(map);

var png_map = L.tileLayer('http://localhost:5000/test0/{z}/{y}/{x}', {
    maxZoom: 8,
    continuousWorld: true,
    noWrap: true,
    attribution: 'Astrosias'
}).addTo(map);

What is the regular way to locate my layers ? I know I can do it quite easly in openlayer.js using the "TileGrid" parameter of the layers, but I found no such parameter in leaflet.

Answer 1

Build a VRT tileset and use that as input to gdal2tiles. That way you get a single tiletree that is a mosaic of your source images.

My data: I cut a USGS topo map into 3 PNG files, 1.png, 2.png and 3.png. I then georeferenced these with world files.

Thats my baseline, you already have your data.

Then I ran gdalbuildvrt ( see https://gdal.org/programs/gdalbuildvrt.html ) to get a VRT dataset (you have to provide the SRS):

gdalbuildvrt -a_srs EPSG:26914 123.vrt 1.png 2.png 3.png

The 123.vrt holds a XML with metadata for all bands of all files. Its size is 5 kilobytes in my case.

Then I used the 123.vrt as input for gdal2tiles

gdal2tiles 123.vrt outtiles/