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

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?

-
All the solutions i know of require a web server. But i'm really interested to see if anyone knows if you can point to a directory. –  CaptDragon Jan 26 '12 at 21:38
thanks for your attention! –  Simon Jan 26 '12 at 22:21
That PNG tiles are stored in a MBTile file that TileStream knows how to read and publish. So, unless you can successfully install and deploy a TileStream server within your device that setup seems quite impossible to achieve. A possible approach, IMO, could be publishing a directory in a local web server (i-jetty, paw-server, others?) to the android device that has the tiles lay down in a directory tree following the TMS specification. I've asked a similar question gis.stackexchange.com/questions/18830/… –  Pedro Mendes Jan 26 '12 at 23:19
thanks for your reply! I just realize it seems impossible to make it without local web server on device... at least for iOS... –  Simon Jan 27 '12 at 18:15
@PedroMendes I would like you to take a look at my answer. Do you think we can make use of this tile format to drive an html5 app on Android. –  Michael Markieta Jan 28 '12 at 4:47

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

-
Very neat indeed (+1) –  CaptDragon Feb 15 '12 at 21:52

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.

-
thanks. will read your paper.. interested to see the possibility on iOS devices.. –  Simon Jan 27 '12 at 18:23
and also, any ideas on the possibility of loading tiles through local web server on device? see, install a web server in iPad or Android device, put some tiles into the device file system, and whether it's possible to get these tiles in OpenLayers web app? –  Simon Jan 27 '12 at 18:28
i see no reason why it shouldn't work with local web server and Openlayers as long as you don't access those tiles directly from file system. I have never tired that approach, but it should work. –  Mario Miler Jan 27 '12 at 19:20

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!

-
How would the javascript client access to the XYZ directory struture without being published by a web server? Using the HTML5 FileSystem API?.. –  Pedro Mendes Jan 28 '12 at 11:29