Can OpenLayers 3 use WebSQL or IndexedDB to cache map tiles

Question

I'm using OpenLayers 3 and all the offline examples I've seen only include localStorage for saving and retrieving map tiles. The problem is that localStorage is limited to about 5 megabytes, which is too small for my application.

If I were using Leaflet instead, I could extend L.TileLayer by writing my own custom storage solution in the getTileUrl function.

Is there something appropriate like that in OpenLayers 3? I'd really like to use IndexedDb or even WebSQL over localStorage.

Answer 1

In OpenLayers 3, you can configure a tile layer source with a 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;
    }
  }
});

Answer 2

map.geo.admin.ch of the swiss confederation comms with offline support on mobile devices. The code used for this application is open source and hosted at github (github.com/geoadmin/mf-geoadmin3). For its storage capabilities, it uses a mixture of localstorage, IndexDB, WebSQL by using the localforage library of mozilla.

The storage implementation for map.geo.admin.ch is here as an angularJS service. It's used in the offline service to download and store the wanted tiles. Then you can simply use Andreas' tileLoadFunction to redirect the loading of the tiles from the storage. This can also be found in the offline service.

Depending on the browsers, the limits in terms of size still exist. Please refer to the localforage documentation abou the details.

Note: I don't have enough karma to post more than 2 links. Google should help.