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


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


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

  • out of curious , why using Leaflet and not OpenLayers?
    – Alophind
    Jan 16, 2013 at 6:57
  • We are already using OpenLayers in production, but want to experiment with Leaflet as an alternative.
    – petzlux
    Jan 16, 2013 at 7:54
  • I wanted also to try leaflet but not sure if answer all my requirements : Ability to load my own raster , offline OSM tiles , custom tool box...
    – Alophind
    Jan 17, 2013 at 7:19

3 Answers 3


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


var grb =  L.tileLayer( "http://grb.agiv.be/geodiensten/raadpleegdiensten/geocache/tms/1.0.0/grb_bsk@GoogleMapsVL/{z}/{x}/{y}.png" , {
            tms: true
  • Okay, but that doesn't answer my question. How to use a TileCache Schema tileset in Leaflet. I don't want to touch the TileCache configuration...
    – petzlux
    Jan 16, 2013 at 7:55

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.


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'}); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.