Show Attachments in Pop-ups with Arcade Expressions
In ArcGIS Online, you can store images as attachments with feature layers. By default, the attachment is shown in the pop-up as a hyperlink. With just a few lines of Arcade Expressions, you can configure the pop-up to display the actual image without requiring your viewers to click on the link.
With the March 2019 release of ArcGIS Online, you can now upload geotagged photos to create a point feature layer of each image's location. This blog will outline the process to create the layer and display your geotagged photos in the pop-up. Here is a video showing how to add photos and edit the pop-up (step-by-step instructions are found below):
After uploading your images, the pop-up includes a hyperlink that looks something like this:
This pop-up configuration workflow will result in the photo displaying in a pop-up like the image below:
To achieve this workflow, there are two steps to the process:
- Calculate the attachment ID for each feature
- Configure the pop-up to display the attachment URL as an image
Steps to view attachments as photos in your web map pop-up:
Part 1: Calculate the attachment ID
Note: Sometimes this is not required if the attachment IDs match the feature IDs. There are some cases where these may match, but in most cases these IDs will be different if the data is edited after publishing or in cases where attachments are added after publication (like inspection data when using Collector).
1. Upload your geotagged images to ArcGIS Online as a feature layer. Click here to download a sample zipped folder of images.
2. Make sure your layer is shared with the public.
3. Open the layer in a web map and save the web map.
3. Open the layer table and add a CountAttachments field and calculate it with the Arcade Expression:
Count(Attachments($feature))
4. Filter the layer to show:
CountAttachments is greater than 0
5. Add a new field called AttachID and calculate it with the Arcade Expression:
First(Attachments($feature)).ID
6. Remove the filter.
Part 2: Create the Pop-up
1. Click on a point in the map to view the pop-up, and open the hyperlink.
2. Return to the previous tab that shows your web map. Select More Options (the three dots under your layer name in the Content tab), then click Configure Pop-up.
3. Under Attribute Expressions, click the ADD button.
4. In the Expression builder window, fill in the following logic seen below with the text from your hyperlink URL. The Arcade Expression builds an on-the-fly image URL for each record in your layer using the unique Object ID and attachment ID (calculated in Part 1).
Note: This is an example of what an image attachment URL looks like: https://services.arcgis.com/jIL9msH9OI208GCb/arcgis/rest/services/JoshuaTreeHike/FeatureServer/0/7/attachments/7. The first 7 in red is the Object ID and the second 7 in blue is the attachment ID.
var Part1 = "https://services.arcgis.com/5uh3wwYLNzBuU0Eu/arcgis/rest/services/JoshuaTreeHike/FeatureServer/0/"
var ObjectID = $feature.OBJECTID
var Part2 = "/attachments/"
var AttachID = $feature.AttachID
When($feature.CountAttachments > 0, Part1 + ObjectID + Part2 + AttachID, null)
5. Under Pop-up Media, click ADD then choose Image. Edit or remove the title and caption. Under URL, click on the plus sign and select your Arcade Expression. After you add it, it will look something like {expression/expr0}. Additionally, you can edit the pop-up title and additional pop-up content. You can also uncheck the "Show feature attachments as links".
Click here to view a web map example of this in action.
This is a similar workflow to the popular tool and blog written by Jake Skinner.
This workflow will get you up and running to display images in URLs in most places but does have some limitations to be aware of:
- Calculate field is not dynamic. When new features are added, you will need to re-run the field calculation in Part 1.
- The field calculation only takes the first attachment listed, so displaying multiple images in a single pop-up isn't supported through this workflow.
- The layer needs to be public to access attachments.
We are sharing this workflow to help you display your images in pop-ups as quickly as possible with Arcade, but want you to know that there is more to come. In future releases, we are working to make it easier to display attachments as images. You can see a sneak preview of this work in the 4X JS API. Check out the pop-ups in the Media Map template to see this implementation in a configurable app where it isn't required to do additional configuration to display these images.
Stay tuned for more updates and share and discuss your examples and improvements to this code.