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

The final goal of this experiments was the integration with Django.

Polymaps

Polymaps is a Javascript library aimed to display svg maps in a web page, recently I’ve watched to an interesting talk about a Django-powered app built on top of Polymaps:

The main reason to give Polymaps a try is the interesting support to tiled vector layers, as far as I know a unique feature.

I’ve found the documentation of Polymaps a bit obscure and still incomplete (I just hope it isn’t another facade Open Source product where the lack of documentation and community support limits the use to commercial projects).

A quick look in the code shows no comments and rather obscure variable names, debbugging this library would certainly be a nightmare if you’re not the author, if you compare the source code with OpenLayers’s code you get the idea.

BTW I managed to make it work in a few hours (with all the server stuff).

TileStache

TileStache is a python library aimed to build, cache and manage map tiles. It’s similar to TileCache in scope and uses the well known Mapnik renderer while the data provider is implemented with shapely and OGR and can read the most widely used formats (postgis, shapefile, geojson).

TileStache is the ideal companion to Polymaps because it can handle and cache vector tiles (geojson) through the Vector class (don’t even try to use the PostgreSQL class you can find in Goodies, it’s kind of unofficially deprecated and it will let you waste your time).

I had to fork the project on github and made a pull request to fix the missing “port” parameter to the DB connection since I’m using a not-standard port.

SVG CSS

I admit I am a true beginner with SVG and while I was trying to experiment with the stylist features of Polymaps  I discovered some counter-intuitive (at least for me, coming from XHTML CSS) behaviours:

You can define styles in three ways:

1. CSS rules
2. “style” attribute of the SVG element
3. individual attributes (“stroke”, “fill” etc. etc.) of the SVG element

Strange enough, the priority is top-down, while I would have expected that point 3 had a higher priority.

Another thing worths noting is that what distinguish a polygon from a linestring in the Polymaps generated “path” SVG element is just that the “d” element (which contains the geometry) ends with a “Z”.

This is a linestring:

<path d="M101.99999715555555,189.9999971369224
L75.00000142222234,219.00000190473258
L75.00000142222234,242.49999834108655
L94.49999928888906,242.99999806558844
L102.49999928888906,255.4999976705726
L101.99970702222231,256"/>;

This is a polygon:

<path d="M95.07080533333351,256.00000052462633
L0,196.67516186124612
L0,192.0000022835775
L0,128.0000001888236L0,70.92093168072711
L175.92470186666674,0.000006325172648757871
L192,0.000006325172648757871
L256,0.000006325172648757871
L256,64.00000444302805
L256,128.0000001888236
L256,160.99230434784874
L113.66593991111131,256.00000052462633Z"/>;

Styling the plygon fill without hitting linestring in a GEOMETRYCOLLECTION layer turned out to be quite troublesome.

I ended up with a CSS-3 attribute CSS rule:

.layer path {
fill: cyan;
fill-opacity: .85;
stroke: #012;
stroke-linecap: round;
}
 
.layer circle {
fill: cyan;
fill-opacity: .85;
stroke: #012;
}
 
/* Don't fill in SVG */
.layer path:not([d$="Z"]){
fill: none;
stroke-width: 3px;
}

I wonder if there is a better way…

This story continues with: TileStache Django tiny wrapper.

You can just right-click and save it on your bookmarks, the click on the bookmark while in the OpenCycleMap site and a popup will appear with the extent coordinates printed on screen.

Bookmarklet.

Strangely enough there is no way to download an uncompressed version from the project website, even if they provide a nice custom build form.

The recommended way is to use “jsbuild“, which turned to be a nightmare because it does not run out-of-the-box, at least on my Ubuntu lucid.

A one-liner did the trick, run it from a “build” folder under GeoExt main folder, the correct order of inclusion (which does really matter) is taken from the “single” file GeoExt.js.

for f in $(egrep '"GeoExt/' ../lib/GeoExt.js|sed -e 's/"//g'|sed -e 's/,//g') ; do cat "../lib/$f" ; done > GeoExt-debug.js

The proposed solution involves a custom control subclass and the standard OL machinery, the MSIE oddities are handled internally by OL itself.

1. file size (188KB uncompressed)
2. number of requests

Point 2 is browser dependant but AFAIK most browsers typically can handle no
more than 2 (IE) http requests simultaneously.

I’ve come up with a solution that I’m using in many projects (mainly ajax) and
tests in pmapper give good results.

This is what I’ve done:


cd javascript
for i in $(ls *.js); do mv $i $i.src; done
for i in $(ls *.js.src); do jsjavacompress.sh $i >> pm.js ; done


This produces a single 95KB pm.js file that is loaded at startup.
additionally gzip gives a 27KB file.

So we can go from 20 files 188KB to one file 27KB compressed and gzipped.


cat jsjavacompress.sh
java -jar custom_rhino.jar -c $1 2>&1


You can download custom_rhino.jar from
here

The same could be done in jquery directory.

Some measurements on javascript/ :

uncompressed: 179 KB, 19 files
compressed with jsjavacompress.sh: 85 KB, 1 file (24 KB gzipped)
compressed with compress_js.php (without licences): 91 KB, 1 file (24 KB gzipped)
compressed with jsmin.php : 91 KB, 1 file (24 KB gzipped)
compressed with jspack.php : 69 KB, 1 file (28 KB gzipped)

References:
jsmin: PHP adaptation of JSMin, published by Douglas Crockford as jsmin.c, also based on its Java translation by John Reilly.
jspack: This is the php version of the Dean Edwards JavaScript ‘s Packer

So jspack appears the most efficient so far but only when gzip compression is not enabled, all other soutions are equivalent and are slightly smaller when gzipped.

The only real advantage I see in the java solution is that it is a “semantic” parser since it uses a real javascript engine (RHINO) and hence it does always produce valid js code. The same is not true for the other solutions, if we have a missing “;” or other oddiness in source js code, they will produce invalid code.

This form builder is based on several jQuery plugins, and has the following features:

• validation support
• preview
• in-place editing of labels and descriptions
• support for text fields, text area, select, checkboxes and radio buttons
• internationalisation support (currently it and en languages are supported)

Persistance of the generated form is left to the programmer, in my final application, the XHTML code will be sent to the server through an ajax call.

An interesting review of similar softwares is avaliable at Ajaxian

You can give it a shot at the following address:

http://elpaso.homelinux.org/formbuilder

');
* var html = t.run({id : 'div_one', class : 'my_class'});
*/
Template = function(tpl){
this.tpl = tpl;
this.tokens = [];
this.is_compiled = false;
this.compile = function(){
var re = /\{(\w+)\}/g;
var tok;
while((tok = re.exec(this.tpl)) != null) {
this.tokens.push(tok[1]);
}
this.is_compiled = true;
}
this.run = function(json){
if(!this.is_compiled){
this.compile();
}
if(json){
for (var jk = 0; jk < this.tokens.length; jk++){
var pattern = new RegExp('\{' + this.tokens[jk] + '\}', 'g');
this.tpl = this.tpl.replace(pattern, json[this.tokens[jk]]);
}
}
return this.tpl;
}
}