alt

Devenez un maître cartographe !

cartographe

Google Maps s’est imposé comme un poids lourd de la cartographie web ces dernières années et à force de manger de la Google Maps à tous les repas, votre appréhension du fabuleux monde de la cartographie commence à avoir la bouche pâteuse.

Heureusement, rassurez-vous, il existe une alternative et non des moindres ! Openstreetmap, OSM pour les intimes, est un magnifique projet open source qui a pour but de cartographier la totalité de notre chère planète, permettant ainsi de créer des cartes sous licence libre. Grâce au courage de milliers de contributeurs volontaires et aux données GPS libres récolté de-ci de-là, OSM est vite devenu une des bases de donnée cartographique les plus riches du moment.

Openstreetmap

N’hésitez plus et inscrivez-vous sur le site officiel !

Ouais, mais Google Maps c’est plus facile à intégrer

Openstreetmap peut sembler extrêmement intimidant pour un profane qui souhaite seulement afficher une petite carte sur sa page et c’est justifié. Étant très (trop) complet, on se perd facilement dans les méandres de cette technologie aux possibilités infinies. Il existe néanmoins un havre de simplicité qui vous permettra d’intégrer une Openstreetmap sur votre site : Leaflet !

Cette bibliothèque JavaScript open source s’est vite imposé comme l’API de référence dans l’utilisation d’OSM.

leaflet

Tout d’abord, installez la librairie :

1
<script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

Ensuite, incorporer les styles sans quoi votre carte va exploser :

1
2
3
4
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
  !--[if lte IE 8]>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.ie.css" />
  ![endif]-->

Et pour finir, ajoute simplement ces quelques lignes dans votre fichier de scripts :

1
2
3
4
5
6
7
8
9
10
11
12
13
// Crée la map en définissant les coordonnées géographiques et le niveau de zoom
var map = L.map('ID-de-mon-bloc-Map').setView([46.523335, 6.615654], 17);

// Ajoute un calque pour les tuiles (tile) Openstreetmap. Sans ça, vous n'aurez rien affiché. C'est le Web Map Service de votre carte, ici celui par défaut.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
  // Ajoute un copyright custom
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

// Ajoute un marqueur ainsi qu'une légende contenue dans une infobulle personnalisable.
L.marker([46.523335, 6.615654]).addTo(map)
    .bindPopup('Antistatique, des artisans du web, curieux et exigeants. ') // La légende
    .openPopup();

N’oubliez pas de créer le bloc HTML dans lequel vous allez placer votre map et de déclarer l’ID correctement !

OK, mais c’est un peu moche

Il apparait assez rapidement qu’Openstreetmap ne brille pas par ses qualités graphiques. En effet, les quelques calques disponibles (Standard, Cycle Map, Transport Map et MapQuest Open) ne sont clairement pas des modèles d’esthétisme.

Leaflet c’est bien, mais couplé à Cloudmade et son éditeur c’est mieux. En effet, à par une tripotée de services et technologies liées à la cartographie, Cloudmade propose une interface hyperintuitive de personnalisation de cartes pour Openstreetmap. Et si je vous dis que les bougres s’investissent pleinement dans le projet OSM, vous comprendrez certainement l’intérêt qu’ils ont à proposer un tel service. En plus, Leaflet, c’est simplement eux qui en sont à l’origine !

Comprenez une chose, Leaflet n’est qu’une API de navigateur de carte, elle propose par défaut les tuiles de base d’Openstreetmap, mais ce n’est pas elle qui vous fournira les précieuses tuiles. Pour cela il vous faudra vous rediriger vers un Web Map Service comme Mapquest, Cloudmade ou même Google Maps et Bing qui vous fourniront les layers nécessaires à l’affichage de votre carte. Cloudmade semble donc être un bon choix de par sa gratuité et sa capacité à proposer une certaine personnalisation.

Cloudmade map editor

Le précieux sésame

Premièrement, créez-vous un compte. Cette inscription vous servira à générer vos précieuses API KEY nécessaires au bon fonctionnement de vos styles.

Laissez libre cours au Picasso qui sommeille en vous

Ensuite, rendez-vous dans l’éditeur et faites votre choix parmi un des nombreux styles déjà créés par la communauté. Si aucun ne vous sied, libre à vous de créer un nouveau style de zéro ou à partir d’un style existant. N’oubliez pas de rafraichir votre carte à chaque changement, sans quoi vous ne verrez rien. Une fois satisfait de votre oeuvre, enregistrer et avant de quitter, relevez l’ID de votre style en cliquant sur «share» et en le repérant dans le code ( styleId= ? ).

Cloudmade map editor

Créez la clef…

Pour finir, rendez-vous sur votre page de profil et cliquez sur  » Get API Key » pour ajouter une nouvelle clef. Rentrez toutes les infos relatives à votre page en gardant à l’esprit qu’une URL erronée ne permettra pas l’affichage de votre style.

… et laissez la magie opérer

Il ne vous reste qu’à paramétrer votre calque dans vos scripts

1
2
3
4
L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
    key: 'XXXXXXXXXXXXXXXXXXXXXXXX', // Votre clef
    styleId: XXXXX            // L'ID de votre style
}).addTo(map);

Tadda ! Vous disposez maintenant d’une magnifique carte personnalisée et sans avoir dépenser un centime.

Le mot de la fin

Il existe bien sûr des alternatives comme Mapbox qui propose de vous fournir des cartes personnalisables sans toucher une ligne de code. Cependant ce service à un coût non négligeable qui augmente en fonction du nombre de consultations. Personnellement, je trouve que lâcher un peu des Google Maps ternes et sans saveur ne fera que diversifier le paysage de la cartographie online.


  • Xavier Alexandre

    Yeaah, Antistatique, les rois de l’intégration de la carto dans leur projet!

    Vous devriez ajouter des exemples de vos réa qui intègrent des bien jolies cartes :)

    Et du coup je me sens obligé de vous dire de venir au prochain UX Romandie où Swisstopo viendra présenter le redesign en cours de map.geo.admin.ch et tous les challenges UX derrière les géoportails
    http://techup.ch/1034/redesigning-map-geo-admin-ch

    Ce serait frime d’ailleurs d’intégrer leurs cartes sur les projets suisses :)

  • http://twitter.com/gil_les Gilles Doge

    Et si vous voulez pas lâcher Google Maps, il est aussi possible de « customiser » le rendu des cartes. Plus d’infos ici: https://developers.google.com/maps/customize

  • http://twitter.com/krummy krummy

    Très belle découverte, j’avais justement la bouche un peu pâteuse… merci :)