Month: December 2012

Afficher un raster avec OpenLayers SANS MapServer

Les fonds géographiques qui peuvent être affichées dans OpenLayers sont habituellement des WMS ou des services commerciaux particuliers (GoogleMaps, BingMaps,…). Contrairement aux données vectorielles, afficher ses propres données raster est a priori plus difficile… La solution la plus “pro” est d’utiliser un serveur cartographique, comme MapServer, qui permet de créer ses propres WMS.

Mais, un serveur cartographique, forcément, ça doit être installé sur le serveur d’un site web. L’installation est facile, mais il faut que votre hébergeur soit d’accord de l’héberger ou tout simplement que vous puissiez le contacter, ce qui n’est pas gagné d’avance!

Pour afficher un raster dans une webmap OpenLayers SANS utiliser MapServer ou un autre serveur carto, il existe une petite fonction OpenLayers peu connue: OpenLayers.Layer.Image(). Cette fonction peut être utilisée pour afficher simplement une image non géoréférencée sur votre carte. D’ailleurs le fichier du raster ne doit pas être nécessairement géoréférencé dans le fichier (par ex. comme GeoTiff ou d’autres formats géographiques) et un format comme PNG ou JPEG est possible.

Pour utiliser OpenLayers.Layer.Image(), il faut spécifier le nom de l’image, son chemin d’accès, l’extent (qui joue le rôle du géoréférencement) et la taille en pixels de l’image. Le géoréférencement se fait alors dans la fonction OpenLayers (avec OpenLayers.Bounds) et doit bien sûr être connu (ce sont les coordonnées des 4 coins de l’image: lx (=lower x), ly (=lower y), ux (=upper x) & uy (=upper y)):

 Image = new OpenLayers.Layer.Image('Raster',
           './data/raster.png', 
           new OpenLayers.Bounds(lx,ly,ux,uy),
           new OpenLayers.Size(x,y)
           );

Bien sûr, le raster doit avoir été projeté dans le même système de coordonnées que la webmap. Et ce n’est certainement pas une solution aussi “propre”, rapide et puissante que d’utiliser MapServer. Mais pour afficher de petits rasters, cela fonctionne plutôt bien. Un exemple en cliquant sur l’image ci-dessous:

img1

 

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.