Conseils & Astuces ArcGIS Online - N°196

Dans ce précédent article, je vous ai présenté le support de nouvelles options CSS dans les fenêtres contextuelles de vos cartes et scènes web sur ArcGIS Online. Depuis la dernière mise à jour de décembre 2024, il est possible d'utiliser les mécanismes de positionnement en Flexbox et en Grid proposés par les styles CSS. Cela permet un positionnement plus souple et plus créatif de différents éléments à l'intérieur de votre fenêtre contextuel. Dans cet article, je vous propose un exemple concret de fenêtre contextuel en mixant le positionnement via des boîtes flottantes (Flexbox) et des expressions dynamiques avec Arcade.

L'objectif est de présenter les informations issues de stations de mesure de pollution aux particules fines. Celles-ci contiennent notamment des valeurs mesurées (PM2.5) et des informations relatives à la localisation de la station que nous afficherons de manière classique dans un bloc principal. Au-dessus de ce bloc, nous souhaitons afficher une jauge graphique pour représenter la qualité de l'air (bon, moyen, mauvais, ...) et en-dessous de ce blog un pied de page indiquant la source de la donnée et l'instrument effectuant la mesure. Pour ces deux parties, nous allons utiliser le positionnement par boîtes flottantes (Flexbox).

Pour l'en-tête de la fenêtre contextuelle

L'idée est ici d'utiliser des boîtes flottantes (<div style="display: flex; flex-direction: row">) pour afficher les cases de la jauge et de colorier les cases en fonction de la catégorie de qualité de l'air :

// Préparation d'une jauge à 5 cases pour la catégorie "Bon"
var bon = `<div style="display: flex; flex-direction: row; max-width: 500px; 
                          margin: 5px; height: 20px">
  <div style="background-color: #a6f7d0; border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>  
  <div style="border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
</div>`

// Préparation d'une jauge à 5 cases pour la catégorie  "Moyen"
var moyen = `<div style="display:flex; flex-direction: row; max-width: 500px; 
                            margin: 5px;height: 20px">
  <div style="background-color: #a5eb3d; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #a5eb3d; border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>  
  <div style="border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
</div>`

// Préparation d'une jauge à 5 cases pour la catégorie  "Mauvais"
var mauvais = `<div style="display:flex; flex-direction: row; max-width: 500px; 
                              margin: 5px;height: 20px">
  <div style="background-color: #f0d826; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #f0d826; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #f0d826; border: solid 1px #555; width: 100px;"></div>  
  <div style="border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
</div>`

// Préparation d'une jauge à 5 cases pour la catégorie  "Très mauvais"
var tres_mauvais = `<div style="display:flex; flex-direction: row; max-width: 500px; 
                                   margin: 5px;height: 15px">
  <div style="background-color: #db772a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #db772a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #db772a; border: solid 1px #555; width: 100px;"></div>  
  <div style="background-color: #db772a; border: solid 1px #555; width: 100px;"></div>
  <div style="border: solid 1px #555; width: 100px;"></div>
</div>`

// Préparation d'une jauge à 5 cases pour la catégorie "Dangereux"
var dangereux = `<div style="display:flex; flex-direction: row; max-width: 500px; 
                                margin: 5px;height: 15px">
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>  
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>
  <div style="background-color: #731a1a; border: solid 1px #555; width: 100px;"></div>
</div>`

// Selon la valeur de PM25 trouvée dans le champs "value"
// on récupère le code HTML de la catégorie correspondante
var value = $feature.value;
var vals = When(value <= 25, bon,
                value <= 37.5, moyen,
                value <= 75, mauvais,
                value <= 150, tres_mauvais,
                dangereux);

// On retourne le code HTML de la jauge
return { 
	type : 'text', 
	text : vals
}