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