Dans un article précédent, je vous faisais part des bienfaits de la webmap et
de sa configuration sans code pour alléger votre effort de développement aussi
bien pendant la conception que pendant le maintien de votre application
cartographique.
En utilisant le Map Viewer, nous avons pu configurer
cette carte des Parcs nationaux de France
incluant notamment des informations de fréquentation :
Ensuite, nous avons vu comment il était très facile de l'intégrer dans une app
web en quelques lignes de code avec
cette application
:
Aujourd'hui, je vous propose de voir ensemble comment ajouter des
comportements personnalisés à cette application en utilisant notamment le SDK
JavaScript d'ArcGIS et le Calcite Design System pour ajouter des comportements
et une interface utilisateur qu'on ne peut pas obtenir avec le Map Viewer.
Voici les modifications nous allons apporter :
- Ajouter une fenêtre d'information pour donner plus de contexte sur l'application et créditer les données ;
- Ajouter un bouton à bascule pour afficher ou non la symbologie sur la fréquentation ;
- Ajouter une frise temporelle pour afficher les parcs selon leur année d'ouverture.
Chacune des fonctionnalités fera l'objet d'un article. Et voici
le résultat
que nous allons obtenir à la toute fin :
Allez c'est parti, je vous montre cela ! 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.
Intégration de base
A la fin de l'article précédent, je vous avais montré comment intégrer la
webmap dans une app web. Je le modifie légèrement pour la suite, en déplaçant
certains éléments (nous allons par exemple afficher la légende en haut à
droite de l'ui et la ranger dans un bouton qui peut déployer une fenêtre avec
le composant
<arcgis-expand>).
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Parcs nationaux de France</title>
<link rel="stylesheet" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/3.0.2/calcite.css" />
<script type="module" src="https://js.arcgis.com/calcite-components/3.0.2/calcite.esm.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.32/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.32/"></script>
<script type="module" src="https://js.arcgis.com/map-components/4.32/arcgis-map-components.esm.js"></script>
</head>
<body>
<arcgis-map item-id="55496d29650f4e11b53b4c9d724519cc">
<arcgis-zoom position="top-left"></arcgis-zoom>
<arcgis-expand position="top-left" expand-tooltip="Explorer les signets">
<arcgis-bookmarks></arcgis-bookmarks>
</arcgis-expand>
<arcgis-expand position="top-left" expanded expand-tooltip="Légende">
<arcgis-legend></arcgis-legend>
</arcgis-expand>
</arcgis-map>
</body>
</html>
Nous allons également externaliser le style dans un CSS séparé :
html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
Dans le HTML, pensez bien à ajouter la référence au fichier CSS en donnant le
chemin d'accès et le nom selon ce que vous avez choisi (ici chez moi,
style.css).
La base est posée, mais avant de rajouter les différentes fonctionnalités
attendues, nous allons ajouter 3 lignes de code qui nous permettront d'éviter
des problèmes dans l'application. Pour ajouter des comportements
personnalisés, nous allons ouvrir une balise <script> dans le
<body> qui va nous permettre d'appeler du JS depuis notre HTML, dans
laquelle nous rajoutons les lignes de code suivantes :
<script>
customElements.whenDefined("arcgis-map").then(() => {
const arcgisMap = document.querySelector("arcgis-map");
arcgisMap.addEventListener("arcgisViewReadyChange", async (event) => {
// Tout le code JS du tutoriel ira ici
});
});
</script>
La première permet d'attendre que le composant <arcgis-map> soit bien
défini dans le DOM et donc prêt à l'emploi, et évite des erreurs qui
pourraient arriver si notre code essayait d'y accéder trop tôt.
La deuxième récupère le composant <arcgis-map> dans une variable
qui nous servira à accéder au dit composant dans la suite du code.
La troisième ligne permet de vérifier que la vue de notre carte soit
entièrement chargée (fond de carte, couche...), ce qui évite notamment que la
suite du code se déclenche trop vite et engendre des erreurs d'accès aux
couches.
Tout le JS que nous écrirons par la suite sera placé à l'intérieur du
troisième bloc.
Ajouter une fenêtre d'information
Première étape : ajouter une fenêtre d'information qui vient se superposer à
mon application.
Ajout d'un bouton à l'ui
Pour cela, je vais commencer par insérer un bouton à la suite de ceux déjà
présents en haut à gauche de l'ui, qui permettra d'ouvrir la fenêtre
d'informations.
Dans le JS, nous construisons
le bouton avec un composant calcite, puis nous renseignons ses paramètres :
const infoButton = document.createElement("calcite-button");
infoButton.id = "infoButton";
infoButton.setAttribute("appearance", "solid");
infoButton.setAttribute("scale", "m");
infoButton.setAttribute("icon-start", "information");
infoButton.classList.add("esri-widget", "esri-component");
infoButton.label = "Explorer les signets";
Nous venons ensuite sélectionner la partie de l'ui qui nous intéresse (ici, en
haut à droite comme le reste des boutons déjà présents) et y ajoutons le
bouton :
const uiTopLeft = document.querySelector(".esri-ui-top-left");
uiTopLeft.appendChild(infoButton);
Vous constatez que votre bouton est bien présent, mais il s'affiche en bleu,
ce qui ne correspond pas totalement au reste de l'ui... Comme à chaque fois
qu'un élément visuel nous déplait, nous nous rendons dans le CSS. En modifiant
les règles régissant l'affichage du boutons, nous obtenons un style identique
au reste de l'ui :
calcite-button {
--calcite-color-brand: #ffffff;
--calcite-color-brand-hover: #f3f3f3;
--calcite-color-text-inverse: #4a4a4a;
--calcite-color-brand-press: #c7eaff;
} Création de la fenêtre
Super ! Nous avons ajouté un bouton qui pour l'instant... ne sert à rien.
Enfin pour l'instant. Nous allons maintenant créer la fenêtre qui va se
surimposer au reste de l'application pour nous donner des informations
supplémentaires sur l'application ainsi que sur les sources de données
utilisées.
Pour créer la fenêtre, nous allons utiliser le composant
Dialog
de Calcite. Comme le reste des composants, nous l'ajoutons côté HTML, toujours
dans la balise <arcgis-map> :
<calcite-dialog modal drag-enabled heading="Parcs Nationaux de France" id="informations">
<div id="description"></div>
<div id="credit"></div>
</calcite-dialog>
Dans le composant, nous configurons le titre, ainsi que divers paramètres
disponibles (possibilité de drag, fenêtre modale...). Tous les paramètres
qu'il est possible d'utiliser sont décrits dans la documentation. Nous
insérons également deux balises qui contiendront une description de
l'application ainsi que les sources des données.
Pour remplir la fenêtre avec du texte, nous pourrions écrire en dur tout dans
le HTML, mais ce n'est pas super élégant... Au lieu de faire cela, nous
allons tirer parti de la classe
PortalItem
de l'API JS, qui va nous permettre d'accéder aux informations contenues dans
la description de l'item sur le portail. Ici pour la webmap, j'ai par exemple
renseigné un résumé et des crédits, que nous allons pouvoir récupérer
directement. L'avantage, c'est que si l'on met à jour la description de la
webmap, notre application le reflètera directement (et, de la même manière, si
l'on connecte une autre webmap via un autre itemid, le contenu de cette
fenêtre sera également automatiquement modifié en fonction).
Dans le JS, je récupère donc les deux balises de description et de crédit dans
le DOM puis je les remplis avec les propriétés
snippet
et
accessInformation
du
PortalItem, correspondant respectivement au résumé et au crédits renseignés sur le
portail :
const infoContent = document.getElementById("description");
const creditContent = document.getElementById("credit");
const {
portalItem
} = event.target.map;
infoContent.innerHTML = portalItem.snippet;
creditContent.innerHTML = portalItem.accessInformation;
De nombreuses autres propriétés de l'item sont accessibles grâce au
PortalItem, donc n'hésitez pas à user et abuser de cette classe :
Connexion de la fenêtre au bouton
Votre fenêtre est peut-être super, peut-être pas, pour l'instant c'est dur à dire car vous ne pouvez pas y accéder... La fonction
addEventListener
me permet très simplement d'écouter le clic de l'utilisateur sur le bouton et
d'ouvrir la fenêtre en réponse :
infoButton.addEventListener("click", () => {
document.getElementById("informations").open = true;
});
Voici le résultat obtenu :
Voilà une première fonctionnalité ajoutée à l'application ! Dans le prochain article, nous continuerons à la personnaliser en ajoutant un autre
type de bouton qui nous permettra de passer d'une couche de la carte à
l'autre, alors restez connectés.
Aucun commentaire:
Enregistrer un commentaire