Conseils & Astuces ArcGIS Online - N°149
N° 149 - Exploiter des éléments de contenu Arcade "Texte enrichi" dans vos fenêtres contextuelles
Depuis les premières versions du langage d'expression Arcade, vous pouvez l'utiliser dans les fenêtres contextuelles (pop-up) de vos cartes web avec des expressions d'attributs. Cependant, comme vous êtes devenu plus expérimentés et à l'aise avec Arcade, vous voulez désormais en faire plus. Et bien ça tombe bien car, depuis la mise à jour de décembre 2021 d'ArcGIS Online, Esri vous donne de nouvelles options pour être plus créatifs et proposer des fenêtres contextuelles encore plus dynamiques et attrayantes. Au lieu de simplement pouvoir renvoyer des attributs (un peu comme un champ virtuel) à partir de votre expression Arcade, vous pouvez désormais utiliser Arcade pour définir des blocs entiers de contenu dans votre pop-up et l'afficher comme n'importe quel élément de contenu existant (diagrammes, images, listes de champs, etc).
En quoi est-ce différent ?
Pour construire des fenêtres contextuelles modernes, il est important d'une part de pouvoir calculer dynamiquement des valeurs à partir des attributs des entités et d'autre part de pouvoir mélanger différents éléments de contenu (média, liste de champs, texte enrichi). Auparavant, il était fréquent de recourir à plusieurs expressions pour préparer différentes parties du contenu de la fenêtre contextuelle puis de configurer la représentation de ces contenus. Cela pouvait conduire à de multiples requêtes et parfois des petits compromis sur la performance d'affichage de la fenêtre contextuelle (notamment lors d'interrogation de données dans des couches externes).
 |
| Ajouter un élément de type "Arcade" dans un fenêtre contextuelle |
Avec les éléments de contenu Arcade, vous pouvez utiliser Arcade pour consolider les données dont vous avez besoin mais également définir le rendu de ces données, et ceci dans une seule et même expression. :
- Diagrammes
- Liste formatée de champs
- Texte enrichi
Dans l'expression Arcade, vous définirez non seulement le contenu des informations à afficher dans la fenêtre contextuelle à partir des attributs de l'entité, mais également d'autres aspects du contenu, le cas échéant, comme son titre, sa description, son texte alternatif, etc., vous donnant un contrôle total et facilitant la réutilisation de la logique et des données. Les éléments de contenu Arcade sont compatibles avec toute application utilisant les récentes versions (4.x) du SDK ArcGIS Maps for JavaScript.
Comment ça marche ?
Avant de plonger dans un exemple, parlons rapidement de ce que vous devez savoir. Les éléments Arcade diffèrent légèrement des expressions d'attribut traditionnelles. Au lieu de renvoyer un nombre, une date ou une chaîne, ils renvoient un dictionnaire dont la structure et la casse correspondent à la spécification des cartes web ArcGIS pour chaque type d'élément de contenu. Vous pouvez trouver les premières informations sur cette spécification ici.
Pour vous aider à démarrer plus facilement lorsque vous souhaitez ajouter des éléments de contenu Arcade à votre fenêtre contextuelle, Esri a inclus une série de modèles qui décrivent la structure et la casse attendues du dictionnaire en fonction du type de contenu que vous voulez utiliser. Le plus simple pour commencer est le modèle "Texte enrichi" et c'est aussi la valeur par défaut. Alors, commençons par là.
 |
