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:

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.

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"
      })
    ]
  }
});