Combien de séisme en une heure ? En un jour ? Et en un mois ?

Dans l'article d'hier, je vous ai montré comment exploiter des données libres comme le GeoJSON et le CSV. Dans mes exemples, je me suis appuyé sur le site de l'USGS pour voir en temps réel tous les épicentres des séismes du dernier mois. J'aimerais aujourd'hui vous proposer un complément pour aller plus loin.

Voyons ensemble comment avec le JavaScript on peut améliorer notre application pour, via une liste déroulante, voir où se sont passés les séismes de la dernière semaine, du dernier jour ou même ... de la dernière heure. Ces données sont présentes également sur le site de l'USGS et sont actualisées toutes les minutes.

Création de la liste déroulante

Le GeoJSONLayer utilise une url dans ses propriétés. Ces données sont hébergées sur le site de l'USGS. Ce site répertorie donc en temps réel les séismes :

- de la dernière heure

- du dernier jour

- de la dernière semaine

- du dernier mois

Pour compléter notre application, on va créer une liste déroulante pour choisir sur quelle période de temps on souhaite voir les derniers séismes. Dès qu'on changera de choix dans la liste déroulante, automatiquement, la couche correspondante remplacera la précédente.

On crée dans un premier temps la liste déroulante :


<select id="séisme"></select>

Il faut maintenant ajouter les options dans la liste (au nombre de 4). On crée d'abord un élément Document qui va récupérer la liste déroulante que l'on vient de créer. La méthode de type Document getElementById () renvoie un objet Element représentant l'élément dont le paramètre de la fonction correspond à la chaîne spécifiée. On a donc un élément séisme rattaché à la liste déroulante via l'id "séisme" :

let séisme=document.getElementById("séisme");

On crée les différentes options de la liste :

let option1=document.createElement("option"); //create an option we will add to the dropdown list
option1.textContent="all_hour.geojson"; //define the text content we will read in the dropdown list

séisme.appendChild(option1); //add the option to the dropdown list

Et on répète cela pour les autres durées.

Ajout de l'événement quand on change d'option

Il faut maintenant définir l'événement de changement lorsqu'on clique sur une nouvelle option de la liste déroulante.

La méthode de type EventTarget addEventListener() définit une fonction qui sera appelée chaque fois que l'événement spécifié est remis à la cible. Ici, dès qu'on change d'option dans la liste déroulante qui a pour id : séisme, on souhaite déclencher la fonction dans l'événement donc on aura :

séisme.addEventListener("change", function(){
//ce qu'il se passe quand on change d'option dans la liste déroulante
      })

Il reste à définir ce qu'il se passe quand on change de services dans la fonction.

Les urls des différents services sont très similaires :

https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/duree.geojson

Et "duree.geojson" correspond au nom de chaque option. On va alors faire en sorte que quand on choisit une option (all_hour.geojson par exemple) alors l'url devient https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_hour.geojson.

On récupère donc le texte dans l'option qu'on sélectionne dans la liste déroulante, on crée une nouvelle couche GeoJSON avec l'url qui correspond. Puis on l'ajoute à la carte :

séisme.addEventListener("change",function()

{
let selectedService=séisme.options[séisme.selectedIndex].textContent; //get the name of the option the user has selected from the dropdownlist

let layer = new GeoJSONLayer({

url:"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/" +selectedService, //create the url corresponding to the option the user has selected
renderer:renderer,
popupTemplate:template,
        })
map.removeAll(); //we only need one service loaded 
 map.add(layer); //we add the service the user chose
      })

Le code complet est disponible sur mon github.

Avec cette petite application cartographique, l'utilisateur peut voir à chaque clic sur une option, les derniers séismes enregistrés dans le monde.

Pour accéder directement à cette application, cliquez ici.

Vous voulez vous aussi réaliser des applications Web cartographiques et dynamiques? N'hésitez pas à souscrire à un plan gratuit ArcGIS for Developers pour développer vos propres applications cartographiques 2D ou 3D ! Cet article résume ce que vous obtiendrez. Et pour en savoir sur l'API c'est ici.