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:

./scripts/tilestache-server.py

uses the standard configuration file in the main folder:

tilestache.cfg

We could also call this with:

./scripts/tilestache-server.py ./tilestache.cfg

I added to the tilestache.cfg these lines:

 "simpleTest":
 {
 "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:

http://localhost:8080/simpleTest/0/0/0.png
or with the pre defined preview.html
http://localhost:8080/simpleTest/preview.html#10/50.4300/12.3518
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:

“cache”:
{
“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>
<html>
<head>
    <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="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
    <!--[if lte IE 8]><link rel="stylesheet" href="../dist/leaflet.ie.css" /><![endif]-->
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
    <script>

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

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

    </script>
</body>
</html>

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

file:///home/klammer/Software/TileStache/TileStacheTest.html

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!!!

Advertisements
Leave a Comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: