Cartographic creations – Make pop-ups and labels

Lake District National Park in England is famous for its mountainous terrain. In this five-part tutorial series, you'll make a web map of the Lake District to attract international visitors. You'll learn how to employ cartographic skills in Map Viewer and ArcGIS StoryMaps to make a professional interactive map.

You are encouraged to complete the first two tutorials in the Cartographic creations with web maps series before this one.

In the previous tutorials, you designed the map's symbology. In this tutorial, you'll create pop-ups and labels to help explain and describe the symbols on the map. You'll use filtering, text formatting, attribute expressions, and a diagram.

This tutorial was last tested on September 30, 2024, using with ArcGIS Online and ArcGIS Enterprise 11.3. If you're using a different version of ArcGIS Enterprise, you may encounter different functionality and results.

View final result

Requirements

• User, Publisher, or Administrator role in an ArcGIS organization: ArcGIS Online (see options for software access) or ArcGIS Enterprise (learn more)
• Enterprise users must complete the first two tutorials in the Cartographic creations with web maps series before this one.

Configure pop-ups

Pop-ups are an important aspect of web cartography. They allow you to share extra information for each map feature. They can clarify the information communicated by the symbols. They can include charts and photographs that provide more context. Anything that’s present in a layer’s attribute table can be communicated through a pop-up.

With so many things that can be included in a pop-up, it’s important to give careful consideration to what should be included. In this tutorial, you’ll design pop-ups for two layers. One will only display the feature’s name, while the other will use more complex formatting.

Make simple pop-ups

Not every layer in a map should have pop-ups. Unnecessary pop-ups get in the way of necessary ones, making map exploration difficult. In your map, pop-ups are only helpful for two layers: LakeDistrictFells and National Parks (England). These layers are not visible at the same time, so their pop-ups will not conflict with one another. You’ll start by disabling pop-ups for all the other layers and configuring simple pop-ups for the parks layer.

1. If you completed the earlier tutorial Cartographic creations – Customize a basemap, sign in to your ArcGIS account or your ArcGIS Enterprise portal. Reopen your Lake District National Park web map.
2. If you did not complete the earlier tutorial, open the Lake District National Park 3 web map. Click Sign In and sign in with your ArcGIS account. On the Contents toolbar, click the Save and open button and click Save as. For Title, remove the 3. Click Save.

   Note:

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

3. If necessary, on the Contents (dark) toolbar, click the Layers button to open the Layers pane.

   

4. In the Layers pane, select the Lake District National Park layer.

   A blue bar appears next to the layer when it is selected.

5. On the Settings (light) toolbar, click the Pop-ups button. In the Pop-ups pane, turn off the Enable pop-ups toggle button.

   

6. Also disable pop-ups for the Clip, Lakes, and Rivers layers.
7. On the map, zoom out until you can see all of England and its ten national parks.

   

8. Select the National Parks (England) layer.

   One of its pop-ups appears on the map. It includes a table with six fields. The only information that is needed for this map is each park’s name. You’ll remove the table.

9. In the Pop-ups pane, next to Fields list, click the Options button and click Delete.

   

10. Click Title.

    The name of the layer is not necessary information for this map. You should try to remove unnecessary information from maps, because it can make it slower, more difficult, or even confusing for people to read your map. In this case, the layer name is getting in the way of the important information: the park name.

11. Remove all of the text before {NAME}.

    

    Text within curly brackets is used to reference field names within the feature layer.

12. On the map, click different parks to confirm that the pop-ups title changes.

    

Format pop-up text

Next, you’ll configure the pop-ups for the LakeDistrictFells layer. You’ll add text and format it for clarity.

1. On the map, zoom in until the triangle symbols reappear.
2. In the Layers pane, click the LakeDistrictFells layer to select it.

   The pop-up for the LakeDistrictFells layer appears.

   

3. In the Pop-ups pane, click Title. Remove all of the text except for {Name}.

   The pop-up has a table with many fields. While they provide interesting information about each mountain, most of them are not relevant to this particular map and its goals. You’ll remove the fields list and replace it with formatted text.

4. Next to Fields list, click the Options button and click Delete.
5. Click Add content and click Text.

   

6. In the text window, type or copy and paste the following:

   Click here to see a photo of {Name}.

   Height: {Metres} meters

   Height is the change in elevation between a mountain's peak and sea-level.

   Prominence: {Drop_} meters

   Topographic prominence, or drop, is the change in elevation between a mountain's peak and the lowest contour line that encircles it, but no other higher peaks.

   Tip:

   Right-click and choose Paste as plain text to copy without formatting.

   This text repeats the information that is already encoded in the triangle symbols: the height and prominence of each peak. However, the pop-up can communicate more precise values than the size and color of each symbol. It also provides room to explain the difference between height and prominence.

