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!

  • 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
    Commented Jan 26, 2012 at 21:38
  • 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/… Commented Jan 26, 2012 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
    Commented Jan 27, 2012 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. Commented Jan 28, 2012 at 4:47

3 Answers 3


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
    Commented Feb 15, 2012 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
    Commented Jan 27, 2012 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
    Commented Jan 27, 2012 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. Commented Jan 27, 2012 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!

  • 1
    How would the javascript client access to the XYZ directory struture without being published by a web server? Using the HTML5 FileSystem API?.. Commented Jan 28, 2012 at 11:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.