Can OpenLayers 3 use WebSQL or IndexedDB to cache map fragments
I am using OpenLayers 3 and all the standalone examples I've seen only include localStorage for saving and retrieving map fragments. The problem is that localStorage is limited to about 5 megabytes, which is too small for my application.
If I was using Leaflet instead, I could extend L.TileLayer by writing my own storage solution in the getTileUrl function.
Is there something suitable in OpenLayers 3? I'd really like to use IndexedDb or even WebSQL over localStorage.
source to share
In OpenLayers 3, you can customize the source of the tile layer using the custom tileLoadFunction to implement your own storage solution:
new WhateverTileSource({
tileLoadFunction: function(imageTile, src) {
var imgElement = imageTile.getImage();
// check if image data for src is stored in your cache
if (inCache) {
imgElement.src = imgDataUriFromCache;
} else {
imgElement.onload = function() {
// store image data in cache if you want to
}
imgElement.src = src;
}
}
});
source to share
map.geo.admin.ch from the Swiss Confederation links to offline support on mobile devices. The code used for this application is open source and hosted on github (github.com/geoadmin/mf-geoadmin3). For its storage capabilities, it uses a mixture of localstorage, IndexDB, WebSQL using the localforage mozilla library.
The storage implementation for map.geo.admin.ch is here as a service of angularJS. It is used in a standalone service to download and store the required fragments. Then you can simply use Andreas' tileLoadFunction to redirect the loading of tiles from storage. This can also be found in the offline service.
There are size limits depending on browsers . Please see the documentation for the local doc.
Note. I don't have enough karma to post more than two links. Google should help.
source to share