How to access map tiles from external storage in PhoneGap?

Question

I am trying to build an Android app using Phonegap and Leaflet. I have added a local tile layer and added the tile folder within the www folder. It's working fine.

var tmsLayer = L.tileLayer('tile/{z}/{x}/{y}.png', {
    maxZoom: 16, 
    minZoom: 13, 
    tms: true
}).addTo(map);

But when I added the tiles for higher zoom level, the folder size is becoming moe than 200mb. Therefore, I want to put the tile folder outside the www folder, so that my apk file does not become too large. But I am not able to acces the tiles from the Tile folder, copied directly to the external storage. I am using phonegap plugin for file and file transfer. This what I have done so far:

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        var tmsLayer = L.tileLayer(fileSystem.root.fullPath + 'tile/{z}/{x}/{y}.png', {
             maxZoom: 20, 
             minZoom: 13, 
             tms: true
         }).addTo(map);
    });

Answer 1

you can use cordova.file.externalRootDirectory instead of fileSystem.root.fullPath like this :

L.tileLayer(cordova.file.externalRootDirectory+'tile/{z}/{x}/{y}.png', {
...
}).addTo($scope.map);