URL: https://linuxfr.org/news/comment-creer-une-carte-open-street-map
Title: Comment créer une carte Open Street Map
Authors: JohannCR
Benoît Sibaud, claudex et Bruno Michel
Date: 2013年06月14日T15:26:03+02:00
License: CC By-SA
Tags: osm, openstreetmap, carte_open_street_mapcodage, javascript et openlayers
Score: 61
Vous avez déjà essayé de créer une carte personnalisée sur votre site ? Ce n’est pas toujours une partie de plaisir... Certains fournisseurs de map proposent des cartes très esthétiques, mais peu personnalisables, d’autres sont lourds à implémenter, bref, construire une carte à base d’open data peut être un parcours du combattant.
Ce guide ne cherche pas à être exhaustif, il s’agit surtout d’un partage d’expérience, fort limité du fait que je ne suis pas un développeur ou mappeur professionnel. En revanche, je pense bien représenter le public non-codeur qui souhaiterait passer ces obstacles, et si cet article peut aider un débutant comme moi à trouver des ressources, des idées et des bouts de code pour parvenir à réaliser son objectif, alors cet article aura joué son rôle.
N’hésitez pas à partager vos avis, critiques et conseils dans les commentaires !
On commencera par lister quelques exemples de cartes, on verra un ou deux exemples de plateformes de création de carte sans coder, puis on entrera dans les détails du code nécessaire pour monter une carte avec OpenLayers.
----
----
#I. Exemples de cartes#
Commençons par voir quelques exemples de projets de carte basés sur OpenStreetMap :
* [opencyclemap.org](http://www.opencyclemap.org/) est une carte des pistes cyclables.
* [openpistemap.org](http://openpistemap.org/) est une carte des pistes de ski.
* [openptmap.org](http://www.openptmap.org/) trains, métros, tramways et bus.
* [öpnvkarte.de](http://öpnvkarte.de/) aéroports, métros, tramways et bus.
* [wheelmap.org](http://wheelmap.org/fr/map) accessibilité aux fauteuils roulant.
* [maposmatic.org](http://www.maposmatic.org) génération de cartes de villes. Attention, générer la carte d’une grande ville prend beaucoup de temps à la création et à la lecture ! L’export est possible au format pdf, png, svgz et csv. Pour une grande ville, le format png est recommandé. Le format csv liste les noms de rues et de bâtiments publics avec leurs positions sur la carte (pas de coordonnées gps, juste des positions dans la grille générée dans les autres formats).
* [leretourdelautruche.com/map/nuke/](http://www.leretourdelautruche.com/map/nuke/) carte des centrales nucléaires dans le monde, avec sites d’explosions nucléaires.
* [gotronic.fr/carte-des-fablabs.htm](http://www.gotronic.fr/ins-carte-des-fablabs-50.htm) une carte des FabLabs en France et dans le monde. Disclaimer : j’en suis l'auteur. C’est ma première map donc elle pourrait très certainement être améliorée.
Une liste de cartes beaucoup plus exhaustive est disponible sur le [wiki d’openstreetmap](http://wiki.openstreetmap.org/wiki/List_of_OSM_based_Services )
#II. Construire une carte sans coder#
Si vous souhaitez construire une carte utilisant des données issues d’Open Street Map, mais ne souhaitez pas coder, au moins deux solutions sont disponibles.
* [Umap](http://umap.openstreetmap.fr/fr/).
Il est possible de dessiner des zones, placer des marqueurs, des lignes, définir le niveau de zoom et le centrage, choisir un fond de carte, le tout en quelques clics.
On peut importer des données au format GeoJSON, KML, GPX et CSV. Voir section « couches de données ».
Une fois la carte terminée on peut extraire le code html, une URL (compressée) de la carte, ou télécharger les données au format GeoJSON.
Remarque : il est possible de choisir la licence WTFPL, dont l’acronyme signifie « [do What The Fuck you want to Public Licence](http://fr.wikipedia.org/wiki/WTFPL) » !
Il va sans dire que ces cartes sont donc sous licence publique.
* [Open Mapquest](http://open.mapquest.fr/).
Un peu limité en fonctionnalités, on ne peut qu’afficher des points d’intérêt parmi une liste proposée ou tracer des itinéraires. J’ignore s’il est possible de personnaliser l’import/export de données.
Il en existe probablement d’autres que je n’ai pas cité, n’hésitez pas à me le signaler dans les commentaires !
#III. Coder une carte#
Coder une carte requiert deux choses :
Des tuiles et une bibliothèque javascript. Les tuiles forment la base de la carte, et des couches (layers) sont ajoutées par-dessus pour afficher des points, des reliefs, zones, popups, etc. par-dessus les couches utilisées.
##1. Les tuiles##
Ce sont les blocs qui constitueront la carte. Ces blocs sont chargés en fonction de la zone de la carte affichée.
Voici une [liste de quelques serveurs de tuiles](http://wiki.openstreetmap.org/wiki/Tiles) avec des exemples de leur rendu.
Typiquement, ce sont les tuiles Mapnik qui sont utilisées par OSM, CloudMade, MapQuest et MapBox, elles ressemblent à cela :
##2. Une bibliothèque JavaScript##
C’est un ensemble de fonctions JavaScript prédéfinies pour exploiter les tuiles et les couches qui se superposeront dessus.
* [Leaflet](http://leafletjs.com/)
Bibliothèque open source. Un exemple simple de création de carte est détaillé pas à pas dans [ce guide](http://leafletjs.com/examples/quick-start.html) (en anglais). Voici le [résultat](http://leafletjs.com/examples/quick-start-example.html).
Cet exemple utilise les tuiles cloudmade (donc le rendu Mapnik) et reste relativement basique (pas de récupération de données d’OSM).
* [OpenLayers](http://openlayers.org/)
Open source. On peut trouver quelques [exemples sur cette page](http://openlayers.org/dev/examples/). C’est un peu difficile de s’y retrouver sur leur site, à l’image de cette bibliothèque qui est un peu plus difficile à exploiter que leaflet. OpenLayers semble être la bibliothèque la plus complète toutefois.
* [MapQuest](http://developer.mapquest.com/web/products/featured/javascript)
* MapQuery (http://mapquery.org/) combine OpenLayers et jQuery.
* Cloudmade
* Via Michelin
* Yahoo Map
* Microsoft Virtual Earth
* Google Maps
* etc.
Comparaison du code nécessaire pour créer une carte avec différentes bibliothèques sur [trippingthebits.com](http://trippingthebits.com/geopres/). Sont testés Bing, ESRI, Google, MapQuest, OpenLayers, OVI et Leaflet.
Voici un résumé des liens entre plusieurs fournisseurs de cartographie Web gratuite, comprenant des bibliothèques javascript mais aussi des applications ou plateformes. [Image issue de cet article](http://geotux.tuxfamily.org/index.php/en/geo-blogs/item/265-comparacion-de-clientes-web-para-sig-v5).
##3. Des couches de données (optionnelles)##
Pouvoir coder une carte est bien, mais l’intérêt est surtout de pouvoir ajouter des POI ou points d’intérêts justement.
###a) Première possibilité : utiliser des données fixes###
Une méthode est d’aller sur [http://overpass-turbo.eu/](http://overpass-turbo.eu/) (par exemple) et de coller ce bout de code avant de cliquer sur « run » :
```xml
```
En remplaçant les caractères en majuscule. Par exemple pour retrouver tous les nœuds dont le tag « nom » a pour valeur (exacte) « Charles de Gaulle », cela donnera
```xml
```
Il est aussi possible d’utiliser du regex, par exemple pour trouver tous les nœuds comprenant les termes « Charles de Gaulle » :
```xml
```
Dans ce cas on trouvera alors 107 résultats au lieu de 38 seulement avec la valeur exacte :
Plus de détails sur l’utilisation [d’overpass turbo ici](http://wiki.openstreetmap.org/wiki/Overpass_API/Language_Guide).
On peut exporter ces données en cliquant sur « export » et en choisissant son format.
Ce fichier peut donc être conservé sur le serveur du site sur lequel la carte est codé et ses données seront définitives donc ne prendront pas en compte d’éventuelles modifications apportées sur OpenStreetMap.
Une autre façon de récupérer ce fichier est d’utiliser une URL contenant les commandes destinées à l’API. Dans notre cas la commande serait ?data=node["name"="Charles de Gaulle"];out+meta;
Et l’url (avec l’encodage des espaces) http://overpass-api.de/api/interpreter?data=node["name"="Charles%20de%20Gaulle"];out+meta;
Ensuite pour exploiter ces données avec OpenLayers, il faut créer une layer exploitant le fichier de données stocké sur le serveur. Par exemple, s’il s’agit d’un fichier osm, cela donnera :
```javascript
var layer = new OpenLayers.Layer.Vector("POIs", {
projection: map.displayProjection,
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "data.osm",
format: new OpenLayers.Format.OSM()
})
});
map.addLayers([layerMapnik, layer]);
```
Remarque importante : le fichier data.osm doit se trouver sur le même serveur que la page.
Pour utiliser un autre format de fichier, comme un .txt par exemple, il faudra adapter le protocole :
```js
protocol: new OpenLayers.Protocol.HTTP({
url: "data.txt",
format: new OpenLayers.Format.Text()
})
```
On peut trouver la liste des [formats supportés sur cette page](http://dev.openlayers.org/releases/OpenLayers-2.7/doc/apidocs/files/OpenLayers/Format-js.html) (dans le menu de gauche)
###b) Deuxième possibilité : Données « live »###
Afin d’afficher sur sa carte des informations directement extraites d’Open Street Map et toujours à jour, il faut passer par une API, et faire traiter le fichier récupéré directement par l’interpréteur javascript.
Avec OpenLayers, il suffit d’utiliser la variable var data_url
Cela donne par exemple :
```html
type="text/javascript">
var lat = 50.727;
var lon = 7.092;
var zoom = 15;
var data_url = "api/interpreter?data=node["name"="Charles%20de%20Gaulle"];out+meta;";
var zoom_data_limit = 13;
var map;
```
Pour plusieurs couches de données, il faut plutôt utiliser la fonction make_layer()
```js
map.addLayers([
make_layer("http://overpass-api.de/api/interpreter?data=node["name"="Charles%20de%20Gaulle"];out+meta;", "blue"),
make_layer("http://overpass-api.de/api/interpreter?data=node["name"="Charles"];out+meta;", "red"),
]);
```
##4. Des popups ou évènements (optionnels)##
Il est possible d’afficher des fenêtres lorsqu’un utilisateur clique sur un marker de la carte. En revanche, je n’ai pas trouvé comment le faire sur des données live, mais seulement en exploitant un fichier de données. Si vous savez comment faire ça, décrivez la procédure dans les commentaires et je l’ajouterai à l’article.
Il faut pour cela trois fonctions. Une fonction de création de la popup, une décrivant les informations à présenter dans la fenêtre, et une dernière pour fermer la fenêtre :
```js
function onPopupClose(evt) {
selectControl.unselectAll();
var feature = this.feature;
if (feature.layer) {
selectControl.unselect(feature);
}
else {
this.destroy();
}
}
function onFeatureSelect(event) {
var feature = event.feature;
var content=
"
"+feature.attributes.name + "
"
+ feature.attributes.addrfull + "";
popup = new OpenLayers.Popup.FramedCloud("featurePopup",
feature.geometry.getBounds().getCenterLonLat(),
new OpenLayers.Size(100,100),
content,
null, true, onPopupClose);
feature.popup = popup;
map.addPopup(popup);
}
function onFeatureUnselect(event) {
var feature = event.feature;
if (feature.popup) {
map.removePopup(feature.popup);
feature.popup.destroy();
delete feature.popup;
}
}
```
Ici on suppose que les données possèdent les attributs `name` et `addrfull`.
Remarques :
* Il semblerait que les « : » posent problème aux fonctions javascript. Il m’a donc fallu les supprimer dans le fichier .osm et remplacer les « addr:full » par « addrfull ». Il existe surement d’autres façons de contourner ce problème.
* Si la liste des attributs à afficher dans la popup s’allonge, attention de vérifier qu’ils soient tous présents dans le fichier ! Sinon cela affichera un magnifique « undefined » dans la popup...
Une façon de contourner le problème est de tester la présence des attributs avant de les utiliser. Par exemple :
```js
if (feature.attributes.addrfull === undefined) {
var content=
"
"+feature.attributes.name + "
";
} else {
var content=
"
"+feature.attributes.name + "
"
+ feature.attributes.addrfull + "";
}
```
#IV. A vous de jouer !#
Voilà, les possibilités pour créer une carte à base d'OpenStreetMap sans coder existent, même si elles restent limitées à mon avis (prouvez moi le contraire dans les commentaires ;-). Pour ce qui est de l'utilisation d'OpenLayers (ou Leaflet), c'est certainement d'un niveau assez facile pour un développeur chevronné, et il est possible d'aller beaucoup plus loin que ce qui est décrit dans cet article.