{"id":2962077,"date":"2026-04-03T13:15:50","date_gmt":"2026-04-03T20:15:50","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2962077"},"modified":"2026-04-19T20:11:55","modified_gmt":"2026-04-20T03:11:55","slug":"horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my","title":{"rendered":"Horizontal storytelling: artboards and media layers and masks, oh, my!"},"author":363212,"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":[398132,781051,781050],"industry":[],"product":[36611,380802],"class_list":["post-2962077","blog","type-blog","status-publish","format-standard","hentry","category-constituent-engagement","tag-arcgis-storymaps","tag-geospatial-storytelling","tag-scrollytelling","product-story-maps","product-arcgis-storymaps"],"acf":{"authors":[{"ID":363212,"user_firstname":"Heidi","user_lastname":"Daulton","nickname":"Heidi Daulton","user_nicename":"hdaulton","display_name":"Heidi Daulton","user_email":"hdaulton@esri.com","user_url":"","user_registered":"2024-10-15 18:03:24","user_description":"Heidi Daulton is a senior project manager for Esri\u2019s StoryMaps team. Prior to joining Esri, Heidi worked across the conservation nonprofit space doing education, GIS, and communications. She's a big fan of ultrarunning, public libraries, and her chickens.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/daulton_heidi_portrait_small-465x465.png' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"},{"ID":129801,"user_firstname":"Warren","user_lastname":"Davison","nickname":"Warren Davison","user_nicename":"wdavison","display_name":"Warren Davison","user_email":"wdavison@esri.com","user_url":"https:\/\/warrenrdavison.wixsite.com\/maps","user_registered":"2020-11-18 21:21:08","user_description":"I specialize in creating engaging maps and graphics that tell immersive, place-based stories. Based in Kitchener, Canada, I work with Esri\u2019s StoryMaps team, where I enjoy sharing the creative process behind each project. When I'm not exploring vectors and pixels, you\u2019ll likely find me cycling around town with my kids along for the ride.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2022\/09\/Profile_UC-e1662557773428-261x261.jpg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"short_description":"Learn how to recreate an illustrated, horizontal scrollytelling experience with Map Viewer and ArcGIS StoryMaps.","flexible_content":[{"acf_fc_layout":"content","content":"<p>A year ago I ran a famous marathon, and a few months after that, I created a story with <a href=\"https:\/\/storymaps.arcgis.com\/stories\/b9d27d6ec0d947ec925d0639b1bf715e\" target=\"_blank\" rel=\"noopener\"><span data-contrast=\"none\">ArcGIS StoryMaps<\/span><\/a><span data-contrast=\"auto\">. Since then, I have averaged one email a month asking how I worked my magic. Many folks assume this story involves custom code, but I assure you it is very reproducible with Map Viewer and <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/announcing-media-layers\" target=\"_blank\" rel=\"noopener\">media layers<\/a> \u2014 if you have some patience and digital illustration skills.<\/span><\/p>\n<p>Since I had to avoid any official branding to skirt permissions issues, I decided to draw my journey. I have always been in awe of illustrated digital storytelling efforts, particularly those that use a <a href=\"https:\/\/www.reuters.com\/graphics\/USA-WILDFIRES\/YOSEMITE\/zjvqkbqodvx\/\" target=\"_blank\" rel=\"noopener\">single image<\/a> a reader can scroll through. The nature of this famous race, traveling from west to east, was also a perfect use case for a <em>horizontal<\/em> scrolling experience \u2014 moving my reader along 26.2 miles with me. While the result did not utilize traditional data layers, Map Viewer still did the heavy lifting. (And it was still a map!) Here are the steps I took to create my marathon of a story.<\/p>\n<p><span data-contrast=\"auto\"><a href=\"#artboard\"><strong>Step 1:<\/strong> One, big artboard<\/a><\/span><\/p>\n<p><span data-contrast=\"auto\"><a href=\"#medialayers\"><strong>Step 2:<\/strong> Media layers\u00a0in\u00a0Map\u00a0Viewer<\/a><\/span><\/p>\n<p><span data-contrast=\"auto\"><a href=\"#sidecar\"><strong>Step\u00a03<\/strong>: Sidecar\u00a0slides\u00a0and layer toggling\u00a0in ArcGIS\u00a0StoryMaps<\/a><\/span><\/p>\n<p><span data-contrast=\"auto\"><a href=\"#masks\"><strong>Step 4:<\/strong> Masking\u00a0in\u00a0Map\u00a0Viewer<\/a><\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2962375,"id":2962375,"title":"BostonBlogRecordings_0","filename":"BostonBlogRecordings_0.gif","filesize":33255940,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_0.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/bostonblogrecordings_0","alt":"","author":"129801","description":"","caption":"","name":"bostonblogrecordings_0","status":"inherit","uploaded_to":2962077,"date":"2026-04-09 15:04:21","modified":"2026-04-09 15:04:21","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1296,"height":687,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_0-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_0.gif","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_0.gif","medium_large-width":768,"medium_large-height":407,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_0.gif","large-width":1296,"large-height":687,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_0.gif","1536x1536-width":1296,"1536x1536-height":687,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_0.gif","2048x2048-width":1296,"2048x2048-height":687,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_0-826x438.gif","card_image-width":826,"card_image-height":438,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_0.gif","wide_image-width":1296,"wide_image-height":687}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":2962084,"id":2962084,"title":"boston blog separator","filename":"boston-blog-separator-scaled.png","filesize":18414,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/boston-blog-separator","alt":"","author":"363212","description":"","caption":"","name":"boston-blog-separator","status":"inherit","uploaded_to":2962077,"date":"2026-04-03 20:10:49","modified":"2026-04-03 20:10:49","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":266,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium-width":464,"medium-height":48,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium_large-width":768,"medium_large-height":80,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","large-width":1920,"large-height":200,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1536x160.png","1536x1536-width":1536,"1536x1536-height":160,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-2048x213.png","2048x2048-width":2048,"2048x2048-height":213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-826x86.png","card_image-width":826,"card_image-height":86,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1920x200.png","wide_image-width":1920,"wide_image-height":200}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2 id=\"artboard\"><strong>Step 1: One, big artboard\u00a0<\/strong><\/h2>\n<p>The key to a smooth scrolling experience is one big image. In my illustration software, I set the height of my digital artboard to 1974 pixels, which is larger than a standard full-screen image. I wanted to avoid any part of my design getting cut off, so I added plenty of buffer around the edges. I extended the width of my artboard as needed to fit my entire illustrated race course. My artboard ended up being approximately 13,868 pixels x 1974 pixels, and I made several adjustments after seeing it in the ArcGIS StoryMaps builder.<\/p>\n<p>My story also utilized a few other \u201ctricks,\u201d such as mile markers that turned yellow and images that became full color as the reader scrolled through slides. To prepare these, I created two additional artboards of the same size; the first contained only the mile markers, and the second only the full-color images. It is important that the positions of these elements match their positions in the main image! (Use copy + paste-in-place if your program supports it.) You will want to export your images at high resolution, but be mindful of file size; images larger than 10 MB will not upload to Map Viewer, and large files can impact performance.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2962080,"id":2962080,"title":"Screenshot 2026-04-02 at 10.09.29\u202fAM","filename":"Screenshot-2026-04-02-at-10.09.29-AM.png","filesize":591422,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Screenshot-2026-04-02-at-10.09.29-AM.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/screenshot-2026-04-02-at-10-09-29-am","alt":"","author":"363212","description":"","caption":"","name":"screenshot-2026-04-02-at-10-09-29-am","status":"inherit","uploaded_to":2962077,"date":"2026-04-03 20:00:19","modified":"2026-04-03 20:00:19","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2314,"height":1072,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Screenshot-2026-04-02-at-10.09.29-AM-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Screenshot-2026-04-02-at-10.09.29-AM.png","medium-width":464,"medium-height":215,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Screenshot-2026-04-02-at-10.09.29-AM.png","medium_large-width":768,"medium_large-height":356,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Screenshot-2026-04-02-at-10.09.29-AM.png","large-width":1920,"large-height":889,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Screenshot-2026-04-02-at-10.09.29-AM-1536x712.png","1536x1536-width":1536,"1536x1536-height":712,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Screenshot-2026-04-02-at-10.09.29-AM-2048x949.png","2048x2048-width":2048,"2048x2048-height":949,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Screenshot-2026-04-02-at-10.09.29-AM-826x383.png","card_image-width":826,"card_image-height":383,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Screenshot-2026-04-02-at-10.09.29-AM-1920x889.png","wide_image-width":1920,"wide_image-height":889}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":2962084,"id":2962084,"title":"boston blog separator","filename":"boston-blog-separator-scaled.png","filesize":18414,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/boston-blog-separator","alt":"","author":"363212","description":"","caption":"","name":"boston-blog-separator","status":"inherit","uploaded_to":2962077,"date":"2026-04-03 20:10:49","modified":"2026-04-03 20:10:49","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":266,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium-width":464,"medium-height":48,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium_large-width":768,"medium_large-height":80,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","large-width":1920,"large-height":200,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1536x160.png","1536x1536-width":1536,"1536x1536-height":160,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-2048x213.png","2048x2048-width":2048,"2048x2048-height":213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-826x86.png","card_image-width":826,"card_image-height":86,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1920x200.png","wide_image-width":1920,"wide_image-height":200}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2 id=\"medialayers\"><strong>Step 2: Media layers in Map Viewer<\/strong><\/h2>\n<p>Once the images were exported from my illustration software, it was time to load them as media layers in Map Viewer. Aligning media layers is a relatively quick but critical part of the process, and is made that much easier when your media layers are the same size. My alignment method involved positioning my images relative to elements within a basemap. To do this, I selected the \u201cCharted Territory Map\u201d since it had graticules I could easily reference.<\/p>\n<p>When you load your image as a media layer, you\u2019ll be prompted to position it on the map. Choose an intersection of a latitude and longitude as an \u201canchor point\u201d and align one corner of your image to this point. Then scale the opposite corner of your image to another readily available line of latitude or longitude while holding \u2018shift\u2019 to preserve the aspect-ratio. Repeat this process for all your media layers using the same reference points.<\/p>\n<p>Once everything was aligned, I turned off my base map layer and enabled the background color. The background color in Map Viewer should match the background color of your graphic.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2962373,"id":2962373,"title":"BostonBlogRecordings_1","filename":"BostonBlogRecordings_1.gif","filesize":10339139,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_1.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/bostonblogrecordings_1","alt":"","author":"129801","description":"","caption":"","name":"bostonblogrecordings_1","status":"inherit","uploaded_to":2962077,"date":"2026-04-09 14:57:33","modified":"2026-04-09 14:57:33","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1296,"height":687,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_1-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_1.gif","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_1.gif","medium_large-width":768,"medium_large-height":407,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_1.gif","large-width":1296,"large-height":687,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_1.gif","1536x1536-width":1296,"1536x1536-height":687,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_1.gif","2048x2048-width":1296,"2048x2048-height":687,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_1-826x438.gif","card_image-width":826,"card_image-height":438,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_1.gif","wide_image-width":1296,"wide_image-height":687}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":2962084,"id":2962084,"title":"boston blog separator","filename":"boston-blog-separator-scaled.png","filesize":18414,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/boston-blog-separator","alt":"","author":"363212","description":"","caption":"","name":"boston-blog-separator","status":"inherit","uploaded_to":2962077,"date":"2026-04-03 20:10:49","modified":"2026-04-03 20:10:49","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":266,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium-width":464,"medium-height":48,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium_large-width":768,"medium_large-height":80,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","large-width":1920,"large-height":200,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1536x160.png","1536x1536-width":1536,"1536x1536-height":160,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-2048x213.png","2048x2048-width":2048,"2048x2048-height":213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-826x86.png","card_image-width":826,"card_image-height":86,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1920x200.png","wide_image-width":1920,"wide_image-height":200}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2 id=\"sidecar\"><strong>Step 3: Sidecar slides and layer toggling in ArcGIS StoryMaps<\/strong><\/h2>\n<p>The next task was to set\u00a0up\u00a0my story in the builder. A horizontal scrolling experience, much like a regular scrolling experience, is simply a series of sidecar slides.\u00a0I began with one slide and\u00a0placed\u00a0my\u00a0corresponding text.\u00a0I then added my \u201cmap\u201d and set the extent.\u00a0(Tip: leave yourself visual notes in your text, so you know which part of the image corresponds to each slide of text.)\u00a0To create the illusion of moving along the\u00a0racecourse, I then duplicated this first slide\u00a0and adjusted the map extent slightly farther \u201cdown\u201d the course. The key is to\u00a0<strong>maintain\u00a0the same vertical extent<\/strong> while shifting only the horizontal extent. One way to accomplish this is to place your mouse in the top-right corner, grab your map, and drag it to the left as far as you desire; your mouse should remain at the top of the frame, keeping the vertical extent the same.<\/p>\n<p>I repeated this process of duplicating the previous slide and shifting the map extent until my narrative was complete.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2962376,"id":2962376,"title":"BostonBlogRecordings_2","filename":"BostonBlogRecordings_2.gif","filesize":26566666,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_2.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/bostonblogrecordings_2","alt":"","author":"129801","description":"","caption":"","name":"bostonblogrecordings_2","status":"inherit","uploaded_to":2962077,"date":"2026-04-09 15:05:40","modified":"2026-04-09 15:05:40","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1296,"height":687,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_2-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_2.gif","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_2.gif","medium_large-width":768,"medium_large-height":407,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_2.gif","large-width":1296,"large-height":687,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_2.gif","1536x1536-width":1296,"1536x1536-height":687,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_2.gif","2048x2048-width":1296,"2048x2048-height":687,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_2-826x438.gif","card_image-width":826,"card_image-height":438,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_2.gif","wide_image-width":1296,"wide_image-height":687}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":2962084,"id":2962084,"title":"boston blog separator","filename":"boston-blog-separator-scaled.png","filesize":18414,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/boston-blog-separator","alt":"","author":"363212","description":"","caption":"","name":"boston-blog-separator","status":"inherit","uploaded_to":2962077,"date":"2026-04-03 20:10:49","modified":"2026-04-03 20:10:49","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":266,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium-width":464,"medium-height":48,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium_large-width":768,"medium_large-height":80,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","large-width":1920,"large-height":200,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1536x160.png","1536x1536-width":1536,"1536x1536-height":160,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-2048x213.png","2048x2048-width":2048,"2048x2048-height":213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-826x86.png","card_image-width":826,"card_image-height":86,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1920x200.png","wide_image-width":1920,"wide_image-height":200}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2 id=\"masks\"><strong>Step 4: Masking in Map Viewer<\/strong><\/h2>\n<p>To elevate the reading experience,\u00a0my colleague and map wizard,\u00a0Warren Davison,\u00a0suggested a few\u00a0additional\u00a0\u201chacks.\u201d The color of the mile markers\u00a0\u201clight up\u201d\u00a0(turn yellow)\u00a0to match the\u00a0narrative\u00a0panel, and any\u00a0corresponding images\u00a0become full color\u00a0instead of\u00a0duotone. This was\u00a0all\u00a0done in\u00a0Map\u00a0Viewer\u00a0using a combination of <a href=\"https:\/\/doc.arcgis.com\/en\/arcgis-online\/create-maps\/create-sketch-layers-mv.htm\" target=\"_blank\" rel=\"noopener\">sketch layers<\/a> and <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/how-to-style-a-media-layer-using-effects-and-blend-modes\" target=\"_blank\" rel=\"noopener\">blend modes<\/a>, and my two\u00a0additional\u00a0artboards created in step 1.<\/p>\n<p>To learn how to make clipping masks in Map Viewer, watch <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/create-a-clipping-mask-in-arcgis-onlines-map-viewer\" target=\"_blank\" rel=\"noopener\">this video<\/a>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2962377,"id":2962377,"title":"BostonBlogRecordings_3","filename":"BostonBlogRecordings_3.gif","filesize":17548406,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_3.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/bostonblogrecordings_3","alt":"","author":"129801","description":"","caption":"","name":"bostonblogrecordings_3","status":"inherit","uploaded_to":2962077,"date":"2026-04-09 15:14:33","modified":"2026-04-09 15:14:33","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1296,"height":687,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_3-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_3.gif","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_3.gif","medium_large-width":768,"medium_large-height":407,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_3.gif","large-width":1296,"large-height":687,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_3.gif","1536x1536-width":1296,"1536x1536-height":687,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_3.gif","2048x2048-width":1296,"2048x2048-height":687,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_3-826x438.gif","card_image-width":826,"card_image-height":438,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_3.gif","wide_image-width":1296,"wide_image-height":687}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>My second sidecar slide, for example, highlighted &#8220;miles&#8221; 2 and 3 of my narrative, but three other markers and two unrelated images were within the same map extent. I needed these other elements to remain \u201coff,\u201d so they were masked on their media layer to show only the desired markers and images. These masks were named appropriately to make it easier to toggle them on and off within the ArcGIS StoryMaps builder. (I recommend naming by slide number.) This process was repeated for every slide, and, yes, there were a lot of layers! Visual notes in your text will save you a lot of back-and-forth between Map Viewer and StoryMaps.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2962378,"id":2962378,"title":"BostonBlogRecordings_4","filename":"BostonBlogRecordings_4.gif","filesize":22215295,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_4.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/bostonblogrecordings_4","alt":"","author":"129801","description":"","caption":"","name":"bostonblogrecordings_4","status":"inherit","uploaded_to":2962077,"date":"2026-04-09 15:18:51","modified":"2026-04-09 15:18:51","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1296,"height":687,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_4-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_4.gif","medium-width":464,"medium-height":246,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_4.gif","medium_large-width":768,"medium_large-height":407,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_4.gif","large-width":1296,"large-height":687,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_4.gif","1536x1536-width":1296,"1536x1536-height":687,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_4.gif","2048x2048-width":1296,"2048x2048-height":687,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_4-826x438.gif","card_image-width":826,"card_image-height":438,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/BostonBlogRecordings_4.gif","wide_image-width":1296,"wide_image-height":687}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"image","image":{"ID":2962084,"id":2962084,"title":"boston blog separator","filename":"boston-blog-separator-scaled.png","filesize":18414,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\/boston-blog-separator","alt":"","author":"363212","description":"","caption":"","name":"boston-blog-separator","status":"inherit","uploaded_to":2962077,"date":"2026-04-03 20:10:49","modified":"2026-04-03 20:10:49","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":266,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium-width":464,"medium-height":48,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","medium_large-width":768,"medium_large-height":80,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-scaled.png","large-width":1920,"large-height":200,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1536x160.png","1536x1536-width":1536,"1536x1536-height":160,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-2048x213.png","2048x2048-width":2048,"2048x2048-height":213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-826x86.png","card_image-width":826,"card_image-height":86,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-separator-1920x200.png","wide_image-width":1920,"wide_image-height":200}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<h2>Try it yourself<\/h2>\n<p>Though this process can seem tedious, the result is very rewarding. To get inspired and create your own media layer experience, check out these other examples:<\/p>\n<ul>\n<li><a href=\"https:\/\/storymaps.arcgis.com\/stories\/68b6231de6b44dd2a3d9816652bd5b92\" target=\"_blank\" rel=\"noopener\">Deep dives<\/a> &#8211; vertical scroll<\/li>\n<li><a href=\"https:\/\/storymaps.arcgis.com\/stories\/116a7760e70249519cb82a6a0f64ede7\" target=\"_blank\" rel=\"noopener\">Leaps and bounds in aviation<\/a> &#8211; horizontal scroll<\/li>\n<\/ul>\n<p>Happy scrollytelling!<\/p>\n"}],"related_articles":[{"ID":1914782,"post_author":"7641","post_date":"2023-05-08 13:30:58","post_date_gmt":"2023-05-08 20:30:58","post_content":"","post_title":"Use Map Viewer media layers and feature or sketch layers to create image hotspots","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"media-layer-image-hotspots","to_ping":"","pinged":"","post_modified":"2023-05-08 13:30:58","post_modified_gmt":"2023-05-08 20:30:58","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=1914782","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":2477052,"post_author":"129801","post_date":"2024-09-10 06:58:23","post_date_gmt":"2024-09-10 13:58:23","post_content":"","post_title":"Get creative with image choreography using media layers","post_excerpt":"","post_status":"publish","comment_status":"open","ping_status":"closed","post_password":"","post_name":"get-creative-with-image-choreography-using-media-layers","to_ping":"","pinged":"","post_modified":"2025-07-02 06:41:59","post_modified_gmt":"2025-07-02 13:41:59","post_content_filtered":"","post_parent":0,"guid":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2477052","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"show_article_image":false,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-cover_v2-copy.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-cover_v2.png"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.9 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Horizontal storytelling: artboards and media layers and masks, oh, my!<\/title>\n<meta name=\"description\" content=\"How to achieve a horizontal scroll effect using Map Viewer, media layers, and ArcGIS StoryMaps\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Horizontal storytelling: artboards and media layers and masks, oh, my!\" \/>\n<meta property=\"og:description\" content=\"Learn how to recreate an illustrated, horizontal scrollytelling experience with Map Viewer and ArcGIS StoryMaps.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T03:11:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Blog-Card-Image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"826\" \/>\n\t<meta property=\"og:image:height\" content=\"465\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to recreate an illustrated, horizontal scrollytelling experience with Map Viewer and ArcGIS StoryMaps.\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\"},\"author\":{\"name\":\"Heidi Daulton\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/7db7eb611a51b4b61ac43bafac684d4c\"},\"headline\":\"Horizontal storytelling: artboards and media layers and masks, oh, my!\",\"datePublished\":\"2026-04-03T20:15:50+00:00\",\"dateModified\":\"2026-04-20T03:11:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\"},\"wordCount\":10,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"ArcGIS StoryMaps\",\"geospatial storytelling\",\"scrollytelling\"],\"articleSection\":[\"Constituent Engagement\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\",\"name\":\"Horizontal storytelling: artboards and media layers and masks, oh, my!\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2026-04-03T20:15:50+00:00\",\"dateModified\":\"2026-04-20T03:11:55+00:00\",\"description\":\"How to achieve a horizontal scroll effect using Map Viewer, media layers, and ArcGIS StoryMaps\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Horizontal storytelling: artboards and media layers and masks, oh, my!\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/7db7eb611a51b4b61ac43bafac684d4c\",\"name\":\"Heidi Daulton\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/daulton_heidi_portrait_small-465x465.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/daulton_heidi_portrait_small-465x465.png\",\"caption\":\"Heidi Daulton\"},\"description\":\"Heidi Daulton is a senior project manager for Esri\u2019s StoryMaps team. Prior to joining Esri, Heidi worked across the conservation nonprofit space doing education, GIS, and communications. She's a big fan of ultrarunning, public libraries, and her chickens.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/heidi-daulton\/\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/hdaulton\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Horizontal storytelling: artboards and media layers and masks, oh, my!","description":"How to achieve a horizontal scroll effect using Map Viewer, media layers, and ArcGIS StoryMaps","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my","og_locale":"en_US","og_type":"article","og_title":"Horizontal storytelling: artboards and media layers and masks, oh, my!","og_description":"Learn how to recreate an illustrated, horizontal scrollytelling experience with Map Viewer and ArcGIS StoryMaps.","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2026-04-20T03:11:55+00:00","og_image":[{"width":826,"height":465,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/Blog-Card-Image.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_description":"Learn how to recreate an illustrated, horizontal scrollytelling experience with Map Viewer and ArcGIS StoryMaps.","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my"},"author":{"name":"Heidi Daulton","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/7db7eb611a51b4b61ac43bafac684d4c"},"headline":"Horizontal storytelling: artboards and media layers and masks, oh, my!","datePublished":"2026-04-03T20:15:50+00:00","dateModified":"2026-04-20T03:11:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my"},"wordCount":10,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["ArcGIS StoryMaps","geospatial storytelling","scrollytelling"],"articleSection":["Constituent Engagement"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my","name":"Horizontal storytelling: artboards and media layers and masks, oh, my!","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2026-04-03T20:15:50+00:00","dateModified":"2026-04-20T03:11:55+00:00","description":"How to achieve a horizontal scroll effect using Map Viewer, media layers, and ArcGIS StoryMaps","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Horizontal storytelling: artboards and media layers and masks, oh, my!"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/7db7eb611a51b4b61ac43bafac684d4c","name":"Heidi Daulton","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/daulton_heidi_portrait_small-465x465.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/daulton_heidi_portrait_small-465x465.png","caption":"Heidi Daulton"},"description":"Heidi Daulton is a senior project manager for Esri\u2019s StoryMaps team. Prior to joining Esri, Heidi worked across the conservation nonprofit space doing education, GIS, and communications. She's a big fan of ultrarunning, public libraries, and her chickens.","sameAs":["https:\/\/www.linkedin.com\/in\/heidi-daulton\/"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/hdaulton"}]}},"text_date":"April 3, 2026","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/constituent-engagement\/horizontal-storytelling-artboards-and-media-layers-and-masks-oh-my","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2026\/04\/boston-blog-cover_v2.png","primary_product":"ArcGIS StoryMaps","tag_data":[{"term_id":398132,"name":"ArcGIS StoryMaps","slug":"arcgis-storymaps","term_group":0,"term_taxonomy_id":398132,"taxonomy":"post_tag","description":"","parent":0,"count":183,"filter":"raw"},{"term_id":781051,"name":"geospatial storytelling","slug":"geospatial-storytelling","term_group":0,"term_taxonomy_id":781051,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"},{"term_id":781050,"name":"scrollytelling","slug":"scrollytelling","term_group":0,"term_taxonomy_id":781050,"taxonomy":"post_tag","description":"","parent":0,"count":1,"filter":"raw"}],"category_data":[{"term_id":37131,"name":"Constituent Engagement","slug":"constituent-engagement","term_group":0,"term_taxonomy_id":37131,"taxonomy":"category","description":"","parent":0,"count":391,"filter":"raw"}],"product_data":[{"term_id":36611,"name":"ArcGIS StoryMaps","slug":"story-maps","term_group":0,"term_taxonomy_id":36611,"taxonomy":"product","description":"","parent":36981,"count":571,"filter":"raw"},{"term_id":380802,"name":"ArcGIS StoryMaps","slug":"arcgis-storymaps","term_group":0,"term_taxonomy_id":380802,"taxonomy":"product","description":"","parent":0,"count":322,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=arcgis-storymaps","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2962077","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/363212"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=2962077"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2962077\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2962077"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2962077"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2962077"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2962077"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2962077"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}