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 recently completed for the Montgomery Botanical Center is an example of how you can implement some minor changes to optimize your photos in pop-ups, and put your best pop-up forward.

For this project we received the locations of trees within the Botanical Center in a spreadsheet, along with photographs of each tree. The photographs were quite large – over 15 MB each.

In our first iteration we placed the photos at a web location and added a column to our spreadsheet that included the URL to each photo so we could configure them into our pop-up. Here’s the raw pop-up after we first dragged and dropped the spreadsheet onto our map:

Unconfigured pop-up

The field called PHOTO contains the link to the image. We used it twice to both display in the pop-up window and also to provide a link to the full-size photo. Here’s our configured image pop-up media dialog.

Partially configured pop-up

We also hid unwanted fields, and used aliases to change all CAPS to mixed case to be a little more friendly for the Species and Common name fields.

This provided good results, but we noticed two things straight off. The first was that there were differences in how the photo was displayed in the pop-up, since the photo is fitted within the allotted space and we had photos of different sizes and aspect ratios.

pop-ups compared

The second thing we noticed is that even though the pop-up displays a small image, it took a few seconds to display the photo the first time. The reason of course is that we were still accessing the full 15MB image to display in the pop-up.

The solution was easy. We made a smaller sized version of all images to fit the pop-up exactly (200 pixels by 150 pixels) and added that to our spreadsheet in a thumbnail field (PHOTO_TH shown by the arrow below) to use in the pop-up.

Configure photo

The end result is that we ended up with consistent, and performant, pop-up experience for all photos.

 

Additional tips

 

More information

For more information see

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

About the author

Tech evangelist and product strategist at Esri, focusing on ways to broaden access to geographic information and helping users succeed with the ArcGIS Platform. On a good day I'm making a map, on a great day I'm on one. Follow @bernszukalski or email bszukalski@esri.com

Connect:

Next Article

Pro Map Text I: Labels

Read this article