LeafletJS - Cached tiles with local filesystem

Question

I'm implementing a Cordova application (3.2) where I want to use LeafletJS and a map tile provider together with a local filesystem cache of the tiles.

My approach in an overview is the following:

• Extend the Leaflet TileLayer
• Overwrite the _loadTile method to retrieve the tile either from local filesystem or from remote

My code:

var StorageTileLayer = L.TileLayer.extend({
log: function (text) {
  if (this.options.log)
    this.options.log(text);
  else
    console.log("[StorageTileLayer]: " + text);
},
_setUpTile: function (tile, key, value, cache) {
  try {
    tile._layer = this;
    tile.onload = this._tileOnLoad;
    tile.onerror = this._tileOnError;

    this._adjustTilePoint(tile);
    tile.src = value;
    this.fire('tileloadstart', {
      tile: tile,
      url: tile.src
    });

    this.log("Setting url to " + tile.src);
  }
  catch (e) {
    this.log("ERROR in setUpTile: " + e.message);
  }
},

_loadTile: function (tile, tilePoint) {
  this._adjustTilePoint(tilePoint);
  var key = tilePoint.z + ',' + tilePoint.y + ',' + tilePoint.x;
  var self = this;
  var tileUrl = self.getTileUrl(tilePoint);
  console.log(tileUrl);
  console.log(typeof tileUrl);
  if (this.options.storage) {
    this.log("Load Tile with storage");
    this.options.storage.get(key, tileUrl).then(function (value) {
      self.log("Tile URL to load: " + value.url);
      self._setUpTile(tile, key, value.url, true);
    });
  } else {
    this.log("Load Tile without storage");
    self._setUpTile(tile, key, tileUrl, false);
  }
}

});

options.storage is a storage which has the method get(key, remoteUrl) and returns either the cached tile from local filestorage (this implementation actual works fine, so here is not the problem) or the remote url but downloads the tile in the background, so that it will be available from local file storage on the next call.

Unfortunately I can see on my device when I use Charles (Web Debugging Proxy) that although the local map tiles are loaded (I can see it from the logs) that there are still a couple of requests to the map tiles provider.

Does anyone have an idea what I am doing wrong and what else I have to overwrite in my StorageTileLayer to prevent the calls to the remote? The real problem is, that the map should work in offline mode as well, but it is not.

Thanks for your help.

Libraries in the environment:

• Leaflet (0.7.3)
• angularJS (1.2.16)
• Cordova (3.2)

Answer 1

I basically fixed it with this code (angular js):

(function (window, L) {
  var isDebug = false;
  var StorageTileLayer = L.TileLayer.extend({

    log: function (text) {
      if (!isDebug)
        return;
      if (this.options.log)
        this.options.log(text);
      else
        console.log("[StorageTileLayer]: " + text);
    },
    _setUpTile: function (tile, key, value, cache) {
      try {
        tile._layer = this;
        tile.onload = this._tileOnLoad;
        tile.onerror = this._tileOnError;

        this._adjustTilePoint(tile);
        tile.src = value;
        this.fire('tileloadstart', {
          tile: tile,
          url: tile.src
        });
      }
      catch (e) {
        this.log("ERROR in setUpTile: " + e.message);
      }
    },

    _loadTile: function (tile, tilePoint) {
      this._adjustTilePoint(tilePoint);
      var key = tilePoint.z + ',' + tilePoint.y + ',' + tilePoint.x;
      var self = this;
      var tileUrl = self.getTileUrl(tilePoint);
      if (isNaN(tilePoint.x) || isNaN(tilePoint.y)) {
        this.log("TilePoint x or y is nan: " + tilePoint.x + "-" + tilePoint.y);
        return;
      }
      if (this.options.storage) {
        this.options.storage.get(key, tileUrl).then(function (value) {
          self.log("Tile URL to load: " + value.url);
          self._setUpTile(tile, key, value.url, true);
        });
      } else {
        this.log("Load Tile without storage");
        self._setUpTile(tile, key, tileUrl, false);
      }
    }
  });

  window.StorageTileLayer = StorageTileLayer;
})(window, L);

Adding the tile layer to the leaflet map is the important part! you have to prevent the load balancer from getting different urls for each tile. I did it by setting the url of the tole layer to a fixed value:

var url = 'https://a.tiles.mapbox.com/v3/<<YOUR ACCESS CODE>>/{z}/{x}/{y}.png';
    var layer = new StorageTileLayer(url, {
      storage: TileStorage
    });

Of course you still have to implement the TileStorage in my case it has a single method get(key, url) and returns a $q-defer which is resolved with either the local available file. If the file is not available in the local storage it will be downloaded and then the promise is resolved.

Unfortunately this TileStorage is not public available because its an in-house development of my company so I can't share it.

Nevertheless I hope this helps you.