Navigate a previously known map offline using Phonegap

Question

Hello thank you in advance

I would like to ask if there is a way to compile pre-known fragments of a Google map and download them in the Phonegap application.

To be more specific, I am developing an application that will relate to geolocation, navigation along the path, etc. within a certain region. Due to the nature of the use of the application (for example, it can be used in the wild), the user's phone may not receive a signal to connect to the Internet, so I want the object of the interactive map to be accessible, even if the phone is offline.

I am also considering getting cached snippets if the google map was removed earlier. Is this possible with Phonegap?

I am also open to any offers on other map services, and not just on google maps.

Answer 1

I worked on caching Open Street Map cards using a phone saver using OpenLayers. I store tiles on the file system using PhoneGap-Downloader (https://github.com/phonegap/phonegap-plugins/tree/master/Android/Downloader) and map the tile URL to the location on the file system using localstorage. In openlayers, I subclass OpenLayers.Layer.OSM overloads getURLasync and intercepts the setting for the fragment URL:

EDIT . In the latest versions of the phone screensaver, there is no need for the PhoneGap-Downloader plugin, just use your own file translator: 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); }, }); 

Answer 2

FWIW, pre-caching of tiles against Google Maps TOS: http://code.google.com/apis/maps/terms.html

It would be best to use OpenStreetMaps together with one of the libraries, for example MapsForge, for caching ahead of schedule.

Edit: Using the gmh04 code above, we use the MapsForge library to cache the set of OSM elements, and then include their cache code in the PhoneGap plugin, which will return fragments of the image in base64 image format (that is, "data: image / png; base64, {img data} "). Change its getURLAsync method to call the plugin instead of referencing localstorage while it works fine.