Offline Slippy Map in Browser

General talk
1

Hello everyone, I am new to OpenStreetMap and these forums. I did a search of the forums but couldn’t find the answer to my question, so please forgive me if this actually has already been discussed.

I am trying to create an offline version of OpenStreetMap that still runs in a browser. I have read the page on creating my own tile server (http://wiki.openstreetmap.org/wiki/Creating_your_own_tiles#Displaying_your_Tiles), in particular the Creating tiles using Mapnik and generate_tiles.py section, and I was wondering if it would be possible to have the OpenLayers instance look to a local directory on my machine rather than a webserver. The requirement for my project is that everything runs on my machine without contacting external servers.

Thank you,

-Rob

2

There has been a solution called “Maps on a Stick”, but it is no longer available or so.

Read http://wiki.openstreetmap.org/wiki/Maps_on_a_Stick to find alternatives by the company MapBox.

Or have a look at http://wiki.openstreetmap.org/wiki/OpenStreetMap-in-a-Box

or http://switch2osm.org

Or go to https://help.openstreetmap.org and do a serach there for the keyword “offline”.

Success? or where do you get stuck again?

3

Yes, OpenLayers works fine with tiles from a local directory. See the example here, and the section for “Other tile sets”: http://wiki.openstreetmap.org/wiki/OpenLayers_Simple_Example

As it says, add this code to the example:

 var newLayer = new OpenLayers.Layer.OSM("New Layer", "URL_TO_TILES/${z}/${x}/${y}.png", {numZoomLevels: 19});
 map.addLayer(newLayer);

Just change the URL_TO_TILES to the directory where your tiles are. It can be a relative path to the directory, or the full path, ie something like file://

4

I have so far been unable to get my own tiles to display on the map. I followed the instructions for creating my own tiles using Mapnik and generate_tiles.py, and have created the following simple map:


function init() {
        var options = {
          controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoomBar()
          ]
        };
		

        map = new OpenLayers.Map("Map", options);
        
        var newLayer = new OpenLayers.Layer.OSM(
            "New Layer", 
            "file:///C:/Desktop/OpenStreetMap/osm_mapnik/osm_tiles_ma/${z}/${x}/${y}.png",
            {numZoomLevels: 11}
        );
		
        map.addLayer(newLayer);

        map.setCenter(new OpenLayers.LonLat(0,0), 0);
        
}

All I have done is to replace the URL_TO_TILES with the actual directory in which the tiles reside. When I open the .html file containing this code, I get a blank map, though the Navigation and PanZoomBar tools are present. If it helps, for now I am just working with a set of tiles for the state of Massachusetts, with zoom levels 6 through 17.

Does anybody have any idea why this is not working?

Thanks,

-Rob

5 
map.setCenter(new OpenLayers.LonLat(0,0), 0);

A shot in the dark, but could this be the problem? You need to set the centre somewhere in your map area.

6

I’m doing the same, and had the same showstopper. I have web server running locally, and when requested the map as “localhost/osm/slippymap.html”, saw just empty canvas with controls. But when opening the same file as “file:///osm/slippymap.html”, the map shows as it should. Have yet to figure out what is the reason for that. Good if this helps, sorry if not :slight_smile:

7

It might be due to the browser’s security restrictions. ie they might stop Javascript from making cross-domain requests. See for example http://en.wikipedia.org/wiki/Same_origin_policy

You could try adjusting the browser security settings, or try another browser.