Blend modes in Map Viewer Beta

1693
0
07-08-2020 02:17 PM

Blend modes in Map Viewer Beta

The blend mode descriptions below are provided by the ArcGIS API for JavaScript API reference documentation. For more information on how layers are blended, see the ArcGIS API for JavaScript API reference documentation

See these blog posts for getting started with blending:

Lighten

Lighten blend modes tend to create a lighter result than the colors of the original layer.  You can 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 will affect the layer below.

Blend modeDescription
LighterColors in top and background layers are multiplied by their alphas (layer opacity and layer's data opacity. Then the resulting colors are added together. All overlapping mid range colors are lightened in the top layer. The opacity of layer and layer's data will affect the blend result.
LightenCompares 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. Can be thought of as the opposite of darken blend mode.
ScreenInverts colors of the background layer and multiplies with colors of the top layer. The resulting colors will be lighter than the original color with less contrast. Screen can produce many different levels of brightening depending on the luminosity values of the top layer. Can be thought of as the opposite of the multiply mode.
Color dodgeCreates a brighter effect by decreasing the contrast between the top and background layers, resulting in saturated mid-tones and bright highlights.
PlusCreates a brighter effect by decreasing the contrast between the top and background layers, resulting in saturated mid-tones and bright highlights.

Darken

Darken blend modes create darker results than all layers. In darken blend modes, pure white in the top layer will become transparent allowing the background layer to show through. Black in the top layer will stay unchanged. Any color that is darker than pure white is going to darken a top layer to varying degrees all the way to pure black.

Blend modeDescription
DarkenEmphasizes 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 burnIntensifies the dark areas in all layers. It increases the contrast between top and background layers, by tinting colors in overlapping area towards the top color. To do this it inverts colors of the background layer, divides the result by colors of the top layer, then inverts the results.
MultiplyEmphasizes the darkest parts of overlapping layers by multiplying colors of the top layer and the background layer. Mid range colors from top and background layers are mixed together more evenly.

Contrast

Contrast blend modes can be used to increase the contrast and saturation to have more vibrant colors and give a punch to your layers. The following blend modes create contrast by both lightening the lighter areas and darkening the darker areas in the top layer by using lightening or darkening blend modes to create the blend.

Blend modeDescription
overlayUses a combination of multiply and screen modes darken and lighten colors in the top layer with the background layer always shining through. The result is darker color values in the background layer intensify the top layer, while lighter colors in the background layer wash out overlapping areas in the top layer.
Hard lightMultiplies or screens the colors, depending on colors of the top layer. The effect is similar to shining a harsh spotlight on the top layer.
Soft lightApplies a half strength screen mode to lighter areas and and half strength multiply mode to darken areas of the top layer. You can think of the soft light as a softer version of the overlay mode.
Vivid lightUses a combination of color burn or color dodge by increasing or decreasing the contrast, depending on colors in the top layer.

Component

The following blend modes use primary color components, which are hue, saturation and luminosity to blend top and background layers.

Blend modeDescription
ColorCreates an effect with the hue and saturation of the top layer and the luminosity of the background layer. Can be thought of as the opposite of luminosity blend mode.
SaturationCreates an effect with the saturation of the top layer and the hue and luminosity of the background layer. 50% gray with no saturation in the background layer will not produce any change.
LuminosityCreates effect with the luminosity of the top layer and the hue and saturation of the background layer. Can be thought of as the opposite of color blend mode.
HueCreates an effect with the hue of the top layer and the luminosity and saturation of the background layer.

Composite

The following blend modes can be used to mask the contents of top, background or both layers.

  • Destination modes are used to mask the data of the top layer with the data of the background layer.
  • Source modes are used to mask the data of the background layer with the data of the top layer.

Blend modeDescription
Destination overDestination/background layer covers the top layer. The top layer is drawn underneath the destination layer. You'll see the top layer peek through wherever the background layer is transparent or has no data.
Destination atopDestination/background layer is drawn only where it overlaps the top layer. The top layer is drawn underneath the background layer. You'll see the top layer peek through wherever the background layer is transparent or has no data.
Destination inDestination/background layer is drawn only where it overlaps with the top layer. Everything else is made transparent.
Destination outDestination/background layer is drawn where it doesn't overlap the top layer. Everything else is made transparent.
Source atopSource/top layer is drawn only where it overlaps the background layer. You will see the background layer peek through where the source layer is transparent or has no data.
Source inSource/top layer is drawn only where it overlaps with the background layer. Everything else is made transparent.
Source outSource/top layer is drawn where it doesn't overlap the background layer. Everything else is made transparent.
XorTop and background layers are made transparent where they overlap. Both layers are drawn normal everywhere else.

Invert

The following blend modes either invert or cancel out colors depending on colors of the background layer. These blend modes look for variations between top and background layers. 

Blend modeDescription
InvertInverts the background colors wherever the top and background layers overlap. The invert blend mode inverts the layer similar to a photographic negative.
ReflectThis blend mode creates effects as if you added shiny objects or areas of light in the layer. Black pixels in the background layer are ignored as if they were transparent.
AverageTakes the mathematical average of top and background layers. Result of average blend mode is often similar to the effect of setting the layer's opacity to 50%.
DifferenceSubtracts 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 blending mode is useful for aligning layers with similar content.
ExclusionSimilar 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.
MinusSubtracts colors of the top layer from colors of the background layer making the blend result darker. In the case of negative values, black is displayed.
Version history
Revision #:
1 of 1
Last update:
‎07-08-2020 02:17 PM
Updated by:
 
Contributors