Show images in pop-ups

Video

This tutorial is also available as a video.

For full details, refer to the written instructions below.

Note:

This video was recorded on September 19, 2025.

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.

    Lop_Nur.jpg and historic_lakes.zip files

    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.

    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.

    File type and How would you like to add this file settings

    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.

    Item details in the New item window

    These details can be modified later.

  11. Click Save.

    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).

    Feature Layer (hosted) item type

    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.

    Data tab

    A table appears, showing the layer's attributes. There are four fields: Webpage, Name, Shape_Area, and Shape_Length.

    Table with four fields

    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.

    Pop-up for Lake Chad

    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.

    Layers on the Contents toolbar

    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.

    Pop-ups button on the Settings toolbar

    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 Add field.

    Add Field in the Options menu

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

    First, you need to choose a data type. Each field can only store one kind of data.

  3. In the Add Field window, click Text and select String.

    String data type selected

  4. Click Next.
  5. For Field Name, type Picture. For Display Name, type Picture.

    Options in the Add Field window

  6. Click Add field.

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

    Table with Picture column

    This field will store URLs for each picture. You'll add another field to store the source information for each picture.

  7. Click the Add Field button again.
  8. Click Text and choose String. Click Next.
  9. 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.

    Options in the Add Field window

  10. Click Add field.

    The table now has six 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.

    Editable cell in the table

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

    NamePictureImage 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.

    Historic_Lakes sublayer

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

  4. Under Attachments, turn on Enable attachments.

    Enable Attachments turned on

    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.

    Back on the ribbon

  6. On the ribbon, click the Data tab.

    The table reappears. It includes a new column, named Attachments.

    Table with Attachments column

  7. In the Lop Nur row, in the Attachments column, click the cell.
  8. In the table that appears, ensure that FID 4 is selected (highlighted in blue).

    FID 4 selected

  9. Click Select file.

    Select file button

  10. Browse to the Show_images_in_pop_ups folder and choose the Lop_Nur.jpg file that you downloaded earlier. Click Open.
  11. Click Add attachment.

    Add attachment button

    The photo appears as an attachment.

  12. Above the table, click the Exit attachment view button.

    Exit attachment view button

    You are returned to the main table view.

    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.

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

    Lop Nur image source set to NASA in the table

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 four original fields and the two new ones. It also shows a picture.

    Pop-up for the Lop Nur feature with image

    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.

    Pop-up for the Aral Sea feature without image

    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.

    Fields button

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

    Picture field in the Add field window

  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.

    Pop-up for the Aral Sea feature with image

    Note:

    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 learn more in the Configure pop-ups tutorial.

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

    Save button

    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.