Database for offline slippy map tiles

PhoneGap and MBTiles.

WebSQL & IndexDB will not be enough. 'Windows Laptops' will not be the same code as mobile devices.

Results Offline blob cache for PNG slippy maps

Testing

• 171 PNG files (total of 3.2MB)
• Platforms tested: Chrome v24, FireFox 18, IE 10
• Should also work with Chrome & FF for Android

Fetch from web server

• using XHR2 (supported on almost all browsers) for blob download from web server
• I went with XHR2-Lib by Phil Parsons, which is very much like JQUERY .ajax()
  • https://github.com/p-m-p/xhr2-lib

Storage

• IndexedDB for IE and FireFox
• Chrome: Polyfill (blob stored using FileSystem API, reference kept in IndexedDB) polyfill
• A Must read article on "How the browsers store IndexedDB data"
  • http://www.aaron-powell.com/web/indexeddb-storage
• Note: FireFox uses SQLlite for the NOSQL IndexedDB. That might be the reason for the slow performance. (blobs stored separately)
• Note: Microsoft IE uses the extensible storage engine:
  • http://en.wikipedia.org/wiki/Extensible_Storage_Engine
• Note: Chrome uses LevelDB http://code.google.com/p/leveldb/

Display

• I am using Leaflet http://leafletjs.com/ to show the map tiles
• I used the functional tile layer plugin by Ishmael Smyrnow for fetching the tile layer from the DB
  • https://github.com/ismyrnow/Leaflet.functionaltilelayer
• I compared the DB-based tiles layer with a purely local (localhost://) storage
• There is no noticeable difference in performance! between using IndexedDB and local files!

Results

• Chrome: Fetch (6.551s), Store (8.247s)
• FireFox: Fetch (0.422s), Store (34.519s)
• IE 10: Fetch (0.668s), Store: (0.896s)

so you almost definitely don't want to use leaf.pouch, I made that with vector data in mind not tiles, you'd probably be better off using strait up PouchDB to store your tiles, as you can also replicate from CouchDB for the fast initial load, The answer by @tmcw above would also work if you have more of an phone app as opposed to a mobile web page.