Offline Map with mapnik: Tiles are vertically unaligned and randomly displayed (Leaflet + Tilecache + Mapnik + Postgis)

Question

I'm new to maps and currently I am developing my first offline Map with OSM data. I have map data added to postgres via osm2pgsql and installed mapnik 2.2. For caching I have used tilecache with standalone HTTP server under WSGI. For viewing the map, I have used leaflet. So, now, when I open browser everything works file, the map tiles are produced properly and displayed in the browser but the problem is that it is displayed randomly (I have attached a picture).

Leaflet code: html, body {height: 100%;overflow: hidden;} #map {height: 100%;}

var map = new L.Map('map', {
    center: [0, 0],
    zoom: 0
});

L.tileLayer('http://localhost:8080/1.0.0/osm/{z}/{x}/{y}.png').addTo(map);

//map.setView([0, 0], 0, {reset: true});

//the following avoid not displaying map when start untill zoom in or out
map.setView([52.1, 4], 3, {animate: false});


</script>

tilecache.cfg file: [osm] type=Mapnik levels=10 mapfile= C:\OpenStreetMapTools\stylesheets\osm.xml spherical_mercator=true maxResolution=234.375 bbox=85.2270,27.5932,85.4233,27.7717 extent_type=loose

Answer 1

Tile layers have a north of south origin for the Y axis. By default leaflet expects the y origin to start in the north, but your tiles start in the south. To make leaflet work with this initalize your tile layer with the option tms:true,

L.tileLayer('http://localhost:8080/1.0.0/osm/{z}/{x}/{y}.png'{'tms':true}).addTo(map);