2

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

enter image description here

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);
  • Thank you very much. You saved me... Now, may is working seamlessly!!! – Ra Ka Sep 11 '15 at 3:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.