Géomatique : Leafleat + DOM + Évènements

Exercice 1 - Leaflet - Nombre de chômeurs en Ile-de-France

Voilà une idée du rendu de l'application que l'on souhaite obtenir

1. On va réutiliser le fichier JExpress.java pour le serveur Web. Et nous allons utilisez le fichier exo1.html comme base de démarrage.


2. Dans un premier temps, on cherche à calculer combien de chômeurs maximum il y a en 2009 (chom2009) dans le fichier geojson.
   Le plus simple pour cela est de faire une boucle sur toutes les features du GeoJSON, et pour chaque feature d'aller chercher la valeur chom2009.
   Note: vous devriez trouver 15120.39, et oui, c'est un nombre avec des virgules, car si quelqu'un est au chômage pendant 3 mois, il compte comme 0.25.
   Note 2: vous avez le droit de faire une fonction, on n'est pas des sauvages !
   Note 3: Contrairement à ce que l'on vous a dit en algo, les CPUs savent très bien calculer un maximum sans if, il y a la méthode Math.max(a, b) pour cela.


3. Au lieu de faire une boucle, utiliser la méthode reduce() des tableaux pour écrire le calcul du maximum en une ligne.


4. Créer un geoLayer pour afficher le nombre de chômeurs par ville en utilisant un Marker avec en tooltip le nombre de chômeurs. Pour voir quelque chose, on ne va pas afficher de valeur si le nombre de chômeurs en inférieur à 1000.


5. On veut modifier l'affichage pour afficher des disques correspondant au nombre de chomeurs pour que cela soit plus visuellement compréhensible.
   Modifier votre code pour au lieu d'utiliser des Marker, utiliser des cercles sachant que l'on propose que le rayon soit calculé en avec la formule ci-dessous

            radius = 40 * value / max * maxMap;
        

   avec value le nombre de chômeur et maxMap la taille maximale d'un cercle (20).
   On veut, de plus, afficher le cercle en bleu, sans contour et avec une transparence à 0.5. (cf. la doc https://leafletjs.com/reference.html#circle).


6. En fait, la formule que nous avons utilisée précédemment n'est pas bonne, car le calcul du rayon du cercle doit être fait de telle façon à ce que le nombre de chômeurs corresponde à l'aire du disque. On se propose d'utiliser pour cela la formule

            radius = 40 * fromSurface(value / max * toSurface(maxMap));
        

   avec toSurface(x) la fonction qui renvoie la taille de la surface de rayon x et fromSurface(s) la fonction inverse, qui pour la une surface renvoie la taille du rayon.
   Dans un premier temps, écrire les fonctions toSurface(x) et fromSurface(s).
   Puis modifier votre code, pour utiliser la nouvelle formule.
   Note: vous devriez avoir un affichage très similaire à l'image au début du sujet !


7. On veux maintenant pouvoir changer les données en fonction de l'année sélectionnée par l'utilisateur. On va dans un premier temps, ajouter un petit code qui permet de récupérer l'objet DOM correspondant au SELECT en JavaScript et afficher dans la console l'année sélectionnée par l'utilisateur.


8. On souhaite maintenant que lorsque l'utilisateur change d'année, les données changent, le plus simple pour cela consiste à supprimer l'ancien Layer GeoJSON et ajouter un nouveau Layer avec les nouvelles valeurs.
   Pour cela, on se propose de créer une fonction createGeoLayer(data, max, prop) qui prend en paramètre les données GeoJSON, la valeur max ainsi qu'une chaine de caractère correspondant à la propriété qui nous intéresse (chom2009 pour 2009, chom2019 pour 2019).
   Modifier votre code pour qu'il continue de n'afficher que l'année 2009, mais en ayant introduit la méthode createGeoLayer.
   Note: en informatique le fait de préparer le terrain pour introduire une nouvelle feature sans pour autant introduire celle-ci s'appelle faire du refactoring.


9. Maintenant, modifier le code qui gère le SELECT pour désenregister l'ancien geoLayer (avec map.removeLayer(geoLayer)) puis ajouter le nouveau lorsque que l'utilisateur agit sur le sélecteur d'année.
   Note: attention que l'on puisse aussi désenregistrer le nouveau layer dès que l'on modifie la date une nouvelle fois.


10. Pour les plus balèzes, on calcule uniquement le max sur les chômeurs de 2009, on peut remédier à cela en calculant le max de plusieurs propriétés en même temps, en un seul passage sur les features.
    Écrire une méthode maxProperties(data, propertyNames) qui peut être appelée avec en premier paramètre les donnée geoJSON et en second paramètre un tableau des noms des propriétés qui renvoie un tableau des max de chaque propriété.
    Voici un exemple d'utilisation,

          let [max2009, max2019] = maxProperties(data, ["chom2009", "chom2019"]);
        

    
    Puis utiliser la méthode maxProperties pour calculer le max globale, pour toutes les propriétés indiquées.
    Indication: aller regarder la doc de Math.max.

Exercice 2 - Votre Projet même si vous ne l'acceptez pas