[GIS] Viewing map tiles from Maperitive in leaflet or openlayers

leafletmaperitiveopenlayers-2

I generated tiles in Maperative. Created following html file:

<html>
    <head>
    <meta charset="utf-8" />
         <link rel="stylesheet" href="leaflet/leaflet.css" />

    </head>
    <body>
         <div style="width: 600px; height: 400px" id="map"></div>
          <script src="leaflet/leaflet.js"></script>
          <script type="text/javascript" src="leaflet/leaflet-src.js"></script>
          <script>
        map = new L.Map('map');

    // create the tile layer with correct attribution
    var osmUrl='Maperitive\Tiles\{z}\{x}\{y}.png';
    var osmAttrib='Map data © OpenStreetMap contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 13, maxZoom: 16, attribution: osmAttrib});      

    // start the map in South-East England
    map.setView(new L.LatLng(59.55, 30.09),13);
    map.addLayer(osm);
        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
        }

        map.on('click', onMapClick);

    </script>
    </body>
</html>

, but do not see a map – only a form for map with +- buttons. What could be a problem?

I configured both the openlayers and leaflet, but it seems that this programs seek wrong folder/folder/file.png names on coordinates I provide. But I have no idea how to set this names in Maperative, I see many people generate tiles using mapnik, but as I understand, to do this I need to set up a database and something else. Maybe there is an easier method?

Best Answer

You better specify the full path to the tiles. In Openlayers I added these lines:

    var MyMapnikLayer = new OpenLayers.Layer.OSM("myMapnik", "file:///D:/Tiles/myMapnik/${z}/${x}/${y}.png", {numZoomLevels: 16, alpha: true, isBaseLayer: true, visibility: false});
    map.addLayer(MyMapnikLayer);

This is for Windows; Linux and Mac might have different ways to give absolute paths.

You can also take a look at the error console of your browser to see if something else is wrong.

Related Question