ArcGIS Online

Apply Cartographic Effects to Blend Media Layers into Maps

If you’ve been following what’s new in ArcGIS Online, you may have heard some buzz about Media Layer, 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.

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. In this post, you’ll learn how to apply those effects using the same image.

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.

Map of 'Development of the Central Area West and East of the Capitol - Washington D.C. 1941' from the Library of Congress
Blend this 1941 map of the Mall in Washington D.C. into a modern Esri basemap.

This workflow is now easy to do with the addition of Media Layers in Map Viewer. You start by adding and placing the image in your map. This article won’t go into detail about how to add and place images, but if working with media layers is new to you… start with this previous post that explains how to get started with Media Layer in Map Viewer. After you’ve added and placed the image, be sure to come back here to further style the media layer .

Download the image for use in this article from the Library of Congress here.

Once you’re 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.

Step 1: Create a Sketch

In this step, you’ll use Sketch to trim the media layer.

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.

  1. On the light toolbar, click Sketch to add a new sketch layer to the map Sketch.
  2. From the sketch tools, choose Polygon Polygon.
  3. Draw a polygon over the area in the image that you want to keep, leaving out areas you want to crop out, such as the text at the top and bottom of the image.
Sketch a polygon over the image
Sketch a polygon over the portion of the image you want to preserve

By default, the sketch Fill transparency 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.

Move the slider all the way to the left to change the Fill transparency to 0%.

Set the Fill transparency to 0%
Set the Fill transparency to 0%


Step 2: Group the Target Layers

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 to ensure that only those layers are affected by blend modes and effects you’ll apply later.

Open the Layer pane if needed.

On the Sketch layer, click Options  Options .

In the menu that appears, click Group.

Create a new Group layer
Create a new Group layer

Click to expand the Group Layer.

Drag the media layer into the Group, placing it below Sketch. This is a crucial step, as you’ll see that the layer order makes a difference when you apply a blend mode.

The order of the layers inside the group
Place layers in this order inside the Group


Step 3: Apply a Blend Mode 

Blend modes 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’ll use a mode called Destination Atop to ‘Crop’ the Media layer to Sketch.

Open the Properties Panel if needed. Under Blending, notice that ‘Normal’ is selected by default.

Use the drop down to change the blend mode to Destination Atop.

Applying this blend mode to the top layer in a Group appears to crop the bottom (Media) layer to the extent of the top layer (Sketch)- without actually cropping the image.

Applying a blend mode to the top layer in the group appears to crop the bottom layer
Applying the Destination Atop blend mode to the top layer in a Group 'crops' the layer beneath it


Step 4: Apply an Effect 

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.

With Sketch layer selected in the Layer pane, click Effects on the light toolbar Effects.

Click to enable the Bloom effect.

Bloom has 3 adjustable properties: strength, radius, and threshold.

Increase the strength value slightly to create a softer edge.

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.

These values are a good starting point, but feel free to use your own:

Bloom Effect settings
Apply the Bloom effect to soften edges


Step 5: Set the Scale and Visible Range

You’ll set both the visible range for the Group layer and the map scale so that the map and media display at the desired scale.

With the Group layer selected in the Layer pane, click Properties Properties.

The Visible range slider is located at the bottom of the Properties panel.

Click the slider on the left and drag it closer to the center. This will keep the entire group from displaying beyond the D.C. area.

Visible range settings
Set the Visible range

Click on Map Properties on the dark toolbar  Map properties.

Click to enable Preserve map scale.

This ensures that the map loads at the same scale regardless of the screen size, so users will see the image when they open the map. 

You can toggle to preserve the map scale in the Map Properties
Preserve the map scale


Step 6 (Extra Credit): Style the Basemap

The final step is to style the basemap to better match the styled image. Applying Effects to basemaps allows you to quickly customize the appearance of any basemap to suit your needs. You’ll select a darker basemap in the gallery, and use effects to give it a Sepia tint more in line with the image.

  1. Click Basemap on the dark toolbar to open the Gallery Basemap
  2. Select Human Geography Dark Map
  3. At the top of the panel, click Current Basemap

This basemap consists of 3 separate layers: Labels, Details, and Base. Effects can be applied to any of these layers. You’ll work with the top two, Labels and Details.

  1. Select Human Geography Dark Label
  2. On the light toolbar, Click Effects Effects
  3. Click to enable the Sepia effect, giving the labels a sepia tent, and adjust the settings to your preference
  4. To really make the text pop, click to enable both Bloom and Dropshadow effects and adjust the settings as you see fit

Next, Select Human Geography Dark Detail.

Add these two effects and adjust as needed to tint the the map details and make them pop: Sepia and Dropshadow.

You can play around with adding more effects, or even changing the order of effects to see how it affects the outcome in your map.

When you’re happy with how the basemap looks, your work is done.

The final touch is to change and apply Effects to the Basemap.
For the final touches, change and stlye the Basemap.

There you have it, now you have some experience styling a media layer using blend modes, effects, and more. You’ve seen how grouping layers directs the outcome when using these tools. Hopefully you’ve gained some insight into how you can leverage existing tools in Map Viewer to quickly style your media layers, easily taking your web cartography to the next level. If you’d like to test drive a webmap with these options already configured, click here, and feel free to explore more options for styling your own images in Map Viewer.


The final outcome is a webmap featuring a blended, styled media layer and basemap.
The final outcome- a webmap featuring a blended media layer and basemap created in Map Viewer.

About the author

Emily is a senior product engineer on the ArcGIS Online team. She joined Esri in 2022, bringing expertise in mapping, app creation, and data management. Emily is passionate about the outdoors, nature, and hiking. She often seeks refuge in wild areas and acoustic guitars.

Inline Feedbacks
View all comments

Next Article

Multi-Scale Contour Styling in ArcGIS Pro

Read this article