blog

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.