Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
out of curious , why using Leaflet and not OpenLayers? – Alophind Jan 16 '13 at 6:57
We are already using OpenLayers in production, but want to experiment with Leaflet as an alternative. – petzlux Jan 16 '13 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 '13 at 7:19

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( "{z}/{x}/{y}.png" , {
            tms: true
share|improve this answer
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 '13 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.

share|improve this answer

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}{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'}); 
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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