Découverte de la librairie de Web Mapping Leaflet

1. Téléchargez : MapDemo.zip, décompressez ce fichier archive et ouvrez en suite le avec VSCode.

2. Ouvrez le fichier javascript mapManager.js, étudiez son contenu. Que fait ce code ?

1. créez un fichier HTML index.html dont le contenu du body est

   <h1>Démonstration utilisation de LeafLet</h1>
   <div id="map">
       <!-- la map-->
   </div>

2. définissez un style pour l'élement div d'identifiant map en lui fixant une largeur et une hauteur (par exemple 600 pixels sur 400 pixels)

3. dans le répertoire js créez un second fichier javaScript mapDemo.js qui

   1. importe la classe MapManager définie dans le fichier mapManager.js

   2. crée une instance de mapManager en la liant à l'élement div d'identifiant map et en centrant la carte sur Grenoble (latitude : 45.1875602, longitude : 5.7357819)

4. incluez ce script dans votre page index.html sans oublier d'inclure aussi les scripts et styles pour leaflet (version 1.9.4 au 04/02/2026). Pour cela référez vous à la page leafletjs.com/download.html

Vous devriez obtenir l'affichage suivant

1. Ajoutez des marqueurs à la carte, pour cela vous pouvez vous servir des données de localisation suivantes correspondant à différentes stations de ski de Savoie et de l'Isère

   const stationsSki = [
       { name: "Méribel Village", lat: 45.4164656, lon: 6.5650613, country: "FR", selected: false },
       { name: "Méribel-Mottaret", lat: 45.3737947, lon: 6.5809626, country: "FR", selected: false },
       { name: "Meribel-les-Allues", lat: 45.399064, lon: 6.5666055, country: "FR", selected: false },
       { name: "Courchevel", lat: 45.4140984, lon: 6.6349892, country: "FR", selected: false },
       { name: "Val-d'Isère", lat: 45.449556, lon: 6.9787389, country: "FR", selected: false },
       { name: "Les Ménuires", lat: 45.3242744, lon: 6.5388965, country: "FR", selected: false },
       { name: "Chamrousse", lat: 45.1171487, lon: 5.893161878703198, country: "FR", selected: false },
       { name: "Prapoutel", lat: 45.2567786, lon: 5.9954353, country: "FR", selected: false },
       { name:"L'Alpe d'Huez","lat":45.092401,"lon":6.0699443,"country":"FR","selected":false}
   ];

   vous devriez obtenir l'affichage suivant

   

2. La carte est centrée sur le marqueur pour Méribel Village qui est sélectionné (Rouge). Dezoomez la carte pour voir toutes les stations et vérifiez que lorsque vous cliquez sur un marqueur il est sélectionné et que la carte est recentrée sur celui-ci.

3. Il serait préférable que la carte affiche tous les marqueurs quand on charge les données de localisation. Pour cela modifier le code de MapManager afin de calculer les bornes (latitude et logitude min et max) correspondant aux coordonnées des localisations fournies et utilise celles-ci pour positionner la carte (pour cela leafLet propose une méthode fitBounds)