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

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.