Accueil / Blog / Métier / Archives / Simple and funky Web map printing

Simple and funky Web map printing

Par Mathieu Leplatre publié 02/05/2012, édité le 11/03/2015

Strangely, users still insist in having Web page print capabilities, mostly to share, export or archive what they see. Even if relevant permalinks are often acceptable, we can't always dissuade them from printing :)

And when it comes to Web maps, printing can be a nightmare ! Even though most of the time, the needs involve a nice landscape PDF file with the map, a legend and the company logo. For this, designing CSS print stylesheets and using the browser print shortcut is not always helpful.

I present here a simple solution [1] based on headless Webkit screenshots, permalinks, SVG templates (WYSIWYG), and PDF conversion.

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.

(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.
ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Formation Django initiation à Toulouse du 13 au 15 mars Formation Django initiation à Toulouse du 13 au 15 mars 26/01/2017

Entrez de plain-pied dans l'univers de Django aux côtés de développeurs ayant une expérience de ...

Retour sur la PyConFr 2016 Retour sur la PyConFr 2016 18/10/2016

Nous étions présents à Rennes pour PyConFr 2016. Voici notre compte-rendu à chaud.

Wagtail: How to use the Page model and its manager (part 2) Wagtail: How to use the Page model and its manager (part 2) 08/08/2016

The Page model has several methods specific to Wagtail. This is also the case of its manager. We ...

Wagtail : How to make your own content type models (part 1) Wagtail : How to make your own content type models (part 1) 29/07/2016

We are used to initialize our CMS directly from a web interface, often including lots of complex ...

Presentation of the latest Django CMS: Wagtail Presentation of the latest Django CMS: Wagtail 22/07/2016

Wagtail is a quite recent Django CMS. However, its young age does not keep it from having a lot of ...