Showing image icons in pop-up conditionally based on field attributes.

[NigelGriffiths]

Hello, I wish to replicate something along the lines of what is being done in this application, where you select a point feature on the map and at the bottom you will see icons based on whether a particular attribute is TRUE or FALSE. Rest Areas (nsw.gov.au)

The attribute table looks like so:

has_bbq	FALSE
has_caravan_disposal	FALSE
has_emergency_phones	FALSE
has_lighting	TRUE
has_litter_bins	TRUE
has_picnic_table	TRUE
has_playground	FALSE
has_power_outlets	FALSE
has_shelter	FALSE
has_toilets	TRUE
is_accessible	TRUE

Is there a way this could be easily replicated in Experience Builder, using ArcGIS Pro, Web Map Viewer, or directly within Experience Builder in which it will ultimately be consumed.

[GIS_Weasel · Accepted solution]

We had to use a monstrous hack to do something similar directly in Experience Builder, creating an expression to source an image from a webserver based on attribute values in the URL field.

However, yours looks like it could be done with by adding a simple Arcade expression into the popup config. Configure it in the Map/Scene Viewer:

var t =  $feature.COMMONNAME;
var v = "https://placebear.com/200/300";


return {
    type: 'fields',
    //title: '',
    //description : '',
    fieldInfos:  [{
          fieldName: "att1"  // fieldName should match the key in the attributes dictionary
        },
        {
          fieldName: "att2"  // fieldName should match the key in the attributes dictionary
        },
        {
          fieldName: "att3"  // fieldName should match the key in the attributes dictionary
        }],
    attributes : {att1 : t, att2 : "<img src=\"" + v + "\" />", att3 : 4}  // replace this dictionary with your own key-value pairs
  }

I've tested and yes, the HTML element in the attribute object is rendered properly.

[NigelGriffiths]

Thank you very much for your suggestion. I was able to achieve the desired result by having an arcade attribute expression for each field and image, then having a text element above the fields table that included the expression in HTML code.

Desired result below

Arcade expression used for each image

var checkvalue = $feature.has_toilets
var img_show = 'https://imageurl.com'
var img_blank = ''
iif(checkvalue=='TRUE',img_show,img_blank)

The following HTML code was placed into the text pop-up element 

<img src="{expression/expr0}" width="50" border="0"><img src="{expression/expr1}" width="50" border="0"><img src="{expression/expr2}" width="50" border="0">

 I am unsure if your method is the better solution, as I have limited experience with Arcade so was unsure how exactly to implement it.