Local Map Web API Without internet connection

After reading around, I was able to get a running map server up in about 2 hours work overall. I am very happy with the result!

First, I loaded OpenLayers directly into my local HTML app from http://www.openlayers.org/

Cloning from their public github, one only needs to copy the img and theme folders, as well as openlayers.js.

I created a MBTiles file using TileMill @ https://www.mapbox.com/tilemill/

This was awesome and quick. I used a default project and removed some of the styles to get me a more regular map. Using a pre-existing mbtiles file( where do I find some good prefabs?) would speed up this step.

I exported my TileMill project as a MbTiles project.

Since my app already has an optional NodeJS server, I used the following code to serve up my mbtiles:

new MBTiles('openlayers/map.mbtiles', function(err, mbtiles) { if (err) throw err; console.log(err); app.get('/mbtiles/:z/:x/:y.*', function(req, res) { var extension = req.param(0); switch (extension) { case "png": { console.log("png"); mbtiles.getTile(req.param('z'), req.param('x'), req.param('y'), function(err, tile, headers) { if (err) { res.status(404).send('Tile rendering error: ' + err + '\n'); } else { res.header("Content-Type", "image/png"); res.setHeader('Access-Control-Allow-Origin','*'); res.send(tile); } }); break; } case "grid.json": { mbtiles.getGrid(req.param('z'), req.param('x'), req.param('y'), function(err, grid, headers) { if (err) { res.status(404).send('Grid rendering error: ' + err + '\n'); } else { res.header("Content-Type", "text/json"); res.setHeader('Access-Control-Allow-Origin','*'); res.send(grid); } }); break; } } }); }); 

Then, in my openlayers map provider:

 map = new OpenLayers.Map('map', options); // create TMS layer using MBTiles sqlite database var mbtilesLayer = new OpenLayers.Layer.TMS("MBTiles Overlay", url, { getURL: mbtilesURL, isBaseLayer: true, type: "png", //opacity: 0.7, layername: "map" }); // See: http://www.maptiler.org/google-maps-coordinates-tile-bounds-projection function mbtilesURL (bounds) { var res = this.map.getResolution(); var x = Math.round ((bounds.left - this.maxExtent.left) / (res * this.tileSize.w)); var y = Math.round ((this.maxExtent.top - bounds.top) / (res * this.tileSize.h)); var z = this.map.getZoom(); var path = z + "/" + x + "/" + y + "." + this.type; var url = this.url; if (url instanceof Array) { url = this.selectUrl(path, url); } return url + path; } map.addLayer(mbtilesLayer); // map2.addLayer(layer); map.zoomToMaxExtent(); }