{"id":70371,"date":"2015-12-16T20:00:44","date_gmt":"2015-12-16T20:00:44","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/enhance-your-story-map-journal-legend\/"},"modified":"2024-04-09T13:28:31","modified_gmt":"2024-04-09T20:28:31","slug":"enhance-your-story-map-journal-legend","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/enhance-your-story-map-journal-legend","title":{"rendered":"Enhance your Story Map Journal legend"},"author":7641,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[29271,24861,29261],"industry":[],"product":[36551,36611],"class_list":["post-70371","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-legends","tag-story-map-journal","tag-story-map-tips","product-arcgis-online","product-story-maps"],"acf":{"short_description":"Techniques you can apply to enhance your Story Map Journal legend.","flexible_content":[{"acf_fc_layout":"content","content":"

Note<\/strong>: This blog article covers the classic Esri Story Maps which are in mature support and scheduled to be retired in late 2025<\/strong>. Story authors are strongly encouraged to use the new ArcGIS StoryMaps<\/a> to create stories.<\/p>\n

For more information about transitioning to the new StoryMaps, see ArcGIS StoryMaps resources<\/a>. For more information about the transition from classic Esri Story Maps to the new ArcGIS StoryMaps, see Esri Story Maps: Now in mature support<\/a>.<\/p>\n

\"\"<\/p>\n"},{"acf_fc_layout":"content","content":"

Story Map Journal<\/a> is a very popular story map app, and is especially useful when you have lots of maps, text, and media. The Map Journal builder is used for authoring, enabling you to add maps, media, and text via Sections, each composed of a Main Stage and a Side Panel. When adding a map to the Map Journal main stage, you can choose whether to include an overview map and legend.<\/p>\n

\"\"<\/a><\/p>\n

The legend is generated from the web map, and is displayed along with the map on the main stage, as shown in this example. Note the legend in the web map on the left and how it appears in the Map Journal on the right.<\/p>\n

\"\"<\/a><\/p>\n

Layer legend visibility, layer and sublayer titles, symbols and symbol transparency, and other layer properties from the web map are honored in the Map Journal legend. In addition, using Map Journal settings you can choose a theme, setting the color scheme for the Journal including the background color of the legend, as shown above.<\/p>\n

Going beyond the standard legend<\/strong><\/p>\n

There may be cases when you want to alter the standard legend, and go beyond the defaults. Using the text and media capabilities of the side panel, there are several options that allow you to enhance, or even replace, the main stage map legend.<\/p>\n

Option 1: Use text and color<\/strong><\/p>\n

By using a combination of text and color, you can highlight certain aspects of the legend and draw the viewer’s attention to what you want them to understand from the map. Alter the text color (and other text properties) using side panel tools.<\/p>\n

\"\"<\/a><\/p>\n

This example from What’s New in Smart Mapping<\/a> uses text and color (Drive Alone\u00a0and Carpool) to emphasize what the map and legend show.<\/p>\n

\"\"<\/a><\/p>\n

Option 2: Use a graphic<\/strong><\/p>\n

You can create a graphic of the legend as desired, and add the graphic using side panel tools.<\/p>\n

\"\"<\/a><\/p>\n

This example from Income Inequality in Boston<\/a> displays a PNG file of the legend in the side panel.<\/p>\n

\"\"<\/a><\/p>\n

Option 3: Style your own legend using CSS<\/strong><\/p>\n

Another option, though requiring knowledge of HTML, is to style your own legend using CSS via the side panel Source editor.<\/p>\n

\"\"<\/a><\/p>\n

This example from Bats Under Threat<\/a> uses a custom-styled legend.<\/p>\n

\"\"<\/a><\/p>\n

The markup for the classes is shown below. These classes were defined at the top of the side panel using the source editor. Key elements are:<\/p>\n