Conseils & Astuces ArcGIS Online - N°185

Vous saisirez ensuite l'expression Arcade suivante :

// Tableau contenant les différentes valeurs possibles (ordonnées)
var valeurs_possibles=['Très faible','Faible','Moyen','Bon','Très bon']
// Tableau contenant les couleurs correspondantes en hexadecimal
var couleurs=['CC3717','F38C62','E6AC54','B5E654','70B23D']
// Attribut contenant les valeurs
var valeur = $feature.indice_qualite_ecologique
// 'Vertical' ou 'Horizontal'
var affichage = 'Horizontal' 
// Largeur/Hauteur en pixels
var taille = 600 
// couleur du texte en hexadecimal
var couleur_texte = "000000" 
// Titre de l'indicateur à afficher
var strHTML = 'Qualité écologique :'

// Fonction permettant la conversion de couleurs Hexadecimal (avec opacité) 
// en chaîne HTML rgba()
function HexaToRGBA(hexa,opacity){
  var r = '0x' + Mid(hexa,0,2);
  var g = '0x' + Mid(hexa,2,2);
  var b = '0x' + Mid(hexa,4,2);
  return "rgba(" + Text(Number(r)) + "," + 
  Text(Number(g)) + "," + 
  Text(Number(b)) + "," + 
  Text(opacity) + ")"
  }

// On commence à générer l'expression HTML
strHTML += '<br/><br/>'
strHTML += "<table style='border-collapse: collapse;'>"

// Cas d'une barre de valeurs colorisée horizontale
if (affichage=='Horizontal'){
  strHTML += '<tr>'
  for (var index in valeurs_possibles){
    // Si la cellule du tableau est celle de la valeur courante alors l'opacité est 
    // de 100% sinon elle est de 20%
    var opacite = IIF(Lower(valeurs_possibles[index])==Lower(valeur), 1, 0.2);
    // Affichage de la cellule du tableau avec la valeur correspondante
    strHTML += "<td  width='" + Text(taille/Count(valeurs_possibles)) + 
                "px' style='background-color: " + HexaToRGBA(couleurs[index],opacite)+
                ";font-family: arial;font-size: 9pt; font-weight: " + 
                Text(opacite*700) + "; color: "+ HexaToRGBA(couleur_texte,opacite) + 
                "; text-align: center; border: 1px solid #DDDDDD;padding: 3px 3px;'>"
    strHTML += valeurs_possibles[index]
    strHTML += '</td>'
  }
  strHTML += '</tr>'
}
// Cas d'une barre de valeurs colorisée verticale
else {
  for (var index in valeurs_possibles){
    strHTML += '<tr>'
    // Si la cellule du tableau est celle de la valeur courante alors l'opacité est 
    // de 100% sinon elle est de 20%
    var opacite = IIF(Lower(valeurs_possibles[index])==Lower(valeur), 1, 0.2);
    // Affichage de la cellule du tableau avec la valeur correspondante
    strHTML += "<td  height='" + Text(taille/Count(valeurs_possibles)) + 
                "px' style='background-color: " + HexaToRGBA(couleurs[index],opacite)+
                ";font-family: arial;font-size: 9pt; font-weight: " + 
                Text(opacite*700) + "; color: "+ HexaToRGBA(couleur_texte,opacite) + 
                "; text-align: center; border: 1px solid #DDDDDD;padding: 3px 3px;'>"
    strHTML += valeurs_possibles[index]
    strHTML += '</td>'
    strHTML += '</tr>'
  }
}

strHTML += '</table>'

// On revoit l'expression HTML pour remplir la fenêtre contextuelle
return { 
	type : 'text', 
	text : strHTML 
}