What You See Is What You Print

In the following (short) video, we can see :

• a map with dynamic content (GeoJSON), bound to a form for attribute filtering and a legend refreshed upon data ranges modifications ;
• a Print button that delivers the current view as PDF ;
• a landscape printout in which the map view, the legend, the filter form values were nicely inserted.

Your browser does not support the video tag.

(BTW, small boo-boo in last screen: 'montain' instead of 'mountain')

Kids, you can do this at home

Here is how we did it :

• a Web page with a "stateful" permalink (i.e. restore the map and page state using anchors, location hash, etc. ;). Backbone.js & co. are meant for this ;
• A color scale built client-side from the resulting dataset, using Chroma.js, to colorize the map items and populate the legend entries ;
• django-screamshot, a Web page screenshot application, relying on CasperJS. Spooky! ;
• a SVG landscape A4 document, edited with Inkscape, as a Django template in which we placed simple tags ({{ filter.age_min }}) for texts, the {% base64capture %} tag for the map screenshot, and a couple of arithmetics tags to recreate a nice vectorial legend using the color scale entries;
• a Django view that receives the current page context (posted in JS), renders the SVG (will thus perform the screenshot), and converts it to PDF ;

Quite straightforward, a couple of hours to put together, relatively easy to deploy, obviously meet most users needs... these hacks are our happiness !

If you want to know more about some missing parts, feel free to ask ! I could release stuff or just post some snippets...

[1]from now on, I shall precise : even if it can cover most needs, it won't be adequate in all situations.