You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {i18n.unsupportedBrowser.chrome}
  • Firefox
  • Safari
  • undefined
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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: layer-blendmode

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.

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

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

Sample search results

TitleSample
Loading...