How to make offline maps(using leaflet OSM) , by caching?

Question

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?

Solution 1

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

Solution 2

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.

Solution 3

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!

Comments

[Mike G]

@Leonid please stop with these suggested edits. 1) Adding in a bunch of line breaks doesn't help and 2) using the <br/> tag is not the preferred way of inserting line breaks at Stack Overflow - Markup rules are preferred (end a line with two spaces instead of one)

[Abhi Ram A]

I think you just stored in cache. Right? Can we store the tiles in localstorage and then load them, when offline ?

[tbicr]

No source files stored in application cache, cached tiles in IndexedDB or WebSQL. You can use localstorage (and this very easy because it synchronous) but it have some restrictions by size (by spec 5MB, real see dev-test.nemikor.com/web-storage/support-test). However you can use hacks like this: filldisk.com, but this don't work in all browsers and can be fixed.

[Abhi Ram A]

Oh, k. So, you are caching tiles. I understood now. Can i say something.... As you mentioned to cache the file in the appcache.manifest file, it will store the tiles automatically. I don't think you need to explicitly store tiles in IndexedDB or WebSQL. Once try, without storing the tiles in IndexedDB. They will automatically stored, as you have included appcache.manifest . Thank you, so much.

[tbicr]

You can try add needed tiles to application cache and this can work, but you must know which tiles you need (as I know application cache can't store any file dynamically from js) and each tile you must write into application cache manifest file, for example to store tile for city with 2 billions people with zoom 1-16 you need more then 3000 tiles.

[Tobias Fünke]

Hey, did you ever finish this?

[Mario Olivio Flores]

Click on the link. He basically ended up using pouchDB as of August 2014