Géomatique : Leafleat

Exercice 1 - Leaflet - Prix de l'essence E10 en Seine et Marne

1. Downloader le fichier JExpress.java ainsi que le fichier exo1.html et placer les dans le répertoire courant.
   Le répertoire courant doit aussi contenir le fichier GeoJSON de l'exercice précédent.
   Lancer le serveur avec java JExpress.java et vérifier que vous arriver à voir le fichier HTML exo1.html à l'adresse http://localhost:8080/exo1.html.
   A partir de maintenant, vous pouvez éditer votre fichier exo1.html avec votre éditeur préféré et juste faire un refresh dans le navigateur, vos modifications seront prises en compte.


2. Modifier le fichier exo1.html pour ajouter le fichier CSS de leaflet ainsi que le fichier JavaScript de leaflet aux endroits indiqués.
   Dans la fonction enregistrer en tant que window.onload, utiliser la méthode L.map(elementId) de leaflet pour créer une map et afficher l'objet JavaScript correspondant sur la console.
   Note: ce n'est pas comme cela que l'on fait dans une vraie application Web, on ne charge pas les dépendances à partir d'un CDN, nous verrons plus tard comment faire cela correctement.


3. On va maintenant centrer la carte sur le milieu de la Seine-et-Marne, pour cela utiliser QGIS pour récupérer la latitude et la longitude (en coordonnée décimale), disons proche de "Chaumes en Brie", puis ajouter des options à la méthode L.map(elementId, options) permettant d'indiquer la latitude et la longitude ainsi que qu'un facteur de zoom de 9.
   N'hésitez pas à lire la documentation pour savoir quelles est le nom des options dont nous avons besoin.


4. On va créer un layer en tuile avec le fond de carte en utilisant les tuiles d'OpenStreetMap

           var layer = L.tileLayer(/*TODO*/, {
               maxZoom: 15,
               attribution: /*TODO*/
             });
          

   puis ajouter le à la carte


5. On va créer un marker au centre de la Seine-et-Marne avec L.marker([long, lat], options) avec comme titre "center of Seine-et-Marne".
   puis on va ajouter celui-ci à la carte.


6. On va commenter le code précédent puis on demander au serveur de charger les données du fichier GeoJSON en utilisant la fonction fetch.
   Vérifier que les données sont bien arrivées en les affichant dans la console.
   Note: on n'a pas encore vu en cours ce que faisait exactement await et fetch mais disons que lorsque l'on accède à des resources extérieur, il faut mettre le script en attente que les données arrivent, ici, comme les données sont au format JSON, il faut de plus attendre qu'elles soient décodées.


7. On va maintenant prendre les données GeoJSON et les afficher comme Marker sur un layer.
   Pour créer le layer à partir des données GeoJSON, on utilise la méthode L.geoJSON(data) qui créé un nouveau layer que l'on affiche sur la carte.


8. On veut ajouter une Popup qui affiche le prix de l'essence E10.
   Qu'affiche le code suivant dans la console lorsque l'on clique sur un des markers de la carte ?
   

            geoLayer.bindPopup(function (layer) {
              console.log(layer.feature.properties);
              return "hello";
            });
          

   
   Comment modifier le code pour afficher "E10" suivi du prix de l'essence E10 ?
   


9. Comme dans QGIS avec les filtres sur un Layer, on peut filtrer les markers créés à partir des données GeoJSON pour afficher uniquement les stations essences ayant un prix du E10 supérieur à 1.8.
   Pour cela, on va utiliser l'option filter de la méthode L.geoJSON(data, options).
   Modifier votre code pour afficher uniquement les markers des stations essences ayant un prix pour le E10 supérieur à 1.8
   


10. Modifier votre code pour ne pas afficher les deux stations près de Nemours en les filtrant par rapport à leurs id.


11. Pour finir, changer le fond de carte pour avoir une carte avec moins de détails pour que l'on voie mieux les prix de l'essence.


12. Pour les plus balèzes, en option, faite en sorte que, au lieu d'afficher uniquement des Markers, le layer du GeoJSON affiche les markers avec aussi le tooltip correspondant au prix (de façon permanente).
    Pour cela, nous allons utiliser l'option pointToLayer de la méthode geoJSON(data, options)


13. Toujours, pour les plus balèzes, dans tout le script on a écrit en dure "e10_prix", et si on veut le prix du gazole ?
    Faite en sortes que le prix que l'on affiche soit déclaré comme une constante et que si l'on change cette constante, cela change le prix partout.