Offline Slippy Map in Browser

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 (, in particular the Creating tiles using Mapnik and 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,


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

Read to find alternatives by the company MapBox.

Or have a look at


Or go to and do a serach there for the keyword “offline”.

Success? or where do you get stuck again?

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

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

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://

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, 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", 
            {numZoomLevels: 11}

        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?



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.

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:

It might be due to the browser’s security restrictions. ie they might stop Javascript from making cross-domain requests. See for example

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