I am trying show a custom tile overlay (created from a raster image) on top of openstreetmap base layer using Leaflet.
I used one of the raster images from https://www.naturalearthdata.com/downloads/10m-raster-data/10m-natural-earth-1/ and used GDAL2Tiles (I have GDAL 2.4.2.) to create a tile layer.
gdal2tiles.py -p raster -z 0-8 NE1_HR_LC.tif Natural
The generated tiles are not aligned properly with openstreetmap as base layer. I have attached an image on how it appears when both of the layers appear.
Below is the code in the front end.
let minzooms =0;
let maxzooms =8;
let beginzooms =3;
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', minZoom: minzooms, maxZoom: maxzooms});
var lyr = L.tileLayer('/tiles/{z}/{x}/{-y}.png', {tms: true, opacity: 0.7, attribution: "tiled map", minZoom: minzooms, maxZoom: maxzooms, noWrap: true });
var map = L.map('map', {
center: [40.86667, 34.56667],
zoom: beginzooms,
minZoom: minzooms,
maxZoom: maxzooms,
layers: [osm]
});
var basemaps = {"OpenStreetMap": osm};
var overlaymaps = {"Layer": lyr};
L.control.layers(basemaps, overlaymaps, {collapsed: false}).addTo(map);
map.fitBounds([[-180, -90], [180, 90]]);
Is gdal2tiles causing this issue?