{"id":76051,"date":"2017-03-16T12:03:06","date_gmt":"2017-03-16T12:03:06","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/products\/product\/uncategorized\/adding-a-map-to-the-side-panel-in-story-map-journal-or-series\/"},"modified":"2021-04-29T08:13:03","modified_gmt":"2021-04-29T15:13:03","slug":"adding-a-map-to-the-side-panel-in-story-map-journal-or-series","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/constituent-engagement\/adding-a-map-to-the-side-panel-in-story-map-journal-or-series","title":{"rendered":"Adding a map to the side panel in Story Map Journal or Series"},"author":5441,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[37131],"tags":[24861,27501],"industry":[],"product":[36551,36611],"class_list":["post-76051","blog","type-blog","status-publish","format-standard","hentry","category-constituent-engagement","tag-story-map-journal","tag-story-map-series","product-arcgis-online","product-story-maps"],"acf":{"short_description":"Using an interactive map within the narrative panel can provide valuable context for your readers.","flexible_content":[{"acf_fc_layout":"content","content":"

Note<\/strong>: This blog covers the classic Esri Story Maps. Story authors are encouraged to use the new\u00a0ArcGIS StoryMaps<\/a> to create stories; however, Esri will continue to maintain the classic templates for your use. For more information, see the Product road map<\/a>.<\/p>\n

\n

Anyone who has created a Story Map Journal<\/a> or Story Map Series<\/a> knows that a web map can be used in the main stage, but this post covers another way to use maps in these types of stories — adding a map to the side panel.<\/p>\n

Embedded maps<\/strong><\/p>\n

Embedded maps look and behave better than ever so there are good reasons to think about new ways to use them. For example, the New York City Landmarks Preservation Committee published this map journal<\/a> that has a nice example of an map embedded in the side panel.<\/p>\n

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

However, before you go down this route, be sure you really need a live map in your story<\/em>. If the data layers aren’t changing and you don’t need your readers to interact with the map, it’s best to take a screenshot of the map and include that in your story. An image will always load faster than a live map, so save live maps for when you truly need them.<\/p>\n

Step 1: Generate and copy the embed code for the web map<\/strong><\/span><\/p>\n

With your web map open in the map viewer click Share<\/strong>. This brings up the Embed in Website panel where you can choose the settings you’d like to use for the embedded map. Uncheck Allow responsive sizing<\/strong> (you’ll configure the size of your map in the Map Journal builder), and leave\u00a0Disable scroll zoom<\/strong> checked.<\/p>\n

It’s recommended that you disable all other map options unless you absolutely need something. Your embedded map will be small, so a simple and clean look is preferable.<\/p>\n

When you have the configuration you want, Copy<\/strong> the resulting code.<\/p>\n

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

Step 2: Insert media to the side panel<\/strong><\/p>\n

Launch the Story Map Journal or Series builder and edit the section to which you are going to add the map. On the Side Panel tab<\/em> click Insert an image, video, or web page<\/strong>.<\/p>\n

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

Select Web Page<\/strong>, paste the code snippet you copied in Step 1 into the Embed code<\/em> box, then click Configure<\/strong>.<\/p>\n

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

Select Custom<\/strong> for the Position<\/em> then enter a width of “100%”<\/strong> and start with a height of “400”<\/strong> (not<\/em> “400%”). This specifies the width in percent since it usually looks best when the map fills the horizontal space in side panel. The height is specified in pixels, and you can adjust it depending on how tall you want the map in your story.<\/p>\n

Click Apply<\/strong>, then Save<\/strong> the changes to your section.<\/p>\n

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

Finishing touches<\/strong><\/p>\n

There’s usually not much room for a detailed map in the side panel, so make sure your map is simple. It should have just one or two layers and very simple labels, if needed.<\/p>\n

Also consider disabling pop-ups<\/em> on all layers in the embedded map. If you make the embedded map large enough small pop-ups can work well (as in the example shown at the beginning of this post), but make sure you configure a small, concise custom pop-up for all layers.<\/p>\n

Be sure the side panel size is appropriate to display the map detail you’re after. You can increase or decrease the width of the side panel\u00a0in Settings<\/strong> > Layout options<\/strong>\u00a0(Journal’s options are shown below, but there are similar options for Series).<\/p>\n

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

For more information<\/strong><\/p>\n