Add TileCache Schema Layer to Leaflet Map

Question

I am trying to get Leaflet to display a TileCache Schema tileset. One example:

http://example.com/tiles/Admin/06/000/000/357/000/000/158.png

As far as I can tell, Leaflet only supports TMS style tiling schemas such as:

http://a.tile.openstreetmap.org/15/16938/11166.png

I tried to find an extension of a L.tileLayer that supports the TileCache tiling schema, but no such luck.

Answer 1

Standard L.Tilelayer in leaflet supports TMS and tilecache outputs TMS. Don't forget to set the tms property to true.

example:

var grb =  L.tileLayer( "http://grb.agiv.be/geodiensten/raadpleegdiensten/geocache/tms/1.0.0/grb_bsk@GoogleMapsVL/{z}/{x}/{y}.png" , {
            tms: true
        });

Answer 2

If you know how to convert between tile cache and tms you can use this plugin which allows you to set a function instead of a template for the tile url.

Answer 3

Okay, I have got the schema working now, but I still have problems with getting the right tiles (this is probably due though to exotic custom Projection and wrong BBOX origins on my end, another problem I am working on).

As suggested, I am using the functional tilelayer plugin. The zeroPad() function just pads with zeros the tile references:

        function zeroPad(num, places) {
            var zero = places - num.toString().length + 1;
            return (Array(+(zero > 0 && zero)).join("0") + num).toString().slice(-places);
        };

        var funcLayer = new L.TileLayer.Functional(function (view) {    
            xPadded = zeroPad(view.tile.column,9);
            yPadded = zeroPad(view.tile.row,9);
            zPadded = zeroPad(view.zoom,2);

            var url = "http://tile{s}.domain.com/topo/{z}/{c1}/{c2}/{c3}/{r1}/{r2}/{r3}.png"

                .replace('{s}', view.subdomain)
                .replace('{z}', zPadded)

                .replace('{c1}', xPadded.slice(0,3))
                .replace('{c2}', xPadded.slice(3,6))
                .replace('{c3}', xPadded.slice(6,9))

                .replace('{r1}', yPadded.slice(0,3))
                .replace('{r2}', yPadded.slice(3,6))
                .replace('{r3}', yPadded.slice(6,9))
                ;
                return url;
            }, {
            tms: true, //Optional depends on your tiling schema
            subdomains: '1234'});