Offline maps on PhoneGap using OpenLayers and TileCache

Question

Is there a good tutorial on how to pre-cache a known part of a map using TileCache, store them on the PhoneGap mobile app database and load them up using OpenLayers?

I went through many tutorials and still I haven't figured a way out to do all these together.

Answer 1

If you have your own tiles and have them embedded within your application archive, you could use Leaflet to render the local tiles. http://leafletjs.com/
If your custom tiles are remote (hosted on a server), then you're still not going to be able to consume them in an offline scenario.
Please have look at the this blog.

Yeah totally possible used leaflet tiles offline, just change the path used for the tiles, to the local path.

Ex .:
Default:

// add a CloudMade tile layer with style #997
L.tileLayer('http://{s}.tile.cloudmade.com/[API-key]/997/256/{z}/{x}/{y}.png', {
    attribution: 'Map data'
}).addTo(map);

Offline :

L.tileLayer('file://path_to_your_tiles/{z}{x}{y}.png', {
    attribution: 'Map data'
}).addTo(map);

Just make sure your tiles are named on the same pattern (ex.: 6_17_15.png). You can change the pattern to.

You can store map tiles locally using a directory structure to match the server one and point your tileLayer at the local location of the tiles. One thing to bear in mind though, some providers of map tiles will get upset if you scrape their tiles en-masse to then store locally. They will get especially upset if you write an app that encourages lots of people who use the app to do this. Such an app is likely to quickly get blocked. See http://wiki.openstreetmap.org/wiki/Tile_usage_policy for example. You can always render your own tiles to hold locally.