Show images in pop-ups

You have spatial data showing four historic lakes that are rapidly disappearing: the Aral Sea, Lake Chad, Lake Texcoco, and Lop Nur. In addition to showing these lakes on a map, you'd like to include pictures of each in their pop-ups. In this tutorial, you'll learn how to create a feature layer in ArcGIS Online with an uploaded shapefile, how to add images with two methods (URLs and attachments), and how to save pop-up configurations for a feature layer.

This tutorial was last tested on August 16, 2024.

View final result

Requirements

• ArcGIS organizational account with a Publisher, Facilitator, or Administrator role (see options for software access)

Show images in pop-ups

Video

This tutorial is also available as a video.

Show images in pop-ups video

Publish a shapefile as a hosted feature layer

You'll begin by downloading a .zip file with the data for this tutorial. You'll upload the shapefile to ArcGIS Online as a feature layer.

1. Download the show_images_in_pop_ups.zip file and unzip it to a location on your computer, for example, drive C.
2. Open the unzipped show_images_in_pop_ups folder.

   The folder contains two files: historic_lakes.zip and Lop_Nur.jpg.

   

   Do not unzip historic_lakes.zip. It contains a shapefile, a spatial data format that consists of multiple files. To use this data in an ArcGIS Online web map, you need to upload a zipped copy of the shapefile.

3. Sign in to your ArcGIS organizational account.

   Note:

   If you don't have an organizational account, see options for software access.

4. On the ribbon, click the Content tab.
5. Click the New item button.

   

6. Drag the historic_lakes.zip file to the New item window.

   Tip:

   Alternatively, click Your device and browse to the .zip file.

7. Ensure that File type is set to Shapefile and How would you like to add this file is set to Add historic_lakes.zip and create a hosted feature layer.

   

   This option will create two items in your ArcGIS Online account. One will be a copy of the shapefile. The other will be a feature layer created from the contents of the shapefile. You need the data in the feature layer format before it can be used to create maps in ArcGIS Online.

8. Click Next.
9. For Title, type Historic Lakes, followed by your initials (for example, Historic Lakes YN).

   Note:

   You cannot create two layers in an ArcGIS organization with the same name. Adding your initials to a layer name ensures that other people in your organization can also complete this tutorial. Once a layer has been created, you can rename it in the map to remove your initials, which will not affect the name of the underlying data layer.

10. For Summary, type Data from naturalearthdata.com.

    

    These details can be modified later.

11. Click Next.

    The item page for the new feature layer appears. The item's name is Historic Lakes and the item type is listed as Feature Layer (hosted).

    

    Hosted items are source layer items. They represent a dataset, while items that are not hosted only reference a dataset. If you delete a hosted feature layer, the data too is deleted. If you delete a feature layer that is not hosted, only the layer is deleted, and the data remains accessible for other layers to reference.

    You will only see the (hosted) label when an item is hosted and it is owned by you.

    Note:

    If you have an administrator account, you will see the (hosted) label for items owned by anyone in your organization.

    You can read more about feature layers and hosted feature layers in the documentation.

    Because this layer is hosted and owned by you, you can manage the capabilities and the schema of the data, rather than just the layer properties. You'll take advantage of this later, when you'll edit the data to include images.

Review the data

Next, you'll view the Historic Lakes feature layer both as a table and as a map. You'll assess the default pop-ups to see how well they might work for your map.

1. On the Historic Lakes item page, on the ribbon, click the Data tab.

   

   A table appears, showing the layer's attributes. There are only two fields: Webpage and Name. Next, you'll view this data on a map.

2. On the ribbon, click the Visualization tab.

   A map of the world appears. It shows a polygon layer of four lakes.

3. On the map, zoom in and click one of the lake features.

   

   A pop-up window appears. It lists the Name and Webpage attributes from the table. The Webpage attribute appears as a link to a Wikipedia page instead of the URL text that you saw in the table. You would like to include pictures in the pop-up as well.

4. On the Contents (dark) toolbar, click the Layers button.

   

   On the Layers pane, you can see the Historic Lakes layer is selected by the blue bar next to the layer name.

5. On the Settings (light) toolbar, click the Pop-ups button.

   

   The Pop-ups pane lists two content items: Title and Fields list. This is the default configuration for a pop-up, but you can configure it to show more content, including images.

6. In the Pop-ups pane, click Add content. Click Image.

   The Configure image window appears. The first control allows you to enter a URL for an image. However, if you add a picture by this method, every feature will show the same image. You want to show a different image for each lake, so this is not the correct method for your needs.

7. Close the Configure image window and the Pop-ups pane.

Add new fields to the feature layer

You can add pictures to each pop-up by editing the layer's attributes. You'll add two new fields to the feature layer: one to store URLs of pictures, and one to store text that gives credit for each picture's source.

1. On the ribbon, click the Data tab.

   The table view reappears. You'll add a new field to store image URLs.

2. On the table header, click the Options button. Click Add Field.

   

   The Add Field option is available because the Historic Lakes layer is hosted and is owned by you.

3. In the Add Field window, for Field Name, type Picture. For Display Name, type Picture.
4. Ensure that Type is set to String.

   

   String fields store text. The other field types allow you to store dates or numbers.

5. Click Add New Field.

   The Picture field appears in the table as a new column.

   

6. Click the Options button again and click Add Field.
7. For Field Name, type Image_source. For Display Name, type Image source.

   There are rules about the kind of text that's allowed in a Field Name, for example, you can't use spaces. However, the Display Name is the name that will appear in the table and pop-ups.

8. For Type, choose String.

   

9. Click Add New Field.

   The table now has four columns.

