Conseils & Astuces ArcGIS Online - N°162
N° 162 - Utiliser Arcade et une API tiers pour ajouter des jauges dans
vos fenêtres contextuelles
Representer une valeur dans un fenêtre contextuelle devient parfois plus
parlant lorsque celle-ci s'accompagne d'une échelle de valeurs, de repères,
d'un min/max, ... Pour cela, des types de rendus adaptés comme des jauges
(horizontales, verticales, semi-circulaires, ...) peuvent aider à replacer
la valeur dans son contexte. Dans l'exemple que je vous propose, nous
disposons d'une couche d'entités correspondant à des capteurs de
températures installés dans différents espaces d'un bâtiment. Chaque capteur
fournit la température courante, la température moyenne sur 24h et la
température extérieure courante.
Pour représenter ces températures, nous allons utiliser des jauges
horizontales. Elles nous permettront à la fois d'afficher ces trois
températures mais aussi les valeurs extrêmes min/max possibles (en
intérieur : 15°C à 30°C, et en extérieur : -10° à 45°C). Etant donné
que ce type de diagramme n'est pas encore disponible dans les diagrammes
standards des fenêtres contextuelles ArcGIS, nous utiliserons donc une API
tiers pour générer ce diagramme. Voici comment nous allons procéder :
-
Connectez-vous tout d'abord sur votre portail ArcGIS puis ouvrez la
carte web contenant la couche d'entités. Par défaut, la fenêtre
contextuelle présente la liste des différents attributs. Si certaines
valeurs sont des url web correctement formatées, un lien permet
d'ouvrir cette url.
-
Dans la zone de configuration des fenêtres contextuelles la couche,
vous pouvez supprimer l'élément "Liste de champs" proposé par défaut
puis ajouter un élément de contenu Arcade. Ce dernier nous permettra
de réaliser les calculs statistiques nécessaires et configurer un
rendu personnalisé (en HTML) de nos informations.
-
Dans l'éditeur Arcade, vous effacerez les instructions déjà présentes
par l'expression Arcade ci-dessous :
On pourra tout d'abord signaler l'utilisation de la notion de fonction qui permet de réaliser une série d'instructions récurrentes dans votre expression Arcade. Ici, elle a pour objectif de construire les paramètres de l'url qui permettra de générer image de chaque jauge.// Pour ne pas avoir à construire trois fois les paramètres d'une jauge, on crée la fonction // ci-dessous permet de construire les paramètres de la jauge générée par l'API QuickChart. // On s'appuie sur le modèle suivant : https://tinyurl.com/bdcwbwkc function GetParamURL(value_min, text_min, value_max, text_max, value) { // On normalise la valeur en % de la jauge var normalized_value = ((value - value_min)/(value_max-value_min))*100 // On définit les paramètres de la jauge var param_chart = { type: 'bar', data: { labels: ['Température'], datasets: [ { label: 'Users', data: [100], backgroundColor: 'GRADIENTHELPER', }, ], }, options: { indexAxis: 'y', layout: { padding: 40, }, scales: { x: { display: false, }, y: { display: false, }, }, plugins: { legend: { display: false, }, annotation: { clip: false, common: { drawTime: 'afterDraw', }, annotations: { low: { type: 'label', xValue: 4, content: [text_min], font: { size: 14, weight: 'bold', }, }, high: { type: 'label', xValue: 95, content: [text_max], font: { size: 14, weight: 'bold', }, }, arrow: { type: 'point', pointStyle: 'triangle', backgroundColor: '#000', radius: 12, xValue: normalized_value, yAdjust: 55, }, label1: { type: 'label', xValue: normalized_value, yAdjust: 85, content: ['Température', Text(value) + "°C"], font: { size: 14, weight: 'bold', }, }, }, }, }, } } // On encode la partie paramètres pour en faire une URL correctement formatée var param_url = UrlEncode(Text(param_chart)) // Cas particulier de la propriété "GRADIENTHELPER" qui doit être insérée manuellement dans // la chaîne param_url car elle fait appel à une fonction qui entre en conflit avec les instructions Arcade var param_gradient = "getGradientFillHelper%28%27horizontal%27%2C%5B%27cyan%27%2C%27yellow%27%2C%27red%27%5D%29" param_url = Replace(param_url,"%22GRADIENTHELPER%22",param_gradient) // La fonction renvoie l'URL complète pour la génération de la jauge return "https://quickchart.io/chart?h=120&v=3&c=" + param_url } // On appelle trois fois la fonction pour les 3 attributs : // "Temperature_Courante", "Temperature_Moyenne_24h" et "Temperature_Exterieure" // On spécifie des bornes min/max différentes selon les températures intérieures ou extérieures var chart_url1 = GetParamURL(15,"Froid (15°C)",30,"Chaud (30°C)",$feature.Temperature_Courante) var chart_url2 = GetParamURL(15,"Froid (15°C)",30,"Chaud (30°C)",$feature.Temperature_Moyenne_24h) var chart_url3 = GetParamURL(-10,"Froid (-10°C)",45,"Chaud (45°C)",$feature.Temperature_Exterieure) // On renvoie la chaine HTML du contenu de la fenêtre contextuelle return { type : 'text', text : `Température courante: <br/><img src='${chart_url1}'/><br/> Température moyenne sur 24h: <br/><img src='${chart_url2}'/> Température extérieure: <br/><img src='${chart_url3}'/>` }
On notera l'usage de l'API QuickChart qui permet de générer différents types de diagrammes à partir d'une url et une série de paramètres. Celle-ci est basée sur des librairies Open Source que vous pouvez installer sur votre propre serveur ou utiliser en ligne de manière gratuite (avec une limite sur le nombre de requêtes). Une version payante permet un accès illimité.
On notera enfin l'usage du caractère backtick ( ` et non ') pour utiliser des littéraux et construire la chaîne HTML souhaitée.
-
Vous pouvez maintenant cliquer sur le bouton "Terminé" pour
valider l'expression.
-
La fenêtre contextuelle s'affiche désormais avec les informations de
chiffre d'affaires attendues.
J'espère que cet exemple vous inspirera et que vous pourrez l'adapter à
vos cas d'usage.
Bonne route sur ArcGIS Online !
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS
Online, cliquez sur ce lien
0 comments :
Enregistrer un commentaire