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

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. Aujourd'hui, nous verrons comment ajouter un deuxième type de bouton qui, grâce à une connexion aux couches présentes sur la carte, pourra basculer d'une couche visible à une autre, ainsi qu'étendre ou réduire la légende.

Pour rappel, la webmap est composée de deux couches : la première représente les parcs nationaux avec une symbologie selon leur fréquentation totale, et la seconde sans symbologie particulière, donnant uniquement l'emplacement des parcs. Le bouton permettra à l'utilisateur de choisir l'affichage qu'il préfère.

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 bouton à l'interface

Comme tout à l'heure, nous commençons par ajouter le bouton à l'interface de l'application. Nous utiliserons un bouton à bascule, traduisant bien cette idée de "basculer" d'une couche à une autre.  Au lieu de recréer le bouton par nous-même, nous allons utiliser le composant Switch de Calcite, le design system mis à disposition par Esri.

Dans le HTML, nous ajoutons donc le composant (toujours au sein du composant </arcgis-map>) :

<div id="switch-container">
  <h4>
    Afficher la fréquentation
    <calcite-switch id="switchbutton" checked></calcite-switch>
  </h4>
</div>

Grâce au paramètre "checked", le bouton sera activé par défaut. Vous remarquez également l'ajout du texte "Afficher la fréquentation", qui indique à l'utilisateur la fonction du bouton.

Pour l'instant, le bouton s'intègre très mal dans le reste de l'app. Un peu de css va nous permettre d'améliorer cela.

Cette première règle nous permet d'afficher le texte et le bouton dans un rectangle blanc légèrement transparent qui va se superposer à la carte :

#switch-container {
  position: absolute;
  bottom: 4%;
  left: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

Nous allons ensuite modifier le style du texte pour qu'il corresponde mieux au reste de l'app:

h4 {
  font-weight: normal;
  font-size: 100%;
  font-family: "Avenir Next", "Avenir", "Helvetica Neue", sans-serif;
  color: #473b40;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

Enfin, le bleu du bouton ne se marie pas très bien au style de l'application. Il s'agit de la couleur d'accentuation par défaut utilisée par les composants Calcite. Nous allons modifier cela, en choisissant une couleur vert foncée à la place. Pour que les composants que nous ajouterons dans le futur prennent aussi cette couleur par défaut, encapsulez tous les composants dans cette balise (que vous ouvrez donc juste après l'ouverture du body et que vous refermez après la fermeture de l'arcgis-map)  :

<calcite-shell>...</calcite-shell>

Vous pouvez ensuite ajouter cette règle au css, qui modifiera la couleur d'accentuation de tous les composants qui seront ajoutés au sein du Shell :

calcite-shell {
  --calcite-color-brand: #57a59d;
}

Voilà le résultat obtenu :

Connexion des couches au bouton

Nous allons maintenant faire en sorte que la couche visible change lorsque l'utilisateur actionne le bouton. Côté JS, nous allons récupérer le bouton switch dans le DOM et accéder aux couches de la webmap grâce au SDK :

        const infoContent = document.getElementById("description");
        const creditContent = document.getElementById("credit");
        
        const {
          portalItem
        } = event.target.map;
        infoContent.innerHTML = portalItem.snippet;
        creditContent.innerHTML = portalItem.accessInformation;

Nous allons ensuite créer une fonction qui teste la visibilité d'un des deux calques, puis qui l'inverse : si layer_frequentation est visible, elle la cache et affiche layer_location, et inversement :

        const changeVisibility = () => {
            const isShowingFrequentation = layer_frequentation.visible;
            layer_location.visible = isShowingFrequentation;
            layer_frequentation.visible = !isShowingFrequentation;
          };

Il ne reste plus qu'à écouter l'activation du bouton pour enclencher la fonction :

        switchbutton.addEventListener("calciteSwitchChange", changeVisibility);

Voilà le résultat :

Ouverture dynamique de la légende 

Lorsque nous n'affichons pas la fréquentation des parcs, la légende n'a pas grand intérêt. Nous allons donc faire en sorte qu'elle se réduise au moment du clic sur le bouton switch. Comme d'habitude, nous récupérons la légende dans le DOM (notez ici qu'elle est encapsulée dans un composant Expand pour permettre le développement et la réduction) :

        const legendExpand = document.querySelector("arcgis-expand arcgis-legend")?.closest("arcgis-expand");

Et il nous suffit ensuite de rajouter cette ligne à la fonction changeVisibility qui va venir inverser le paramètre expanded, pour ouvrir ou fermer la fenêtre :  

          legendExpand.expanded = !isShowingFrequentation;

Un dernier truc qui me dérange particulièrement, c'est cet élément de la légende :

Il n'apporte pas grand chose et est plutôt disgracieux... On va le faire disparaître avec un petit coup de css :

.esri-legend__layer-body {
  display: none;
}

Voilà le résultat final du tuto d’aujourd’hui :

Dans le prochain (et dernier) épisode de cette mini-série, nous allons ajouter un slider pour faire apparaître ou disparaître les parcs de la carte selon leur année d'ouverture, restez connectés !