Intro to layer effect

This sample shows how to apply the bloom effect to a FeatureLayer. The user will also be able to adjust the bloom parameters by changing values on respective sliders. The bloom effect makes the features in the layer to have a glowing effect.

Starting at 4.18, you can apply effects to all layers in 2D MapViews. This powerful capability allows you to apply css filter-like functions to layers to enhance the cartographic quality of your maps. The effect can be set in two different ways. It can be set as a string or as an array of objects.

Setting effect as a string

Effects can be chained together separated by a space character. Effects are applied in the order they are set. When set as a string, the effect is applied at all scales. This sample shows how the effect can be set as a string.

Setting effect as an array of objects

Some effects such as bloom and drop-shadow are sensitive to scale. Scale dependent effects should be used to fine tune or control parameters of your effects at different scales so it produces desired effects. Scale dependent effects can be set as an array of objects where you specify the scale and the effect value for that scale. When you set scale dependent effects, the API will interpolate the effects in between scales. For example, if you set opacity(0%) at one scale and opacity(100%) at another, the API will interpolate the opacity value between the scales. The type and order of effects should be consistent at all scales so that they can be interpolated. If the type and order are not consistent, the effect will be set to null, and a warning will be shown in the console. Check out Apply drop-shadow effects to layerview sample how to set scale dependent effects.

How it works

This map shows locations of active volcanoes. The bloom effect is applied to the volcanoes layer with the following parameters when the webmap is loaded.

1
layer.effect = "bloom(1.5, 0.5px, 0.1)";

The user can check or uncheck the Apply bloom effect to volcanoes checkbox to apply or remove the bloom effect to/from the layer. Once the effect is applied, the user can change the bloom effect parameters by changing the values of the sliders. This will give a good sense how of the bloom effect parameters work.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// this function is called when user clicks the applyBloom check box
// or when the slider values are changed.
// it will apply the bloom effect and adjust its parameters or
// it will remove the bloom effect when the user unchecks applyBloom checkbox
function updateEffects() {
  // set the layer effect to null if the user unchecked the applyBloom checkbox
  if (!chkApplyBloom.checked) {
    layer.effect = null;
    return;
  }
  // apply the effect and adjust its parameters if the user checked the applyBloom
  // check box or updated slider values.
  const intensity = intensitySlider.values[0];
  const blur = blurSlider.values[0];
  const threshold = thresholdSlider.values[0];
  layer.effect = `bloom(${intensity}, ${blur}px, ${threshold})`;
}

Check out the following table for the descriptions of the bloom parameters.