Creating 3rd Party Raster Tiles for Mapbox - mapbox

Question

I am trying to use Mapbox to integrate high-res drone imagery onto our website. It works well when I create the tiles in Mapbox Studio, but it has a size limit and only accepts 8-bit imagery. I have tried creating my own tiles using gdal2tiles, but they won't load on the map. I'm not sure if this is a compatibility issue, my gdal tiling settings, or a problem with the code itself. Any help would be greatly appreciated!
I have tried modifying the code given by Mapbox for 3rd party raster tiles, but it did not work.
gdal2tiles
gdal2tiles.generate_tiles(infile, outdir, np_processes=4, zoom='0-22', srs='EPSG:3857')
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoibHVrYXNmcmFzZXIiLCJhIjoiY2p5ZnN3Nm12MWZrdDNscW85aHAwbW52eiJ9.fbdPTtQHTUWaLTex9dCO0g';
var map = new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["./{z}/{x}/{y}.png"],
"tileSize": 256
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
},
I have tried running this html locally in the same folder as the tiles, and uploading both to our AWS server, but neither works. In both cases the background map loads, but the tiles do not.

Answer 1

gdal2tiles outputs tms tiles and not xyz tiles so try setting a scheme on the source like this:
new mapboxgl.Map({
container: 'map', // container id
style: {
"version": 8,
"sources": {
"raster-tiles": {
"type": "raster",
"tiles": ["./{z}/{x}/{y}.png"],
"tileSize": 256,
"scheme": "tms"
}
},
"layers": [{
"id": "simple-tiles",
"type": "raster",
"source": "raster-tiles",
"minzoom": 0,
"maxzoom": 22
}]
}
});