OpenLayers Local Tiles Example

From OpenStreetMap Wiki
Jump to navigation Jump to search

Browse local OpenStreetMap tiles with a slippymap

With this example you can browse your tiles stored localy without any webserver. I use this to check my tiles I downloaded to use in Osmtracker. But you can also browse Tiles rendered by any other techniques.

Result

You see two Layers. Brightly: the Tiles from the OSM Server and darkly your local tiles. In this way you can check where you already have tiles on your local directory and witch tiles are missing.

OpenLayers Local Tiles Example.png

Setup

Prepare local directory

Create a new directory, for example: C:\OSM. In this new Directory create 2 subdirectories: img and tiles. (Note that the tiles directory should not be symlinked, otherwise the tiles won't be displayed in most browsers.) Copy or download all your tiles to the tiles directory. You can do this manually or use one of the following tools:

  1. OSMtiledownloader
  2. JTileDownloader

Download Files

Download all this files. Then copy all img files to the subdirectory img.

wget http://www.openstreetmap.org/openlayers/img/blank.gif
wget http://www.openstreetmap.org/openlayers/img/cloud-popup-relative.png
wget http://www.openstreetmap.org/openlayers/img/drag-rectangle-off.png
wget http://www.openstreetmap.org/openlayers/img/drag-rectangle-on.png
wget http://www.openstreetmap.org/openlayers/img/east-mini.png
wget http://www.openstreetmap.org/openlayers/img/layer-switcher-maximize.png
wget http://www.openstreetmap.org/openlayers/img/layer-switcher-minimize.png
wget http://www.openstreetmap.org/openlayers/img/marker.png
wget http://www.openstreetmap.org/openlayers/img/marker-blue.png
wget http://www.openstreetmap.org/openlayers/img/marker-gold.png
wget http://www.openstreetmap.org/openlayers/img/marker-green.png
wget http://www.openstreetmap.org/openlayers/img/measuring-stick-off.png
wget http://www.openstreetmap.org/openlayers/img/measuring-stick-on.png
wget http://www.openstreetmap.org/openlayers/img/north-mini.png
wget http://www.openstreetmap.org/openlayers/img/panning-hand-off.png
wget http://www.openstreetmap.org/openlayers/img/panning-hand-on.png
wget http://www.openstreetmap.org/openlayers/img/slider.png
wget http://www.openstreetmap.org/openlayers/img/south-mini.png
wget http://www.openstreetmap.org/openlayers/img/west-mini.png
wget http://www.openstreetmap.org/openlayers/img/zoombar.png
wget http://www.openstreetmap.org/openlayers/img/zoom-minus-mini.png
wget http://www.openstreetmap.org/openlayers/img/zoom-plus-mini.png
wget http://www.openstreetmap.org/openlayers/img/zoom-world-mini.png

Download all this files and copy all files to the directory c:\OSM.

wget http://openlayers.org/api/theme/default/style.css
wget http://www.openlayers.org/api/OpenLayers.js
wget http://www.openstreetmap.org/openlayers/OpenStreetMap.js

Configure

Create a new html file called local_tiles.htm in the directory c:\osm and paste this coding in this new file.

<html>
<head>
    <title>OSM Local Tiles</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- bring in the OpenLayers javascript library -->
    <script src="OpenLayers.js"></script>
    <!-- bring in the OpenStreetMap OpenLayers layers. -->
    <script src="OpenStreetMap.js"></script>
 
    <script type="text/javascript">
// Start position for the map (hardcoded here for simplicity)
        var lat=47.7;
        var lon=7.5;
        var zoom=10;
 
        var map; //complex object of type OpenLayers.Map
 
        //Initialise the 'map' object
        function init() {
 
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.Permalink(),
                    new OpenLayers.Control.ScaleLine({geodesic: true}),
                    new OpenLayers.Control.Permalink('permalink'),
                    new OpenLayers.Control.MousePosition(),                    
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0339,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );
            
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            layerMapnik.setOpacity(0.4);
            map.addLayer(layerMapnik); 
            
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
            layerCycleMap.setOpacity(0.4);
            map.addLayer(layerCycleMap);

            // This is the layer that uses the locally stored tiles
            var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 19, alpha: true, isBaseLayer: false});
            map.addLayer(newLayer);
			// This is the end of the layer
 
 	            var switcherControl = new OpenLayers.Control.LayerSwitcher();
	            map.addControl(switcherControl);
	            switcherControl.maximizeControl();
 
            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, zoom);
            }
        }
 
    </script>
</head>
 
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
 
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>
 
</body>
 
</html>

Go to the coding:

// Start position for the map (hardcoded here for simplicity)
        var lat=47.7;
        var lon=7.5;
        var zoom=10;

and change the lat,lon and zoom level you would like to have.

Test

Open the local_tiles.htm in your browser and check the result. You can change the base layer to check the different tiles. If you miss some tiles just right click in your browser and go to the properties option. There you see which tile is missing. In this example the tile 527/350 from zoom level 10 is missing. OpenLayers Local Tiles test.png

Information

All this information is based on the input from Bikeman2000 on http://forum.openstreetmap.org/viewtopic.php?id=7572. Thank you.

Related