Leaflet offline tiles problem

Question

I hate to ask this kind of questions, but i ve been stuck for 2 days now:

I rendered some tiles with mapnik which i want to serve in my offline application which will run from a portable disk, but via browser still. I switched openlayers to leaflet for this particular case because of its nice widgets and seemingly easier setup.

However, i initialize my map and tile layer like this:

var map = L.map('map_canvas');
map.setView([50, 10.0], 6);      

var layer = L.tileLayer('./data/map/${z}/${x}/${y}.png', { maxZoom: 16 , tms: true});    
map.addLayer(layer);

But what i get is a blank map. If i inspect whats going on with Firebug it seems that tiles are not even being requested (no other errors either). The map is set up right because i can see leaflet map widgets, i suspect its got something to do with the url of the layer. I copied that directly from my other OpenLayers app which works without a problem. Any ideas, or has anyone else stumbled across this?

Answer 1

To give an answer to this: You can set relative paths, this is no problem. But the URL has to look like this (without the dollar signs).

var map = L.map('map_canvas');
map.setView([50, 10.0], 6);      

var layer = L.tileLayer('data/map/{z}/{x}/{y}.png', { maxZoom: 16 });    
map.addLayer(layer);

where data is a subdirectory of the current directory, where the html file with this javascript code is executed.

Answer 2

You can't have relative urls off line, you need to have a file protocol (file://) absolute url, you can right click on an image and open it in a browser to get the url path.

var map = L.map('map_canvas');
map.setView([50, 10.0], 6);      

var layer = L.tileLayer('file:///c://path/to/your/data/map/{z}/{x}/{y}.png', { maxZoom: 16 , tms: true});    
map.addLayer(layer);