| Ajouter la structure d'expression Arcade correspondant au type de contenu souhaité (ici "Texte enrichi") |
Utilisation du Texte enrichi
Le texte enrichi peut être puissant car il vous permet d'accéder à toutes les balises HTML prises en charge dans ArcGIS Online. C'est également une fonctionnalité très demandée qui se trouve donc implémentée via cette notion d'élément de contenu.
Prenons l'exemple d'une couche des séismes récents dans le monde pour laquelle nous souhaitons présenter la magnitude de chaque séisme. Dans cet exemple, nous allons ajouter une couche "live" des tremblements de terre dans la carte et configurer une fenêtre contextuelle qui :
- Catégorise les valeurs brutes de magnitude (mineur, léger, modéré, fort, ...) et les valeurs de profondeur (faible, moyenne,
- Code couleur des catégories de magnitude en fonction de la taille
- Formater les données pour les rendre plus lisibles
- Ajouter un lien vers le site USGS pour plus d'informations
- Montrez une image de l'échelle de Richter pour donner un peu de contexte
Voici un aperçu rapide de ce que nous recherchons et une carte où vous pouvez regarder de plus près vous-même et copier l'expression ci-dessous :
Tout ce que j'ai décrit ci-dessus est possible de faire aujourd'hui avec un élément de contenu textuel existant. Cependant, cela vous oblige à utiliser plusieurs expressions. Dans cet exemple, vous vous retrouveriez probablement avec au moins 3, voire plus. En utilisant une seule expression, vous avez plus de possibilités de consolider votre logique, de réutiliser des parties de votre expression et, en général, c'est simplement plus facile à maintenir. Examinons de près l'expression utilisée.
// On récupère la valeur de l'attributs "mag"
var mag = $feature.mag
// On récupère et on arrondie sur 2 chiffres l'attribut "depth"
var depth = Round($feature.depth,2)
// On prépare un dictionnaire des différentes catégories de magnitudes
// et des couleurs associées
var magCats = [{"name":"Mineur à Léger","color":"#CBBE15"},
{"name":"Modéré à Fort","color":"orange"},
{"name":"Majeur à Grand","color":"red"},
{"name":"Non ressenti","color":"grey"}]
// On prépare un tableau des différentes catégories de profondeur
var depthCats = ["faible","moyenne", "fort"]
// Formatage de la date du séisme récupérée depuis l'attribut "eventTime"
var dateSimple = Text($feature.eventTime,'dddd DD MMM YYYY')
// Récupération de la couleur correspondant à la magnitude
var findMagCatandColor = When(mag <= 4.9,magCats[0],
mag <= 6.9, magCats[1],
mag > 6.9, magCats[2],
magCats[3])
// Récupération de la catégorie correspondant à la profondeur
var findDepthCat = When(depth <= 70, depthCats[0],
depth <= 300, depthCats[1],
depth > 300, depthCats[2],
"profondeur inconnue")
// On retourne l'élément de contenu pour un contenu de type "texte riche"return {
"type" : "text",
"text" : `<p>Le ${dateSimple}, un séisme <span style="color:${findMagCatandColor.color};">
${findMagCatandColor.name} </span> s'est produit à une ${findDepthCat} profondeur (${depth}km).</p>
<a href="${$feature.url}">Cliquer ici pour en savoir plus.</a>
<img src="https://esrifrance.maps.arcgis.com/sharing/rest/content/items/6dec784be48d4d368d2668db8eaedf83/data"></img>`
Vous remarquerez que dans cet exemple (accessible en live ici), nous utilisons des littéraux de gabarit au lieu d'une chaîne classique lors du renvoi de la propriété "text" du dictionnaire. Les littéraux de gabarit facilitent la lecture des chaînes complexes, car leur notation facilite la substitution dans les variables et permet à la chaîne elle-même de rester lisible dans le code. De plus, comme HTML prend en charge les nouvelles lignes de manière native, vous pouvez facilement copier et coller en HTML, puis remplacer ou ajouter vos variables selon vos besoins tout en pouvant lire facilement les résultats. Comme en JavaScript, on notera l'usage caractère ` backtick ` pour construire des littéraux de gabarit.
Lors du retour d'éléments de contenu de texte enrichi, le dictionnaire retourné doit avoir deux propriétés "type" et "text". Le premier (type) informe la fenêtre contextuelle elle-même du type de contenu à attendre de l'expression Arcade. Le second (text) est le code HTML ou le texte que vous souhaitez afficher dans la fenêtre contextuelle. Les graphiques et les listes de champs ont une structure plus compliquée que j'aborderai dans un prochain "Conseil & Astuce ArcGIS Online".
Un autre exemple qui illustre ces nouvelles capacités de contenus dans les fenêtres contextuelles c'est la couche ci-dessous qui contient les informations de partage de localisation des utilisateurs (capacité standard d'ArcGIS Online sur les utilisateurs "Field Worker". Si vous afficher la couche "Partage de la localisation" dans Map Viewer vous pourrez constater qu'une fenêtre déjà stylisée facilite l'interaction avec les données de positions et de traces en dehors de Track Viewer. Pour permettre de faire ressembler la fenêtre contextuelle à celle qui s'affiche dans l'application Track Viewer, Esri utilise des éléments de contenu Arcade.
En espérant que ces 2 exemples ci-dessus vous donnent quelques idées sur la façon dont vous pourriez appliquer cette nouvelle capacité Arcade à vos fenêtres contextuelles. Peut-être avez-vous déjà eu une excellente idée et il ne reste alors qu'à vous mettre au travail. Restez à l'écoute du prochain "Conseils & Astuce ArcGIS" où je traiterai des diagrammes et des listes de champs. N'oubliez pas de vous diriger vers la documentation Arcade pour en savoir plus sur ce nouveau profil popupElement Arcade.
Bonne route sur ArcGIS Online !
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online, cliquez sur ce lien
2 comments :
Bonjour Gaëtan,
Suite à la lecture de ton article, je cherche à accéder à ces fonctions de texte enrichi dans arcgis online et je ne les trouve pas.
Dois-je configurer quelques chose de particulier ?
Merci
William GUERIN, Comm. Agglo. Lens Liévin
Bonjour William,
J'ai ajouté une copie d'écran dans l'article qui le rendra peut-être plus clair. Pour pouvoir construire une fenêtre contextuelle (pop-up) avec du texte enrichi comme dans l'exemple, il faut tout d'abord insérer dans la fenêtre contextuelle un contenu de type "Arcade". Ensuite, une fois dans l'éditeur Arcade, le plus simple est de charger (depuis le bouton "Suggestions") la structure de base de l'expression Arcade qui permet de renvoyer du contenu de type "Texte enrichi" comme dans la copie d'écran suivante.
Enregistrer un commentaire