Add images to the data using URLs

Next, you'll populate the new fields with URLs and credit text for each image.

1. In the table, double-click one of the Picture or Image source cells.

   The cell becomes editable.

   

2. Copy and paste the following text into the table:

   Name	Picture	Image source
   Aral Sea	https://upload.wikimedia.org/wikipedia/commons/9/9f/Aral_Sea.gif	NordNordWest, NASA, United States National Imagery and Mapping Agency data, www.unimaps.com
   Lake Texcoco	https://upload.wikimedia.org/wikipedia/commons/a/a6/Lake_Texcoco_%28Lago_de_Texcoco%29_December_1855_map_from_Harper%27s_New_Monthly_Magazine_Volume_12_December_1855_to_May_1856_%28IA_harpersnew12harper%29_%28page_34_crop%29.jpg	New York: Harper & Brothers Publishers (Harper's New Monthly Magazine Volume 12 December 1855 to May 1856), Brigham Young University-Idaho, David O. McKay Library
   Lake Chad	https://upload.wikimedia.org/wikipedia/commons/9/94/ShrinkingLakeChad-1973-1997-EO.jpg	NASA

   When using images in maps, it's important to include information that credits the people or organizations who created them.

   Tip:

   The next time you include images in a feature layer, you might prefer to prepare the table with the image URLs and credit text before adding it to ArcGIS Online. However, it is not necessary.

Add images to the data using attachments

The image for the last lake, Lop Nur, is not available as a URL. Instead, you downloaded it with the shapefile at the start of this tutorial. You can host the image online somewhere to create a URL, or you can upload it as an attachment to the feature layer. In this tutorial, you'll add the image as an attachment.

1. On the Historic Lakes page, click the Overview tab.
2. Review the Layers section.

   Feature layers (and hosted feature layers) consist of one or more sublayers. Historic Lakes contains only one sublayer, Historic_Lakes. Attachments are enabled on the sublayer level.

3. In the Layers section, click Historic_Lakes.

   

   A new page appears, showing settings for the Historic_Lakes sublayer.

   Note:

   If an Unable to load error appears, close the error message.

4. Under Attachments, turn on Enable Attachments.

   

   You can access the data for this sublayer directly from the sublayer page without returning to the main page.

5. On the ribbon, click the back arrow next to Historic Lakes.

   

6. On the ribbon, click the Data tab.

   The table reappears. It includes a new column, named Photos and Files.

   

7. In the Lop Nur row, in the Photos and Files column, click Add.
8. In the Photos and Files window, on the Add tab, click Choose File.

   

9. Browse to the Show_images_in_pop_ups folder and choose the Lop_Nur.jpg file that you downloaded earlier. Click Open.
10. Click Upload.
11. When the Upload Successful message appears, close the Photos and Files window.

    For larger datasets, it is easier to manage a table of URLs than to manually upload files. On the other hand, attachments are preferable if you need to attach files that you don't want to share with a public URL.

12. In the Image source column, in the Lop Nur row, type NASA.

    

Configure pop-ups

Now that the data includes images for each lake, you'll configure the pop-ups to display the images.

1. On the ribbon, click the Visualization tab.
2. On the map, zoom to and click the Lop Nur feature in western China.

   A pop-up appears, listing the two original fields and the two new ones. It also shows a picture.

   

   Attachments are shown by default in pop-ups.

3. Click the Aral Sea feature on the border of Kazakhstan and Uzbekistan.

   No picture is shown in this pop-up. Instead, the Picture attribute is presented as a link, the same as the Webpage attribute.

   

   You'll configure the pop-up to show the image.

4. On the Contents pane, click Layers.

   The Historic Lakes layer is now selected.

5. On the Settings toolbar, click the Pop-ups tab.
6. In the Pop-ups pane, click Add content and click Image.
7. In the Configure image window, next to URL, click the fields button.

   

8. In the Add field window, scroll down and click the Picture field.

   

9. Click Done.
10. On the map, click each lake feature and scroll to the bottom of each pop-up. All of the pop-ups now show an image. The image for the Aral Sea is an animated .gif file, and the animation plays in the pop-up.

    

    Optionally, you can continue to configure the pop-ups in the Pop-ups pane. For example, you can remove the Picture, Shape_Area, and Shape_Length fields and tidy the Title text. You can see an example of completed pop-up configuration in this layer.

11. Close the pop-up and the Pop-ups pane.
12. Above the map, below the ribbon, click Save.

    

    The pop-up configuration settings are now saved to the Historic Lakes feature layer. When this layer is used in a web map, the pop-ups will already be configured to show the images.

In this tutorial, you uploaded shapefile data to ArcGIS Online to create a hosted feature layer. You added two fields to the feature layer and edited them to include image URLs and image credit text. You also enabled attachments and attached an image.

Acknowledgements

• historic_lakes.zip: derived from historic lakes, Natural Earth. Accessed January 2023.
• Lop_Nur.jpg: Helix of Lop Nur 90.55E, 40.10N, NASA. Accessed January 2023.
• Aral Sea.gif: NordNordWest, NASA, United States National Imagery and Mapping Agency data, www.unimaps.com.
• ShrinkingLakeChad-1973-1997-EO.jpg: NASA.
• Lake Texcoco (Lago de Texcoco) December 1855 map from Harper's New Monthly Magazine Volume 12 December 1855 to May 1856 (IA harpersnew12harper) (page 34 crop).jpg: New York: Harper & Brothers Publishers (Harper's New Monthly Magazine Volume 12 December 1855 to May 1856), Brigham Young University-Idaho, David O. McKay Library.
• World Topographic Map sources: Esri, HERE, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community