Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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?

share|improve this question
2  
If I remember correctly, leave out the $ symbols. –  Scro Mar 31 '13 at 13:10
    
Did so, but still no luck, good point though! –  U2ros Mar 31 '13 at 13:15
    
Okay, one more update, i added the layer from the example which gets its data from cloudmade server. It works, so im guessing it really is something about the path –  U2ros Mar 31 '13 at 13:23
2  
Aha, found the issue, i had to set tms: false, because i reversed the axis when i generated the tiles. Blah :) I hate it when i post a question then hours later i find the solution –  U2ros Mar 31 '13 at 13:32
    
Good question - helpful for me, especially tms: true and @Calvin's answer below with regards to local, Windows files. –  oeon Sep 10 '13 at 17:01
show 1 more comment

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
add comment

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);
share|improve this answer
    
In this case it would only be usable from the local system which contains the tiles. –  Devdatta Tengshe May 2 '13 at 3:03
1  
Not true at all, relative urls work without a problem :) –  U2ros May 2 '13 at 6:54
1  
@Calvin - I think it needs to be like: file:///L:/Imagery/2011/tiles/{z}/{x}/{y}.png if this was an external hard drive assigned 'L' in Windows. You're showing one less '/' before the drive letter and one too-many '/' in your example. –  oeon Sep 10 '13 at 16:58
add comment

Your Answer

 
discard

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.