Serving raster tiles source

[MaxDragonheart]

I'm trying to add a tiles as source layer on my map based on GeoDjango. I've followed the indication in this example even if is related to the map style.
For generate my tiles I've used gdal2tiles with this simple python's script:

options = {
    'zoom': (12, 22), 
    'resume': True,
    'verbose': True,
    }

gdal2tiles.generate_tiles(input_raster, output_path,  **options)

I've used the code below to add my tiles on the map:

var map = new mapboxgl.Map({
    container: 'map',
    accessToken: mapboxgl.accessToken,
    style: 'mapbox://styles/mapbox/outdoors-v11', 
    center: [14.144281, 40.878716],  
    zoom: 12,
});

map.on('load', function() {

        map.addSource('raster_tiles', {
            'type': 'raster',
            'tiles': [
                        '/static/raster/tiles/quarto/{z}/{x}/{y}.png'
                    ],
            'tileSize': 256,
        });

        map.addLayer({
            'id': 'simple-tiles',
            'type': 'raster',
            'source': 'raster_tiles',
            'minzoom': 0,
            'maxzoom': 22
        });

});

In console I see the errors below:

[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4418/3073.png HTTP/1.1" 404 1812
[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4418/3075.png HTTP/1.1" 404 1812
[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4420/3075.png HTTP/1.1" 404 1812
[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4421/3074.png HTTP/1.1" 404 1812
[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4421/3073.png HTTP/1.1" 404 1812
[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4417/3074.png HTTP/1.1" 404 1812
[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4421/3075.png HTTP/1.1" 404 1812
[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4417/3073.png HTTP/1.1" 404 1812
[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4417/3075.png HTTP/1.1" 404 1812
[05/Feb/2020 10:44:37] "GET /static/tiles/quarto/13/4421/3072.png HTTP/1.1" 404 1812

If I use a tile's path /static/raster/tiles/quarto/20/565480/654951.png I can see that image.
The strange thing is that are called folders and images nonexistent and not the real folders and images.
I think that I use this tiles in wrong way.

Someone can explain to me how I must use this feature in a correct way?

[sgillies]

@MaxDragonheart please see mapbox/tilejson-spec#51. Relative URLs for tile endpoints are not supported.

[MaxDragonheart]

Thank you @sgillies for the answare. Unfortunatly even if I change the url from relative to absolute, using this path http://127.0.0.1:8000/static/raster/tiles/{z}/{x}/{y}.png I have the same problem.

[stevage]

http://127.0.0.1:8000/static/raster/tiles/{z}/{x}/{y}.png

Do you mean "http://127.0.0.1:8000/static/raster/tiles/quarto/{z}/{x}/{y}.png"

I'll also point out that you should include a minzoom and maxzoom when you create the source, so Mapbox-GL knows when tiles are available:

map.addSource('raster_tiles', {
            'type': 'raster',
            'tiles': [
                        '/static/raster/tiles/quarto/{z}/{x}/{y}.png'
                    ],
            'tileSize': 256,
            minzoom: 12,
            maxzoom: 22
        });

You probably don't mean to add minzoom and maxzoom on the layer though.

(Did you really generate tiles all the way to zoom 22? Sounds...excessive?)

[asheemmamoowala]

@MaxDragonheart it looks like there are some suggestions here to help you diagnose the problem in your application, so I'm going to close this issue.

For future "how do I" questions like this, please refer to our help documentation, and if you can't find the answer there, contact support. This issue tracker is for reporting bugs and feature requests. Thank you!