Style the story
Maps are a form of visual communication. You’ll enhance the visuals of your ArcGIS StoryMaps story by adding images and customizing its theme.
Add a cover image
Your map is intended to attract international visitors to Lake District National Park. Toward that end, you’ll begin the story with a photograph that conveys the wild and rugged beauty of the landscape.
- Download and unzip the LakeDistrictPhotos.zip compressed folder.
- Sign in to ArcGIS StoryMaps with your ArcGIS online account or sign in to your ArcGIS Enterprise portal and click the app launcher button and click ArcGIS StoryMaps.
Note:
If you don't have an ArcGIS account, see options for software access.
- If you completed the earlier tutorial Cartographic creations – Guide users through a map, reopen your Lake District Fells story.
- If you did not complete the earlier tutorial, open the Lake District Fells 5 story. On the ribbon, click the More actions button and click Duplicate story. Click Yes, duplicate. Delete the text (Copy) and 5 from the title.
- If necessary, scroll to the top of the story. Click Add cover image or video.
- Click Browse your files. Browse to the unzipped LakeDistrictPhotos folder and select CoverImage.jpg.
- Click Add.
There are many beautiful images of the Lake District available. You chose this one because it features a mountain peak—the theme of your map—and because its colors match those of your map.
However, the photo is not shown to its full advantage, due to the way it is cropped. You’ll choose a different cover design to change this.
- On the ribbon, click Design.
- In the Design pane, under Cover, click the middle option, Side-by-side.
- Close the Design pane.
The cover photo is now positioned next to the story’s title instead of above it.
You’ll add attribution and alternative text for the photo.
- On the photo’s toolbar, click the Options button.
- Click the Properties tab. For Attribution, type Damien Platt, iStock. For Alternative text, type Lake District mountains.
- Click Save.
Add images to the slides
You’ll also add images to the slides. You’ll add another photo and a diagram.
- Scroll down. Below the map, click the third slide.
This slide describes the map’s symbols, but it doesn’t explain the difference between height and prominence. You’ll add the same diagram image that you included earlier in the map’s pop-ups.
- On the card, point to the text. Below the last paragraph, click the Add content block button.
- Click Image. In the Add an image window, click Link.
Note:
If the Link option is not available, download the image. Click Browse your files and upload the image.
- Paste https://www.arcgis.com/sharing/rest/content/items/5172c58b3caf4361b612878d5f5da9e2/data and click Add.
The diagram appears below the text.
- Below the diagram, click Add a caption (optional) and type Height (h) and prominence (p).
- Point to the image. Click the Options button and the Properties tab.
- For Attribution, type Esri. For Alternative text, type Diagram describing height and prominence. Click Save.
- Scroll down to the fourth slide.
This slide features a particular mountain—Scafell Pike. You’ll add a photo of it to this slide.
- On the card, below the second paragraph, click the Add content block button and click Image.
- Click Browse your files. Browse to the unzipped LakeDistrictPhotos folder and select ScafellPike.jpg.
- Click Add.
- Point to the image. Click the Options button and the Properties tab.
- For Attribution, type WhitecombeRD, iStock. For Alternative text, type The peak of Scafell Pike. Click Save.
Set the story’s theme
As you designed your map, you were careful to choose colors that were consistent and harmonious. This effort should be extended to the layout. The map and the layout should appear to the viewer as a single product, rather than two separate things. To achieve this effect, you’ll customize the story’s theme. You’ll choose colors and fonts to match those used in the map.
- On the ribbon, click the Design tab.
- Under Theme, click Ridgeline.
- Scroll through the story.
The pale green background color of the Ridgeline theme matches the colors of the map. Next, you’ll change the font face and color to match as well.
- Click Manage my themes.
- Click New theme.
- In the Choose a starting point pane, click Ridgeline and click Select.
Note:
If the Choose a starting point pane is not visible, close the theme browser tab and return to the story. Close the Design pane and skip to the next section.
You can now change design elements of Ridgeline to create a custom theme.
- Click Untitled Theme and type Fells.
- Expand Colors. Change Accent color to #879906.
This color will underline links in your story. It matches the cover photo of your story.
- Expand Typography.
- For both Title and headings and Paragraph, choose Noto Sans and set the color to #202E03.
This is the same font and color used by the labels in the map.
- On the ribbon, click Publish.
- For Set sharing level, choose Everyone (Public). Click Publish.
- Close the theme builder browser tab and return to the story tab.
- In the Design pane, click Browse my themes.
- Choose the Fells theme.
- Close the Design pane and scroll through the story to see the new theme applied.
The addition of photos helps to bring your map to life. The custom theme helps to make the map and its layout (the story) feel seamless. Together, these visual changes make your map more professional looking and engaging.
Write data attributions
Your story is almost complete; all that remains is to add credits for your data sources. Adding credits to a map can be a tedious task, but it must not be ignored. You are often legally required to give credit to data sources, but a good map will include them even when they are not required. Credits make a map credible and are helpful to map readers who want to learn more about the data or use it in their own projects.
Add data credits
You’ll add a credit line for each layer in the map, starting with the Fells layer. You’ll also include links to the original data sources.
- Scroll to the bottom of the story.
- Click Add a credits heading (optional) and type Data sources.
Click Add a credits description (optional) and copy and paste This story and web map were created by Your Name in Year by following the tutorial series Cartographic creations with web maps.
- Replace Your Name with your name and Year with the current year.
- Click Content and type Fells.
- For Attribution, copy and paste Adapted from The Database of British and Irish Hills v18.
Some of the text is underlined because the hyperlink is copied and pasted along with the text.
Note:
If none of the text is underlined, highlight The Database of British and Irish Hills. In the toolbar that appears, click the Link button and click Web page. Copy and paste https://www.hills-database.co.uk/downloads.html and click Apply.
Find credit information for map data
Finding the information necessary to properly credit map data can take time. Ideally, you should record data sources early in the cartographic process, when you first find the data. However, it is easy to forget and miss a layer. Next, you’ll learn how to find credit information for data layers in your web map.
- Click the Add credit button and type National Parks.
You’ll find the URL and attribution text for the National Parks layer through the web map.
- Reopen your Lake District National Park web map.
Note:
If you can’t find the web map, or if you are using ArcGIS Enterprise, open Lake District National Park 5.
- If necessary, on the Contents (dark) toolbar, click the Layers button to open the Layers pane.
- In the Layers pane, click the Lake District National Park layer to select it.
A blue bar appears next to the layer when it is selected.
You can find the item page for the feature layer in the Properties pane.
- If necessary, on the Settings (light) toolbar, click the Properties button to open the Properties pane.
- In the Properties pane, expand the Information section. Under Source layer, click National Parks (England) / Lake District National Park.
The item page for the feature layer appears in a new browser tab.
- On the blue ribbon, click the arrow to go to the root of the item page.
The item page for the feature layer appears.
- Scroll to the bottom of the page and review the Credits (Attribution) section.
This text can often be copied and reused as attribution in your map or app.
- From the browser’s address bar, copy the web page’s URL.
- Return to the Lake District Fells story browser tab.
- Highlight the text National Parks. In the toolbar that appears, click the Link button.
- Click Web page. Paste the copied URL.
Most likely, the URL contains the name of your ArcGIS Online organization. If it does, the link may not work for people outside of your organization. You’ll modify the URL to create a public version of it.
- In the URL, erase the text between https:// and .arcgis.com.
- Type www to replace the erased text.
The final URL should be https://www.arcgis.com/home/item.html?id=d333c7529754444894e2d7f5044d1bbf.
- Click Apply.
You’ll also add the attribution text that you read earlier on the item page.
- Click Attribution. Copy and paste © Natural England copyright. Contains Ordnance Survey data © Crown copyright and database right 2024.
Complete the data credits
Next, you’ll add links and attribution text for the remaining data in your map.
- Click the Add credit button and type Lakes.
- Highlight the text Lakes and add the following link: https://www.arcgis.com/home/item.html?id=c9fc4b95456e4b22ad162f91a453c0eb.
- For Attribution, copy and paste This resource is made available under the Open Government Licence v3 (OGL) © Contains data supplied by UK Centre for Ecology & Hydrology. © Contains Ordnance Survey Data. Acknowledgement: 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.
- Click the Add credit button and type Rivers.
- Highlight the text Rivers and add the following link: https://www.arcgis.com/home/item.html?id=6048e8a5e29b49b093e79f08c732f109.
- For Attribution, copy and paste Contains OS data © Crown Copyright and database right 2024.
- Click the Add credit button and type Basemap.
All three of the basemap layers have the same data sources and are merely styled differently, so you’ll combine their attribution into one line.
- For Attribution, copy and paste GB Light Grey, GB Hillshade, and GB Cartographic: Contains OS data © Crown Copyright and database right 2023 Contains data from OS Zoomstack.
Publish the story
The story is complete. To finish, you’ll preview and publish it.
- On the ribbon, click Preview.
- In the window that appears, click Yes, continue.
- Scroll through the story to review it.
It’s easy to miss mistakes and inconsistencies when you’re editing a story. It’s important to review the final product before publishing.
- On the preview toolbar, click the Close preview button.
- If you found any errors during your review, fix them now.
- On the ribbon, click Publish.
- For Set sharing level, choose Everyone (Public).
- Click Publish.
A window appears alerting you that some of the contents of your story require permission updates. It is not enough to share the story with everyone, the map and layers within the story must be shared as well.
Note:
If you are using the provided story rather than your own, the warning may not appear.
- Click Yes, publish anyway.
Another window appears.
- Click Yes, share these items.
In this tutorial, you enhanced the appearance of your story by adding images and creating a custom theme that matches your map.
In this tutorial series, you built a professional quality interactive map. In Map Viewer, you created a map using data from a .csv file, ArcGIS Living Atlas, and ArcGIS Online. You configured multivariate thematic symbology, effects, visibility ranges, pop-ups, and labels. You used filters, attribute expressions, and blend modes. You changed the map’s projection and combined multiple layers to create a custom and cohesive basemap. In ArcGIS StoryMaps, you created an interactive layout to guide people through your map. You added text, images, and a legend to help explain the map. You customized its appearance and credited its data sources.
Cartography is a creative task. In this tutorial series, all of the design choices were made for you, to help you learn how to apply them in the software. However, when you make your own maps, you’ll need to make your own design decisions, and the choices may not be obvious. Be willing to experiment with many options and always keep your map’s purpose in mind. To continue your learning, try making another map of the Lake District Fells using your own design choices. The following are some suggestions for how to redesign this map:
- Build the layout using ArcGIS Dashboards instead of ArcGIS StoryMaps.
- Give the map a quirky or sporty tone by changing its colors, fonts, and other design elements.
- Use the original data to map hills and mountains from another area.
- Make a series of maps that each present the data in a different way.
- Rewrite the story to focus on the geology of the Lake District.
- Use a dark basemap.
You can find all of the tutorials in this series at Cartographic creations with web maps. You can find more cartography tutorials on the Introduction to Cartography page.