Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Reproject PostGIS through Mapnik, Tilestache and Leaflet into other projections

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.