Construire sa map à l’aide d’OpenStreetMap

Openstreetmap_logo.svg

Dans ce billet, je vous propose de revenir sur un des objectifs de ma récente mission. Pour un client, nous devions réaliser un SIG (Système d'Information Géographique). On pense de suite à notre ami Google avec Google Maps qui possède des données sur l'ensemble de la France, avec des fonctions avancées telle que la recherche de lieux, etc...
Malheureusement nous ne pouvions pas l'utiliser car le client souhaitait maîtriser sa géo database.

Du coup, nous nous sommes tournés vers la solution open source alternative qui nous permettait de maîtriser nos données: OpenStreetMap.

L'architecture

OpenStreetMap est une communauté open source qui fournit des données cartographiques. Elle fonctionne sur la collaboration de ses utilisateurs pour enrichir les données.
Ce qu'il faut donc retenir c'est qu'OpenStreetMap, en tant que telle, est juste une source de données cartographique.

Pour l'exploiter, il faut donc mettre en oeuvre une architecture. Pour réaliser rapidement un POC, nous avons choisi l'architecture classique à savoir :

archi-osm-leaflet

  Architecture OSM/Leaflet

  • Une brique PostgreSQL (dit "Postgres") avec l'extension PostGis pour gérer les données géospatiales afin d'utiliser PostgreSQL comme une base de données SIG
  • Une brique Mapnik afin de rendre les images, les tiles, à partir des données géospatiales récupérées au sein de PostgreSQL
  • Une brique LeafletJS permettant d'interagir avec les tiles sur une map à la google maps.

Mise en place de l'infrastructure

Pour réaliser ce poc, nous utilisons des containers Docker.
Vous pouvez récupérer le projet sur mon Github.

clone-osm-leaflet-repo

Puis:

$>docker-compose up --build

docker-compose-up-osmleaflet

A partir de là, l'ensemble des briques se lancent.

Si à partir de maintenant, vous allez sur la map (http://localhost), vous ne devriez rien voir 😉

resultat-osm-leaflet-sansdata

En effet, on ne dispose d'aucune donnée (même pas le schéma). Du coup, on est uniquement capable sur la map vide de placer la cathédrale de Rouen 😆

Remarque: vous avez dû remarquer les erreurs sur le container mapnik concernant les connections à postgresql, c'est bien entendu lié à l'explication précédente.

Import des données OSM

Il ne vous reste plus qu'à importer des données OSM (OpenStreetMap). Pour notre part, nous avons téléchargé les données cartographiques OSM de la Haute Normandie fournies par Geofrabrik.
Une fois téléchargées, il ne vous reste plus qu'à les importer à l'aide des outils fournis par OpenStreetMap pour importer leurs données dans une base PostgreSQL (osmosis, osm2pgsql). Sous Ubuntu:

$>sudo apt-get install osmosis
$>
osmosis --read-xml haute-normandie-latest.osm.bz2 --write-xml /tmp/haute-normandie.osm

Puis pour importer les données:

$>docker run -i -t --rm -v /tmp:/osm openfirmware/osm2pgsql -c 'osm2pgsql -m -d sig -H <docker_ip_postgis_container> -U sig -W /osm/haute-normandie.osm'

import-donnees-osm-postgis

Remarque: nous avons ici utilisé un container Docker pour utiliser osm2pgsql afin de nous éviter d'installer cet outil avec toutes ses dépendances sur notre machine.

Si vous rafraîchissez votre page, vous n'avez toujours pas de carte qui s'affiche. C'est normal, il est nécessaire de redémarrer mapnik.

Résultat final

On redémarre le container mapnik:

docker-restart-mapnik-osm-leaflet

Puis on retourne sur notre page web:

resultat-osm-leaflet-avecdataresultat-osm-leaflet-avecdatazoom

Nous avons bien notre carte qui s'affiche avec la petite fonctionnalité de base du zoom.

Conclusion

En conclusion, on peut voir qu'une map basée sur OSM et Leaflet peut être un très bon substitut à Google Maps avec pour avantage la maîtrise de ses données géographiques.

A noter que nous nous sommes basés sur des données cartographiques toutes prêtes d'OSM mais rien n'empêche à un expert cartographique de créer sa propre cartographie en injectant ses données dans PostgreSQL (à l'aide par exemple de QGis)

 

Bibliographie

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.