Friday 13 July 2012

Using custom projections with TileCache, Mapnik and Leaflet

After five blog posts (1, 2, 3, 4, 5) we finally have a terrain map of Jotunheimen, a mountainous area in Norway with beautiful lakes and glaciers. It’s time to publish the map on the web. In this blog post I’ll show how you can use TileCache and Mapnik to render map tiles, and how to load these tiles into Leaflet using the UTM coordinate system.

To make a slippy map - a zoomable and draggable map - we need to serve map tiles instead of the large map image we created in the last blog post. The original Digital Elevation Model (DEM) is 3134 x 3134 pixels, and with a bit of upscaling we can using this tiling scheme:

Zoom
Map size
Tiles
Resolution
0
256 x 256 px
1 x 1 = 1
234.375
1
512 x 512 px
2 x 2 = 4
117.1875
2
1024 x 1024 px
4 x 4 = 16
58.59375
3
2048 x 2048 px
8 x 8 = 64
29.296875
4
4096 x 4096 px
16 x 16 = 256
14.6484375

Each map tile is 256 x 256 pixels. We need one map tile to cover the first zoom level and 256 tiles to cover the last zoom level. The original map area is 60.000 x 60.000 meters, and the resolution shows meters per pixel (60.000 / 256 = 234.375). We have enough information to configure TileCache (tilecache.cfg): 

[jotunheimen]
type=Mapnik
src=EPSG:32632
bbox=432000,6790000,492000,6850000
maxResolution=234.375                                       
mapfile=jotunheimen_terrain_ar50.xml

The bounding box for this map can be found here. jotunheimen_terrain_ar50.xml is the Mapnik configuration file we created in the last blog post. I’m also setting the cache type to GoogleDisk to store the tiles in Z/X/Y.png folders:

[cache]
type=GoogleDisk
base=/data/tiles

With tilecache_seed.py we can prerender the tiles automatically (zoom level 0 to 5):

tilecache_seed.py jotunheimen 0 5

We now have the map tiles on disk, and we can use Leaflet to create an interactive map:

var map = new L.Map('map', {
  crs:  L.CRS.proj4js('EPSG:32632', '+proj=utm +zone=32 +ellps=WGS84 +datum=WGS84 +units=m +no_defs', new L.Transformation(1, -432000, -1, 6850000)),
  scale: function(zoom) {
    return 1 / (234.375 / Math.pow(2, zoom));
  },
  layers: [
    new L.TileLayer('tiles/jotunheimen/{z}/{x}/{y}.png', {
      minZoom: 0,
      maxZoom: 4,
      continuousWorld: true
    }), 
    new L.Marker(new L.LatLng(61.636, 8.3135), {
      title: 'Galdhøpiggen 2469 m'
    })
  ],
  
  center: new L.LatLng(61.593, 8.397),
  zoom: 3,
  continuousWorld: true
});

The map is in UTM 32N projection (EPSG:32632). Using custom projections in Leaflet is not as easy as with OpenLayers, but Kartena is providing a great write-up of how it can be achieved. My map is combining Leaflet with Proj4js using the Proj4Leaflet bridge provided by Kartena. I've also added a marker for Galdhøpiggen, the highest mountain in Norway (2469 m).

This is what the map looks like:


Fullscreen map

3 comments:

qman said...

Hi,

my tiles generated by tilecache seek.py are in the pattern of:

{z}/{x1}/{x2}/{x3}/{y1}/{y2}/{y3}, like:

http://static.geonet.org.nz/nasagm/02/000/000/002/000/000/001.jpeg

haven't been able to figure out how to config them with leaflet. have you come across this pattern?

Bjørn Sandvik said...

Hi qman,

You need to set

[cache]
type=GoogleDisk

in tilecache.cfg

Bjørn

Unknown said...

Hello,
I try to create some kind of web map using Leaflet. I have GeoJson file which I'd like to display in some custom projection like EPSG:3408 or similar. I tried to use Proj4Leaflet + Proj4js, but I don't understand how to figure the transformation matrix out.
So I will really appreciate if you could help me with this part:
"new L.Transformation(1, -432000, -1, 6850000)"

Thank you,

Andrey.