I am trying to make offline maps through caching (IndexedDB) in browser. I understand the concept is that I download and store the tiles of map first when connected to internet.
Then I have to load the tiles logically offline.
However, I'm not able to figure it out.
How do I store them and how to load them again logically? I'm stuck here. I am using the leaflet API for maps. How can this be implemented?
See my extensive research on this at:
Storing Image Data for offline web application (client-side storage database)
and at:
https://gis.stackexchange.com/questions/44813/database-for-offline-slippy-map-tiles
Key for what you want to do is a Functional Tile layer to get stuff from the DB:
https://github.com/ismyrnow/Leaflet.functionaltilelayer
BTW, I am just now testing out PouchDB for this, which is much cleaner that the raw IndexeDB.
Follow my results at:
https://groups.google.com/forum/?fromgroups#!topic/pouchdb/RG6wUsAi2R0
I have cache example implementation http://tbicr.github.com/OfflineMap/leaflet/index.html and code https://github.com/tbicr/OfflineMap/tree/master/leaflet_idb_sql_site.
For storage used IndexedDB and WebSQL. Storage had low performance and not tested.
I am working on a solution for the same problem. Storing tiles from a tileserver, and loading them from the db in leafletjs.
I have implemented a custom layer which loads tiles from a db (indexeddb/webdatabase) if available, and fallbacks to an tileserver (which has Access-Control-Allow-Origin header, see https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Credentials)
I implemented a control which saves the tiles currently in view in indexeddb or webdatabase.
Code is on https://github.com/allartk/leaflet.offline This is still work in progress at this time!
