Under construction…
Apologies, this blog article is currently under construction and is being updated.
Please check back soon, this resource will be even better once we finish.
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:
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.
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.
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.
The end result is that we ended up with consistent, and performant, pop-up experience for all photos.
Additional tips
- Optimize the image for web display for best performance. You can link to a larger photo.
- Ensure that wherever it is that you store your photos, that the photos will not be accidentally deleted.
- You can use ArcGIS Online for photo storage, but they must be publicly shared to obtain the URL.
- Remember to configure other parts of the pop-up properly, all parts of the pop-up experience will contribute to the photo experience.
- When using the web map in configurable apps, note that the pop-up display will vary in size and aspect ratio depending on the app. You may want to consider which app is your intended goal, so you can configure the pop-up experience to maximize the experience in the app.
More information
For more information see
This post was originally published on April 26, 2012, and has been updated.
Commenting is not enabled for this article.