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.

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.

• javascript
• caching
• openlayers-3

Share Improve this question Follow asked Nov 11, 2014 at 7:51 KevinKevin 3,64177 gold badges3737 silver badges4141 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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;
    }
  }
});

map.geo.admin.ch of the swiss confederation ms with offline support on mobile devices. The code used for this application is open source and hosted at github (github./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.