Navigate through a pre-known map offline using Phonegap

Question

Hello and thank you in advance,

I would like to ask if there is a way to compile pre-known google map tiles and load them up in a Phonegap application.

To be more specific, I am developing an application that will concern geolocation, path navigation etc, within a specific region. Due to the nature of use of the application (it might be used in the wildlife for example) the phone of the user may not get signal in order to have an internet connection, hence I want the interactive map facility to be available even if the phone is offline.

Im also considering the possibility of getting the cached tiles if the google map was retrieved earlier. Is this possible with Phonegap?

I am also open to any suggestions on other map services, not only on google maps.

Answer 1

I've been working on caching Open Street Map tiles with phonegap using OpenLayers. I store the tiles on the filesystem using PhoneGap-Downloader (https://github.com/phonegap/phonegap-plugins/tree/master/Android/Downloader) and map the url of the tile to the location on the filesystem using localstorage. In openlayers I subclass OpenLayers.Layer.OSM to overload getURLasync and intercept the setting of the tile URL:

EDIT: In recent versions of phonegap there is no need for the PhoneGap-Downloader plugin, just use the native filetransfer: http://docs.phonegap.com/en/2.3.0/cordova_file_file.md.html#FileTransfer_download

OSMWithLocalStorage = OpenLayers.Class(OpenLayers.Layer.OSM, {
    initialize: function(options) {
        OpenLayers.Layer.OSM.prototype.initialize.apply(this, ["CachedMap"]);
        this.async = true;
        this.isBaseLayer = true;

        this.url = 'http://tile.openstreetmap.org/${z}/${x}/${y}.png';
    },
    getURLasync: function(bounds, scope, prop, callback) {
        var url = OpenLayers.Layer.OSM.prototype.getURL.apply(this, [bounds]);
        var cached = window.localStorage.get(url);

        if(cached){
            scope[prop] = cached;
        }
        else{
            scope[prop] = url;
        }

        callback.apply(scope);
    },
});