Mapbox-gl-js: How to load local tiles?

[PBrockmann]

I have a set of tiles created from geoTIFF files with gdal2tiles.py. They are saved locally (no server).
How can I load them in a map ?

With Leaflet, I can do with a:
myLayer = L.tileLayer('path/to/tiles/{z}/{x}/{y}.png', {tms: true, opacity: 0.7, attribution: ""});

What is the syntax with mapbox-gl-js ?

map.addLayer({ 'id': 'wms-test-layer', 'type': 'raster', 'source': { 'type': 'raster', 'tiles': [ 'xxxxxxx' ], 'tileSize': 256 } });

From https://www.mapbox.com/mapbox-gl-js/example/wms/
Thanks

[asheemmamoowala]

@PBrockmann Thank you for using Mapbox GL. The tiles property needs an absolute URL to the tile resources. Relative URLs are not supported for tiles (see https://github.com/mapbox/tilejson-spec/issues/51).

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!

[PBrockmann]

When you a post an issue on your project, you have a template asking you if you want to
"Report a question that isn't answered in our docs".
I thought it was the case for my question and I was hoping that it would be transformed as a interesting feature to implement.
It is too bad that Leaflet or OpenLayers are able to do it and mapbox-gl-js not...

[PBrockmann]

In fact, this seems to work and I have been able to load a layer made with my tiles stored locally (./tiles directory).
Notes: the option 'scheme': 'tms'; needed for the tiles created by gdal2tiles.py.

Whereas, I get some errors on firefox (62.0.3 Linux)
Error: "" onerrorhttps://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js:29:6909
and on google-chrome - Version 69.0.3497.100 (Official Build) (64-bit)
Error at XMLHttpRequest.M.r.onerror (ajax.js:106)
the map is displayed correclty:

The snippet used is:

...

        map = new mapboxgl.Map({
                "container": 'map',
                "style": {
                        "version": 8,
                        "sources": {
                            "osm-tiles": {
                                "type": "raster",
                                "tiles": [
                                    'http://a.tile.osm.org/{z}/{x}/{y}.png',
                                    'http://b.tile.osm.org/{z}/{x}/{y}.png',
                                    'http://c.tile.osm.org/{z}/{x}/{y}.png'
                                ],
                                "tileSize": 256
                            },
                            "my-tiles": {
                                "type": "raster",
                                "scheme": "tms",
                                "tiles": [
                                    './tiles/{z}/{x}/{y}.png'
                                ],
                                "tileSize": 256
                            }
                        },
                        "layers": [     
                            {
                            "id": "oms-tiles-layer",
                            "type": "raster",
                            "source": "osm-tiles",
                            "minzoom": 0,
                            "maxzoom": 13 
                            },
                            {
                            "id": "my-tiles-layer",
                            "type": "raster",
                            "source": "my-tiles",
                            "minzoom": 0,
                            "maxzoom": 13 
                            }
                        ]
                },
                "center": [0, 0], 
                "zoom": 1,
                "attributionControl": false,
                "infoControl": false
        });

...