Reproject PostGIS through Mapnik, Tilestache and Leaflet into other projections

postgis_mapnik_tilestache_leaflet_WGS84_to_UTM.md

Reproject PostGIS through Mapnik, Tilestache and Leaflet into other projections

This is an example on how to configure Tilestache, Mapnik and Leaflet to handle reprojections.

###TileStache

{
  "cache": {...},
  
  "layers":
  {
    "mylayer":
    {
      "provider": {"name": "mapnik",  "mapfile": "./mapnik.xml"},
      "projection": "TileStache.Goodies.Proj4Projection:Proj4Projection('+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs', [5545984, 2772992, 1386496, 693248, 346624, 173312, 86656, 43328, 21664, 10832, 5416, 2708, 1354, 677, 338.5, 169.25, 84.625, 42.3125, 21.15625, 10.578125, 5.2890625, 1 ], transformation=Transformation(1, 0, 0, 0, -1, 0))"
    }
  }
}

Mapnik

Notice how Map.srs and Layer.srs both needs their own srs defined.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE Map[]>

<Map
  srs="+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs"
  background-color="#d0dabf" maximum-extent="-20037508.34,-20037508.34,20037508.34,20037508.34">

  <Style name="sea" filter-mode="first" >
    <Rule>
      <PolygonSymbolizer fill="#afd0dd" fill-opacity="1" />
    </Rule>
  </Style>
  
  <Layer name="sea" srs="+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs">
      <StyleName>sea</StyleName>
      <Datasource>
         <Parameter name="type"><![CDATA[postgis]]></Parameter>
         <Parameter name="table"><![CDATA[(SELECT * FROM n50_arealdekkeflate WHERE objtype = 'Havflate') AS data]]></Parameter>
         <Parameter name="key_field"><![CDATA[]]></Parameter>
         <Parameter name="geometry_field"><![CDATA[wkb_geometry]]></Parameter>
         <Parameter name="extent_cache"><![CDATA[auto]]></Parameter>
         <Parameter name="extent"><![CDATA[4.59210739532305,57.9673868281622,31.1274013668407,71.1849283020175]]></Parameter>
         <Parameter name="dbname"><![CDATA[kartverk]]></Parameter>
         <Parameter name="user"><![CDATA[kartverk]]></Parameter>
         <Parameter name="id"><![CDATA[sea]]></Parameter>
         <Parameter name="project"><![CDATA[n50_selector]]></Parameter>
         <Parameter name="srs"><![CDATA[+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs]]></Parameter>
      </Datasource>
    </Layer>
  </Map>

Leaflet

This depends on two additional plugins to Leaflet. Namely

• Proj4JS (https://github.com/moonlite/Proj4js)
• Proj4Leaflet (https://github.com/kartena/Proj4Leaflet)

Just include them in your head below the Leaflet code.

Notice how resulutions and are the same as defined in TileStache configuration.

Note: Coffescript example below.

  resolutions = [
    5545984, 2772992, 1386496, 693248, 346624,
    173312, 86656, 43328, 21664, 10832, 5416,
    2708, 1354, 677, 338.5, 169.25, 84.625,
    42.3125, 21.15625, 10.578125, 5.2890625, 1];

  map = new L.Map('map', {
    crs:  new L.Proj.CRS('EPSG:32633',
      '+proj=utm +zone=33 +ellps=WGS84 +datum=WGS84 +units=m +no_defs',
      {
        resolutions: resolutions
      }
    ),
    scale: (zoom) ->
        return 1 / resolutions[zoom]
    ,
    layers: [
      new L.TileLayer(tilesUrl, {
        minZoom: 1,
        maxZoom: resolutions.length-1
      })
    ],
    center: [59.918893,10.739715], # Oslo
    zoom: 18
  });

Hope this helps someone,

Skogsmaskin