Creating 3rd Party Raster Tiles for 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.

Relative tiles URLs are not guaranteed to work, since it's not clear what it should be relative to. If it's working for you, great, but if not you should try setting an absolute path. — AndrewHarvey
Andrew - I have tried that as well but it did not seem to make any difference — McFraser

Manish Manish · Accepted Answer · 2019-09-10T16:16:59

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
     }]
   }
});

Creating 3rd Party Raster Tiles for Mapbox

1 Answers