A web app that caches Leaflet.js interactive map tiles in the browser via IndexedDB. This gives offline access to already-viewed areas of the map and noticeably reduces the number of network requests on repeat navigation.
Source code: github.com/JohnCamelTry/leaflet-cache-tile.
How it works
While panning and zooming, tiles are loaded via regular HTTP requests and immediately saved to IndexedDB. On subsequent requests for the same tiles, they’re served from local storage instead of the network — so an already-viewed area stays accessible even without a connection.
Features
- Persistent storage. Tiles live in IndexedDB and survive page reloads — the cache is kept until manually cleared with the “Clear cache” button.
- Quota control. The app monitors storage usage and stops caching new tiles once more than 95% of available space is used, without evicting already-saved data.
- Status panel. Shows network state, number of cached tiles, storage usage, and cache controls.
- Retries. Failed tile requests are automatically retried up to three times with delays.
Stack
Leaflet.js · IndexedDB · Fetch API. The whole project is client-side HTML/JavaScript with no build step and no backend.