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.
Voir aussi
Django Rest Framework : les tests (partie 8) Django Rest Framework : les tests (partie 8) 22/02/2016

Avec les API REST, développer très rapidement des tests fonctionnels complets qui frôlent les ...

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

Python : Bien configurer son environnement de développement Python : Bien configurer son environnement de développement 07/12/2015

Comment utiliser les bonnes pratiques de développement Python.

Internationalisation avec Django Internationalisation avec Django 27/11/2018

En tant que développeurs nous sommes parfois confronté à la problématique de l'accessibilité ...

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.