Add media to a pop-up window

A pop-up window can include one or more media elements. Media elements can be images, pie charts, line charts, bar charts, and column charts.

How to add and configure media elements in pop-up windows

To add media to the pop-up windows of a layer, first ensure the layer is present in the current map.

  1. Click the Layers tab in the left side panel to show the Layers panel, and click the arrow to the right of the layer you wish to configure to open the Layer Details view.
  2. For a layer based on a feature service, click Configure Pop-ups. For a layer based on a map service, click Configure Pop-ups, then click one of the Add buttons shown next to each sublayer to configure a pop-up window for that sublayer.
  3. In the Configure Pop-ups dialog box, select the Media tab.
  4. Click the Add button and select the type of media you’d like to add. You can find more information below on adding different types of media.

The Media tab in the Configure Pop-ups dialog box

All added media elements are listed in the Media tab of the Configure Pop-ups dialog box. You can select a media element to remove it, update its properties, or reorder it in the list by using the Add, Remove, Configure, and the Up and Down buttons at the right of the tab.

Media elements listed in the Media tab of the Configure Pop-ups dialog box

Adding an image

To add an image, click Add and select Image from the drop-down list. This will display the Configure Pop-ups dialog box.

Type the title for the image in the Title box. This can be static text, a field value, or a combination of the two. Use the insert attribute field button to insert a field value.

Type a caption for the image into the Caption box. Again, this can be static text, a field value, or a combination of the two.

Type the URL to the image in the URL box. Again, this can be static text, a field value, or a combination of the two. PNG and JPEG images are supported. HTTPS URLs are not supported in Explorer Online.

If you want to associate a link to another web page with the image, specify the URL for the link in the Related Link box.

Configuring image media

When you display the pop-up window, the image is displayed in the media area of the pop-up window, along with its caption.

An image shown in the media area of a pop-up window

Adding a chart

You can add charts to graphically display the values of numeric attribute fields. You can add pie charts, bar charts, column charts, and line charts. To add a chart, click the Add button and select the type of chart you’d like to add from the drop-down list. This will open the Configure Pop-ups dialog box.

Type a title for the chart in the Title box. This can be static text, a field value, or a combination of the two. Use the insert attribute field button to insert a field value.

Type a caption for the chart into the Caption box. Again, this can be static text, a field value, or a combination of the two.

Check the attribute fields whose values you want included in the chart.

If it’s a column, bar, or line chart, you can also specify an attribute field with which to normalize the values, by checking the Normalize values box, and choosing a field in the Normalize Field list; the values in the field selected for the chart will be divided by the values in the normalization field before being included in the chart.

Configuring a pie chart in a pop-up window

When you display the pop-up window, the chart is displayed in the media area of the pop-up window along with its caption.

Pie chart media shown in a pop-up window

Tips for creating charts

  • You may wish to include an indication of units for column, bar, or line charts in the chart description. A pie chart shows percentages, and this will be labeled on the chart when the pop-up window is maximized.
  • Make sure the values in the fields used in a chart use the same units of measurement, so that your chart provides a meaningful comparison. If they are not comparable, consider whether data normalization may help.
  • Using data normalization can help you present valid data to your users, by providing a ratio value between two fields. For example, dividing a population value by the area of a polygon feature yields a population density value that can then be compared for two or more features, regardless of the size of each feature. Alternatively, dividing the 18–30 year old population by the total population yields a ratio of people between the ages of 18–30, which is again comparable between features of different sizes.

Displaying attachments

If the layer supports attachments, those attachments can be displayed in the pop-up window. To display a feature’s attachments in the pop-up window, in the Media tab of the Configure Pop-ups, check the If a feature has attachments, show the attachments option.

Configuring links to attachments in a pop-up window

When you display the pop-up window, the attachments are listed at the bottom of the pop-up window. You can click one of the attachments to open it.

Feature attachment links shown in a pop-up window


3/11/2013