{"id":2800642,"date":"2025-05-27T10:45:01","date_gmt":"2025-05-27T17:45:01","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&#038;p=2800642"},"modified":"2025-05-27T13:13:24","modified_gmt":"2025-05-27T20:13:24","slug":"tricks-of-the-trade","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade","title":{"rendered":"Tricks of the trade: Small web mapping techniques with big impacts"},"author":7231,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[26451,33371,27881],"industry":[],"product":[36611,380802],"class_list":["post-2800642","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-cartography","tag-map-viewer","tag-storytelling","product-story-maps","product-arcgis-storymaps"],"acf":{"authors":[{"ID":7231,"user_firstname":"Cooper","user_lastname":"Thomas","nickname":"Cooper Thomas","user_nicename":"cooper_thomas","display_name":"Cooper Thomas","user_email":"Cooper_Thomas@esri.com","user_url":"https:\/\/cooper-thomas.com\/","user_registered":"2018-03-02 00:19:29","user_description":"Cooper is a cartographer on Esri\u2019s StoryMaps team. His maps have found their way onto the @Esrigram Instagram feed, the front page of Reddit, and his parents\u2019 fridge. In his spare time, Cooper enjoys playing Mozart to his houseplants so that they someday grow tall and strong.","user_avatar":"<img data-del=\"avatar\" src='https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/CooperThomas-465x465.jpg' class='avatar pp-user-avatar avatar-96 photo ' height='96' width='96'\/>"}],"short_description":"These cartographic tricks are subtle but effective. When combined, they can help your maps tell more cohesive, immersive, and effective stories.","flexible_content":[{"acf_fc_layout":"content","content":"<p><span data-contrast=\"none\">The StoryMaps team recently published <\/span><a href=\"https:\/\/storymaps.arcgis.com\/stories\/a5717b028f3b4583963b4a7e513b6040\"><i><span data-contrast=\"none\">Weighing the nuclear option<\/span><\/i><\/a><span data-contrast=\"none\">, a visual, data-driven exploration of nuclear energy in the U.S. This article highlights some of the subtle but impactful cartographic tricks we employed in Map Viewer to clarify and contextualize the maps and datasets that form the backbone of the story.<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2800652,"id":2800652,"title":"Cover","filename":"Cover.png","filesize":2452340,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/Cover.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\/cover-24","alt":"","author":"7231","description":"","caption":"","name":"cover-24","status":"inherit","uploaded_to":2800642,"date":"2025-05-20 21:44:50","modified":"2025-05-22 22:15:37","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":2543,"height":1315,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/Cover-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/Cover.png","medium-width":464,"medium-height":240,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/Cover.png","medium_large-width":768,"medium_large-height":397,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/Cover.png","large-width":1920,"large-height":993,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/Cover-1536x794.png","1536x1536-width":1536,"1536x1536-height":794,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/Cover-2048x1059.png","2048x2048-width":2048,"2048x2048-height":1059,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/Cover-826x427.png","card_image-width":826,"card_image-height":427,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/Cover-1920x993.png","wide_image-width":1920,"wide_image-height":993}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/arcg.is\/0jKmTC0"},{"acf_fc_layout":"content","content":"<p><span data-contrast=\"none\">The best place-based stories are often stronger than the sum of their individual parts. And while the techniques described below are individually insignificant, they complement and play off each other to establish a visually cohesive, immersive, and effective narrative experience. If you\u2019re a GIS storyteller looking to elevate your web maps, you might find these tips helpful in your own ArcGIS StoryMaps projects.<\/span><\/p>\n<p>&nbsp;<\/p>\n<h2><span data-contrast=\"none\">Packed circles<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:360,&quot;335559739&quot;:120}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"none\">Geography is at the heart of many stories created with ArcGIS StoryMaps, and <\/span><i><span data-contrast=\"none\">Weighing the nuclear option <\/span><\/i><span data-contrast=\"none\">is no exception. But in some cases, it can be beneficial to introduce key datasets in a non-spatial manner before placing them on a map. This approach can help readers familiarize themselves with big-picture patterns in the data. It&#8217;s especially useful when the data is geographically clustered, or spread out over a vast area, or otherwise distributed in such a manner that impedes direct comparisons.<\/span><\/p>\n<p><span data-contrast=\"none\">To this end, this story uses <\/span><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/mapping\/mapping-packed-circles\"><b><span data-contrast=\"none\">packed circles<\/span><\/b><\/a><b> <\/b><span data-contrast=\"none\">to visualize the quantity and capacity of all U.S. power plants. Individual facilities are grouped by fuel type, and sized according to their net annual electricity generation. The chart reveals a key pattern in the data that would be difficult to discern on a map: Nuclear power plants are small in number, but big in output. (In contrast, solar power plants are much more numerous but don&#8217;t produce as much energy individually.) This statistical reality is one of the story&#8217;s central themes, which is why we took care to present it in plain terms at the beginning of the narrative.<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2800662,"id":2800662,"title":"PackedCircles","filename":"PackedCircles.gif","filesize":1550117,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/PackedCircles.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\/packedcircles","alt":"","author":"7231","description":"","caption":"","name":"packedcircles","status":"inherit","uploaded_to":2800642,"date":"2025-05-20 21:48:04","modified":"2025-05-20 21:48:04","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":800,"height":409,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/PackedCircles-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/PackedCircles.gif","medium-width":464,"medium-height":237,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/PackedCircles.gif","medium_large-width":768,"medium_large-height":393,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/PackedCircles.gif","large-width":800,"large-height":409,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/PackedCircles.gif","1536x1536-width":800,"1536x1536-height":409,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/PackedCircles.gif","2048x2048-width":800,"2048x2048-height":409,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/PackedCircles.gif","card_image-width":800,"card_image-height":409,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/PackedCircles.gif","wide_image-width":800,"wide_image-height":409}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><span data-contrast=\"none\">To create these packed circles, we used a lightly modified version of <a href=\"https:\/\/www.arcgis.com\/home\/item.html?id=11b7b48cbef64a9cacb3cade7eb4ba4c\"><strong>a script<\/strong><\/a> developed by my mega-talented colleague Warren Davison. The script ingests a point feature layer, then scales and groups its constituent features according to user-defined input attributes, and finally generates a new polygon layer of packed circles. <\/span><span data-contrast=\"none\">Of course, the resulting features are no longer positioned in their real-world geographic locations. But the layer itself can still be added to a web map, and its features scaled and re-positioned like any other editable feature layer. This allows you to create clever <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/mapping\/choreograph-your-maps-with-arcgis-storymaps\"><strong>map choreography<\/strong><\/a> sequences that transition elegantly from the non-spatial to the spatial, like the example above.<\/span><\/p>\n<p><em>(Pro tip: Including a subtle zoom effect between the packed circles and the geographic map can smooth out the transition between the two separate layer groups, and create a more dynamic presentation.)\u00a0<\/em><\/p>\n<p><strong><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-storymaps\/mapping\/mapping-packed-circles\">Generate packed circles in ArcGIS Pro \u2192<\/a><\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2><span data-contrast=\"none\">Animated symbols<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:360,&quot;335559739&quot;:120}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"none\">Another subtle but deliberate cartographic detail in this story is the selective use of animated symbols. Like many eye-catching cartographic techniques, animated symbols are most effective when used in moderation \u2014 for example, to create foreground-background separation or to draw readers\u2019 attention to a few key features or areas of interest.<\/span><span data-ccp-props=\"{&quot;335559739&quot;:0}\">\u00a0<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2800672,"id":2800672,"title":"AnimatedSymbol","filename":"AnimatedSymbol.gif","filesize":1562971,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/AnimatedSymbol.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\/animatedsymbol","alt":"","author":"7231","description":"","caption":"","name":"animatedsymbol","status":"inherit","uploaded_to":2800642,"date":"2025-05-20 21:50:03","modified":"2025-05-20 21:50:03","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":1920,"height":982,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/AnimatedSymbol-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/AnimatedSymbol.gif","medium-width":464,"medium-height":237,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/AnimatedSymbol.gif","medium_large-width":768,"medium_large-height":393,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/AnimatedSymbol.gif","large-width":1920,"large-height":982,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/AnimatedSymbol-1536x786.gif","1536x1536-width":1536,"1536x1536-height":786,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/AnimatedSymbol.gif","2048x2048-width":1920,"2048x2048-height":982,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/AnimatedSymbol-826x422.gif","card_image-width":826,"card_image-height":422,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/AnimatedSymbol.gif","wide_image-width":1920,"wide_image-height":982}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><span data-contrast=\"none\">In the nuclear power story, we used animated symbols to highlight the 10 most powerful power plants in the U.S. (while still showing all other power plants). The pulsating symbols serve as soft storytelling cues, gently guiding readers\u2019 attention to key features on the map without requiring explicit descriptions or annotations. Other power plants are still visible on the map, but are pushed into the background to provide context without distraction.<\/span><\/p>\n<p><strong><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/use-animated-symbols-in-map-viewer\">Learn more about animated symbols \u2192<\/a><\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2><span data-contrast=\"none\">Media layers<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:360,&quot;335559739&quot;:120}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"none\">The addition of media layers to ArcGIS Online unlocks some creative new cartographic possibilities. For example, in <em>Weighing the nuclear option <\/em>we used media layers to superimpose a hand-illustrated diagram onto a web map \u2014 a clever technique that we\u2019ve explored and documented <a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/constituent-engagement\/media-layers-in-arcgis-storymaps\">previously<\/a>.<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2800752,"id":2800752,"title":"MediaLayer","filename":"MediaLayer.gif","filesize":1341709,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/MediaLayer.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\/medialayer","alt":"","author":"7231","description":"","caption":"","name":"medialayer","status":"inherit","uploaded_to":2800642,"date":"2025-05-20 22:05:52","modified":"2025-05-20 22:05:52","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":800,"height":409,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/MediaLayer-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/MediaLayer.gif","medium-width":464,"medium-height":237,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/MediaLayer.gif","medium_large-width":768,"medium_large-height":393,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/MediaLayer.gif","large-width":800,"large-height":409,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/MediaLayer.gif","1536x1536-width":800,"1536x1536-height":409,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/MediaLayer.gif","2048x2048-width":800,"2048x2048-height":409,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/MediaLayer.gif","card_image-width":800,"card_image-height":409,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/MediaLayer.gif","wide_image-width":800,"wide_image-height":409}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><span data-contrast=\"none\">But we also used a media layer to place a photo of a specific nuclear plant directly onto the map, adjacent to the corresponding feature. While the image isn&#8217;t the focal point of the map, it still serves a dual purpose: Improving the map\u2019s visual balance by filling an otherwise empty space, and connecting abstract data to the real world by showing what the nearby map feature actually represents.<\/span><\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2800722,"id":2800722,"title":"TurkeyPoint","filename":"TurkeyPoint.png","filesize":1611372,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/TurkeyPoint.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\/turkeypoint","alt":"","author":"7231","description":"","caption":"","name":"turkeypoint","status":"inherit","uploaded_to":2800642,"date":"2025-05-20 21:57:37","modified":"2025-05-20 21:57:37","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":2543,"height":1315,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/TurkeyPoint-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/TurkeyPoint.png","medium-width":464,"medium-height":240,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/TurkeyPoint.png","medium_large-width":768,"medium_large-height":397,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/TurkeyPoint.png","large-width":1920,"large-height":993,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/TurkeyPoint-1536x794.png","1536x1536-width":1536,"1536x1536-height":794,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/TurkeyPoint-2048x1059.png","2048x2048-width":2048,"2048x2048-height":1059,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/TurkeyPoint-826x427.png","card_image-width":826,"card_image-height":427,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/TurkeyPoint-1920x993.png","wide_image-width":1920,"wide_image-height":993}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p><span data-contrast=\"none\">Applying layer effects to the media layer (such as a subtle drop shadow or glow) can also help the image stand out against the basemap.<\/span><\/p>\n"},{"acf_fc_layout":"kaltura","video_id":"1_rn9cz5he","time":false,"start":0,"stop":""},{"acf_fc_layout":"content","content":"<p><strong><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/constituent-engagement\/media-layers-in-arcgis-storymaps\">Incorporate media layers into your maps \u2192<\/a><\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2>Gradients and vignettes<\/h2>\n<p>It\u2019s a common cartographic practice to symbolize well-defined areas (such as administrative boundaries or building footprints) with sharp, crisp lines. But when mapping more generalized or uncertain areas (like habitat ranges or radiation plumes), hard borders can imply a level of precision that doesn\u2019t actually exist.<\/p>\n<p>Transparency gradients can minimize the risk of implied specificity by blurring or softening area boundaries. Such cartographic styles suggest that the areas they represent are generalized, or imprecise, rather than clear-cut. In the nuclear story, for example, we combined hatched fills (a polygon style included with Map Viewer) with transparency gradients to represent the traditional lands of the Western Shoshone and Southern Paiute people. This approach masks the coarse resolution of the underlying dataset, and also improves the legibility of overlapping areas.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":2805102,"id":2805102,"title":"YuccaMtn2","filename":"YuccaMtn2.png","filesize":412940,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\/yuccamtn2","alt":"","author":"7231","description":"","caption":"","name":"yuccamtn2","status":"inherit","uploaded_to":2800642,"date":"2025-05-22 22:07:33","modified":"2025-05-22 22:07:33","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":1661,"height":1039,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2.png","medium-width":417,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2.png","medium_large-width":768,"medium_large-height":480,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2.png","large-width":1661,"large-height":1039,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2-1536x961.png","1536x1536-width":1536,"1536x1536-height":961,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2.png","2048x2048-width":1661,"2048x2048-height":1039,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2-743x465.png","card_image-width":743,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2.png","wide_image-width":1661,"wide_image-height":1039}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"<p>Speaking of fuzzy boundaries, a vignette \u2014 or a subtle darkening (or lightening) of the edges of a map or image \u2014 can also help guide a viewer\u2019s eye toward the intended subject. The best vignettes are subtle; in my opinion, they should only be noticeable in side-by-side comparisons. We applied a subtle vignette to the map above in order to minimize background noise at the map&#8217;s periphery. (If you don&#8217;t notice the vignette, well, that means it&#8217;s working!)<\/p>\n<p>&nbsp;<\/p>\n"},{"acf_fc_layout":"kaltura","video_id":"1_pkkddhp1","time":false,"start":0,"stop":""},{"acf_fc_layout":"content","content":"<p>Like the other techniques mentioned in this article, vignettes and gradients fulfill functional purposes while also contributing to an aesthetic that feels intentional and refined. Both of these edge-blurring techniques can be achieved in Map Viewer using a combination of sketch layers, layer effects, and blend modes. The video above highlights the basic workflow, which you can tweak to achieve your desired effect. Alternatively, you can check out the <a href=\"https:\/\/www.arcgis.com\/apps\/mapviewer\/index.html?webmap=e9f55962a14e48e0b1e35f3e95af98d3\"><strong>tribal lands web map<\/strong><\/a> featured above to see exactly how we implemented these styles in Map Viewer.<\/p>\n<p><strong><a href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/easy-vignette-effect-for-arcgis-online-and-pro-maps\">Apply vignettes and gradient fills in Map Viewer \u2192<\/a><\/strong><\/p>\n<p>&nbsp;<\/p>\n<h2><span data-contrast=\"none\">Wrap-up<\/span><span data-ccp-props=\"{&quot;134245418&quot;:true,&quot;134245529&quot;:true,&quot;335559738&quot;:360,&quot;335559739&quot;:120}\">\u00a0<\/span><\/h2>\n<p><span data-contrast=\"none\">These techniques are by no means groundbreaking, or especially noteworthy on their own\u2014 but together, they help build a clear, cohesive, and compelling visual narrative. Lest we forget, geographic storytelling isn\u2019t about cramming as much information as possible onto a map\u00a0 \u2014 it\u2019s about guiding your readers&#8217; attention to specific features and locations, at specific times, and in specific sequences, in order to enhance their understanding. <\/span><\/p>\n<p><span data-contrast=\"none\">We encourage you to try one or two of these techniques in your next geographic story. And if you have a favorite trick of your own, let us know! We\u2019re always curious to see what you\u2019re making.<\/span><\/p>\n"}],"related_articles":"","show_article_image":false,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/05\/YuccaMtn2-1.png","wide_image":false},"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>Tricks of the trade: Small web mapping techniques with big impacts<\/title>\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\/story-maps\/mapping\/tricks-of-the-trade\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tricks of the trade: Small web mapping techniques with big impacts\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\" \/>\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=\"2025-05-27T20:13:24+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 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\/story-maps\/mapping\/tricks-of-the-trade#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\"},\"author\":{\"name\":\"Cooper Thomas\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5cf9066ee476b2e05b875167d63369be\"},\"headline\":\"Tricks of the trade: Small web mapping techniques with big impacts\",\"datePublished\":\"2025-05-27T17:45:01+00:00\",\"dateModified\":\"2025-05-27T20:13:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\"},\"wordCount\":11,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"cartography\",\"Map Viewer\",\"storytelling\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\",\"name\":\"Tricks of the trade: Small web mapping techniques with big impacts\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2025-05-27T17:45:01+00:00\",\"dateModified\":\"2025-05-27T20:13:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tricks of the trade: Small web mapping techniques with big impacts\"}]},{\"@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\/5cf9066ee476b2e05b875167d63369be\",\"name\":\"Cooper Thomas\",\"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\/2024\/10\/CooperThomas-465x465.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/CooperThomas-465x465.jpg\",\"caption\":\"Cooper Thomas\"},\"description\":\"Cooper is a cartographer on Esri\u2019s StoryMaps team. His maps have found their way onto the @Esrigram Instagram feed, the front page of Reddit, and his parents\u2019 fridge. In his spare time, Cooper enjoys playing Mozart to his houseplants so that they someday grow tall and strong.\",\"sameAs\":[\"https:\/\/cooper-thomas.com\/\",\"https:\/\/www.linkedin.com\/in\/cooperthomasmaps\/\",\"https:\/\/x.com\/infinitecoop\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/cooper_thomas\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tricks of the trade: Small web mapping techniques with big impacts","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\/story-maps\/mapping\/tricks-of-the-trade","og_locale":"en_US","og_type":"article","og_title":"Tricks of the trade: Small web mapping techniques with big impacts","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2025-05-27T20:13:24+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade"},"author":{"name":"Cooper Thomas","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5cf9066ee476b2e05b875167d63369be"},"headline":"Tricks of the trade: Small web mapping techniques with big impacts","datePublished":"2025-05-27T17:45:01+00:00","dateModified":"2025-05-27T20:13:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade"},"wordCount":11,"commentCount":0,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["cartography","Map Viewer","storytelling"],"articleSection":["Mapping"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade","name":"Tricks of the trade: Small web mapping techniques with big impacts","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2025-05-27T17:45:01+00:00","dateModified":"2025-05-27T20:13:24+00:00","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/story-maps\/mapping\/tricks-of-the-trade#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Tricks of the trade: Small web mapping techniques with big impacts"}]},{"@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\/5cf9066ee476b2e05b875167d63369be","name":"Cooper Thomas","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\/2024\/10\/CooperThomas-465x465.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2024\/10\/CooperThomas-465x465.jpg","caption":"Cooper Thomas"},"description":"Cooper is a cartographer on Esri\u2019s StoryMaps team. His maps have found their way onto the @Esrigram Instagram feed, the front page of Reddit, and his parents\u2019 fridge. In his spare time, Cooper enjoys playing Mozart to his houseplants so that they someday grow tall and strong.","sameAs":["https:\/\/cooper-thomas.com\/","https:\/\/www.linkedin.com\/in\/cooperthomasmaps\/","https:\/\/x.com\/infinitecoop"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/cooper_thomas"}]}},"text_date":"May 27, 2025","author_name":"Cooper Thomas","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/cooper_thomas","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS StoryMaps","tag_data":[{"term_id":26451,"name":"cartography","slug":"cartography","term_group":0,"term_taxonomy_id":26451,"taxonomy":"post_tag","description":"","parent":0,"count":558,"filter":"raw"},{"term_id":33371,"name":"Map Viewer","slug":"map-viewer","term_group":0,"term_taxonomy_id":33371,"taxonomy":"post_tag","description":"","parent":0,"count":155,"filter":"raw"},{"term_id":27881,"name":"storytelling","slug":"storytelling","term_group":0,"term_taxonomy_id":27881,"taxonomy":"post_tag","description":"","parent":0,"count":120,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"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=story-maps","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2800642","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\/7231"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=2800642"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/2800642\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=2800642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=2800642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=2800642"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=2800642"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=2800642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}