Local Map Web API Without internet connection

Question

I have a single-page HTML5 app that consumes a bunch of different map providers. One of my requirements is that this work with no internet connection and some sort of map provider running on the box itself.

What , if any, providers -- free or commercial can give me something along the lines of an offline Google Maps or Google Earth that I can use in a web application?

Answer 1

I addition to the answers provided in the Mapperz' link, another option you might consider is to set up your own instance of GeoServer with a suitable area of data from OSM loaded into a PostGIS database. You can obviously add in other data as well but OSM is a good start. All of this is free. I have this set-up as an off-line test-rig for web mapping development.

Answer 2

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();
   }

Answer 3

I just started on open source and it from what you just said it would be nice if you wrote a small blog or tutorial with steps