{"id":1877122,"date":"2023-11-06T04:00:04","date_gmt":"2023-11-06T12:00:04","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=1877122"},"modified":"2024-10-21T15:51:51","modified_gmt":"2024-10-21T22:51:51","slug":"how-to-style-a-media-layer-using-effects-and-blend-modes","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/how-to-style-a-media-layer-using-effects-and-blend-modes","title":{"rendered":"Apply Cartographic Effects to Blend Media Layers into Maps"},"author":320122,"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":[42641,720281,26451,33371,769492],"industry":[],"product":[36551],"class_list":["post-1877122","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-arcgis-online","tag-blend-modes","tag-cartography","tag-map-viewer","tag-media-layer","product-arcgis-online"],"acf":{"short_description":"Applying effects and blend modes to Media Layers is one of the latest ways you can customize your webmaps.","flexible_content":[{"acf_fc_layout":"content","content":"

If you\u2019ve been following what\u2019s new in ArcGIS Online, you may have heard some buzz about Media Layer<\/a>, a recent addition to Map Viewer. Media Layer allows you to quickly overlay static images on top of maps and place them in a specific geographic location.<\/p>\n

At the Dev Summit earlier this year, my colleague Mohanraj Balumiri demonstrated how to style a media layer using a combination of tools in Map Viewer to achieve some cool cartographic effects. If you missed it, you can watch the video here<\/a>. In this post, you’ll learn how to apply those effects using the same image.<\/p>\n

With this 1941 map of the Mall of Washington, D.C, you’ll use tools including Sketch, Group Layer, Blend Modes, Effects, and Visible range to blend the image into a basemap in Map Viewer. Then you’ll style the basemap for the finishing touch.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1883922,"id":1883922,"title":"Library of Congress image_1941 Map of Washington D.C.","filename":"Library-of-Congress-image_1941-Map-of-Washington-D.C.-scaled.jpg","filesize":733073,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Library-of-Congress-image_1941-Map-of-Washington-D.C.-scaled.jpg","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/how-to-style-a-media-layer-using-effects-and-blend-modes\/library-of-congress-image_1941-map-of-washington-d-c","alt":"Map of 'Development of the Central Area West and East of the Capitol - Washington D.C. 1941' from the Library of Congress","author":"320122","description":"","caption":"Blend this 1941 map of the Mall in Washington D.C. into a modern Esri basemap.","name":"library-of-congress-image_1941-map-of-washington-d-c","status":"inherit","uploaded_to":1877122,"date":"2023-03-22 17:48:24","modified":"2023-03-22 17:49:35","menu_order":0,"mime_type":"image\/jpeg","type":"image","subtype":"jpeg","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":2560,"height":1107,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Library-of-Congress-image_1941-Map-of-Washington-D.C.-213x200.jpg","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Library-of-Congress-image_1941-Map-of-Washington-D.C.-scaled.jpg","medium-width":464,"medium-height":201,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Library-of-Congress-image_1941-Map-of-Washington-D.C.-scaled.jpg","medium_large-width":768,"medium_large-height":332,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Library-of-Congress-image_1941-Map-of-Washington-D.C.-scaled.jpg","large-width":1920,"large-height":830,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Library-of-Congress-image_1941-Map-of-Washington-D.C.-1536x664.jpg","1536x1536-width":1536,"1536x1536-height":664,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Library-of-Congress-image_1941-Map-of-Washington-D.C.-2048x886.jpg","2048x2048-width":2048,"2048x2048-height":886,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Library-of-Congress-image_1941-Map-of-Washington-D.C.-826x357.jpg","card_image-width":826,"card_image-height":357,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Library-of-Congress-image_1941-Map-of-Washington-D.C.-1920x831.jpg","wide_image-width":1920,"wide_image-height":831}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"sidebar","content":"

*Note: October 2023- Now that ArcGIS Online supports saving Group Layers as items, I’ve saved the layers mentioned in this article as a Group Layer that you can easily add to your maps. Skip to the bottom for more info.\u00a0<\/em><\/p>\n","image_reference":false,"layout":"standard","image_reference_figure":"","snippet":"","spotlight_name":"","section_title":"","position":"Center","spotlight_image":false},{"acf_fc_layout":"content","content":"

This workflow is acheived using Media Layers in Map Viewer. You start by adding and placing the image (aka media layer) in your map. This article won\u2019t go into detail about that, but i<\/strong>f working with media layers is new to you…<\/strong> <\/em>start with this previous post<\/a><\/strong>. Then come back here to style the media layer.<\/p>\n

Download the image for use in this article from the Library of Congress here<\/a>.<\/em><\/p>\n"},{"acf_fc_layout":"content","content":"

Once you\u2019re happy with how the image is placed in your map, you’ll can follow along with these steps to blend the image into the map, trim away some text, and give the image a soft, faded edge. Adding this kind of high-end visual polish is possible to do in just a few minutes using tools readily available in Map Viewer.<\/p>\n

Step 1: Create a Sketch<\/strong><\/p>\n

In this step, you’ll use Sketch to trim the media layer.<\/p>\n

Once your image is placed in Map Viewer (see above), you’ll sketch a polygon over the portion of the media layer that you want to preserve. Later, you’ll crop the rest using a blend mode.<\/p>\n

    \n
  1. On the light toolbar, click Sketch<\/strong>\u00a0to add a new sketch layer to the map \"Sketch\".<\/li>\n
  2. From the sketch tools, choose Polygon<\/strong> \"Polygon\".<\/li>\n
  3. Draw a polygon over the area in the image that you want to keep<\/em>, leaving out areas you want to crop out, such as the text at the top and bottom of the image.<\/li>\n<\/ol>\n"},{"acf_fc_layout":"image","image":{"ID":1878552,"id":1878552,"title":"03 Sketch a Polygon over the image","filename":"03-Sketch-a-Polygon-over-the-image-e1679356213690.png","filesize":993597,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/03-Sketch-a-Polygon-over-the-image-e1679356213690.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/how-to-style-a-media-layer-using-effects-and-blend-modes\/03-sketch-a-polygon-over-the-image","alt":"Sketch a polygon over the image","author":"320122","description":"","caption":"Sketch a polygon over the portion of the image you want to preserve","name":"03-sketch-a-polygon-over-the-image","status":"inherit","uploaded_to":1877122,"date":"2023-03-17 23:12:17","modified":"2023-03-21 02:07:17","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":796,"height":414,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/03-Sketch-a-Polygon-over-the-image-e1679356213690-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/03-Sketch-a-Polygon-over-the-image-e1679356213690-464x241.png","medium-width":464,"medium-height":241,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/03-Sketch-a-Polygon-over-the-image-e1679356213690-768x399.png","medium_large-width":768,"medium_large-height":399,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/03-Sketch-a-Polygon-over-the-image-e1679356213690.png","large-width":796,"large-height":414,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/03-Sketch-a-Polygon-over-the-image-e1679356213690.png","1536x1536-width":796,"1536x1536-height":414,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/03-Sketch-a-Polygon-over-the-image-e1679356213690.png","2048x2048-width":796,"2048x2048-height":414,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/03-Sketch-a-Polygon-over-the-image-739x465.png","card_image-width":739,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/03-Sketch-a-Polygon-over-the-image-e1679356213690.png","wide_image-width":796,"wide_image-height":414}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    By default, the sketch Fill transparency<\/strong> is set to 75%. This polygon should be solid, as any transparency will carry through to the media layer later when applying a blend mode.<\/p>\n

    Move the slider all the way to the left to change the Fill transparency to 0%.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1881642,"id":1881642,"title":"04 Set Transparency to 0 v2","filename":"04-Set-Transparency-to-0-v2-1.png","filesize":24969,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/04-Set-Transparency-to-0-v2-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/how-to-style-a-media-layer-using-effects-and-blend-modes\/04-set-transparency-to-0-v2-2","alt":"Set the Fill transparency to 0%","author":"320122","description":"","caption":"Set the Fill transparency to 0%","name":"04-set-transparency-to-0-v2-2","status":"inherit","uploaded_to":1877122,"date":"2023-03-21 19:57:26","modified":"2023-03-21 19:58:02","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":433,"height":294,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/04-Set-Transparency-to-0-v2-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/04-Set-Transparency-to-0-v2-1.png","medium-width":384,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/04-Set-Transparency-to-0-v2-1.png","medium_large-width":433,"medium_large-height":294,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/04-Set-Transparency-to-0-v2-1.png","large-width":433,"large-height":294,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/04-Set-Transparency-to-0-v2-1.png","1536x1536-width":433,"1536x1536-height":294,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/04-Set-Transparency-to-0-v2-1.png","2048x2048-width":433,"2048x2048-height":294,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/04-Set-Transparency-to-0-v2-1.png","card_image-width":433,"card_image-height":294,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/04-Set-Transparency-to-0-v2-1.png","wide_image-width":433,"wide_image-height":294}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

     <\/p>\n

    Step 2: Group the Target Layers<\/strong><\/p>\n

    You can use Groups to target specific layers when using effects and blend modes. Otherwise tools like blend modes can affect more layers in the map, including the basemap. You’ll add the sketch layer and the media layer to a New Group<\/strong> to ensure that only those layers are affected by blend modes and effects you’ll apply later.<\/p>\n

    Open the Layer pane if needed.<\/p>\n

    On the Sketch <\/strong>layer, <\/strong>click Options\u00a0 \"Options\" .<\/strong><\/p>\n

    In the menu that appears, click Group<\/strong>.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1880822,"id":1880822,"title":"05 Create a Group","filename":"05-Create-a-Group-1.png","filesize":6344613,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/05-Create-a-Group-1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/how-to-style-a-media-layer-using-effects-and-blend-modes\/05-create-a-group-2","alt":"Create a new Group layer","author":"320122","description":"","caption":"Create a new Group layer","name":"05-create-a-group-2","status":"inherit","uploaded_to":1877122,"date":"2023-03-21 16:59:38","modified":"2023-03-21 17:00:27","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":3308,"height":1596,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/05-Create-a-Group-1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/05-Create-a-Group-1.png","medium-width":464,"medium-height":224,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/05-Create-a-Group-1.png","medium_large-width":768,"medium_large-height":371,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/05-Create-a-Group-1.png","large-width":1920,"large-height":926,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/05-Create-a-Group-1-1536x741.png","1536x1536-width":1536,"1536x1536-height":741,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/05-Create-a-Group-1-2048x988.png","2048x2048-width":2048,"2048x2048-height":988,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/05-Create-a-Group-1-826x399.png","card_image-width":826,"card_image-height":399,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/05-Create-a-Group-1-1920x926.png","wide_image-width":1920,"wide_image-height":926}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

    Click to expand the Group Layer.<\/p>\n

    Drag the media layer into the Group, placing it below<\/em> Sketch. This is a crucial step, as you\u2019ll see that the layer order makes a difference when you apply a blend mode.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1881082,"id":1881082,"title":"06 Order the Layers 3","filename":"06-Order-the-Layers-3.png","filesize":5043769,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/06-Order-the-Layers-3.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/how-to-style-a-media-layer-using-effects-and-blend-modes\/06-order-the-layers-3","alt":"The order of the layers inside the group","author":"320122","description":"","caption":"Place layers in this order inside the Group","name":"06-order-the-layers-3","status":"inherit","uploaded_to":1877122,"date":"2023-03-21 17:23:22","modified":"2023-03-21 18:08:55","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":2914,"height":1478,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/06-Order-the-Layers-3-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/06-Order-the-Layers-3.png","medium-width":464,"medium-height":235,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/06-Order-the-Layers-3.png","medium_large-width":768,"medium_large-height":390,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/06-Order-the-Layers-3.png","large-width":1920,"large-height":974,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/06-Order-the-Layers-3-1536x779.png","1536x1536-width":1536,"1536x1536-height":779,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/06-Order-the-Layers-3-2048x1039.png","2048x2048-width":2048,"2048x2048-height":1039,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/06-Order-the-Layers-3-826x419.png","card_image-width":826,"card_image-height":419,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/06-Order-the-Layers-3-1920x974.png","wide_image-width":1920,"wide_image-height":974}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

     <\/p>\n

    Step 3: Apply a Blend Mode\u00a0<\/strong><\/p>\n

    Blend modes<\/a> are pure cartographic magic. They allow us to blend layers on the map, or use one layer to drive how another is displayed. There are over 30 blend modes available in the Layer Properties panel in Map Viewer. For this workflow, you\u2019ll use a mode called Destination Atop to \u2018Crop\u2019 the Media layer <\/strong>to Sketch.<\/p>\n

    Open the Properties Panel if needed. Under Blending<\/strong>, notice that \u2018Normal\u2019 is selected by default.<\/p>\n

    Use the drop down to change the blend mode to Destination Atop<\/strong>.<\/p>\n

    Applying this blend mode to the top layer<\/em> in a Group appears to crop the bottom (Media) layer to the extent of the top layer (Sketch)- without actually cropping the image.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":1878642,"id":1878642,"title":"Media Layer- Apply Blend Mode v5","filename":"Media-Layer-Apply-Blend-Mode-v5.gif","filesize":7878906,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Media-Layer-Apply-Blend-Mode-v5.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/arcgis-online\/mapping\/how-to-style-a-media-layer-using-effects-and-blend-modes\/media-layer-apply-blend-mode-v5","alt":"Applying a blend mode to the top layer in the group appears to crop the bottom layer","author":"320122","description":"","caption":"Applying the Destination Atop blend mode to the top layer in a Group 'crops' the layer beneath it","name":"media-layer-apply-blend-mode-v5","status":"inherit","uploaded_to":1877122,"date":"2023-03-17 23:56:44","modified":"2023-10-27 17:43:00","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":1081,"height":610,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Media-Layer-Apply-Blend-Mode-v5-213x200.gif","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Media-Layer-Apply-Blend-Mode-v5.gif","medium-width":464,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Media-Layer-Apply-Blend-Mode-v5.gif","medium_large-width":768,"medium_large-height":433,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Media-Layer-Apply-Blend-Mode-v5.gif","large-width":1081,"large-height":610,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Media-Layer-Apply-Blend-Mode-v5.gif","1536x1536-width":1081,"1536x1536-height":610,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Media-Layer-Apply-Blend-Mode-v5.gif","2048x2048-width":1081,"2048x2048-height":610,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Media-Layer-Apply-Blend-Mode-v5-824x465.gif","card_image-width":824,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2023\/03\/Media-Layer-Apply-Blend-Mode-v5.gif","wide_image-width":1081,"wide_image-height":610}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

     <\/p>\n

    Step 4: Apply an Effect\u00a0<\/strong><\/p>\n

    Next apply an effect to the Sketch layer to give the media layer a soft, faded edge that helps to blend it into the basemap underneath it.<\/p>\n

    With Sketch layer selected in the Layer pane, click Effects<\/strong> on the light toolbar \"Effects\".<\/p>\n

    Click to enable the Bloom<\/strong> effect.<\/p>\n

    Bloom has 3 adjustable properties: strength, radius, and threshold.<\/p>\n

    Increase the strength value slightly to create a softer edge.<\/p>\n

    Adjust the radius and threshold sliders until you achieve the desired effect- to create a soft, blended edge while trimming off unnecessary text from the image.<\/p>\n

    These values are a good starting point, but feel free to use your own:<\/p>\n