blog – Page 5 – Nobohan

Le plugin OpenLayers dans QGIS

Un des avantages des logiciels open-source sur les logiciels propriétaires, c’est la possibilité de personnaliser son programme avec des plugins développés par la communauté, comme par ex. avec Firefox et ses nombreux plugins. Pour QGIS, le projet opensource le plus avancé en matière de SIG, un plugin à retenir est le plugin OpenLayers, qui permet d’afficher les données de plusieurs sources de données propriétaires et libres (GoogleMaps, BingMaps, OpenStreetMap,…) dans QGIS.

Une capture d’écran ci-dessous avec BingMaps comme exemple:

OpenLayerspluginQGIS

Pour installer ce plugin, il faut d’abord activer les plugins 3rd party. Voilà la marche à suivre pour QGIS 1.7, en version anglaise:

Aller dans “Plugins”>”Fetch Python plugins…”
Dans la boîte de dialogue qui s’affiche, aller dans le 2ème onglet: “Repositories” et cliquer sur “Add 3rd party repositories”
Retourner dans le premier onglet “plugins” et taper OpenLayers dans la barre de recherche
Cliquer sur OpenLayers plugin pour l’installer

Ensuite, pour afficher les couches comme GoogleMaps, BingMaps et OpenStreetMap, aller dans “Plugins” et “OpenLayers plugin” devrait apparaitre en bas, laissant apparaître une bonne dizaine de couches à afficher (Yahoo maps étant proposés mais ne fonctionnant plus…)

Enfin, si le plugin est introuvable, et pour voir son code-source, on peut toujours le trouver sous http://build.sourcepole.ch/qgis/plugins.xml

A ma connaissance, impossible d’afficher ces couches GoogleMaps, BingMaps et OpenStreetMap aussi simplement dans ArcGIS!

Créer une carte avec amMap

J’ai découvert récemment une petite librairie cartographique très simple à utiliser: amMap. Elle permet de créer des cartes thématiques du monde, de continents ou de pays, et est rapide à prendre en main. J’ai fait un exemple d’application avec une carte de la provenance des étudiants ULg du campus d’Arlon, sans doute le campus le plus multiculturel de Belgique!

Cet exemple (sans la légende) est fait en une vingtaine de lignes de code. J’aime bien le code pour les popups (là où ça commence par “ballonText”): juste une ligne de code, alors qu’avec OpenLayers, il en faut une bonne quizaine pour le même genre de résultat! Pour le reste du code, en s’inspirant des exemples fournis, il est facile de créer une carte sans devoir passer par un tuto.

var map;
			
AmCharts.ready(function() {
    map = new AmCharts.AmMap();
    map.pathToImages = "./ammap/images/";
    map.colorSteps = 11;
    map.mouseWheelZoomEnabled = true;
    map.balloon.color = "#000000";
   
    var dataProvider = {
        mapVar: AmCharts.maps.worldLow,
        areas: [
            	{id:"DE",value:"1"},
		{id:"BR",value:"1"},
                ...
    };
    map.areasSettings = {
        autoZoom: true,
        balloonText: "[[title]]: [[value]]",
        selectedColor: "#696969"
    };

    map.dataProvider = dataProvider;    
    map.write("mapdiv");
});

Il y a une documentation claire et relativement complète sur le site d’amMap. Attention, amMap n’est pas une librairie de webmapping au même titre qu’OpenLayers ou Leaflet, c’est plutôt une librairie pour créer des cartes à grande échelle sur base de dessins de continents/pays pré-définis, et le résultat est plus proche d’un dessin que d’un Système d’Information Géographique. Par exemple, il n’y a pas de projection à définir et pas question d’y ajouter des WMS, des couches de GoogleMaps, etc. Les possibilités sont très limitées en comparaison d’autres programmes et librairies, mais c’est déjà suffisant pour nombre d’applications. Enfin, amMap est disponible gratuitement mais n’est pas un projet open-source, dommage :-(.

Framasoft: la route est longue mais la voie est libre!

J’ai découvert récemment des super outils issus d’une super association de promotion des logiciels libres: Framasoft! Impossible de décrire tout ce qui se fait de bien dans cette association qui a par ailleurs un grand besoin de soutien.

J’ai retenu tout d’abord un bloc-note collaboratif en ligne, le framapad. Génial pour commencer à réfléchir sur un projet à plusieurs personnes ou simplement écrire une liste de courses à 2. Le gros avantage est qu’aucune inscription n’est nécessaire. Allez sur le site, un clic sur “créer un pad” et c’est tout.
Ensuite un tableur collaboratif, framacalc, sur le même principe et toujours aussi simple à mettre en oeuvre. J’ai essayé un framacalc pour créer une feuille de commande pour un groupement d’achats en communs:
Enfin, une alternative à Doodle, le framadate!

Ce n’est qu’un aperçu des nombreux projets déjà sortis du chapeau de framasoft. Et d’autres projets sont dans les cartons!

Voilà qui donne vraiment envie de les soutenir ces gars-là!

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:

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:

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”:

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”):

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:

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.