On ne présente plus OpenStreetMap, ce projet de cartographie mondial collaboratif, ouvert et donc gratuit.

Il a été récemment adopté par Foursquare, Wikipedia et Apple pour son application iPhoto. (Sans citer les contributeurs d’ailleurs. Grrrr …) Microsoft avait déjà accordé l’usage de ses images Bing pour faire avancer la production de cartes, tout comme la DGFiP (Direction Générale des Finances Publiques) en proposant les feuilles de cadastre scannées ou carrément les objets vecteurs de la base PCI.

Tout ceci a grandement facilité l’évolution de la carte en France, puisque les contributions ne pouvaient à l’origine que se faire par l’enregistrement de traces GPS.

Dans certains pays (Indonésie, Bosnie …) OpenStreetMap propose des cartes plus riches que celles de Google Maps !

Que ce soit en France ou ailleurs, le rendu standard n’est pas toujours très beau et on peut avoir envie de créer des cartes originales.

J’ai retenu trois services :

• MapOSMatic
• FranceTopo
• Stamen

MapOSMatic permet de produire un carte assez standard, avec un carroyage et une annexe comportant la liste des rues visibles sur la carte. Un exemple ici.

FranceTopo propose une cartographie orientée topographie/cartes de randonnées en combinant non seulement les données OSM mais aussi les données de la mission SRTM (Shuttle Radar Topography Mission – NASA). Cette dernière apporte un modèle numérique de terrain constitué par interférométrie radar, ce qui donne un aspect de relief à la carte et ajoute les courbes de niveau. Tous les détails sur ces données sont disponibles ici. Voici le type de rendu que l’on obtient en montagne :

Attention cependant : les données sur OpenStreetMap ne sont pas forcément fiables, notamment dans des endroits qui n’ont été cartographiés qu’une seule fois. Il serait peu prudent d’utiliser ces cartes pour préparer une randonnée en montagne. Orientez-vous plutôt vers les cartes 1/25000 de l’IGN.

Stamen propose quant à lui deux rendus beaucoup plus originaux : un en noir et blanc, dit « toner » car inspiré du rendu des imprimantes laser N&B, et un autre sous forme d’aquarelle, dit « watercolor. » Il en existe un troisième, dit « terrain » qui donne une apparence 3D à la carte. Mais il necessite des données qui ne sont pas disponibles sur la France. Ci-dessous, un exemple sur Bayonne.

Comment intégrer watercolor et toner sur un site web ?

Avec des librairies JavaScript comme OpenLayers ou l’API Google Maps.

Pour cela, il faudra mettre cette ligne en entête dans le code la page pour appeler les tuiles Stamen :

<script type="text/javascript" src="http://maps.stamen.com/js/tile.stamen.js"></script>

Avec OpenLayers

On insère ce code :

var layer = new OpenLayers.Layer.Stamen("toner");
var map = new OpenLayers.Map("element_id");
map.addLayer(layer);

On remplacera « toner » par « terrain » ou « watercolor » pour changer l’aspect de la carte. (Rappel : à l’heure où j’écris ces lignes, la classe « terrain » n’est pas disponible sur la France.)

En voici un exemple ici. Vous pouvez récupérer le code source.

Avec l’API Google Maps 

var layer = "toner";
var map = new google.maps.Map(document.getElementById("element_id"), {
    center: new google.maps.LatLng(37.7, -122.4),
    zoom: 12,
    mapTypeId: layer,
    mapTypeControlOptions: {
        mapTypeIds: [layer]
    }
});
map.mapTypes.set(layer, new google.maps.StamenMapType(layer));

Idem, on remplace la classe « toner » par « watercolor » pour obtenir l’aspect aquarelle.

En voici un exemple ici. Vous pouvez récupérer le code source. Notez qu’il n’y a plus besoin d’avoir de clé d’API pour utiliser l’API Google Maps, sauf si c’est dans un cadre commercial.

Variante : en affichant des tuiles (simples images.)

Pour ce faire, il suffit d’inclure un lien du type :

• http://tile.stamen.com/watercolor/<zoom>/<x>/<y>.jpg
• http://tile.stamen.com/toner/<zoom>/<x>/<y>.png (il s’agit bien de PNG et non de JPEG ici, pour ne pas avoir d’artefacts liés à la compression JPEG.)

Cette solution est plutôt adaptée pour l’application iPhone OpenMaps, pour laquelle on entrera ce lien dans les paramètres.