Aller plus loin que la webmap avec le SDK JavaScript d'ArcGIS #03

Dans cette série de 3 épisodes, je vous montre comment utiliser le SDK JavaScript d'ArcGIS pour ajouter des comportements personnalisés dans vos webmaps, pour créer l'application suivante : 

Dans le premier épisode, nous avons vu comment ajouter un bouton relié à une fenêtre conçue pour donner davantage d'informations sur l'application. Dans le deuxième épisode, nous avons ajouté un deuxième type de bouton pour basculer d'un calque de la webmap à un autre et étendre ou réduire la légende. Aujourd'hui, nous allons ajouter un slider connecté au données, qui permettra d'afficher ou de cacher les parcs sur la carte selon leur année d'ouverture. 

 

Comme d'habitude, vous pouvez suivre ce tutoriel pour comprendre les étapes pas à pas, mais vous pouvez également retrouver le code complet sur mon Github ou en mode bac à sable dans CodePen.  

Ajout du slider à l'interface

Vous commencez à avoir l'habitude, la première étape sera d'ajouter le composant à l'interface, ici en l’occurrence un Slider issu du Calcite Design System. Côté html, je viens me positionner à l'intérieur du <calcite-shell> mais en dehors de l' <arcgis-map> . Pour que nos éléments se positionnent bien les uns par rapport aux autres, nous allons intégrer le slider dans l'élément de mise en page Shell Panel. Voici à quoi ressemble le code avec le paramétrage complet :

<calcite-shell-panel id="slider-panel" slot="panel-bottom" layout="horizontal">
  <div id="slider-container">
    <span id="slider-label">Années d'ouverture des parcs nationaux :</span>
    <calcite-slider
      id="yearSlider"
      label-handles
      label-ticks
      scale="m"></calcite-slider>
  </div>
</calcite-shell-panel>

Le slider est bien intégré, mais c'est un peu malheureux côté mise en page, mais que le slider est déjà de la bonne couleur grâce à la règle css que nous avions ajoutée dans l'épisode précédent. Pour le reste, voici les règles qui nous permettront d'obtenir la bonne mise en page :

#slider-container {
  width: 98%;
  padding-left: 0.7rem;
}
arcgis-map {
  position: relative;
}

Récupération de toutes les années d'ouverture de parcs 

Nous allons requêter la coucher layer_frequentation pour récupérer toutes les années d'ouverture grâce à table attributaire. Pour cela, nous préparons une query grâce à la méthode createQuery(). Cette requête va récupérer les valeurs distinctes du champ annee_creation, triées par ordre croissant, et non nulles :

          const query = layer_frequentation.createQuery();
          query.outFields = ["annee_creation"];
          query.returnDistinctValues = true;
          query.orderByFields = ["annee_creation ASC"];
          query.where = "annee_creation IS NOT NULL";

Nous exécutons ensuite la requête, puis transformons le résultat renvoyé en tableau de nombre afin qu'il soit facilement utilisable par la suite : 

          const results = await layer_frequentation.queryFeatures(query);
          const years = results.features.map(f => f.attributes.annee_creation);

Configuration des paramètres du slider

Nous pouvons maintenant récupérer les résultats pour paramétrer le slider : le min correspond à la plus ancienne date d'ouverture d'un parc, le max à la date actuelle pour que le slider continue jusqu'à aujourd'hui, et la value (la valeur que prendra le slider au démarrage de l'app) la date d'ouverture de parc la plus récente.

          const yearMin = Math.min(...years);
          const yearMax = Math.max(...years)
          const difference = yearMax - yearMin;
          const currentYear = new Date().getFullYear();

          yearSlider.labelTicks = true;
          yearSlider.ticks = difference;
          yearSlider.min = yearMin
          yearSlider.max = currentYear
          yearSlider.maxLabel = String(currentYear);
          yearSlider.value = yearMax

Le fait de tout calculer de cette manière plutôt que d'écrire les valeurs en dur dans le code permet que si la donnée est mise à jour (par exemple avec l'entrée d'un nouveau parc), cela se reflètera immédiatement dans le slider sans mise à jour du code.

Filtrage dynamique de la couche visible en fonction de la position du slider

Nous allons maintenant faire en sorte que les parcs s'affichent que si le slider est positionné sur une valeur supérieure ou égale à leur année d'ouverture. Nous allons pour cela ajouter un callback via un addEventListener à l'événement calciteSliderInput du slider, ce qui permettra de récupérer la nouvelle valeur lorsque l’utilisateur interagit avec celui-ci. La propriété definitionExpression des couches nous permet ensuite d'appliquer un filtre SQL pour n'afficher que les entités des couches dont l'année de création est inférieure à la valeur actuelle du slider :

          yearSlider.addEventListener("calciteSliderInput", () => {
            const val = yearSlider.value;
            layer_frequentation.definitionExpression = `annee_creation <= ${val}`;
            layer_location.definitionExpression = `annee_creation <= ${val}`;
          });

Aimantation du slider aux stops 

L'application correspond déjà à nos attente, mais je vous propose une dernière étape optionnelle qui va nous permettre d'aimanter le slider aux stops, c'est-à-dire aux années où des parcs nationaux ont été créés, afin d'améliorer l'expérience utilisateur. 

Pour cela, nous rajoutons simplement ces deux lignes à la fonction créée juste avant, qui vont rechercher l'année d'ouverture la plus proche et ajuster la valeur du slider sur celle-ci :

            const nearest = years.reduce((prev, curr) => (Math.abs(curr - val) < Math.abs(prev - val) ? curr : prev));
            yearSlider.value = nearest;

Voilà le résultat : 

Grâce à l'aimantation, l'utilisateur a une information plus claire sur les années d'ouverture des parcs.

Nous voilà arrivés à bout de cette série ; vous avez maintenant les clés pour intégrer une webmap avec les composants du SDK JavaScript d'ArcGIS, puis l'étendre avec des comportements personnalisés ! N'hésitez pas à consulter les autres tutoriels de ce blog pour en apprendre plus sur les APIs et SDKs d'ArcGIS 🌍