How can create an offline cache of a large number of SLIPPY tile (PNG, 256×256) inside a web browser and then display them from that offline cache. For example, can one use HTML5 IndexedDB as an storage location for offline map tiles?
[GIS] Offline SLIPPY Map (Tiles) Database for Leaflet
databasehtml5leaflet
Best Answer
Here is one way to do that:
Components used:
Running the Demo:
http://codepen.io/DrYSG/pen/hpqoD
This should load 341 blobs from Google Drive (NASA Blue World, in EPSG 3857 projection). It will show a sample image when it is done. Sorry, FireFox has a poor implementation of IDB, so it is very slow (FF uses SQLLite a relational database, and IDB is no-SQL).
Once you have done that, then try:
http://codepen.io/DrYSG/pen/oEItn
Which will show that there is a manifest, and 341 tiles, and should overlay the Tiles from PouchDB on your map. You can use the layer control on the left side to turn off the PouchDB layer.
The Algorithm it uses is as follows:
Before Pressing the button "Download Tiles" Check to see that the manifest has been stored in the DB, and that 341 tiles are present. If you already ran the test then your PouchDB is going to already have tiles in the DB, and you will get errors. In that case, Press Delete DB, and then reload the page.
When you press "Download Tiles" The following steps occur:
Leaflet Map Display
The key idea in getting Leaflet to display maps is to use Ishmael Smyrnow's Functional Tile plug-in: https://github.com/ismyrnow/Leaflet.functionaltilelayer. You will need to use JQUERY DEFFER to allow the PouchDB to asynchronously fetch the tiles from the DB. You also need to understand CreateURL() to create a binary blob url which is used in the tag to show the raster image.
I create my database tile layer this way:
Notes
Right now Chrome is running fine. Firefox is very slow. I found this out a few months when I did a native IndexedDB API. So I don't think this is a PouchDB issue. Probably more due to FireFox using SQLlite which is a relational approach to a no-SQL DB.
IE10 is not working. This is sad, since my prior tests with IE10 shows it has a fantastically fast IndexedDB solution: https://stackoverflow.com/questions/14113278/storing-image-data-for-offline-web-application-client-side-storage-database