post

Convert TMS tiles to XYZ for D3js

When I was working with D3js, I was searching on how to use TMS tiles made in Qgis with gdal2tiles.py. If you want to generate XYZ tiles, you can use the fork of gdal2tiles.py made by Cayle Sharrock

Default XYZ system is d[2] (zoom level), then d[0] (column), then d[1] (line), which gives :

.attr("xlink:href", function(d) { \
return "./images/relief/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; \
})

where d[2] is Z, d[0] is Y, and d[1] is X.

So you have to replace d[1] (X) by 1 << d[2]) - d[1] - 1 :

.attr("xlink:href", function(d) { \
return "./images/relief/" + d[2] + "/" + d[0] + "/" + ((1 << d[2]) - d[1] - 1) + ".png"; \
})

To avoid showing images if out of range I just put a on condition :

.on("error", function() {
 d3.select(this).style("visibility", "hidden");
});

If you have a better solution to do not generate tiles if out of extent, please feel free to share !

I made a little block available here, made with my homemade Toulouse map :