Intro to layer blending

This sample shows how the multiply blend mode is used to blend layers in a basemap to allow the hillshade layer peak through the top layer of the basemap.

Blend modes define how layers should blend together to create an interesting effect in a layer, or even to produce what seems like a new layer. Unlike using transparency, which can result in a washed-out top layer, blend modes create a variety of vibrant and intriguing results by blending a layer with the layers below it.

This sample displays a community style vector tiles layer over the world hillshade layer. Both layers are added as part of the map's basemap.

If the layers were added without multiply blend mode applied to the vector tile layer then then map would look like the following: layer-blendmode

If opacity (0.7) is set on the vector tile layer, then the map would look like the following. You can see the hillshade show through the top layer. However, the opacity washes out the top layer.

layer-opacity
Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Multiply blend mode emphasizes the darkest parts of overlapping layers
// by multiplying colors of the top layer and the background layer.
// This blend mode is useful to have the hillshades to show through the top layer.
const map = new Map({
  basemap: {
    baseLayers:[
      new TileLayer({
        portalItem: {
          id: "1b243539f4514b6ba35e7d995890db1d" // world hillshade
        }
      }),
      new VectorTileLayer({
        portalItem: {
          id: "273bf8d5c8ac400183fc24e109d20bcf" // community style vector tiles
        },
        blendMode: "multiply"
      })
    ]
  }
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.