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',
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',
e='font-family: "Courier New",Courier,monospace;'>
bref tout ça vous laisse de la matière pour faire de bien belles parties de cartes 
