Insert HTML with Arcade

[ChelseaRozek]

I'm trying to insert particular icons into a feature's popup based on the feature's attributes. So if the park allows dogs, I want to show a dog icon. Can Arcade insert <img> elements into the popup? I can't seem to get it to work, it just writes the <img> element out as text.

[Anonymous User]

Xander Bakker‌ sweet example, thanks!

[ELIZABETHF_T_]

I'm struggling with this custom attribute display.  How did you get it to work? I have 15 pictures that I want to display, depending on which area the user clicks.  Only one picture should pop-up.   What's on the expression and where the URL goes?

[XanderBakker]

Hi ELIZABETH F.T. , 

The idea is that you have a custom visualization of the pop-up window (sorry for the Spanish interface)

In the configuration window, activate the HTML mode and then put your html code for the image (and all other info). Inside the source parameter "src" of the image tag you reference your expression "{expression/expr0}":

. 

Your expression should be the part where a URL is generated:

The resulting URL is based on some logic derived from 1 or more attributes. 

Can you explain a little more what defines which of the 15 images should be picked in your case?

[DaveSivertsenz]

I know the thread is a bit stale - is it possible upgrades have killed the ability to use Arcade with a popup image?

When I attempt to type in the {expression/expr0}, the instant the "/" is typed, an http:// is forced, along with a message that it must be https:  In the example below - I typed "{expression/" - the rest magically appears.

It doesn't seem to be possible to follow your example.

[AndreaMcIntosh1]

I tried this approach using these images but as you can see even if you leave it blank there is still a space. Any ideas why?

[ChelseaRozek]

Hi Andrea, can you either post a screenshot of the arcade expression and the popup html code or provide a link to your public map so I can take a look?

[AndreaMcIntosh1]

sure

http://arcg.is/18OjX0

[ChelseaRozek]

Is it Woodrow Wilson Park with the issue? It looks fine on my screen, a small gap due to the white border around the images. With Chrome Developer Tools, I can see that there is an img element in between the 2 visible icons that is 0x0 pixels (vs. the other two are 50x50). I forgot that I wouldn't be able to see the Arcade/popup configs without the ability to edit the webmap, sorry. 

[ChelseaRozek]

Looks like your code is good. I tried your webmap in Chrome, Firefox, and IE. I only see those gaps in IE, is that what you're using? The Dev tools show that it's giving dimensions 28x30 to that blank image, thus showing a white gap, unlike the other browsers. I tried searching for known issues with Arcade and IE, but haven't found anything.

[AndreaMcIntosh1]

Yes IE is my browser of choice. I tried it in chrome and voila of course it looked correct. Ugh I should of thought of that first.Thanks so much for your help!