Conseils & Astuces ArcGIS Online - N°196
N° 196 - Utiliser des Flexbox CSS pour améliorer l'aspect de vos fenêtres
contextuelles
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 :
Nous allons donc créer un bloc basé sur l'expression Arcade suivante :
// 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
}
Pour le pied de page de la fenêtre contextuelle
L'idée est de diviser la ligne en trois compartiments pour afficher le type
d'instrument, le lien vers la page décrivant la station de mesure et un lien
vers l'organisation responsable de cette station. Comme pour l'en-tête, nous
allons utiliser des boîtes flottantes (<div style="display: flex; flex-direction: row">) pour diviser notre ligne en trois sections.
Comme pour l'en-tête, nous allons utiliser un bloc basé sur l'expression
Arcade suivante :
// Vérification que le nom d'instrument et l'url de la station n'est pas vide
var instr = IIf(!IsEmpty($feature.instrument_name),
$feature.instrument_name,
'Pas d\'information')
var stn = IIf(!IsEmpty($feature.url), 'Station', 'Pas de station trouvée')
// Préparation du code HTML du pied de page
var html = `<div style="background-color:#eeeeee;display:flex;flex-direction:row;
justify-content:space-around;">
<div>
Instrument: <span>${instr}</span>
</div>
<div>
|
</div>
<div>
<a href="{url}">${stn}</a>
</div>
<div>
|
</div>
<div>
Source: <a target="_blank" href="https://openaq.org/">OpenAQ</a>
</div>
</div>`
return {
type : 'text',
text : html
}
Je ne détaille pas la conception du bloc central de la fenêtre contextuelle mais il s'agit d'un bloc de texte référençant différents champs de la couche d'entités.
La fenêtre contextuelle finale ressemblera alors à ceci :
Bonne route sur ArcGIS Online !
Pour retrouver l'ensemble des Conseils & Astuces ArcGIS Online,
cliquez sur ce lien.
0 comments :
Enregistrer un commentaire