Skip to content

Do some first experiments with TileStache

26. October 2012

I have setted up TileStache but in the first moment I had no idea how I should use it now.

I found this tutorial on using it with Leaflet and it really helped me a lot.
(A simple example for using Leaflet can be found here.)

Lets have a quick look at some examples:

Starting TileStache with:


uses the standard configuration file in the main folder:


We could also call this with:

./scripts/ ./tilestache.cfg

I added to the tilestache.cfg these lines:

 "provider": {"name": "mapnik", "mapfile": "/home/klammer/Software/Quickly/generalcarto/data/media/XML-files/tilemill-style.xml"},
 "projection": "spherical mercator"

(Remember to add a comma before “simpleTest”, to split the additional code from the original!!!)
By this I am able to call map tiles that will be rendered on demand when I’m requesting them with an individual mapnik stylefile. For example by this request:

or with the pre defined preview.html
Additionally, it is also possible to avoid long processing time by caching already rendered tiles. Therefore it is necessary to change the “cache” entry to this:

“name”: “Disk”,
“path”: “/home/klammer/tiles_cache”

According to the tutorial that I used, I also implemented the TileStache on-demand tile serving to a small Leaflet example:

<!DOCTYPE html>
    <title>Quick Start Guide for TileStache</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/" /><![endif]-->
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src=""></script>

        var tilesUrl = 'http://localhost:8080/simpleTest/{z}/{x}/{y}.png',
        tilesLayer = new L.TileLayer(tilesUrl);

        map = new L.Map('map');
        map.setView(new L.LatLng(50.62, 12.27), 10);


For me the examplary html-file is callable with this link:


This Leaflet example shows how we can request the on-demand rendered tiles from TileStache. You can also request static, pre rendered tiles from…

…a local directory, by changing the ‘var tilesURL’ to:

var tilesUrl = '/home/klammer/GeneralCarto/tiles/{z}/{x}/{y}.png'

…a Apache Tomcat server, by changing the ‘var tilesURL’ to:

var tilesUrl = 'http://localhost:8080/tiles/{z}/{x}/{y}.png

–> adding tiles to a local Apache Tomcat server is really easy!

cd /home/of/tomcat/webapps

(for me: /usr/local/tomcat/webapps)

mkdir tiles
copy your tiles to /home/of/tomcat/webapps/tiles

The appropriate tile-structure is defined in the ‘var tilesURL’ –> {z}/{x}/{y}.png
Best is to make it fit to the OGC-WMTS standard, as it is here!!!

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: