Labeling in AGOL with Arcade

2042
7
05-03-2019 01:43 AM
EleanorDhuyvetter
New Contributor II

Hello! 

I have a quick question about creating colored labels in AGOL with arcade. I am trying to filter out my data with If/else statements for the appropriate range for a given color, then assigning a color to that value in the label with Text formatting tags. The arcade code is below. Any other ideas on how to create this would help as well! 

I am new to arcade, so thanks for bearing with me! 

## convert number to string 

var temp = Text($feature["tmdb_f"])

## partition each range of temperature out first, then assign colored label to that range. 
if ($feature["tmdb_f"] >=90) {


return "<CLR red='139'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

if ($feature["tmdb_f"] <=80) {
return "<CLR red='255'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

if ($feature["tmdb_f"] <=70) {
return "<CLR red='255', green= '153', blue='51'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

if ($feature["tmdb_f"] <=60) {
return "<CLR red='255', green= '215'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

if ($feature["tmdb_f"] <=50) {
return "<CLR red='50', green= '205', blue='50'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

if ($feature["tmdb_f"] <=40) {
return "<CLR green= '128'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

if ($feature["tmdb_f"] <=30) {
return "<CLR green= '255', blue='255'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

if ($feature["tmdb_f"] <=20) {
return "<CLR green= '128', blue='128'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

if ($feature["tmdb_f"] <=10) {
return "<CLR blue='139'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

if ($feature["tmdb_f"] <=0) {
return "<CLR red='148', blue='211'><FNT size = '14'>" + [temp] + "</FNT></CLR>"
}
else {
return null
}

0 Kudos
7 Replies
XanderBakker
Esri Esteemed Contributor

There are a couple of errors in your expression. Please see example below:

// convert number to string 
var tmdb_f = $feature["tmdb_f"];

// partition each range of temperature out first
// then assign colored label to that range. 
if (tmdb_f >=90) {
    return "<CLR red='139'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else if (tmdb_f >=80) {
    return "<CLR red='255'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else if (tmdb_f >=70) {
    return "<CLR red='255', green= '153', blue='51'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else if (tmdb_f >=60) {
    return "<CLR red='255', green= '215'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else if (tmdb_f >=50) {
    return "<CLR red='50', green= '205', blue='50'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else if (tmdb_f >=40) {
    return "<CLR green= '128'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else if (tmdb_f >=30) {
    return "<CLR green= '255', blue='255'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else if (tmdb_f >=20) {
    return "<CLR green= '128', blue='128'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else if (tmdb_f >=10) {
    return "<CLR blue='139'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else if (tmdb_f >=0) {
    return "<CLR red='148', blue='211'><FNT size = '14'>" + tmdb_f + "</FNT></CLR>";
} else {
    return tmdb_f;
}

Please take into account:

  • when you define the ranges of tmdb_f values, you should validate using >= starting with the highest range, or <= starting with the lowest range. Otherwise it will not work . You will probably have to change the values that I used in this expression, since I changed the <= in >=
  • use "else if" to check these conditions
  • you don't have to change a numeric value to text to concatenate it for the label.If you want to have a specific formatting you should use "Text" with a specific format.
  • I created a variable tmdb_f to make a single request for the value, although I am not sure if this makes it faster
  • The last "else" statement is just to show how you can (should) finish an "if - else if - else" statement.
0 Kudos
EleanorDhuyvetter
New Contributor II

Thank you very much for the corrections! I input this into the AGOL label expressions, however it didn't load correctly. Then found a post with a similar question and learned that Arcade within AGOL doesn't recognize the text formatting tags. Will this be added to AGOL within the future by chance? 

XanderBakker
Esri Esteemed Contributor

Good catch, that is right the formatting is not supported in AGOL. Since the idea is that all ArcGIS products integrate correctly, I would assume that at some point this will be implemented in ArcGIS Online. 

0 Kudos
GeraldSneary
New Contributor III

Hi Xander,

Am I understanding correctly that you can't use formatting tags in AGOL?

I am having two issues:

I can't get the iif statement to work

and

Am I able to change the color of just the acreage number? - Round(aggAcreage,2)

(I know how to change the color of the entire expression)

var intersectingAggDiss = Intersects(FeatureSetByName($map,"COS Aggregated Vacant Parcels - No Structure"), $feature);
var aggAcreage = 0;
for (var aggacre in intersectingAggDiss) {
 aggAcreage += aggacre.Acreage;
}
iif (aggAcreage = 0, '', 'The aggregate acreage is: ' + Round(aggAcreage,2));
//return 'The aggregate acreage is: ' + Round(aggAcreage,2);
0 Kudos
XanderBakker
Esri Esteemed Contributor

Hi Gerald Sneary , 

Am I understanding correctly that you can't use formatting tags in AGOL?

Unfortunately, that is correct. Hopefully this will come in the feature. (I haven't checked with the beta map viewer)

For a label you cannot use Arcade to create the formatting. You could use multiple layers, but it is better not to go there. You can, in the pop-up, use conditional formatting, but it requires multiple expressions and when using access to other layers, this will probably have an impact on performance.

Your condition on line 6 is probably missing the required double "==":

iif (aggAcreage == 0, '', 'The aggregate acreage is: ' + Round(aggAcreage,2));
GeraldSneary
New Contributor III

Xander Bakker,

I got my if-else statement to work. Now am I able to use <CLR> or something else to change the color of - Round(aggAcreage,2) ?

var intersectingAggDiss = Intersects(FeatureSetByName($map,"COS Aggregated Vacant Parcels - No Structure"), $feature);
var aggAcreage = 0;
for (var aggacre in intersectingAggDiss) {
 aggAcreage += aggacre.Acreage;
}
if (aggAcreage == 0){
 aggAcreage = '';
} else {
 'The aggregate acreage is: ' + Round(aggAcreage,2);
}
0 Kudos
XanderBakker
Esri Esteemed Contributor

Hi gerald.sneary80 ,

I recently wrote a document about conditionally hiding or showing rows in a table with Arcade: Conditional Field display with Arcade in Pop Ups (revisited) 

The same technique could be applied to define the color of a text. You will need to use a custom html pop-up.

0 Kudos