Leaflet (http://leafletjs.com/) est une bibliothèque JavaScript, "open source", permettant d'afficher des cartes interactives dans une page web. Pour suivre ces activités, il est nécessaire d'avoir des connaissances en matière de programmation JavaScript (si ce n'est pas votre cas, vous pouvez suivre cette série d'activités) et quelques notions d'HTML et de CSS (si ce n'est pas votre cas, vous pouvez suivre cette série d'activités).

N.B : Il est indispensable d'être connecté à internet pour suivre cette série d'activités.

Avant de nous intéresser à Leaflet, nous allons mettre en place notre environnement de travail :

À faire vous-même 1.1

Dans votre répertoire de travail, créez un dossier "leaflet". En vous plaçant dans ce dossier "leaflet", créez un dossier "leaflet_0".

Dans le dossier "leaflet_0", créez 3 fichiers :

À faire vous-même 1.2

À l'aide d'un éditeur de texte, saisissez le code suivant dans les fichiers que vous venez de créer :

index.html 


<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Leaflet</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/>
<link rel="stylesheet" href="style.css"/>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
</head>
<body>
 <h1>Afficher une carte avec Leaflet</h1>
 <div id="map"></div>
</body>
<script src="script.js"></script>
</html>

style.css 


h1 {
    text-align:center;
}
#map {
    width : 800px;
    height : 800px;
    margin-left: auto;
    margin-right: auto
}

script.js 


// Ce fichier est pour l'instant vide

Rien de très compliqué pour ces 2 fichiers :


<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>

Ces 2 lignes nous permettent de charger la bibliothèque leaflet (fichier "leaflet.js") et le style associé à cette bibliothèque ("leaflet.css").


 <div id="map"></div>

Cette ligne permet de créer une "div" d'id "map". C'est cette "div" qui "accueillera" la carte.

Au niveau du fichier "style.css", nous centrons le titre et nous centrons la "div" après lui avoir donné des dimensions (800 par 800). Évidemment, vous pouvez modifier ces valeurs comme bon vous semble.

Vous avez sans doute noté la place inhabituelle de la ligne "<script src="script.js"></script>". Ceci est dû au fait que le script "script.js" doit être exécuté uniquement une fois que la "div" est en place.

Dans la suite de ces activités, il suffira, à chaque fois que vous voudrez créer un nouvel exemple, de "copier-coller" le dossier "leaflet_0" et de le renommer ("leaflet_1", "leaflet_2",...)