blog

Imprimer une webmap avec le Pearl Crescent Page Saver plugin

Dans ce post, nous verrons comment il est possible d’éditer de (belles) cartes “papier” à partir de logiciels de webmapping. Alors c’est vrai que les webmaps ne peuvent rivaliser avec un logiciel de cartographie ou SIG pour créer de jolies cartes papier. Mais traduire une webmap dans un SIG pour l’édition d’une carte est une étape relativement fastidieuse, qui implique l’exportation des données cartographiques, la redéfinition de la symbologie et qui peut même se révéler impossible ou du moins beaucoup plus complexe lorsque la webmap affiche un fond cartographique venant d’une source tiers, typiquement GoogleMaps ou OpenStreetMap.

Si on veut avoir rapidement une version papier d’une webmap que vous avez créé, il existe mieux qu’une simple capture d’écran (print sreen)! Certains plugins disponibles sous Firefox permettent en effet de personnaliser la capture d’écran et notamment de faire une capture d’une page web, càd de TOUTE la page, indépendamment de la taille de votre écran et sans devoir “scroller” la page et de recoller des morceaux de capture d’écran.

Un des meilleurs plugins Firefox de capture de page est le Pearl Crescent Page Saver. dont une version gratuite est téléchargeable ici. Installez ce plugin Firefox, redémarrez Firefox et vous verrez une petite icône dans la barre d’outil en haut à droite:

img1
Vous avez donc la possibilité d’enregistrer la page entière! Les options de Page Saver permettent de choisir entre autres choses le format (PNG ou JPEG).

Cool, mais cela n’apporte évidemment strictement rien de plus qu’une capture d’écran classique si votre webmap s’affiche sur l’ensemble de l’écran, ce qui est souvent défini comme tel pour les webmaps! L’astuce est alors de définir votre carte sur une grande page web qui dépasse la taille de votre écran.

Par exemple, une webmap occupant tout l’écran se définit avec OpenLayers dans un fichier HTML de la façon suivante:

<div style="width:100%; height:100%" id="map"></div>

Mais il est tout à fait possible de faire une carte dépassant cet écran:

<div style="width:300%; height:300%" id="map"></div>

ou exprimé en pixels, par exemple:

<div style="width:5000px; height:5000px id="map"></div>

ce qui créé un fichier de 5000 x 5000 pixels. Il existe une limite de taille d’image pour le plugin (plantage de Firefox si dépassée) qui se situe un peu au-delà de 5000 x 5000 pixels, mais cette taille d’image est déjà suffisante pour réaliser un beau poster à une bonne résolution! Voilà donc un moyen d’imprimer une webmap en haute définition en changeant une ligne dans le code de la webmap.

Créer une simple webmap OpenLayers en éditant des trajets sur GoogleMaps

OpenLayers, une librairie JavaScript, est devenu LE standard web en terme de client cartographique, càd un outil permettant de créer une carte (ou webmap) intégrable dans n’importe quel site.

Nous allons voir comment intégrer une couche vectorielle créée et éditée sur GoogleMaps. Le but est d’ajouter des données vectorielles (ici: un trajet) sans passer par un SIG mais en éditant la couche vectorielle sur GoogleMaps. Car si OpenLayers fournit l’environnement de navigation, il y faut bien introduire des données carto pour construire une carte. Une solution simple (et mobile) est donc d’utiliser GoogleMaps comme éditeur de données carto. J’ai utilisé ce truc pour faire une carte d’un trajet en vélo qui était édité sur GoogleMaps au fur et à mesure d’un looooong voyage en vélo.

On suppose que vous savez faire une carte simple en OpenLayers. Sinon, Geotribu fournit de très bons tutoriels pour commencer avec OpenLayers!

1. Pour créer une donnée vectorielle sur GoogleMaps, vous devez avoir un compte Google. Allez dans “Mes adresses” sur GoogleMaps et cliquez sur “Créer une carte”:

img1.png

2. Vous allez donner un titre (par ex. “trajet”) à votre carte, puis en utilisant les outils d’édition (en haut à gauche de la carte) pouvoir dessiner des lignes ou des points sur GoogleMaps et donner un nom à votre partie de carte (par ex. “Oujda-Figuig”):

img2

3. Enregistrez les modifications puis exportez votre donnée carto en KML, le format de données vectorielles de GoogleMaps, en cliquant sur le petit lien “KML” qui apparait à côté de la carte:

img3

4. Sauvegardez ce fichier KML sur votre ordinateur. Ce fichier KML peut être ensuite introduit facilement dans une carte OpenLayers avec quelques lignes de code comme ceci:

var styleMapTrajet = new OpenLayers.StyleMap({strokeColor:"black", strokeWidth:4});
var Trajet = new OpenLayers.Layer.GML("Trajet", "trajet.kml",{format: OpenLayers.Format.KML, styleMap: styleMapTrajet});
map.addLayers([Trajet]);

Cela permet donc d’éditer une couche vectorielle sans passer par un SIG, faisant de GoogleMaps un web-based SIG. J’utilisais cela en voyage sans avoir emporté d’ordinateur mais en utilisant les cyber-cafés, etc. Il suffit d’éditer ses données sur GoogleMaps et de les transférer sur le serveur de la carte OpenLayers (par ex. en utilisant un logiciel de transfert FTP aussi basé sur le web comme net2ftp.com).

Vous pouvez voir le code-source complet de la carte sur nobohan.be/webmaps/velo/map.html (en tapant CTRL+u), en particulier pour le détail de la carte OpenLayers. L’avantage de cette méthode par rapport à une carte faite avec la GoogleMaps API est d’utiliser OpenLayers et ses capacités (presque) infinies pour personnaliser une webmap.