Intégrer une carte avec Google, Mappy ou OpenStreetMap

La semaine dernière, je lisais sur le site geek de l’ami Nicolas que comme Wikipedia, Apple et Foursquare allaient d’ici peu utiliser OpenStreetMap à la place de google map.

Cela m’a incité, à vous proposer un petit article sur l’intégration de cartes avec des marqueurs personnalisés sur vos sites avec 3 outils.

  • Google map, qui est très rependu, mais dont l’utilisation sur des sites a fort trafic nécessite l’achat d’une licence d’utilisation,
  • Mappy qui fait partie du groupe pages jaunes (on retrouve d’ailleurs leur carte sur l’ensemble des sites du groupe)
  • et différentes intégrations d’OpenStreetMap , un projet de cartographie libre (à la manière par exemple de wikipédia) animé par des internautes et que je vous propose de mettre en œuvre grâce à la librairie Leaflet 

Je ne vais pas vous faire un énorme tutoriel (d’autres le font bien mieux que moi, et les docs des trois outils sont assez bien faites) mais vous proposer un exemple très d’intégration simple.

Une carte du centre-ville de Guingamp avec une icône personnalisée  indiquant la position du château.

Intégration avec l’Api Google

L’avantage de l’Api google est qu’elle propose une énorme base documentaire, ainsi que de nombreux tutoriaux, son inconvénient est que depuis quelques mois, son utilisation est payante pour les sites proposant plus de 5000 cartes par jour, pas de quoi s’inquiéter pour un petit site, mais si la mise a disposition de carte à vos utilisateurs est au cœur de votre site, cela peut rapidement poser problème.

Notre carte ressemblera à ceci.

Intégrer une carte avec Mappy

Mappy est un service de cartographie qui lui aussi propose une API, l’avantage est que son utilisation est gratuite (pour un site web public) et sans (presque) aucune limitation d’affichage.

Par contre, vous avez besoin d’une clé d’application (token) pour l’implémenter sur un site.

Le résultat ressemblera à ceci

Intégrer une carte avec OpenStreetMap

Openstreetmap est un projet libre, et international, (un peu à la manière de wikipedia) animé par de nombreux internautes de part le monde. Son objectif est de proposer des données cartographique librement utilisables par tous.

Ce qui signifie, que rien (a part peut être les connaissances technique et les ressources système nécessaires) ne vous interdit de créer votre propre serveur de cartographie à partir des données du projet.

Dans la pratique certaines entreprises (comme cloudmade, ou mapquest par exemple) vous proposent d’accéder à ces données hébergées sur leur serveurs. Ce qui permet d’accéder à de nombreux modèles de cartes différentes.

Comme Openstreetmap est un projet libre, de nombreux développeurs on créé des librairies dans différent langages qui permettent de manipuler les données Openstreetmap .

Sur son site, OpenStreetMap utilise la librairie Openlayer , cependant, pour afficher une carte, l’utilisation de la librairie leaflet est parfois plus facile, (et un peu moins lourd en ressourc.

Leaflet et téléchargeable ici http://leaflet.cloudmade.com/

Le résultat ressemblera à ceci

note cependant au passage que l’aspect des cartes peut évoluer en fonction de ton fournisseur de fonds de cartes :

voici la même carte réalisée à partir des données sur serveur open mapquest

pour ce faire on remplace le code :

var cloudmadeUrl = ‘http://{s}.tile.cloudmade.com/[votretoken]/997/256/{z}/{x}/{y}.png’,
cloudmadeAttribution = ‘Données de la carte © OpenStreetMap et ses contributeurs, CC-BY-SA, Images © CloudMade‘,
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});
map.addLayer(cloudmade);

par

var cloudmadeUrl = ‘http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png’,
subDomains = [‘otile1′,’otile2′,’otile3′,’otile4’],
cloudmadeAttrib = ‘données, imagespar MapQuest, OpenStreetMap et ses contributeurs, CC-BY-SA‘;
var cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib, subdomains: subDomains});
map.addLayer(cloudmade);

pour aller plus loin

S’il te venait l’envie de créer ton propre serveur de cartes, je t’invite à te plonger dans cette page qui liste de nombreuses ressources

Pour découvrir tous les outils, librairie et frameworks qui permettent de travailler avec l’Api c’est ici http://wiki.openstreetmap.org/wiki/Develop/Frameworks

pour en savoir plus sur OpenStreetMap : http://wiki.openstreetmap.org/wiki/FR:Main_Page
le site des développeurs http://dev.www.openstreetmap.fr/

bref tout ça vous laisse de la matière pour faire de bien belles parties de cartes 😉

Intégrer une carte avec Google, Mappy ou OpenStreetMap
Mot clé :                        

9 commentaires sur “Intégrer une carte avec Google, Mappy ou OpenStreetMap

Laisser un commentaire

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

Merci de faire ce calcul pour valider votre commentaire * Le temps imparti est dépassé. Merci de saisir de nouveau le CAPTCHA.

Bear