Offline map (Google/OpenLayers) for HTML5 (Angular) based hybrid application

Question

I have a requirement where the customer has explicitly asked for offline support for the map. The rest of the application works well offline, but I am not sure how to get this done using Google or OpenLayers.

I have gone through here and I couldn't find any answer to what I was looking for. Please do note that I am only using angular.js and phonegap.js and nothing else. I have worked with Google Maps as well as OpenLayers and I'm inclined to using these as I feel its much light weight and community support is awesome.

Q. Has anyone implemented or come across offline usage of Google Maps or OpenLayers. Other reliable map solutions are also welcome, but just need to be fast and mobile friendly.

What I have done:

I have downloaded the entire source repo from github (OpenLayers) and included in my application. Although it takes hell of a time loading in browser, the application when installed had no performance issue. The issue was even though I included all files in my app, OpenLayers still fetches the map images (tiles) from another server and it is like dynamic (I had asked related here: OpenLayers maps issue with SSL).

http://c.tile.openstreetmap.org/14/8745/5622.png
http://c.tile.openstreetmap.org/14/8745/5625.png
http://b.tile.openstreetmap.org/14/8745/5623.png

and so on.

I have not gone with Google Maps as everything I got is direct API call to Google server.

Answer 1

Yes it is possible to do this, and it's a great way to share browsable maps via DVD or USB stick offline.

The major drawback is of course each client needs a complete set of tile data (probably running into a few thousand files and several gigabytes depending on the zoom level/area of the map).

You need to render the tiles (or copy them off an existing service) first; there are many ways to skin this particular cat and my choice was Mapnik + TileStache. Or, if you your own WMS server, just copy whatever ends up in the cache after a few week's browsing, these will be the most popular tiles.

From there you'll copy the rendered tiles into a local directory under your project, and tell your JavaScript mapping library (again, several options: personal preference is Leaflet as it's lighter than OpenLayers) to create a tiled WMS layer. Instead of pointing to http://openlayers.org/{a}/{b}/{c}.png or what have you, use /images/{a}/{b}/{c}.png. It is of course possible to add multiple layers, to have one 'live' and one 'local cache' layer or something.

That's the general idea, I have done it before successfully and would include more detail if I could remember which hard drive that project is on.

Answer 2

As far as I know Google licence does not accept their tiles to be stored locally (See section 10.1.1(a) of the Terms of Service).

Openstreetmap allows it, but you get blocked if you bulk download too much tiles. But you are free to download their source data and render the tiles yourself.

Openstreetmap data is also distributed by Mapquest, Cloudemade and others. You might find paid services to access the tiles in bulk.

---

EDIT

Self-rendering of Openstreetmap is truly free. Maperitive is the easiest way to get started with that.