OpenLayers on mobile device: possible to use local map tiles?

Question

Is that possible for an OpenLayers app (running on mobile device) to load the map tiles that are deployed in the device, if the app is able to access these files (e.g., using PhoneGap)?

from this question: Using local mbtiles in openlayers? with code:

map.addLayer(new OpenLayers.Layer.TMS('overlayWorld',
'http://localhost:8888/2.0.0/overlay_62ee43/{z}/{x}/{y}.png', {
maxResolution: 156543.0339,
type: 'png',
layername: 'overlayWorld',
isBaseLayer: false
}));

it seems work. but it employs local web server. In the case of mobile device, does it still need a web-server?

any advice will be appreciated!

Answer 1

you can use maptiler and upload the file structure in your SDcard. Then add a TMS layer and set the getURL parameter to a function that return an image from SDcard:

var mapBounds = null;
var mapMinZoom = 12;
var mapMaxZoom = 16;


var tmsoverlay = new OpenLayers.Layer.TMS( "TMS Overlay", "",
{

    // url: '', serviceVersion: '.', layername: '.',
    type: 'png', 

getURL: overlay_getTileURL, 
alpha: true, 
isBaseLayer: true


});

function overlay_getTileURL(bounds) {

    var res = this.map.getResolution();
    var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
    var y = Math.round((bounds.bottom - this.tileOrigin.lat) / (res * this.tileSize.h));
    var z = this.map.getZoom();
    if (this.map.baseLayer.name == 'Virtual Earth Roads' || this.map.baseLayer.name == 'Virtual Earth Aerial' || this.map.baseLayer.name == 'Virtual Earth Hybrid') {
       z = z + 1;
    }
    if (mapBounds.intersectsBounds( bounds ) && z >= mapMinZoom && z <= mapMaxZoom ) {
       //console.log( this.url + z + "/" + x + "/" + y + "." + this.type);
       return 'file:///sdcard/map_tiles/'+this.url + z + "/" + x + "/" + y + "." + this.type;
    } else {
       return "empty_image.png";
    }
}

Answer 2

We did a prototype application based on CouchDB and Openlayers on Android device which could get tiles directly from local CouchDB into browser without web-server. This could be done because CouchDB has a REST interface. We also wrote a short paper about it, maybe it will help you.

Answer 3

You don't need a local webserver! You can take your MBTiles file and process it into a series of directories in the XYZ format you have listed in the question!

Use mbutil to extract the MBTiles to that XYZ directory structure.

After installing mbutil, cd to the directory where your MBTiles

mb-util myTiles.mbtiles myTilesDirectory

This will extract your data for use in your questions code sample!