Leaflet Offline Map: How to store a map for offline usage?

0
votes

I want to save an OSM map with specific boundaries for offline usage in my file system without any DB outside of the web browser. After that I want to render the map with Leaflet library while offline. Is that possible?

2
javascriptleafletopenstreetmap
This depends on your definition of "database". I guess you consider IndexedDB and related technologies (PouchDB et al) to be databases, but are LocalStorage and a ServiceWorker's Cache databases? - IvanSanchez
In fact, I was talking about PostgreSQL or any other DB. IndexedDB would be OK for me. - fatma.ekici
I've taken the liberty of editing your question to reflect that. - IvanSanchez

2 Answers

2
votes

I suspect this may be an XY problem, where saving tiles in cache of the web browser from an external provider sounds like only one of many possible solutions for the initial objective of offline usage, and not having to use (or actually not to install?) a database on client side.

If that is the case, @IvanSanchez's Leaflet.TileLayer.MBTiles plugin could fit the bill: while the mbtiles file is technically a database, it is contained in a single portable file without requiring installation (it is an SQLite file).

The size could be over a browser cache, but if you have some control on the client, you can just copy it on file system. Then you can have your HTML page opened from file system as well, or a local server, which would also be more inline with offline usage.

2
votes

I see two main approaches for this:

  1. Using IndexedDB, WebSQL, Web Storage and/or related in-browser databases.

    From what I've seen, most developers prefer to rely on a library that wraps these technologies to offer consistent support across browsers (since not all browsers support all these technologies). Let me quote MDN:

    Note: IndexedDB API is powerful, but may seem too complicated for simple cases. If you'd prefer a simple API, try libraries such as localForage, dexie.js, ZangoDB, PouchDB, idb, idb-keyval, JsStore and lovefield that make IndexedDB more programmer-friendly.

    In particular, an implementation of a PouchDB-backed Leaflet Tilelayer is available; but don't lat this prevent you from exploring other options.

  2. Using ServiceWorkers ability to store things on a browser's Cache.

    A ServiceWorker is able to capture all network requests that a webpage makes, including tiles (even if the tileservers reside on a different domain name). Then, one can apply the known ServiceWorker-based caching techniques. After that, it should be even possible to send messages to the ServiceWorker to seed the cache (or just make enough fetch requests for the tiles).

    I'm not aware (at the time of this writing) of any straightforward Leaflet integrations. Implementation involves creating a manifest to point to the JS file with the ServiceWorker code, and an implementation of a cache mechanism.