An experiment in storing and displaying custom vector tiles from IndexedDB (using level-js).
Work in progress
http://npeihl.com/offline-maps-playground
Click the checkmark button to save map layers into IndexedDB. When complete the layers should display on the map. The map layers persist even after reload and in an offline state.
On the first load you are presented with a blank map canvas. When you click the checkmark button, the web application downloads Natural Earth GeoJSON files from GeoJSONXYZ.
These GeoJSON files are then converted into Mapbox Vector Tiles within the browser. These tiles are stored in the browser's IndexedDB database for offline use. Progress is logged in the browser developer console.
After the tiles are stored, a custom Leaflet module based on Leaflet.VectorGrid is used to request and display the tiles from IndexedDB as a custom offline-first basemap. The basemap tiles persist for display even after closing and reopening the browser. Clicking the checkmark button again refreshes the tile cache.
The map's zoom levels are limited to between 0 and 5. This is because it takes a rapidly increasing amount of time and storage to construct tiles over zoom level 5 for the entire earth. Additionally, the Natural Earth datasets being used are designed for small scale maps. We could limit the map extent to a small area and introduce regional datasets for a local offline map (see this commit).