ArcGIS Online

Pop-ups: tips for adding photos

When displaying photos or other images in ArcGIS Online web map pop-ups, it’s sometimes the small things that can make a big difference in the user experience. A small project completed for the Montgomery Botanical Center is an example of how you can implement some minor changes to optimize displaying photos in pop-ups.

We received a spreadsheet with the GPS (lat/long) locations of champion trees within the Botanical Center. The spreadsheet contained other details such as the common name, scientific name, a URL to a photo of each specimen, the photographers name, and so on. A text element was used to display the common name and scientific name. An image element was used to display the photo in the pop-up and link to display the photo in a new tab at a larger size.

We noticed two things straight away. The first was that there were differences in how the photo was displayed in the pop-up, with some generating vertical scroll bars in both the undocked and docked pop-up mode. This was because the photo is fitted within the pop-up width and we had photos of different sizes and aspect ratios. In addition, the photographs were quite large: over 15 MB each, so it took a few seconds to display the photo in the pop-up.

The solution was easy; a smaller sized version of all photos was created to suit the pop-up as well as to open the image in a new tab. In the pop-up the image is fit to the pop-up width, when opened in the new tab the image is fit to the browser. View the map.

 

Use image elements

To configure layer pop-ups, select the layer in the Layer pane in the Contents (dark) toolbar. Next, click Configure pop-ups from the Settings (light) toolbar. Ensure that Enable pop-ups is toggled on.

Configure pop-ups

Click Add content to display a list of pop-up elements and to choose the image element.

Add element

Add images (PNG, JPEG, or GIF format) by entering a URL or obtaining the URL from the contents of a field. Image elements can be configured with a title, caption, links to related websites or larger images, and alternative text. The settings shown below are from the Montgomery Botanical Gardens example, note that you can experiment with what is labeled as a caption or title to achieve the desired result.

Configure image

Pop-ups can also be docked, which makes a significant difference when viewing images. Shown below is a pop-up from the Montgomery Botanical Gardens example, docked on the left and undocked on the right.

Docked vs Undocked
View larger image

 

Additional tips

Here’s other tips and considerations for getting the best results using photos and images in pop-ups.

 

More information

For more information see:

 

This post was originally published on April 26, 2012, and has been updated.

About the author

Corporate technology evangelist and advocate at Esri, focusing on ways to broaden access to geographic information and helping customers succeed with the ArcGIS system. On a good day I'm making a map, on a great day I'm on one. Email bszukalski@esri.com or connect on LinkedIn (https://www.linkedin.com/in/bernszukalski/).

Connect:

Next Article

What's New in ArcGIS GeoBIM (November 2023 Release)

Read this article