Multiply blendMode

This sample shows how the multiply blend mode is used to blend a featurelayer with a basemap layer to bring labels from the basemap on top of the feature layer.

This sample displays a feature layer that shows tenure (owner or renter) by type of heating fuel. The feature layer is displayed over the newspaper vector tiles basemap. The newspapers vector tiles is a single layer basemap where the labels display directly over its content unlike some basemaps where their reference layers display over all other layers.

If the feature layer is added directly on top of the newspaper basemap without a multiply blendMode, it will be hard to see the basemap labels through the feature layer. The map would look like the following:

How it works

The FeatureLayer is instantiated with the multiply blendMode and is added on top of the newspaper style vector basemap. The multiply blend mode emphasizes the darkest parts of overlapping layers by multiplying colors of the top layer and the background layer. The result of this blend mode is always darker than the original layers. Therefore, the dark labels in this case will show through the feature layer. You can also use darken and tint blend modes with similar results.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const layer = new FeatureLayer({
  url: "https://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/ACS_Housing_Tenure_by_Heating_Fuel_Boundaries/FeatureServer/1",
  minScale: 0,
  blendMode: "multiply"
});

const map = new Map({
  basemap: {
    portalItem: {
      id: "75a3ce8990674a5ebd5b9ab66bdab893" //newspaper vector tiles style
    }
  },
  layers: [layer]
});