7. Highlight the second line of text (Height: {Metres} meters). On the toolbar, click the Bold button.

   

8. Also bold the fourth line of text (Prominence: {Drop_} meters).
9. Click OK.

   The text appears in the pop-up. The two numbers each have two decimal places.

   

   This amount of precision isn’t necessary for your map and only makes the numbers harder to understand. You’ll simplify them by changing their formatting.

10. On the Settings toolbar, click the Fields button. In the Fields pane, click Height (m).

    

11. In the Formatting window, for Significant digits, choose 0 Decimal places.

    

12. Click Done.
13. Format the Prominence (m) field to use zero decimal places as well.

    In the pop-up, the numbers no longer display decimal values.

    

Write an attribute expression

Next, you’ll add a link to a photo of each mountain.

The LakeDistrictFells layer does not have a field with links to photos, but it does have a field with an ID number for each peak. The hillsummits website shares photos of each peak, and the URL of each photo page includes the peak’s ID number. Next, you’ll create an attribute expression that constructs a unique URL for each mountain peak from its ID number. These URLs will link to a photo of each peak.

1. Reopen the Pop-ups pane.

   You can make an attribute expression that creates a link for each feature.

2. Under Options, click Attribute expressions.

   

3. Click Add expression.
4. In the expression box, delete the existing text and type or copy and paste "http://hillsummits.org.uk/htm_portrait/"++".htm"

   The quotation marks indicate text values. The plus signs allow you to add more text between the two parts of the URL.

5. Place your cursor between the two plus signs and click the Profile variables button.

   

6. Click the arrow next to $feature.

   

7. Scroll through the list of fields and click $feature.Number.

   The expression now reads "http://hillsummits.org.uk/htm_portrait/"+$feature.Number+".htm".

   The Number field stores the ID number for each peak.

8. Click Run.

   

   A URL appears in the Output window. In it, $feature.Number is replaced with a four or five digit number.

   

9. Click Done.

   In the Attribute expressions pane, the new expression is listed, named {expression/expr0}.

10. At the top of the Attribute expressions pane, click the Back button.

    

11. If necessary, expand the Text section. Click Edit text.
12. In the text editing window, on the first line, highlight the word here. On the toolbar, click the Link button.

    

13. For Link URL, type {expression/expr0}. Click the Save button.

    

14. With the here text still highlighted, click the Bold button.
15. Click OK.
16. In the pop-up, click the here link.

    

    Note:

    If a pop-up is not visible, zoom in on the map and click one of the triangle symbols.

    A new browser tab opens with a photo of the selected mountain. You don’t have permission to add these photos directly to your map, but you can provide a link so people can look at them.

17. Close the new browser tab.

Add a diagram to the pop-up

Many people reading your map may not be familiar with the term prominence. A good map ensures that people understand the information that it presents. That means that explanations and descriptions are often necessary in addition to symbology and legends. You’ll add text and a diagram to the pop-up to help explain the difference between height and prominence.

1. In the Pop-ups pane, click Add content and click Image.
2. For URL, type or copy and paste https://www.arcgis.com/sharing/rest/content/items/5172c58b3caf4361b612878d5f5da9e2/data.

   Note:

   This image is hosted as an item on ArcGIS Online. To learn how to host images, read the Adding and using photos and images in ArcGIS Online blog article.

3. For Caption, type Height (h) and prominence (p). For Alternative text, type Diagram describing height and prominence.

   

   Including alternative text helps to make your map more accessible.

4. Click Done.

   A diagram appears in the pop-up, comparing height measurements to prominence measurements. Its colors match the map. Matching colors help to create a more harmonious design.

   

5. On the Contents toolbar, click the Save and Open button and click Save.

   

You have now configured pop-ups for two layers. You created simple pop-ups for the National Parks (England) layer, displaying only the name of each park. You created complex pop-ups for the LakeDistrictFells layer, using text formatting, field properties, an attribute expression, and a diagram.

Note:

You can further customize pop-ups with HTML. Read the Beginner steps for formatting pop-ups with HTML blog article for instructions using the same pop-up that you just created.

Configure labels

Pop-ups mean that labels play a much smaller role in web maps than in print maps, but it doesn’t mean that labels should be entirely abandoned. If you can prevent someone from having to open a pop-up by providing the information up-front in a label, you’ve made the map easier to read.

Label the fells

While people can find the name of each mountain in its pop-up, you can make the map easier to read by providing labels for the most prominent peaks. This will help people find the locations of peaks that they may have heard of.

