Layout
A map on its own is easily misinterpreted. Both static and interactive maps benefit from titles, legends, controls, inset maps, and other surrounding information to properly explain their symbols, context, and message. The design of these elements alongside the map is called a layout. Not all elements are necessary. Refer to your map's goal to help you decide what needs to be included and what can be left out.
In this module, you will learn how to do the following:
- Design effective layouts for static and interactive maps.
- Adapt interactive layouts for smaller screens.
- Convert maps between ArcGIS Pro and ArcGIS Online.
- Create effective legends.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/make-a-web-experience-with-two-maps-card.png)
Begin a web app layout in ArcGIS Experience Builder.
- Type: Tutorial
- Level: Intermediate
- Duration: 15 minutes
- High-Level Tasks: Make a new experience. Add a map widget with two maps. Configure map tools. Add a header with a title.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/arrange-a-web-app-layout-with-multiple-widgets-card.png)
Add row, column, legend, bookmark, and swipe widgets in ArcGIS Experience Builder.
- Type: Tutorial
- Level: Intermediate
- Duration: 20 minutes
- High-Level Tasks: Add legend, column, bookmark, and swipe widgets. Adjust widget height settings.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/add-a-window-to-a-web-app-card.png)
Add a button that opens a window in ArcGIS Experience Builder.
- Type: Tutorial
- Level: Intermediate
- Duration: 15 minutes
- High-Level Tasks: Add a window and an image. Adjust the theme. Add a button and link it to the window.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/resize-widgets-for-smaller-screens-card.png)
Create custom layouts for different screen sizes in ArcGIS Experience Builder.
- Type: Tutorial
- Level: Intermediate
- Duration: 15 minutes
- High-Level Tasks: Enable the custom layout option. Move an item to the pending list. Set sizes and positions with pixels.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/publish-an-experience-and-a-template-card.png)
Preview and publish a web app in ArcGIS Experience Builder, update sharing privileges, and save an experience template.
- Type: Tutorial
- Level: Intermediate
- Duration: 10 minutes
- High-Level Tasks: Preview and publish an experience. Update sharing privileges. Save a template.
![](https://learn.arcgis.com/cdn/card-catalog/uploads/playlists/improve-a-map-legend-card.png)
To improve a map's legend, often all that’s needed is a bit of tidying: renaming, reordering, and removing items.
- Type: Video series
- Level: Intermediate
- Duration: 10 minutes
ARTICLE
How to get the most from interactive maps
How much interactivity to include in your map is a central question in modern cartography.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/customize-a-theme-for-impactful-stories-card1.png)
TUTORIAL
Customize a theme for impactful stories
Design an ArcGIS StoryMaps theme for a story about wildfire smoke.
TUTORIAL
Create a COVID-19 dashboard
Build maps using COVID-19 worldwide cases and create a dashboard.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/optimize-an-app-layout-for-mobile.png)
TUTORIAL
Optimize an app layout for mobile
Transform an app from a desktop experience to a mobile experience using ArcGIS Experience Builder.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/set-permissions-for-an-app-card.png)
TUTORIAL AND VIDEO
Set permissions for an app
Make sure your story or other app is viewable by everyone.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/make-a-layout-with-two-maps-card.png)
Create a layout with map frames, guides, text, and graphics.
- Type: Tutorial
- Level: Intermediate
- Duration: 25 minutes
- High-Level Tasks: Insert a layout. Add guides, map frames, a title, and a subtitle.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/arrange-a-layout-card.png)
Add legends, a scale bar, an inset map, and text to a layout.
- Type: Tutorial
- Level: Intermediate
- Duration: 30 minutes
- High-Level Tasks: Add legends, a scale bar, an inset map, credit text, and descriptive text. Arrange map surrounds.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/finish-and-export-a-layout-card.png)
Assess and export a layout in ArcGIS Pro.
- Type: Tutorial
- Level: Intermediate
- Duration: 20 minutes
- High-Level Tasks: Remove items. Assess a layout's consistency and visual hierarchy. Export a layout. Change the size of a layout.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/convert-a-static-map-into-a-weba-app-card.png)
Convert a map of historic cities in Africa into an interactive dashboard.
- Type: Tutorial
- Level: Intermediate
- Duration: 30 minutes
- High-Level Tasks: Share a map as a web map. Configure basemap layers. Create a dashboard.
![](https://doc.arcgis.com/cdn/card-catalog/uploads/cards/print_card.png)
Convert a web map of historic cities in Africa into a static map and layout in ArcGIS Pro.
- Type: Tutorial
- Level: Intermediate
- Duration: 30 minutes
- High-Level Tasks: Open a web map in ArcGIS Pro. Change the coordinate system. Make a layout. Configure labels. Export the layout.
VIDEO
Add multiple maps to one layout
Practical skills for working with layouts and maps.
VIDEO
Remove layers from a legend
Not every layer on your map needs to be featured in the legend. This video shares examples in ArcGIS Map Viewer and ArcGIS Pro. It demonstrates four times when a layer can be removed from a legend.
ARTICLE
Foreground, background, and hierarchies
Placing map components so that some are seen as foreground and others as background makes the map easier to read.
ARTICLE
Put a north arrow on it?
Do you always need to put a north arrow on a map? No way. In fact, frequently you should not put a north arrow on a map.
TUTORIAL AND VIDEO
Make a layout
Create a map of average yearly solar radiation for buildings in central Wellington, New Zealand.
ARTICLE
Make a custom legend
Communicate more clearly with your map by taking the legend past the defaults.
Ask the following questions of your layout to confirm that it supports your map's objective:
- What is the first thing someone will notice when they look at the map?
- Who are you making the map for? Will they be happy with the overall message and tone?
- Are the colors, fonts, and other visual elements of your layout consistent?
- Would your map be better if it was multiple maps? Would it be better if it was a chart instead?
- Which map layers need to be explained with a legend and which ones do not?
- Should you replace the legend with labels or a text description?
- How would you explain this map to a friend? Does the legend explain it in a similar way?
- Will your audience recognize the area on the map or do you need to add a locator map?
- Does your map need a north arrow? Will people assume that north is at the top?
- Does your map need a scale bar? Will people use this map for measuring or comparing distances?
- Do you have text to credit the original data source?
- Do people need to be able to switch the basemap?
- Do people need to be able to turn layers on and off?
- Will your audience understand how to navigate the map?
- Does the symbology still look good in your final medium? Do you need to adjust sizes or colors?
- Will this map be embedded inside other applications or documents? Will it still work?
- Will this map be printed in black and white sometimes? Will it be viewed on a projector with poor contrast? Will it still be legible?
- Do you need to make several versions of this map for different media or contexts?
- Have you proofread your map?
Design three different page layouts for a map you have already symbolized.
You can use ArcGIS Pro, ArcGIS Experience Builder, ArcGIS StoryMaps, ArcGIS Dashboards, ArcGIS Instant Apps, or a similar program.
Optionally, make changes to the map (for example, change the symbology, basemap, or projection) if it improves your layout.
- Which design conveys your intended message most clearly? Why?
- Rank the three most important elements of your layout. Which design best reflects their importance?
- If you had to make your layout half of its current size, which elements would you remove?
If you don’t have your own map, use one of the suggestions below. You may choose to map the entire dataset or only a subset or smaller area.