This is the second part of the story about my experiments with the wonderful TileStache that I started with TileStache and Polymaps SVG experiments.
First, I would like to thank Michal for the quick patch inclusion, the Polymaps patch is still waiting for the pull and the Django admin patch is awating for somebody to take care of that 18-months-old bug.
My experiments have continued with Django integration, I just wanted to see how easy it was (and it was really easy indeed). There aren’t any clear advantages using a Django app instead of the standalone TileStache server, but writing the wrapper was a nice exercise to learn something more about TileStache and Polymaps, and having all the pieces into one place is always tempting for me (not to mention that you can dribble the CORS completely).
The wapper consists in a single router rule in urlconf:
url(r'^tiles/(?P<layer_name>[^/]+)/(?P<z>[^/]+)/(?P<x>[^/]+)/(?P<y>[^/]+)\.(?P<extension>.+)$', 'pm_points.views.tiles', name='tiles_url'),
… a view for the tiles (get_config implements a singleton to avoid parsing TileStache config every time):
# proper imports go here...
def tiles(request, layer_name, z, x, y, extension):
"""
Proxy to tilestache
{X} - coordinate column.
{Y} - coordinate row.
{B} - bounding box.
{Z} - zoom level.
{S} - host.
"""
config = get_config()
path_info = "%s/%s/%s/%s.%s" % (layer_name, z, x, y, extension)
coord, extension = TileStache.splitPathInfo(path_info)[1:]
mimetype, content = TileStache.getTile(config.layers[layer_name], coord, extension)
return HttpResponse(content, mimetype=mimetype)
… and a simple view for the map:
def home(request):
"""
Pass layers by
"""
config = get_config()
layer_urls = []
for l in config.layers:
if isinstance(config.layers[l].provider, TileStache.Providers.Vector.Provider):
layer_urls.append(reverse('tiles_url', args=[l, '{Z}', '{X}', '{Y}', 'geojson']).replace('%7B', '{').replace('%7D', '}'))
return render_to_response('home.html', { 'layer_urls' : layer_urls}, context_instance=RequestContext(request))
… and a template for Polymaps (I paste the js part only):
var po = org.polymaps,
map,
layers = [],
stylist;
jQuery(function(){
map = po.map()
.container(document.getElementById("map").appendChild(po.svg("svg")))
.center({lat: 40, lon: 0})
.zoomRange([1, 16])
.zoom(2)
.add(po.interact())
.add(po.hash())
;
map.add(po.image()
.url("http://s3.amazonaws.com/com.modestmaps.bluemarble/{Z}-r{Y}-c{X}.jpg"));
stylist = po.stylist()
.attr('class', function(d){
return d.geometry.type + '_' + d.properties.id;
})
.title(function(d){return d.properties.name;})
;
{% for lay_url in layer_urls %}
var layer = po.geoJson()
.url("{{ lay_url|safe }}")
.zoom(function(z){
return z;
})
.id('pmcollection')
.on("load", stylist)
.on('show', stylist)
;
map.add(layer);
layers.push(layer);
{% endfor %}
map.add(po.compass()
.pan("none"));
map.container().setAttribute("class", "mymap");
});
Quick and dirty, it also dynamically adds layers to the Polymap.
This story continues with: TileStache Vector simplify provider
