You are here

Offline mobile HTML5 map client

Collecting some research for Offline mobile HTML5 map client.

1. Research one

Phonegap + Leaflet + TileMill = Offline Mobile Maps  

Working together with  Phonegap, Leaflet, and TileMill's .mbtiles.
Offline based on: Phonegap's SQLite Plugin

 The main idea is to download the .mbtiles to the device using Phonegap's File API. Since .mbtiles are just sqlite databases I was able to use a SQLitePlugin to open them up (thanks, coomsie!).........Once I had access to the encoded image data it was only a matter of writing a custom leaflet tile layer (TileLayer.MBTiles.js) inspired by a similar one that coomsie had done.

Source code in GitHub:

2. Research Two

Offline Mapping in HTML5 Mobile Apps

The best solution I've seen was by Scott Davis who used MapBox's TileMill to create an mbTiles SQLite database which he then accessed through the Cordova SQLite plugin and a custom Leaflet TileLayer.  The cool thing about this solution is that it leverages SQLite's built-in compression to store map tiles in a really efficient seemed like I could take the basic structure of Scott's solution but just store the raw tiles locally with the PhoneGap Files API and then point a standard Leaflet TileLayer at the local directory.

Working together with  Phonegap, Leaflet.
Offline based on: Phonegap's PhoneGap Files API

Source code in GitHub:


3. Research Three


This is a nice and clear presentation, describe why use File API instead of SQLite API to realize the offline map tile functionality.

My opinion, File API is suitable for cache map tile image data, but SQLite is still useful for store the WFS features's data. For a offline WMS + WFS map client, both could work together.

Source code for test why File API is better for cache map tile: