https://github.com/helgasoft/leaflet.dexie
A Leaflet plugin for local persistent storage using library Dexie.js, demo:
https://github.com/helgasoft/leaflet.dexie
dexie indexeddb leaflet leaflet-plugins offline-maps offline-storage
Last synced: 10 months ago
JSON representation
A Leaflet plugin for local persistent storage using library Dexie.js, demo:
- Host: GitHub
- URL: https://github.com/helgasoft/leaflet.dexie
- Owner: helgasoft
- License: gpl-2.0
- Created: 2018-10-14T02:08:07.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-21T03:06:34.000Z (almost 4 years ago)
- Last Synced: 2025-03-25T16:55:36.953Z (11 months ago)
- Topics: dexie, indexeddb, leaflet, leaflet-plugins, offline-maps, offline-storage
- Language: JavaScript
- Homepage: https://helgasoft.github.io/leaflet.dexie/index.html
- Size: 714 KB
- Stars: 9
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Leaflet.dexie.js
================
A Leaflet plugin for **offline maps** storage using library [Dexie.js](https://github.com/dfahlander/Dexie.js).
The source code is based on [leaflet.offline](https://github.com/allartk/leaflet.offline) with the following differences:
- instead of [idb](https://github.com/jakearchibald/idb),
we use [dexie.js](https://github.com/dfahlander/Dexie.js) which is efficient, stable and well supported indexedDB library.
- instead of having all maps in a single table(store), each map is saved in its own table and can add other user-defined attributes like size, center, bounds, etc.
### Dependencies
- [leaflet.js](https://leafletjs.com/) - for map controls
- [dexie.js](https://github.com/dfahlander/Dexie.js) - to store tiles in indexedDB asynchronously
### Demo
The [Demo](https://helgasoft.github.io/leaflet.dexie/demo/index.html) implements creation and deletion of offline maps and can simulate offline map display.
### Usage
Main usage is for offline maps, but could be also used to store other information. [API documentation](https://github.com/helgasoft/leaflet.dexie/blob/master/docs/api.md) is available.
### Manual installation
Add a <script> tag to your HTML page after _leaflet_ and _dexie_. You can web-load the script, or download file [leaflet.dexie.min.js](https://raw.githubusercontent.com/helgasoft/leaflet.dexie/master/dist/leaflet.dexie.min.js) and load it locally. See code below.
### Minimal code sample
```html
press F12 to watch IndexedDB/leaflet-maps in tab Application(Chrome), Storage(FF) or Debugger(Edge)
let map = L.map('map');
map.setView(L.latLng(47.2572, 3.6842), 18);
let baseLayer = L.tileLayer.offline('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { subdomains: 'abc', maxZoom: 18});
baseLayer.addTo(map);
let control = L.control.savetiles(baseLayer, {
'confirmSave': function(status, saveCallback) {
var newTname = prompt("Please enter map name ("+status._tilesforSave.length+" tiles):", "");
if (newTname == null || newTname == "") return; // user cancelled the prompt
saveCallback(newTname);
}
});
control.addTo(map);
control.openDB();
savem = function() {
control.setBounds(map.getBounds());
control.saveMap();
}
delm = function() {
control.deleteTable(control.dtable.name);
}
baseLayer.on('loadend', function(e) { // all tiles just saved
control.putItem('mapSize', e.mapSize);
control.getItem('mapSize').then( (msize) => {
alert("size of map '"+ control.dtable.name +"' is "+ msize +' bytes');
});
});
```
### IndexedDB
[indexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) is the standard database in the browser.
Press F12 to open inspection sidebar, hit tab *Application*(Chrome), *Storage*(FF) or *Debugger*(Edge) and watch IndexedDB. The database name is *leaflet-maps*. Watch also tab *Console* for errors.
