jeudi 25 octobre 2012

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

OpenLayers, une librairie JavaScript, est devenu LE standard en terme de client cartographique pour le web, càd un outil permettant de créer une webmap intégrable dans n'importe quel site. Nous allons voir comment intégrer une couche vectorielle créée et éditée sur GoogleMaps.

Car si OpenLayers fournit l'environnement de navigation, il y faut bien introduire des données carto pour construire une carte. Si vous voulez créer et éditer des données carto, une solution simple (et mobile) est 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. Le but est d'ajouter des données vectorielles (le trajet) sans passer par un SIG mais en éditant la couche vectorielle sur GoogleMaps.

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. Ensuite, exportez votre donnée carto en KML en cliquant sur le petit lien "KML" qui apparait à côté de la carte:



4. Sauvegarder 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, strokeOpacity:0.8});
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 ordinateur perso, il suffit d'éditer ses données sur GoogleMap et de les transférer sur le serveur de la carte OpenLayers (par ex. en utilisant un logiciel de transfert FTP aussi basé sur un site 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.