topic Showing image icons in pop-up conditionally based on field attributes. in ArcGIS Experience Builder Questions

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

NigelGriffiths — Mon, 12 Aug 2024 23:37:38 GMT

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.

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

GIS_Weasel — Tue, 13 Aug 2024 08:38:13 GMT

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.

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

NigelGriffiths — Wed, 14 Aug 2024 06:13:45 GMT

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

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.