Skip to content
An experiment in storing and displaying custom vector tiles from IndexedDB (using level-js)
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Use xhr-request library and formatting updates Jan 31, 2018
test
.travis.yml
README.md
bundle.js
index.html
index.js
package-lock.json
package.json
screenshot.png

README.md

Offline maps playground

An experiment in storing and displaying custom vector tiles from IndexedDB (using level-js).

Work in progress

screenshot

Demo

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.

What's going on here?

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).

You can’t perform that action at this time.