android - LeafletJS - Cached tiles with local filesystem -

android - LeafletJS - Cached tiles with local filesystem -

i'm implementing cordova application (3.2) want utilize leafletjs , map tile provider local filesystem cache of tiles.

my approach in overview following: extend leaflet tilelayer overwrite _loadtile method retrieve tile either local filesystem or 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) { seek { 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 " + tile.src); } grab (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 storage"); this.options.storage.get(key, tileurl).then(function (value) { self.log("tile url 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 storage has method get(key, remoteurl) , returns either cached tile local filestorage (this implementation actual works fine, here not problem) or remote url downloads tile in background, available local file storage on next call.

unfortunately can see on device when utilize charles (web debugging proxy) although local map tiles loaded (i can see logs) there still couple of requests map tiles provider.

does have thought doing wrong , else have overwrite in storagetilelayer prevent calls remote? real problem is, map should work in offline mode well, not.

thanks help.

libraries in environment: leaflet (0.7.3) angularjs (1.2.16) cordova (3.2)

i fixed 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) { seek { 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 }); } grab (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 nan: " + tilepoint.x + "-" + tilepoint.y); return; } if (this.options.storage) { this.options.storage.get(key, tileurl).then(function (value) { self.log("tile url 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 tile layer leaflet map of import part! have prevent load balancer getting different urls each tile. did setting url of tole layer 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 of study still have implement tilestorage in case has single method get(key, url) , returns $q-defer resolved either local available file. if file not available in local storage downloaded , promise resolved.

unfortunately tilestorage not public available because in-house development of company can't share it.

nevertheless hope helps you.

android html5 cordova leaflet html5-filesystem