Is it possible to insert an XYZ tile layer to an openlayers webmap created by qgis2web plugin?

Question

The qgis2web plugin exports complete rasters. But in my case these files are too large... so instead of using the entire layer I'd like to use a tiled layer that I created (with TileMill).

What would be the best way to do this? I thought of a few ideas, but being a beginner in JS I couldn't get it to work:

1. Insert the ol.layer.Tile + view: new ol.View code in the index.html?
2. Insert the above codes in the qgis2web.js file (I suspect this is the right way but couldn't get it to work).
3. Is it possible to add the tile layer as a separate .js file and launch it from index.html?
4. I also assume I have to change the background color of the map in index.html to be transparent.

The zipfile of the qgis2web output (with only two small vector layers, 200KB) can be downloaded from:

http://www.tempgis.com.au/wp-content/uploads/stackexch/ol_qgis2web.zip

The link to one of the XYZ tiled images is:

http://www.tempgis.com.au/wp-content/uploads/stackexch/regional/{z}/{x}/{y}.png

Answer 1

Only way at the moment without manually editing the code as you suggest is to add your layer as an extra basemap in the list in qgis2web's bottom-right panel. In the folder of the plugin itself, edit configParams.py and basemaps.py, and copy another basemap, changing title, URL, and attribution to your layer's values. Restart QGIS, and your layer should appear in the list.

Recent developments in QGIS itself (native XYZ layer support) will allow me to code qgis2web to handle this more elegantly. However, XYZ hasn't been released yet.

Update: QGIS now supports native XYZ layers, and qgis2web exports them.