In many maps, the way in which map layers are displayed in relation to one another is critical to understanding the map's message and uncovering patterns and insights in the data. Because layers are drawn on top of each other, the layers at the bottom are hidden under those closer to the top. While adjusting the transparency or opacity of layers can help you see more or less of the bottommost layers, applying blend modes gives you additional control of the map's appearance by making the layers appear blended in different ways. For example, you can use blend modes to fine-tune how the colors and textures of layers are combined and displayed on the map.
When you apply a blend mode, the pixels that are normally used to draw each layer on the map are blended to achieve a specific effect. Map Viewer (formerly a separate beta installation but now included with the portal automatically) includes more than 30 unique blend modes that you can apply and instantly see reflected on the map.
Apply blend modes
When you apply a blend mode, there is no change to the data or to the original rendering of the layers. When you save the map, the blend mode is saved to the map.
Tip:
You can use keyboard shortcuts to quickly complete common workflows in Map Viewer. To view the full list of keyboard shortcuts in Map Viewer, press Alt+? on Microsoft Windows or Option+? on Mac.
- Confirm that you are signed in and, if you want to save your changes, that you have privileges to create, update, and delete content.
- In Map Viewer, open the map containing the layers you want to blend, or add layers to a new map.
- On the Contents (dark) toolbar, click Layers
if the Layers pane is not open. - In the Layers pane, click the topmost layer to select it.
- On the Settings (light) toolbar, if necessary, click Properties
. - In the Appearance section of the Properties pane, under Blending, click Normal.
- In the Blending window, choose a blend mode to apply to the map.
Tip:
Use the Filter results text box to narrow the list of blend modes or find a blend mode by name. For example, type dark and press Enter to show blend modes that allow you to darken, lighten, invert, or change the contrast of layers.
- On the Contents toolbar, click Save and open
and click Save to save your changes to the map.
Blend modes
In Map Viewer, blend modes are organized by theme. The tables in the following sections provide a brief description of each theme and blend mode.
Lighten
Lighten blend modes create a lighter result than the colors of the original layer. Use these blend modes to create variations of this effect. In the Lighten blend modes, black is the neutral point and anything brighter than black affects the layer below it.
| Blend mode | Description |
|---|---|
Lighter | Colors in the top and background layers are multiplied by their alphas (layer opacity and the layer's data opacity), and the resulting colors are added together. All overlapping midrange colors are lightened in the top layer. The opacity of the layer and the layer's data affect the blend result. |
Lighten | Compares the top and background layers and retains the lighter color in the top layer. Colors in the top layer become transparent if they are darker than the overlapping colors in the background layer, allowing the background layer to show through completely. This blend mode can be thought of as the opposite of the Darken blend mode. |
Screen | Inverts the colors of the background layer and multiplies with the colors of the top layer. The resulting colors are lighter than the original color with less contrast. The Screen blend mode can produce many levels of brightening depending on the luminosity values of the top layer. This blend mode can be thought of as the opposite of the Multiply blend mode. |
Color Dodge | Creates a brighter effect by decreasing the contrast between the top and background layers, resulting in saturated midtones and bright highlights. |
Plus | Colors in the top and background layers are added together. All overlapping midrange colors are lightened in the top layer. |
Darken
Darken blend modes create darker results than all layers. With these blend modes, pure white in the top layer becomes transparent, allowing the background layer to show through. Black in the top layer remains unchanged. Any color that is darker than pure white darkens a top layer to varying degrees all the way to pure black.
| Blend mode | Description |
|---|---|
Darken | Emphasizes the darkest parts of overlapping layers. Colors in the top layer become transparent if they are lighter than the overlapping colors in the background layer, allowing the background layer to show through completely. |
Color Burn | Intensifies the dark areas in all layers. The Color Burn blend mode increases the contrast between the top and background layers by tinting colors in overlapping areas toward the top color. To do this, Color Burn inverts the colors of the background layer, divides the result by the colors of the top layer, and inverts the results. |
Multiply | Emphasizes the darkest parts of overlapping layers by multiplying colors of the top layer and the background layer. Midrange colors from top and background layers are mixed more evenly. |
Contrast
Contrast blend modes increase the contrast and saturation to make the colors in the layers more vibrant. The following blend modes create contrast by both lightening the lighter areas and darkening the darker areas in the top layer.
| Blend mode | Description |
|---|---|
Overlay | Uses a combination of the Multiply and Screen blend modes to darken and lighten colors in the top layer, with the background layer always shining through. This results in darker color values in the background layer intensifying the top layer, while lighter colors in the background layer wash out overlapping areas in the top layer. |
Hard Light | Multiplies or screens the colors, depending on the colors of the top layer. The effect is similar to shining a harsh spotlight on the top layer. |
Soft Light | Applies a half-strength Screen blend mode to lighter areas and half-strength Multiply blend mode to darker areas of the top layer. The Soft Light blend mode is a softer version of the Overlay blend mode. |
Vivid Light | Uses a combination of the Color Burn and Color Dodge blend modes by increasing or decreasing the contrast, depending on the colors in the top layer. |
Component
Component blend modes use primary color components—hue, saturation, and luminosity—to blend top and background layers.
| Blend mode | Description |
|---|---|
Color | Creates an effect with the hue and saturation of the top layer and the luminosity of the background layer. This blend mode is the opposite of the Luminosity blend mode. |
Saturation | Creates an effect with the saturation of the top layer and the hue and luminosity of the background layer. This blend mode produces no change when the background layer is 50 percent gray with no saturation. |
Luminosity | Creates an effect with the luminosity of the top layer and the hue and saturation of the background layer. This blend mode is the opposite of the Color blend mode. |
Hue | Creates an effect with the hue of the top layer and the luminosity and saturation of the background layer. |
Compositing
Compositing blend modes mask the contents of the top layer, the background layer, or both layers. Destination modes mask the data of the top layer with the data of the background layer. Source modes mask the data of the background layer with the data of the top layer.
| Blend mode | Description |
|---|---|
Destination Over | The destination (background) layer covers the top layer. The top layer is drawn under the destination layer, and the top layer shows through wherever the background layer is transparent or has no data. |
Destination Atop | The destination (background) layer is drawn only where it overlaps the top layer. The top layer is drawn under the background layer, and the top layer shows through wherever the background layer is transparent or has no data. |
Destination In | The destination (background) layer is drawn only where it overlaps the top layer. Everything else is made transparent. |
Destination Out | The destination (background) layer is drawn where it doesn't overlap the top layer. Everything else becomes transparent. |
Source Atop | The source (top) layer is drawn only where it overlaps the background layer. The background layer shows through where the source layer is transparent or has no data. |
Source In | The source (top) layer is drawn only where it overlaps the background layer. Everything else becomes transparent. |
Source Out | The source (top) layer is drawn where it doesn't overlap the background layer. Everything else becomes transparent. |
XOR | The top and background layers become transparent where they overlap. Both layers are drawn normally everywhere else. |
Invert
Invert blend modes either invert or cancel out colors depending on the colors in the background layer. These blend modes identify variations between top and background layers.
| Blend mode | Description |
|---|---|
Invert | Inverts the background colors wherever the top and background layers overlap. The Invert blend mode inverts the layer similar to a photographic negative. |
Reflect | Creates the appearance of shiny objects or areas of light added to the layer. Black pixels in the background layer are ignored as though they were transparent. |
Average | Takes the mathematical average of the top and background layers. The result of this blend mode is often similar to the effect of setting the layer's opacity to 50 percent. |
Difference | Subtracts the darker of the overlapping colors from the lighter color. When two pixels with the same value are subtracted, the result is black. Blending with black produces no change; blending with white inverts the colors. This blend mode is useful for aligning layers with similar content. |
Exclusion | Similar to the Difference blend mode, except that the resulting image is lighter overall. Overlapping areas with lighter color values are lightened, while darker overlapping color values become transparent. |
Minus | Subtracts the colors of the top layer from the colors of the background layer, making the blend result darker. In the case of negative values, black is displayed. |