1. On the Settings toolbar, click the Labels button. In the Labels pane, ensure that LakeDistrictFells is the selected layer.
2. Click Add label class.

   

3. For Label field, choose Name.

   Labels appear on the map. There are a lot of labels, which makes the map appear crowded. You can’t show labels for every mountain and you don’t need to. You’ll create a filter so only the most prominent mountains are labeled.

4. Click Edit label filter.

   

5. Click Add new. Use the menus to build the expression Prominence (m) is at least 250.

   

   Most of the labels on the map disappear. The cut-off value of 250 is arbitrary, and when you design your own maps, you’ll have to experiment to make choices like this one that balance information with clutter.

6. Close the Filter window.

   Next, you’ll change the style of the labels to match the rest of the map.

7. Click Edit label style.
8. Change Font to Noto Sans Bold and Size to 16.

   

   Bold fonts are easier to read on crowded maps. Noto Sans is a font face that is also available in ArcGIS StoryMaps, which you’ll use later to create a layout for the map. Using the same font in both the map and the layout will help to make your map feel more consistent and professional.

9. Click the Color menu. For #, type 202e03.

   

   This is the same color that you used earlier for the outline and drop shadow of the park.

10. Click Done.
11. Under Halo, change Color to dae3d3 and size to 2.

    

    This color matches the background that the labels will most often appear against.

    Halos add visual clutter to a map but are worthwhile on busy backgrounds because they allow labels to remain legible regardless of the colors and detail behind them. The halo color should have a high contrast with the label color and be similar to the most common background color.

12. Close the Label style window.

    The labels are easier to read now, but they don’t need to be visible at all scales. You’ll set their visible range so they only appear when the map is zoomed in.

13. For Visible range, set the menus to Cities and Room.

Label the lake district

You’ll also label the Lake District National Park layer. You’ll use ArcGIS Arcade to customize the label’s text.

1. Zoom out until the mountains disappear and only Lake District National Park is shown.

   

2. At the top of the Label features pane, click the black banner and choose Lake District National Park.
3. Click Add label class. Ensure that Label field is set to NAME.

   First, you’ll ensure that this label matches the style of the other labels in your map.

4. Click Edit label style.

   

5. Change Font to Noto Sans Regular, and Size to 18.
6. Change the color to 202e03 and the halo color to dae3d3.

   Tip:

   These colors may be available in the recently used color lists.

7. Change the halo size to 2.

   

8. Close the Label style window.

   On the map, the label currently reads LAKE DISTRICT. You’ll use Arcade to add the text NATIONAL PARK to the end.

   

9. In the Label features pane, next to NAME, click the expression button.

   

10. After the text $feature[“NAME”], type or copy and paste + TextFormatting.NewLine + “NATIONAL PARK”.

    

    The TextFormatting.NewLine constant will split the text over two lines.

11. Click Run. If no error is returned, click Done.

    The label updates on the map. It has two lines of text.

    

12. For Visible range, set the menus to County and Metropolitan area.

    

13. Zoom in and out on the map.

    The label only appears at one scale. Later, when you guide people through your map, you’ll pause at this scale.

14. On the Contents toolbar, click the Save and Open button and click Save.

In this tutorial, you configured pop-ups and labels for your map of fells in Lake District National Park. You learned how to format text, create attribute expressions, and add images to pop-ups. You learned how to style and filter labels. Your web map is now complete. In the next tutorial, you’ll use ArcGIS StoryMaps to create a choreographed version of your map that you can share with others.

Acknowledgements

• The LakeDistrictFells layer was adapted from The Database of British and Irish Hills v18.
• The National Parks (England) layer is from Natural England and the Department for Environment, Food & Rural Affairs. Natural England copyright. Contains Ordnance Survey data. Crown copyright and database right 2024.
• The Lake District National Park and Clip layers are filtered views of the National Parks (England) layer described above.
• The Lakes layer is from the UK Centre for Ecology & Hydrology and The Rivers Trust. Contains Ordnance Survey Data. Taylor, P.J. (2021). Spatial inventory of UK waterbodies. NERC EDS Environmental Information Data Centre. (Dataset). https://doi.org/10.5285/b6b92ce3-dcd7-4f0b-8e43-e937ddf1d4eb
• The Rivers layer is from Esri UK and the Ordnance Survey. Contains OS data. Crown Copyright and database right 2024.
• In the basemap, the GB Light Grey, GB Hillshade, and GB Cartographic layers are from Esri UK and have the following sources: Contains OS data. Crown Copyright and database right 2023. Contains data from OS Zoomstack.
• The diagram image was created by Esri for this tutorial.