Tutoriel Leaflet
Leaflet est un outil Javascript qui va vous permettre de créer des cartes interactives pour présenter vos données géographiques.
Leaflet s'appuie sur le projet Open Street Map et propose une librairie Javascript de 27kb (compressée) pour réaliser diverses opérations sur les cartes.
Leaflet est compatible avec les navigateurs Internet qui équipent les Smartphones, il sera donc intéressant d'utiliser ce service pour réaliser vos applications cartographique mobiles surtout qu'elle s'avère assez légère.
Cet article vous propose une page commentée qui va vous montrer comment afficher une carte, la centrée et rajouter des informations sur celle-ci.
Le code source la page
Pour cet article tutoriel, nous allons réaliser une carte de la France qui affiche des informations pour chaque région.
Les informations seront affichées sous forme de bulles. Chaque bulle sera "cliquable" et affichera des informations supplémentaires. Bien sûr, le zoom sera lui aussi géré par Leaflet.
Allez, on arrête les bavardages, voici directement le code source la page concernée :
<html>
<head>
<meta charset="utf-8">
<title>Leflet example</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="/http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
</head>
<body>
<div id="map" style="height:100%;"></div>
<script>
var map;
/* initialisation de la fonction initmap */
function initmap() {
// paramétrage de la carte
map = new L.Map('map');
// création des "tiles" avec open street map
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data de OpenStreetMap';
var osm = new L.TileLayer(osmUrl, {minZoom: 2, maxZoom: 10, attribution: osmAttrib});
// on centre sur la France
map.setView(new L.LatLng(46.85, 2.3518),6);
map.addLayer(osm);
}
/* on va procéder à l'initialisation de la carte */
initmap();
/* Creation d'un tableau qui va contenir nos donnes */
/*
* Pour chaque elt du tableay on a les coordonnées géographiques
* une valeur ainsi que le nom de la région française
*/
var tableau = [
[48.58476, 7.750576, 12187, 'Alsace'],
[44.837912, -0.579541, 60798, 'Aquitaine'],
[45.783088, 3.082352, 9517, 'Auvergne'],
[47.32167, 5.04139, 21219, 'Bourgogne'],
[48.114722, -1.679444, 35008, 'Bretagne'],
[47.9025, 1.909, 42865, 'Centre'],
[48.9575, 4.365, 9739, 'Champagne-Ardenne'],
[41.9266, 8.73694, 2182, 'Corse'],
[47.24306, 6.02194, 7382, 'Franche-Comté'],
[16, -61.73334, 1573, 'Guadeloupe'],
[4.93461, -52.33033, 73, 'Guyane'],
[48.856578, 2.351828, 148436, '�le-de-France'],
[43.611944, 3.877222, 63651, 'Languedoc-Roussillon'],
[45.85, 1.25, 7475, 'Limousin'],
[49.1203, 6.1778, 13408, 'Lorraine'],
[14.6, -61.08334, 948, 'Martinique'],
[-12.77889, 45.23151, 0, 'Mayotte'],
[43.604482, 1.443962, 56363, 'Midi-Pyrénées'],
[50.637222, 3.063333, 24487, 'Nord-Pas-de-Calais'],
[49.183056, -0.369444, 16975, 'Basse-Normandie'],
[49.443889, 1.103333, 20667, 'Haute-Normandie'],
[47.21806, -1.55278, 48655, 'Pays de la Loire'],
[49.9, 2.3, 26832, 'Picardie'],
[46.581945, 0.336112, 31773, 'Poitou-Charentes'],
[43.296346, 5.369889, 121459, 'Provence-Alpes-Côte d\'Azur'],
[-20.8789, 55.4481, 1736, 'La Réunion'],
[45.759723, 4.842223, 89100, 'Rhône-Alpes']
];
/* On boucle sur le tableau pour y placer les points */
for (i = 0; i < tableau.length; i++) {
var nbAnnonces = tableau[i][2];
var couleur ="green";
if (nbAnnonces > 20000) {
if (nbAnnonces > 50000) {
couleur = "red";
} else {
couleur = "orange";
}
}
/*
* On va créer un cercle sur la carte pour chaque point
*/
var circleLocation = new L.LatLng(tableau[i][0], tableau[i][1]),
circleOptions = {
color: couleur,
fillColor: couleur,
fillOpacity: 0.5
};
var circle = new L.Circle(circleLocation,(7000 + (tableau[i][2]/4)), circleOptions);
// on rajoute un popup sur le cercle
circle.bindPopup(tableau[i][3]+ " : " + tableau[i][2]+" annonces");
// on ajoute le cercle à la carte
map.addLayer(circle);
}
</script>
</body>
</html>
Voilà maintenant que vous avez le code source, vous pouvez copier cela dans un fichier .html et le lancer dans votre navigateur.
Vous devriez alors voir apparaître une carte.
Voici le résultat en vidéo avec NetBeans comme IDE (qui présente le code source au début) et Chrome (sous Mac OS X) comme navigateur :
On va passer maintenant à quelques explications sur le code.
Explications
Logiquement si vous programmez un peu en HTML et Javascript le code présenté ci-dessus devrait vous poser aucun problème.
Mais, voici quelques précisions intéressantes !
Dans l'entête, les liens vers les fichiers CSS et JS sont fait pour les récupérer depuis le CDN de leaflet. Si l'hébergeur décide de changer de place ces fichiers, votre carte ne pourra plus fonctionner.
Il faut donc mieux télécharger la librairie et le fichier CSS pour installer ceux-ci en local.
On a décidé d'ajouter des cercles sur cette carte mais il est aussi possible d'ajouter d'autres éléments. Ainsi si vous préférez créer des rectangles c'est tout à fait possible via L.rectangle().
De même, il est possible d'ajouter vos propres marqueurs en utilisant les images de votre choix, comme présenté ci-dessous :
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
Pour toutes les possibilités en matière d'enrichissement d'une carte, vous pouvez vous tourner vers la documentation compléte de l'API de Leaflet.
Enfin, dans l'exemple on utilise le serveur de "Tile" (c'est à dire les tuiles qui correspondent à chaque portion de carte) de openstreetmap.org.
C'est très bien pour une utilisation en test mais sachez que chaque personne qui va consulter votre page web va faire des requêtes sur ces serveurs.
Ainsi, pour une utilisation en production il vaut mieux utiliser un serveur de votre cru ou un service fait pour cela.
Conclusion
Comme vous l'avez vu il est très facile de réaliser une carte interactive compatible mobile à l'aide d'Open street map et de la librairie Javascript Leaflet.
En cas de problème pensez bien à vérifier votre version de Leaflet et si le serveur de tile d'Open Street Map fonctionne correctement.
Consultant SEO
Vous voulez un avis sur le référencement de votre site ou développer votre visibilité sur Internet ?
Vous pouvez me contacter via LinkedIn ou par email : nicolas@lorenzon.ovh. (Mentions Légales)