Popup image based on value in a field?

516
2
06-06-2022 06:36 AM
leightmaes
New Contributor III

Hello,

I have a web map with point and polygon feature types, representing different insect species. Instead of hard-coding every single point to have a specific image (there are thousands), I'd like to set up an automated method (preferably using Python, as I have created this app using it) that will take conditions to display certain images from my library of images for the species in the pop-up based on the species listed in the attribute table.  I would like the image to appear fully in the pop-up, and not be a link. 

I understand I can set up a function to append a new attribute with image URLs based on the species attribute, however, my understanding is that this will only display URLs and not the image directly in the pop-up. What is the best way to approach this?

Thank you.

 

 

0 Kudos
2 Replies
JillianStanford
Occasional Contributor III

Hi,

Have you tried using Arcade to build an attribute expression based on the the attribute values?

You can then add an image to the popup with the dynamic URL as the source.

This blog post  is kind of old but I think still applies (part 2, specifically).

Jill

0 Kudos
leightmaes
New Contributor III

Hi Jill, 

Thanks for your suggestion! This app will undergo routine updates via a Python script, so the Arcade method is a bit clunkier than I'd prefer.

I figured out a way to do this using the JSON config file I had already used to configure the symbology, within popupElements. After each popup attribute is specified, I added:

 {
                        "description": "",
                        "mediaInfos": [
                            {
                                "altText": "YOUR ALT TEXT HERE",
                                "caption": "YOUR CAPTION HERE",
                                "refreshInterval": 0,
                                "title": "YOUR TITLE HERE",
                                "type": "image",
                                "value": {
                                    "linkURL": "",
                                    "sourceURL": "YOUR IMAGE URL HERE"
                                }
                            }
                        ],
                        "title": "YOUR TITLE HERE",
                        "type": "media"
                    },